mini-starter/mini-ui-packages/mini-charts/tests/components/ColumnChart.test.tsx

/**
 * ColumnChart 组件基础测试
 */
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ColumnChart } from '../../src/components/ColumnChart';

declare const jest: any;
declare const describe: any;
declare const it: any;
declare const expect: any;
declare const beforeEach: any;
declare const afterEach: any;

// Mock @tarojs/components
jest.mock('@tarojs/components', () => ({
  Canvas: ({ children, ...props }: any) => React.createElement('canvas', props, children)
}));

// Mock uCharts
jest.mock('../../src/lib/charts/index.ts', () => ({
  uCharts: jest.fn().mockImplementation(() => ({
    showToolTip: jest.fn(),
    scrollStart: jest.fn(),
    scroll: jest.fn(),
    scrollEnd: jest.fn()
  }))
}));

describe('ColumnChart 组件', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('应该渲染 Canvas 元素', () => {
    const { container } = render(
      <ColumnChart
        canvasId="test-column"
        categories={['A', 'B', 'C']}
        series={[
          { name: 'Series 1', data: [10, 20, 30] }
        ]}
      />
    );

    const canvas = container.querySelector('canvas');
    expect(canvas).toBeInTheDocument();
  });

  it('应该使用柱状图类型', () => {
    const { uCharts } = require('../../src/lib/charts/index.ts');

    render(
      <ColumnChart
        canvasId="test-column"
        categories={['A', 'B', 'C']}
        series={[
          { name: 'Series 1', data: [10, 20, 30] }
        ]}
      />
    );

    expect(uCharts).toHaveBeenCalledWith(
      expect.objectContaining({
        type: 'column'
      })
    );
  });

  it('应该支持分组模式', () => {
    const { uCharts } = require('../../src/lib/charts/index.ts');

    render(
      <ColumnChart
        canvasId="test-column"
        columnType="group"
        categories={['A', 'B', 'C']}
        series={[
          { name: 'Series 1', data: [10, 20, 30] }
        ]}
      />
    );

    expect(uCharts).toHaveBeenCalledWith(
      expect.objectContaining({
        extra: expect.objectContaining({
          column: expect.objectContaining({
            type: 'group'
          })
        })
      })
    );
  });

  it('应该支持堆叠模式', () => {
    const { uCharts } = require('../../src/lib/charts/index.ts');

    render(
      <ColumnChart
        canvasId="test-column"
        columnType="stack"
        categories={['A', 'B', 'C']}
        series={[
          { name: 'Series 1', data: [10, 20, 30] }
        ]}
      />
    );

    expect(uCharts).toHaveBeenCalledWith(
      expect.objectContaining({
        extra: expect.objectContaining({
          column: expect.objectContaining({
            type: 'stack'
          })
        })
      })
    );
  });

  it('应该支持自定义 tooltip 格式化', () => {
    const tooltipFormatter = jest.fn((item: any, category: any) => `${category}: ${item.data}`);

    const { container } = render(
      <ColumnChart
        canvasId="test-column"
        categories={['A', 'B', 'C']}
        series={[
          { name: 'Series 1', data: [10, 20, 30] }
        ]}
        tooltipFormatter={tooltipFormatter}
      />
    );

    const canvas = container.querySelector('canvas');
    expect(canvas).toBeInTheDocument();
  });

  it('应该支持数据标签显示/隐藏', () => {
    const { uCharts } = require('../../src/lib/charts/index.ts');

    render(
      <ColumnChart
        canvasId="test-column"
        dataLabel={false}
        categories={['A', 'B', 'C']}
        series={[
          { name: 'Series 1', data: [10, 20, 30] }
        ]}
      />
    );

    expect(uCharts).toHaveBeenCalledWith(
      expect.objectContaining({
        dataLabel: false
      })
    );
  });
});