103 lines
7.3 KiB
TypeScript
103 lines
7.3 KiB
TypeScript
import { afterEach, expect, it, vi } from 'vitest'
|
|
import { mount, type VueWrapper } from '@vue/test-utils'
|
|
import type { EChartsOption, LegendComponentOption, PieSeriesOption } from 'echarts'
|
|
import TripOperationsCharts from './TripOperationsCharts.vue'
|
|
import { adminWorkbenchChartTheme as chartTheme } from '@/styles/adminWorkbenchChartTheme'
|
|
import type { TripOperationsCharts as Charts, TripOperationsSummary } from '../api/tripOperations'
|
|
|
|
vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option', 'initOptions', 'updateOptions', 'autoresize'], template: '<div class="echarts-pie-stub"/>' } }))
|
|
const wrappers: VueWrapper[] = []
|
|
const emptyCharts = (): Charts => ({ physicalPallets: [], destinationTrips: [], externalAgreedAmounts: [], externalPalletRates: [] })
|
|
const summary = (): TripOperationsSummary => ({ trips: 20, inTransit: 5, completed: 15, physicalPallets: 90, palletSpaces: 100, ownPackages: 50, externalPackages: 20, externalAgreedAmounts: [{ currency: 'CNY', amount: 390 }, { currency: 'USD', amount: 100 }], costs: { visible: false, unrecordedTrips: null, unallocatedTrips: null, totals: [] } })
|
|
function render(charts: Charts, totals = summary()) {
|
|
const wrapper = mount(TripOperationsCharts, { props: { charts, summary: totals }, global: { stubs: {
|
|
ElButton: { template: '<button><slot/></button>' },
|
|
} } })
|
|
wrappers.push(wrapper)
|
|
return wrapper
|
|
}
|
|
const option = (wrapper: VueWrapper, selector: string) => wrapper.find(selector).findComponent({ name: 'VChart' }).props('option') as EChartsOption
|
|
const series = (options: EChartsOption) => (options.series as PieSeriesOption[])[0]!
|
|
afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()))
|
|
|
|
it('uses four ECharts pies with compact native legends, accurate server totals and daily rates', () => {
|
|
const charts = emptyCharts()
|
|
charts.physicalPallets = [{ label: '每日实运托盘', unit: '托', points: [{ label: '2026-10-02', value: 10 }] }]
|
|
charts.destinationTrips = [{ label: '目的地涉及车次', unit: '次', points: [{ label: 'ONT8', value: 3 }, { label: 'ABE2', value: 8 }] }]
|
|
charts.externalAgreedAmounts = [{ label: 'CNY', unit: 'CNY', points: [{ label: '2026-10-02', value: 390 }] }]
|
|
charts.externalPalletRates = [{ label: 'CNY', unit: 'CNY/标准托位', points: [{ label: '2026-10-07', value: 30 }, { label: '2026-10-02', value: 90 }] }]
|
|
const original = structuredClone(charts)
|
|
const wrapper = render(charts)
|
|
expect(wrapper.findAllComponents({ name: 'VChart' })).toHaveLength(4)
|
|
for (const chart of wrapper.findAllComponents({ name: 'VChart' })) {
|
|
expect(series(chart.props('option'))).toMatchObject({ type: 'pie', label: { show: false } })
|
|
expect(chart.props('initOptions')).toEqual({ renderer: 'canvas' })
|
|
expect(chart.props('updateOptions')).toEqual({ notMerge: true })
|
|
}
|
|
expect(wrapper.find('svg').exists()).toBe(false)
|
|
expect(wrapper.find('.series-caption').exists()).toBe(false)
|
|
expect(wrapper.find('.chart > .chart-note').exists()).toBe(false)
|
|
expect(wrapper.find('.chart--pallets .chart-metric').text()).toBe('90 托')
|
|
expect(wrapper.find('.chart--rates .chart-metric').text()).toContain('CNY/标准托位 30.00')
|
|
expect(wrapper.find('.chart--rates .chart-metric').attributes('title')).toContain('最近统计日：2026-10-07')
|
|
const legend = option(wrapper, '.chart--pallets').legend as LegendComponentOption
|
|
expect(legend.icon).toBe('circle')
|
|
expect(typeof legend.formatter === 'function' && legend.formatter('2026-10-02')).toBe('10-02')
|
|
expect(option(wrapper, '.chart--pallets').tooltip).toMatchObject({ trigger: 'item', confine: true, renderMode: 'richText' })
|
|
expect(series(option(wrapper, '.chart--rates')).data).toEqual([
|
|
{ name: '2026-10-02', value: 90, itemStyle: { color: chartTheme.colors.primary } },
|
|
{ name: '2026-10-07', value: 30, itemStyle: { color: chartTheme.colors.teal } },
|
|
])
|
|
expect(charts).toEqual(original)
|
|
})
|
|
|
|
it('switches currency without combining monetary amounts or leaving stale ECharts slices', async () => {
|
|
const charts = emptyCharts()
|
|
charts.externalAgreedAmounts = [{ label: 'CNY', unit: 'CNY', points: [{ label: '2026-10-02', value: 390 }] }, { label: 'USD', unit: 'USD', points: [{ label: '2026-10-03', value: 100 }] }]
|
|
const wrapper = render(charts)
|
|
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('CNY 390.00')
|
|
expect(wrapper.find('.chart--amounts').findAllComponents({ name: 'VChart' })).toHaveLength(1)
|
|
const usd = wrapper.findAll('.chart--amounts .series-selector button').find(button => button.text() === 'USD')!
|
|
await usd.trigger('click')
|
|
expect(usd.attributes('aria-pressed')).toBe('true')
|
|
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('USD 100.00')
|
|
expect(series(option(wrapper, '.chart--amounts')).data).toEqual([{ name: '2026-10-03', value: 100, itemStyle: { color: chartTheme.colors.primary } }])
|
|
await wrapper.setProps({ charts: { ...charts, externalAgreedAmounts: [charts.externalAgreedAmounts[0]!] } })
|
|
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('CNY 390.00')
|
|
})
|
|
|
|
it('keeps every destination in its pie and exposes full legend data only on demand', async () => {
|
|
const charts = emptyCharts()
|
|
charts.destinationTrips = [{ label: '目的地涉及车次', unit: '次', points: Array.from({ length: 7 }, (_, index) => ({ label: `FBA-${index}`, value: index + 1 })) }]
|
|
const wrapper = render(charts)
|
|
expect(wrapper.find('.chart--destinations .chart-metric').text()).toBe('7 个目的地')
|
|
const options = option(wrapper, '.chart--destinations')
|
|
expect(series(options).data).toHaveLength(7)
|
|
expect((options.legend as LegendComponentOption).data).toHaveLength(5)
|
|
expect(wrapper.find('.chart-details').exists()).toBe(false)
|
|
await wrapper.find('.chart-more').trigger('click')
|
|
expect(wrapper.emitted('show-details')).toHaveLength(1)
|
|
await wrapper.setProps({ detailsVisible: true })
|
|
expect(wrapper.find('[aria-label="派送目的地明细"]').findAll('tbody tr')).toHaveLength(7)
|
|
expect(wrapper.find('[aria-label="派送目的地明细"]').text()).toContain('FBA-0')
|
|
})
|
|
|
|
it('preserves known zeros and does not draw equal positive shares for an empty sum', () => {
|
|
const charts = emptyCharts()
|
|
charts.physicalPallets = [{ label: '托盘', unit: '托', points: [{ label: '2026-10-01', value: 0 }, { label: '2026-10-02', value: 2 }] }]
|
|
charts.externalPalletRates = [{ label: 'USD', unit: 'USD/标准托位', points: [{ label: '2026-10-01', value: 0 }] }]
|
|
const wrapper = render(charts)
|
|
expect(series(option(wrapper, '.chart--rates'))).toMatchObject({ stillShowZeroSum: false, showEmptyCircle: true, data: [{ name: '2026-10-01', value: 0 }] })
|
|
expect(option(wrapper, '.chart--rates').graphic).toMatchObject([{ style: { text: '暂无正值数据' } }])
|
|
expect(wrapper.find('.chart--rates .chart-metric').text()).toContain('0.00')
|
|
expect(series(option(wrapper, '.chart--pallets')).data).toHaveLength(2)
|
|
})
|
|
|
|
it('shows missing amounts and rates as unknown and omits empty chart widgets', () => {
|
|
const wrapper = render(emptyCharts(), { ...summary(), physicalPallets: 0, externalAgreedAmounts: [] })
|
|
expect(wrapper.findAll('.chart-empty')).toHaveLength(4)
|
|
expect(wrapper.find('.chart--amounts .chart-metric').text()).toBe('—')
|
|
expect(wrapper.find('.chart--rates .chart-metric').text()).toBe('—')
|
|
expect(wrapper.findComponent({ name: 'VChart' }).exists()).toBe(false)
|
|
})
|