176 lines
9.7 KiB
TypeScript
176 lines
9.7 KiB
TypeScript
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
|
|
import { defineComponent, reactive, nextTick, ref } from 'vue'
|
|
import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import ElementPlus from 'element-plus'
|
|
import type { Component } from 'vue'
|
|
import type { Supplier } from '@/modules/suppliers/types'
|
|
|
|
const mocks = vi.hoisted(() => ({
|
|
route: null as null | { params: { id: string } },
|
|
push: vi.fn(), getSupplier: vi.fn(), updateSupplier: vi.fn(), createSupplier: vi.fn(),
|
|
listSuppliers: vi.fn(), getSupplierStats: vi.fn(), changeSupplierStatus: vi.fn(),
|
|
can: vi.fn((permission: string) => permission === 'platform:supplier:list' || permission === 'platform:supplier:edit' || permission === 'platform:supplier:create'),
|
|
}))
|
|
const routeState = reactive({ params: { id: 'A' } })
|
|
mocks.route = routeState
|
|
let SupplierFormView: Component
|
|
let SupplierDetailView: Component
|
|
let SuppliersView: Component
|
|
|
|
vi.mock('vue-router', () => ({ useRoute: () => mocks.route, useRouter: () => ({ push: mocks.push }) }))
|
|
vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: mocks.can }) }))
|
|
vi.mock('@/core/unsaved-work/useUnsavedWorkRegistration', () => ({ useUnsavedWorkRegistration: () => ({ captureBaseline: vi.fn() }) }))
|
|
vi.mock('@/modules/suppliers/api/platformSuppliers', () => ({
|
|
getSupplier: mocks.getSupplier, updateSupplier: mocks.updateSupplier, createSupplier: mocks.createSupplier,
|
|
listSuppliers: mocks.listSuppliers, getSupplierStats: mocks.getSupplierStats, changeSupplierStatus: mocks.changeSupplierStatus,
|
|
}))
|
|
|
|
function supplier(id: string, name: string): Supplier {
|
|
return { id, tenantId: '0', name, category: 'BOOKING', truckingScope: null, carrierCodes: ['MATSON', 'SML'], region: '宁波', legalRepresentative: '法人', contactName: '联系人', phone: '13800000000', email: null, address: null, businessLicenseNo: null, licenseFileId: null, status: 'ACTIVE', settlementPeriod: 'MONTHLY_30', remark: null, createdBy: null, createdAt: '', updatedBy: null, updatedAt: '', deleted: false, version: 1 }
|
|
}
|
|
|
|
function deferred<T>() {
|
|
let resolve!: (value: T) => void
|
|
const promise = new Promise<T>((next) => { resolve = next })
|
|
return { promise, resolve }
|
|
}
|
|
|
|
const stubs = {
|
|
AdminPage: { template: '<main><slot /></main>' },
|
|
DetailPageLayout: { template: '<article><slot name="header"/><slot /></article>' },
|
|
FormSection: { template: '<section><slot /></section>' },
|
|
ApiErrorMeta: { template: '<span />' },
|
|
LoadErrorState: { template: '<div class="load-error"><slot name="details" /></div>' },
|
|
SupplierLicenseDialog: { template: '<div />' },
|
|
ListPageLayout: { template: '<section><slot name="toolbar"/><slot name="state"/><slot/></section>' },
|
|
QueryToolbar: { template: '<div />' },
|
|
DataTable: { template: '<div><slot name="toolbar-actions"/></div>' },
|
|
StatusBadge: { template: '<span />' },
|
|
}
|
|
enableAutoUnmount(afterEach)
|
|
|
|
describe('supplier route reuse', () => {
|
|
beforeAll(async () => {
|
|
SupplierFormView = (await import('@/modules/suppliers/pages/SupplierFormView.vue')).default
|
|
SupplierDetailView = (await import('@/modules/suppliers/pages/SupplierDetailView.vue')).default
|
|
SuppliersView = (await import('@/modules/suppliers/pages/SuppliersView.vue')).default
|
|
})
|
|
beforeEach(() => {
|
|
routeState.params.id = 'A'
|
|
mocks.push.mockReset(); mocks.getSupplier.mockReset(); mocks.updateSupplier.mockReset().mockResolvedValue(null); mocks.createSupplier.mockReset().mockResolvedValue('99')
|
|
mocks.listSuppliers.mockReset().mockResolvedValue({ records: [], page: 1, size: 20, total: 0, pages: 0 })
|
|
mocks.getSupplierStats.mockReset().mockResolvedValue({ booking: 0, customs: 0, trucking: 0, certificate: 0 })
|
|
mocks.changeSupplierStatus.mockReset().mockResolvedValue(null)
|
|
mocks.can.mockClear()
|
|
})
|
|
|
|
it('retains all supplier facts with long values and the original back target', async () => {
|
|
const name = '供应商完整长名称'.repeat(6)
|
|
const address = '浙江省宁波市完整详细地址'.repeat(8)
|
|
mocks.getSupplier.mockResolvedValue({ ...supplier('A', name), address, remark: '备注'.repeat(50) })
|
|
const wrapper = mount(SupplierDetailView, { global: { plugins: [ElementPlus], stubs } })
|
|
await flushPromises()
|
|
expect(wrapper.get('.density-detail-title').text()).toBe(name)
|
|
expect(wrapper.get('.density-fields').findAll('dt')).toHaveLength(12)
|
|
expect(wrapper.get('.density-fields').text()).toContain(address)
|
|
expect(wrapper.findAll('.wide-field')).toHaveLength(3)
|
|
await wrapper.get('.density-back').trigger('click')
|
|
expect(mocks.push).toHaveBeenCalledWith({ name: 'supplier-list' })
|
|
})
|
|
|
|
it('reloads form A to B, ignores late A, and submits B', async () => {
|
|
const requestA = deferred<Supplier>(); const requestB = deferred<Supplier>()
|
|
mocks.getSupplier.mockImplementation((id: string) => id === 'A' ? requestA.promise : requestB.promise)
|
|
const wrapper = mount(SupplierFormView, { global: { plugins: [ElementPlus], stubs } })
|
|
expect(mocks.getSupplier).toHaveBeenCalledWith('A')
|
|
|
|
routeState.params.id = 'B'
|
|
await nextTick()
|
|
expect(mocks.getSupplier).toHaveBeenLastCalledWith('B')
|
|
requestB.resolve(supplier('B', '供应商B')); await flushPromises()
|
|
expect((wrapper.find('input').element as HTMLInputElement).value).toBe('供应商B')
|
|
requestA.resolve(supplier('A', '供应商A')); await flushPromises()
|
|
expect((wrapper.find('input').element as HTMLInputElement).value).toBe('供应商B')
|
|
expect((wrapper.find('input').element as HTMLInputElement).value).not.toBe('供应商A')
|
|
|
|
const saveButton = wrapper.findAll('button').find((button) => button.text().includes('保存'))
|
|
expect(saveButton).toBeDefined()
|
|
await saveButton!.trigger('click')
|
|
await flushPromises()
|
|
expect(mocks.updateSupplier).toHaveBeenCalledWith('B', expect.objectContaining({ name: '供应商B', carrierCodes: ['MATSON', 'SML'] }))
|
|
expect(mocks.push).toHaveBeenCalledWith({ name: 'supplier-list' })
|
|
})
|
|
|
|
it('reloads detail A to B when the route is reused', async () => {
|
|
const requestA = deferred<Supplier>(); const requestB = deferred<Supplier>()
|
|
mocks.getSupplier.mockImplementation((id: string) => id === 'A' ? requestA.promise : requestB.promise)
|
|
const wrapper = mount(SupplierDetailView, { global: { plugins: [ElementPlus], stubs } })
|
|
routeState.params.id = 'B'; await nextTick()
|
|
requestB.resolve(supplier('B', '供应商B')); await flushPromises()
|
|
expect(wrapper.text()).toContain('供应商B')
|
|
requestA.resolve(supplier('A', '供应商A')); await flushPromises()
|
|
expect(wrapper.text()).toContain('供应商B')
|
|
expect(wrapper.text()).not.toContain('供应商A')
|
|
})
|
|
|
|
it('resets a cached create form every time it is activated', async () => {
|
|
routeState.params.id = ''
|
|
const active = ref(true)
|
|
const Host = defineComponent({
|
|
components: { SupplierFormView },
|
|
setup: () => ({ active }),
|
|
template: '<KeepAlive><SupplierFormView v-if="active" /></KeepAlive>',
|
|
})
|
|
const wrapper = mount(Host, { global: { plugins: [ElementPlus], stubs } })
|
|
await nextTick()
|
|
const name = wrapper.find('input[placeholder="请输入供应商名称"]')
|
|
await name.setValue('上一次新增的数据')
|
|
expect((name.element as HTMLInputElement).value).toBe('上一次新增的数据')
|
|
|
|
active.value = false; await nextTick()
|
|
active.value = true; await nextTick()
|
|
|
|
expect((wrapper.find('input[placeholder="请输入供应商名称"]').element as HTMLInputElement).value).toBe('')
|
|
expect(mocks.getSupplier).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('reloads the cached supplier list every time it is activated', async () => {
|
|
routeState.params.id = ''
|
|
const active = ref(true)
|
|
const Host = defineComponent({
|
|
components: { SuppliersView },
|
|
setup: () => ({ active }),
|
|
template: '<KeepAlive><SuppliersView v-if="active" /></KeepAlive>',
|
|
})
|
|
mount(Host, { global: { plugins: [ElementPlus], stubs } })
|
|
await flushPromises()
|
|
expect(mocks.listSuppliers).toHaveBeenCalledTimes(1)
|
|
|
|
active.value = false; await nextTick()
|
|
active.value = true; await flushPromises()
|
|
|
|
expect(mocks.listSuppliers).toHaveBeenCalledTimes(2)
|
|
expect(mocks.getSupplierStats).toHaveBeenCalledTimes(2)
|
|
})
|
|
it('requires one trucking type, saves overseas and clears the type after changing category', async () => {
|
|
mocks.getSupplier.mockResolvedValue({ ...supplier('A', '车队'), category: 'TRUCKING', carrierCodes: [], truckingScope: null })
|
|
const wrapper = mount(SupplierFormView, { global: { plugins: [ElementPlus], stubs } })
|
|
await flushPromises()
|
|
const save = wrapper.findAll('button').find((button) => button.text().includes('保存'))!
|
|
await save.trigger('click'); await flushPromises()
|
|
expect(mocks.updateSupplier).not.toHaveBeenCalled()
|
|
expect(wrapper.findAllComponents({ name: 'ElFormItem' }).find(item => item.props('prop') === 'truckingScope')?.props('error')).toBe('请选择国内拖车或海外车队')
|
|
const radios = wrapper.findComponent({ name: 'ElRadioGroup' })
|
|
expect(radios.text()).toContain('国内拖车')
|
|
expect(radios.text()).toContain('海外车队')
|
|
radios.vm.$emit('update:modelValue', 'OVERSEAS')
|
|
await flushPromises(); await save.trigger('click'); await flushPromises()
|
|
expect(mocks.updateSupplier).toHaveBeenLastCalledWith('A', expect.objectContaining({ category: 'TRUCKING', truckingScope: 'OVERSEAS' }))
|
|
wrapper.findAllComponents({ name: 'ElSelect' })[0]!.vm.$emit('update:modelValue', 'CUSTOMS')
|
|
await flushPromises(); await save.trigger('click'); await flushPromises()
|
|
expect(wrapper.findComponent({ name: 'ElRadioGroup' }).exists()).toBe(false)
|
|
expect(mocks.updateSupplier).toHaveBeenLastCalledWith('A', expect.objectContaining({ category: 'CUSTOMS', truckingScope: null }))
|
|
})
|
|
|
|
})
|