76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
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 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)
|
|
})
|
|
|
|
it('keeps the dialog chrome fixed while long content scrolls in the body', () => {
|
|
const source = readFileSync(resolve(process.cwd(), 'src/shared/components/AppDialog.vue'), 'utf8')
|
|
|
|
expect(source).toContain(':global(.app-dialog.el-dialog) { display: flex;')
|
|
expect(source).toContain(':global(.app-dialog .el-dialog__body) { min-height: 0; overflow-y: auto;')
|
|
expect(source).toContain('max-height: calc(100svh - 20px)')
|
|
})
|
|
})
|