72 lines
5.0 KiB
TypeScript
72 lines
5.0 KiB
TypeScript
vi.mock('@/shared/components/AppDialog.vue', () => ({ default: { props: ['modelValue'], template: '<section v-if="modelValue"><slot /></section>' } }))
|
|
import ElementPlus from 'element-plus'
|
|
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { defineComponent } from 'vue'
|
|
vi.mock('vue-echarts', () => ({ default: defineComponent({ name: 'VChart', props: ['option', 'autoresize', 'initOptions'], template: '<div />' }) }))
|
|
import SkuTrend from './SkuTrend.vue'
|
|
import type { DailyResponse } from '../types'
|
|
import { adminWorkbenchChartTheme } from '@/styles/adminWorkbenchChartTheme'
|
|
|
|
function data(status = 'COMPLETE'): DailyResponse {
|
|
return {
|
|
context: { salesRunId: null, inventoryRunId: null, salesScopeHash: null, inventoryScopeHash: null, queryAsOf: '', queryExpiresAt: '', businessTimezone: 'Asia/Shanghai', anchorDate: '2026-10-13' },
|
|
summary: { sourceAccount: 'test', customerCode: 'OWNER', warehouseCode: 'WH', sku: 'SKU', productName: null, quantityUnit: 'PCS', outboundQuantity: '30', observedQuantity: '30', dataStatus: status, reasonCodes: [], completeDayCount: 30, partialDayCount: 0, unknownDayCount: 0 },
|
|
points: Array.from({ length: 30 }, (_, index) => ({ businessDate: `2026-09-${String(index + 1).padStart(2, '0')}`, outboundQuantity: status === 'UNKNOWN' ? null : '1', observedQuantity: status === 'UNKNOWN' ? null : '1', dataStatus: status, quantityUnit: 'PCS', reasonCodes: [] })),
|
|
}
|
|
}
|
|
describe('SKU daily trend axes', () => {
|
|
it('shows both axes, intermediate dates, zero and maximum ticks for a 30-day window', () => {
|
|
const w = mount(SkuTrend, { props: { data: data() }, global: { plugins: [ElementPlus] } })
|
|
const chart = w.findComponent({ name: 'VChart' })
|
|
const option = chart.props('option')
|
|
expect(option.xAxis).toMatchObject({ type: 'category', name: '日期（北京时间）' })
|
|
expect(option.xAxis.data).toHaveLength(30)
|
|
expect(option.yAxis).toMatchObject({ type: 'value', min: 0, name: '出库量（件）' })
|
|
expect(option.series[1].data).toEqual(Array(30).fill(1))
|
|
expect(option.tooltip.trigger).toBe('axis')
|
|
expect(option.tooltip).toMatchObject({ backgroundColor: adminWorkbenchChartTheme.colors.surface, borderColor: adminWorkbenchChartTheme.colors.border })
|
|
expect(option.series[0].itemStyle.color).toBe(adminWorkbenchChartTheme.colors.primary)
|
|
expect(option.yAxis.splitLine).toEqual(adminWorkbenchChartTheme.splitLine)
|
|
expect(w.get('section').classes()).toContain('admin-workbench')
|
|
expect(w.find('.workbench-panel .workbench-chart-title').text()).toContain('SKU · 每日出库趋势')
|
|
expect(w.find('.workbench-meta').text()).toContain('所属货主：OWNER')
|
|
expect(w.findAll('.workbench-note').some(note => note.text().includes('完整出库量：30 件'))).toBe(true)
|
|
expect(chart.props('initOptions')).toEqual({ renderer: 'canvas' })
|
|
expect(w.get('.sku-trend').find('svg').exists()).toBe(false)
|
|
w.unmount()
|
|
})
|
|
it('retains axes and date markers for an unknown window without drawing zero points', () => {
|
|
const w = mount(SkuTrend, { props: { data: data('UNKNOWN') }, global: { plugins: [ElementPlus] } })
|
|
expect(w.text()).toContain('未知日期不作为零销量')
|
|
const option = w.findComponent({ name: 'VChart' }).props('option')
|
|
expect(option.series[0].data.every((point: { value: number | null }) => point.value === null)).toBe(true)
|
|
expect(option.series).toHaveLength(1)
|
|
expect(option.xAxis.data).toHaveLength(30)
|
|
w.unmount()
|
|
})
|
|
it('retains partial segments, real zero and the coverage evidence dialog after theming', async () => {
|
|
const response = data()
|
|
response.points = [
|
|
{ ...response.points[0]!, outboundQuantity: '0', observedQuantity: '0' },
|
|
{ ...response.points[1]!, outboundQuantity: null, observedQuantity: '3', dataStatus: 'PARTIAL', coveredUntil: '2026-09-02 12:00:00' },
|
|
{ ...response.points[2]!, outboundQuantity: null, observedQuantity: null, dataStatus: 'UNKNOWN' },
|
|
{ ...response.points[3]!, outboundQuantity: '8', observedQuantity: '8' },
|
|
]
|
|
const w = mount(SkuTrend, { props: { data: response }, global: { plugins: [ElementPlus] } })
|
|
const option = w.findComponent({ name: 'VChart' }).props('option')
|
|
expect(option.series[0].data.map((point: { value: number | null }) => point.value)).toEqual([0, 3, null, 8])
|
|
expect(option.series[1]).toMatchObject({ data: [0, 3, null, null], lineStyle: { type: 'dashed', color: adminWorkbenchChartTheme.colors.primary } })
|
|
expect(option.series).toHaveLength(2)
|
|
expect(w.find('table').exists()).toBe(false)
|
|
const evidence = w.findAll('button').find(button => button.text() === '每日数量、完整性及覆盖证据')!
|
|
await evidence.trigger('click')
|
|
expect(w.get('table').text()).toContain('北京时间日期')
|
|
expect(w.get('table').text()).toContain('2026-09-02 12:00:00')
|
|
expect(w.findAll('tbody tr')).toHaveLength(4)
|
|
await w.setProps({ data: data('UNKNOWN') })
|
|
expect(w.find('table').exists()).toBe(false)
|
|
w.unmount()
|
|
})
|
|
})
|