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

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

declare const describe: any;
declare const it: any;
declare const expect: any;
declare const beforeEach: any;
declare const afterEach: any;
declare const jest: 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('BaseChart 组件', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

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

  it('应该渲染 Canvas 元素', () => {
    const { container } = render(
      <BaseChart
        canvasId="test-chart"
        type="column"
        categories={['A', 'B', 'C']}
        series={[]}
      />
    );

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

  it('应该设置正确的 canvas-id 和 id 属性', () => {
    const { container } = render(
      <BaseChart
        canvasId="test-chart"
        type="column"
        categories={[]}
        series={[]}
      />
    );

    const canvas = container.querySelector('canvas') as HTMLCanvasElement;
    expect(canvas).toHaveAttribute('canvas-id', 'test-chart');
    expect(canvas).toHaveAttribute('id', 'test-chart');
  });

  it('应该使用指定的宽高', () => {
    const { container } = render(
      <BaseChart
        canvasId="test-chart"
        type="column"
        width={600}
        height={400}
        categories={[]}
        series={[]}
      />
    );

    const canvas = container.querySelector('canvas') as HTMLCanvasElement;
    expect(canvas?.style.width).toBe('600px');
    expect(canvas?.style.height).toBe('400px');
  });

  it('应该支持触摸事件处理', () => {
    const onTouchStart = jest.fn();
    const onTouchMove = jest.fn();
    const onTouchEnd = jest.fn();

    const { container } = render(
      <BaseChart
        canvasId="test-chart"
        type="column"
        categories={[]}
        series={[]}
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
      />
    );

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