优化构架

src/shared/components/AppDialog.test.ts

@@ -0,0 +1,65 @@
+import { defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import AppDialog from './AppDialog.vue'
+
+const ElDialogStub = defineComponent({
+  props: {
+    modelValue: Boolean,
+    showClose: Boolean,
+    closeOnClickModal: Boolean,
+    closeOnPressEscape: Boolean,
+  },
+  template: '<section data-testid="dialog"><slot name="header" /><slot /><slot name="footer" /></section>',
+})
+
+const ElButtonStub = defineComponent({
+  props: {
+    disabled: Boolean,
+    loading: Boolean,
+  },
+  emits: ['click'],
+  template: '<button type="button" :disabled="disabled" @click="$emit(\'click\')"><slot /></button>',
+})
+
+function mountDialog(props: Record<string, unknown> = {}) {
+  return mount(AppDialog, {
+    props: { modelValue: true, title: '编辑资料', ...props },
+    slots: { default: '<p>弹框内容</p>' },
+    global: {
+      stubs: { ElDialog: ElDialogStub, ElButton: ElButtonStub },
+      directives: { loading: {} },
+    },
+  })
+}
+
+describe('AppDialog', () => {
+  it('provides default cancel and confirm actions', async () => {
+    const wrapper = mountDialog()
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons.map((button) => button.text())).toEqual(['取消', '确定'])
+    await buttons[1].trigger('click')
+    expect(wrapper.emitted('confirm')).toHaveLength(1)
+
+    await buttons[0].trigger('click')
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
+  })
+
+  it('prevents accidental closing while confirmation is submitting', () => {
+    const wrapper = mountDialog({ confirmLoading: true })
+    const dialog = wrapper.getComponent(ElDialogStub)
+    const cancelButton = wrapper.findAll('button')[0]
+
+    expect(dialog.props('showClose')).toBe(false)
+    expect(dialog.props('closeOnClickModal')).toBe(false)
+    expect(dialog.props('closeOnPressEscape')).toBe(false)
+    expect(cancelButton.attributes('disabled')).toBeDefined()
+  })
+
+  it('can render a content-only dialog without footer actions', () => {
+    const wrapper = mountDialog({ showFooter: false })
+    expect(wrapper.findAll('button')).toHaveLength(0)
+  })
+})