优化

src/modules/container-loading/components/ContainerSimulationCreate.test.ts

@@ -6,6 +6,8 @@ import { listWarehouseLogisticsChannels } from '@/modules/ocean-bookings'
 import { createContainerSimulation } from '../api/platformContainerLoading'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import ContainerSimulationCreate from './ContainerSimulationCreate.vue'
+import DataTable from '@/shared/components/DataTable.vue'
+import { h } from 'vue'
 
 // Node's supported CJS export keeps the real form validator's constructor intact.
 const ElementPlus = (createRequire(import.meta.url)('element-plus') as typeof import('element-plus')).default
@@ -19,14 +21,26 @@ afterEach(() => { document.body.innerHTML = '' })
 
 describe('ContainerSimulationCreate opted-in form', () => {
   it.each([true, false])('preserves required fields and the fixed request in dense=%s mode', async (dense) => {
-    const wrapper = mount(ContainerSimulationCreate, { props: { dense, loadWarehouseOptions: async () => [warehouse] }, global: { plugins: [ElementPlus] }, attachTo: document.body })
+    const host = mount(DataTable, {
+      props: { data: [], columns: [] },
+      slots: { 'toolbar-actions': () => h(ContainerSimulationCreate, { dense, loadWarehouseOptions: async () => [warehouse] }) },
+      global: { plugins: [ElementPlus] },
+      attachTo: document.body,
+    })
+    const wrapper = host.findComponent(ContainerSimulationCreate)
+    expect(wrapper.get('button').element.closest('.data-table__toolbar-actions')).not.toBeNull()
     await wrapper.findAll('button').find(button => button.text().includes('新增模拟柜'))!.trigger('click')
     await flushPromises()
     const dialog = wrapper.findComponent(AppDialog)
+    const dialogRoot = document.body.querySelector<HTMLElement>('.simulation-create-dialog')!
+    expect(dialogRoot).not.toBeNull()
+    expect(dialogRoot.closest('.data-table__toolbar')).toBeNull()
+    expect(dialogRoot.querySelector('.el-dialog__footer button')?.closest('.data-table__toolbar')).toBeNull()
     expect(dialog.props('width')).toBe('min(800px, calc(100vw - 32px))')
     dialog.vm.$emit('confirm')
     await flushPromises()
     expect(createContainerSimulation).not.toHaveBeenCalled()
+    await vi.waitFor(() => expect(dialogRoot.querySelectorAll('.el-form-item__error').length).toBeGreaterThan(0))
     const fields = dialog.findAllComponents({ name: 'ElFormItem' })
     expect(fields).toHaveLength(3)
     fields.find(field => field.props('prop') === 'warehouseId')!.findComponent({ name: 'ElSelect' }).vm.$emit('update:modelValue', '8')
@@ -38,5 +52,17 @@ describe('ContainerSimulationCreate opted-in form', () => {
     await flushPromises()
     expect(createContainerSimulation).toHaveBeenCalledExactlyOnceWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500 })
     expect(wrapper.emitted('created')).toHaveLength(1)
+    expect(dialog.props('modelValue')).toBe(false)
+    await wrapper.get('button').trigger('click')
+    await flushPromises()
+    expect(dialog.props('modelValue')).toBe(true)
+    expect(dialogRoot.closest('.data-table__toolbar')).toBeNull()
+    expect(dialog.findAllComponents({ name: 'ElFormItem' }).find(field => field.props('prop') === 'warehouseId')!.findComponent({ name: 'ElSelect' }).props('modelValue')).toBe('')
+    const cancel = Array.from(dialogRoot.querySelectorAll<HTMLButtonElement>('.el-dialog__footer button')).find(button => button.textContent?.trim() === '取消')!
+    cancel.click()
+    await flushPromises()
+    expect(dialog.props('modelValue')).toBe(false)
+    expect(host.find('.data-table__toolbar-actions').exists()).toBe(true)
+    expect(createContainerSimulation).toHaveBeenCalledTimes(1)
   })
 })