file-starter/tests/unit/client/home/pages/SupplyChainDashboards/components/KeyMetrics.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import KeyMetrics from '@/client/home/pages/SupplyChainDashboards/components/KeyMetrics';

describe('KeyMetrics', () => {
  it('should render with default metrics and title', () => {
    render(<KeyMetrics />);

    // Check title and subtitle
    expect(screen.getByText('优质稻米')).toBeInTheDocument();
    expect(screen.getByText('产业链联合体')).toBeInTheDocument();

    // Check default metrics
    expect(screen.getByText('加工能力达')).toBeInTheDocument();
    expect(screen.getByText('自建优质水稻基地')).toBeInTheDocument();
    expect(screen.getByText('储备仓容')).toBeInTheDocument();

    // Check units
    expect(screen.getByText('万吨/年')).toBeInTheDocument();
    expect(screen.getByText('万亩')).toBeInTheDocument();
    expect(screen.getByText('万吨')).toBeInTheDocument();

    // Check data source
    expect(screen.getByText('数据来源：省粮油集团统计年报')).toBeInTheDocument();
  });

  it('should render with custom title and subtitle', () => {
    render(
      <KeyMetrics
        title="测试标题"
        subtitle="测试副标题"
      />
    );

    expect(screen.getByText('测试标题')).toBeInTheDocument();
    expect(screen.getByText('测试副标题')).toBeInTheDocument();
  });

  it('should render with custom metrics', () => {
    const customMetrics = [
      {
        title: '自定义指标1',
        value: '123',
        unit: '个',
        digits: ['1', '2', '3']
      },
      {
        title: '自定义指标2',
        value: '45',
        unit: '件',
        digits: ['4', '5']
      }
    ];

    render(<KeyMetrics metrics={customMetrics} />);

    // Check custom metrics
    expect(screen.getByText('自定义指标1')).toBeInTheDocument();
    expect(screen.getByText('自定义指标2')).toBeInTheDocument();

    // Check custom units
    expect(screen.getByText('个')).toBeInTheDocument();
    expect(screen.getByText('件')).toBeInTheDocument();

    // Should not render default metrics
    expect(screen.queryByText('加工能力达')).not.toBeInTheDocument();
  });

  it('should render metric digits correctly', () => {
    render(<KeyMetrics />);

    // Check if digits are rendered in the data cards
    const processingDigits = screen.getByText('2');
    const baseDigits = screen.getByText('1');
    const storageDigits = screen.getByText('?');

    expect(processingDigits).toBeInTheDocument();
    expect(baseDigits).toBeInTheDocument();
    expect(storageDigits).toBeInTheDocument();

    // Check digit styling
    expect(processingDigits).toHaveClass('text-[#c5ff92]');
    expect(processingDigits).toHaveClass('text-[60px]');
  });

  it('should render with correct positioning and styling', () => {
    render(<KeyMetrics />);

    const container = screen.getByRole('generic');

    // Check positioning
    expect(container).toHaveClass('absolute');
    expect(container).toHaveClass('left-[199.88px]');
    expect(container).toHaveClass('top-[calc(50%+4.02px)]');

    // Check dimensions
    expect(container).toHaveClass('w-[330px]');
  });

  it('should render data cards with correct styling', () => {
    render(<KeyMetrics />);

    // Check title styling
    const title = screen.getByText('加工能力达');
    expect(title).toHaveClass('text-white');
    expect(title).toHaveClass('text-[40px]');

    // Check unit styling
    const unit = screen.getByText('万吨/年');
    expect(unit).toHaveClass('text-white');
    expect(unit).toHaveClass('text-[24px]');
  });

  it('should handle empty metrics array', () => {
    render(<KeyMetrics metrics={[]} />);

    // Should still render with default metrics
    expect(screen.getByText('加工能力达')).toBeInTheDocument();
    expect(screen.getByText('自建优质水稻基地')).toBeInTheDocument();
    expect(screen.getByText('储备仓容')).toBeInTheDocument();
  });
});