优化

src/shared/components/AppDrawer.test.ts

@@ -0,0 +1,66 @@
+import { defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import AppDrawer from './AppDrawer.vue'
+
+const ElDrawerStub = defineComponent({
+  props: {
+    modelValue: Boolean,
+    showClose: Boolean,
+    closeOnClickModal: Boolean,
+    closeOnPressEscape: Boolean,
+  },
+  template: '<section data-testid="drawer"><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 mountDrawer(props: Record<string, unknown> = {}) {
+  return mount(AppDrawer, {
+    props: { modelValue: true, title: '编辑资料', ...props },
+    slots: { default: '<p>抽屉内容</p>' },
+    global: {
+      stubs: { ElDrawer: ElDrawerStub, ElButton: ElButtonStub },
+      directives: { loading: {} },
+    },
+  })
+}
+
+describe('AppDrawer', () => {
+  it('provides default cancel and confirm actions', async () => {
+    const wrapper = mountDrawer()
+    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 = mountDrawer({ confirmLoading: true })
+    const drawer = wrapper.getComponent(ElDrawerStub)
+    const cancelButton = wrapper.findAll('button')[0]
+
+    expect(drawer.props('showClose')).toBe(false)
+    expect(drawer.props('closeOnClickModal')).toBe(false)
+    expect(drawer.props('closeOnPressEscape')).toBe(false)
+    expect(cancelButton.attributes('disabled')).toBeDefined()
+  })
+
+  it('keeps the drawer chrome fixed while long content scrolls in the body', () => {
+    const source = readFileSync(resolve(process.cwd(), 'src/shared/components/AppDrawer.vue'), 'utf8')
+
+    expect(source).toContain(':global(.app-drawer .el-drawer__body) { min-height: 0; overflow-y: auto;')
+    expect(source).toContain('max-width: 94vw')
+  })
+})