zcglxt/tests/unit/components/PieChart.test.ts

/**
 * 图表组件单元测试示例
 * 测试 PieChart 组件
 */

import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import PieChart from '@/components/charts/PieChart.vue'

describe('PieChart.vue', () => {
  it('renders properly with data', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [
          { name: '库存中', value: 200 },
          { name: '在用', value: 750 },
        ],
        title: '资产状态分布',
      },
    })

    expect(wrapper.find('.base-chart').exists()).toBe(true)
  })

  it('emits click event when clicking on a slice', async () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [
          { name: '库存中', value: 200 },
          { name: '在用', value: 750 },
        ],
      },
    })

    // 模拟点击事件
    // 注意：实际测试需要等待图表渲染完成
    // 这里只是示例
    expect(wrapper.exists()).toBe(true)
  })

  it('renders doughnut chart when type is doughnut', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [{ name: '测试', value: 100 }],
        type: 'doughnut',
      },
    })

    expect(wrapper.props('type')).toBe('doughnut')
  })

  it('renders pie chart when type is pie', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [{ name: '测试', value: 100 }],
        type: 'pie',
      },
    })

    expect(wrapper.props('type')).toBe('pie')
  })

  it('shows legend when showLegend is true', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [{ name: '测试', value: 100 }],
        showLegend: true,
      },
    })

    expect(wrapper.props('showLegend')).toBe(true)
  })

  it('hides legend when showLegend is false', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [{ name: '测试', value: 100 }],
        showLegend: false,
      },
    })

    expect(wrapper.props('showLegend')).toBe(false)
  })

  it('uses custom color when customColor is true', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [
          { name: '库存中', value: 200, status: 'in_stock' },
          { name: '在用', value: 750, status: 'in_use' },
        ],
        customColor: true,
      },
    })

    expect(wrapper.props('customColor')).toBe(true)
  })

  it('applies custom height', () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [{ name: '测试', value: 100 }],
        height: '500px',
      },
    })

    expect(wrapper.props('height')).toBe('500px')
  })

  it('emits ready event when chart is ready', async () => {
    const wrapper = mount(PieChart, {
      props: {
        data: [{ name: '测试', value: 100 }],
      },
    })

    // 等待组件挂载
    await wrapper.vm.$nextTick()

    // 检查事件是否被触发
    // 注意：实际测试需要等待 ECharts 初始化完成
    expect(wrapper.exists()).toBe(true)
  })
})