67 lines
2.4 KiB
TypeScript
67 lines
2.4 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 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')
|
||
|
|
})
|
||
|
|
})
|