KpiBoard.test.tsx 1.96 KB
// REQ-USR-003: KpiBoard KPI 合并网格 + 空数据(BR11 / empty 态 / D5)
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ConfigProvider, App as AntdApp } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import KpiBoard from '../../src/pages/home/HomePage/KpiBoard';
import { KPI_ROWS, KPI_HEADERS } from '../../src/pages/home/HomePage/dashboardData';

function renderBoard(ui: React.ReactElement) {
  return render(
    <ConfigProvider locale={zhCN}>
      <AntdApp>{ui}</AntdApp>
    </ConfigProvider>,
  );
}

describe('KpiBoard', () => {
  it('renders 7 column headers', () => {
    renderBoard(<KpiBoard rows={KPI_ROWS} />);
    KPI_HEADERS.forEach((h) => {
      expect(screen.getByText(h)).toBeInTheDocument();
    });
  });

  it('renders all kpi rows with item/desc/today/total', () => {
    renderBoard(<KpiBoard rows={KPI_ROWS} />);
    expect(screen.getByText('01/04【新增】新报价单')).toBeInTheDocument();
    expect(screen.getByText('02/04 审核后报价单->客户确认价格')).toBeInTheDocument();
    // 红色统计数(red 行)
    const red = screen.getAllByText('16');
    expect(red.length).toBeGreaterThanOrEqual(1);
  });

  it('renders Empty when rows is empty', () => {
    renderBoard(<KpiBoard rows={[]} />);
    expect(screen.getByTestId('kpi-empty')).toBeInTheDocument();
    // AntD Empty 默认描述「暂无数据」(可能在 <p> 与 svg <title> 各出现一次)
    expect(screen.getAllByText('暂无数据').length).toBeGreaterThanOrEqual(1);
  });

  it('KPI item/desc rendered as link-styled text without navigation', async () => {
    const onNav = vi.fn();
    renderBoard(<KpiBoard rows={KPI_ROWS} onNavigate={onNav} />);
    const item = screen.getByText('01/04【新增】新报价单');
    await userEvent.click(item);
    // 纯展示,不发生路由跳转
    expect(onNav).not.toHaveBeenCalled();
  });
});