2020-09-09 21:18:08 +08:00
|
|
|
import { nextTick } from 'vue'
|
|
|
|
import { mount } from '@vue/test-utils'
|
2020-12-07 00:13:05 +08:00
|
|
|
import { rAF } from '@element-plus/test-utils/tick'
|
2021-01-14 17:01:37 +08:00
|
|
|
import triggerCompositeClick from '@element-plus/test-utils/composite-click'
|
2021-12-11 21:14:57 +08:00
|
|
|
import { Delete } from '@element-plus/icons-vue'
|
2020-11-24 23:06:26 +08:00
|
|
|
import Dialog from '../'
|
2020-09-09 21:18:08 +08:00
|
|
|
|
|
|
|
const AXIOM = 'Rem is the best girl'
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
const _mount = ({ slots, ...rest }: Indexable<any>) => {
|
2020-09-09 21:18:08 +08:00
|
|
|
return mount(Dialog, {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
...slots,
|
|
|
|
},
|
|
|
|
...rest,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
jest.useFakeTimers()
|
|
|
|
|
|
|
|
describe('Dialog.vue', () => {
|
2020-11-24 23:06:26 +08:00
|
|
|
test('render test', async () => {
|
2020-09-09 21:18:08 +08:00
|
|
|
const wrapper = _mount({
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
2020-11-24 23:06:26 +08:00
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
},
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
|
2020-12-07 00:13:05 +08:00
|
|
|
await nextTick()
|
|
|
|
await rAF()
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.find('.el-dialog__body').text()).toEqual(AXIOM)
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
test('dialog should have a title when title has been given', async () => {
|
2020-09-09 21:18:08 +08:00
|
|
|
const HEADER = 'I am header'
|
|
|
|
let wrapper = _mount({
|
|
|
|
slots: {
|
2020-12-15 11:58:24 +08:00
|
|
|
title: HEADER,
|
2020-09-09 21:18:08 +08:00
|
|
|
},
|
2020-11-24 23:06:26 +08:00
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
},
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.find('.el-dialog__header').text()).toBe(HEADER)
|
|
|
|
|
|
|
|
wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
title: HEADER,
|
2020-11-24 23:06:26 +08:00
|
|
|
modelValue: true,
|
2020-09-09 21:18:08 +08:00
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
|
|
|
|
expect(wrapper.find('.el-dialog__header').text()).toBe(HEADER)
|
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
test('dialog should have a footer when footer has been given', async () => {
|
2020-09-09 21:18:08 +08:00
|
|
|
const wrapper = _mount({
|
|
|
|
slots: {
|
|
|
|
footer: AXIOM,
|
|
|
|
},
|
2020-11-24 23:06:26 +08:00
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
},
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.find('.el-dialog__footer').exists()).toBe(true)
|
|
|
|
expect(wrapper.find('.el-dialog__footer').text()).toBe(AXIOM)
|
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
test('should append dialog to body when appendToBody is true', async () => {
|
2020-09-09 21:18:08 +08:00
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
appendToBody: true,
|
2020-11-24 23:06:26 +08:00
|
|
|
modelValue: true,
|
2020-09-09 21:18:08 +08:00
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
|
|
|
expect(
|
2021-09-04 19:29:28 +08:00
|
|
|
document.body.firstElementChild.classList.contains('el-overlay')
|
2020-11-24 23:06:26 +08:00
|
|
|
).toBe(true)
|
2020-09-09 21:18:08 +08:00
|
|
|
wrapper.unmount()
|
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
test('should center dialog', async () => {
|
2020-09-09 21:18:08 +08:00
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
center: true,
|
2020-11-24 23:06:26 +08:00
|
|
|
modelValue: true,
|
2020-09-09 21:18:08 +08:00
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.find('.el-dialog--center').exists()).toBe(true)
|
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
test('should show close button', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.find('.el-dialog__close').exists()).toBe(true)
|
|
|
|
})
|
|
|
|
|
2020-12-02 17:14:10 +08:00
|
|
|
test('should hide close button when showClose = false', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
showClose: false,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.find('.el-dialog__headerbtn').exists()).toBe(false)
|
|
|
|
})
|
|
|
|
|
2020-09-09 21:18:08 +08:00
|
|
|
test('should close dialog when click on close button', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
await wrapper.find('.el-dialog__headerbtn').trigger('click')
|
|
|
|
expect(wrapper.vm.visible).toBe(false)
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('mask related', () => {
|
2020-11-24 23:06:26 +08:00
|
|
|
test('should not have overlay mask when mask is false', async () => {
|
2020-09-09 21:18:08 +08:00
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
2020-10-22 14:00:33 +08:00
|
|
|
modal: false,
|
2020-11-24 23:06:26 +08:00
|
|
|
modelValue: true,
|
2020-09-09 21:18:08 +08:00
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.find('.el-overlay').exists()).toBe(false)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should close the modal when clicking on mask when `closeOnClickModal` is true', async () => {
|
2020-11-24 23:06:26 +08:00
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
await nextTick()
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.find('.el-overlay').exists()).toBe(true)
|
2021-09-18 10:04:25 +08:00
|
|
|
expect(wrapper.find('.el-overlay-dialog').exists()).toBe(true)
|
2020-09-09 21:18:08 +08:00
|
|
|
|
2021-09-18 10:04:25 +08:00
|
|
|
await triggerCompositeClick(wrapper.find('.el-overlay-dialog'))
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(wrapper.vm.visible).toBe(false)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('life cycles', () => {
|
|
|
|
test('should call before close', async () => {
|
|
|
|
const beforeClose = jest.fn()
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
beforeClose,
|
2020-11-24 23:06:26 +08:00
|
|
|
modelValue: true,
|
2020-09-09 21:18:08 +08:00
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
|
|
|
await wrapper.find('.el-dialog__headerbtn').trigger('click')
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(beforeClose).toHaveBeenCalled()
|
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
test('should not close dialog when user cancelled', async () => {
|
|
|
|
const beforeClose = jest
|
|
|
|
.fn()
|
|
|
|
.mockImplementation((hide: (cancel: boolean) => void) => hide(true))
|
2020-09-09 21:18:08 +08:00
|
|
|
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
beforeClose,
|
|
|
|
modelValue: true,
|
|
|
|
},
|
|
|
|
})
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
|
|
|
await wrapper.find('.el-dialog__headerbtn').trigger('click')
|
2020-09-09 21:18:08 +08:00
|
|
|
expect(beforeClose).toHaveBeenCalled()
|
|
|
|
expect(wrapper.vm.visible).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should open and close with delay', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
openDelay: 200,
|
|
|
|
closeDelay: 200,
|
|
|
|
modelValue: false,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.vm.visible).toBe(false)
|
|
|
|
|
|
|
|
await wrapper.setProps({
|
|
|
|
modelValue: true,
|
|
|
|
})
|
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
// expect(wrapper.vm.visible).toBe(false)
|
2020-09-09 21:18:08 +08:00
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
// jest.runOnlyPendingTimers()
|
2020-09-09 21:18:08 +08:00
|
|
|
|
2020-11-24 23:06:26 +08:00
|
|
|
// expect(wrapper.vm.visible).toBe(true)
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('should destroy on close', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
destroyOnClose: true,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
expect(wrapper.vm.visible).toBe(true)
|
2020-11-24 23:06:26 +08:00
|
|
|
await nextTick()
|
2020-12-07 00:13:05 +08:00
|
|
|
await rAF()
|
|
|
|
await nextTick()
|
2020-11-24 23:06:26 +08:00
|
|
|
await wrapper.find('.el-dialog__headerbtn').trigger('click')
|
2020-09-09 21:18:08 +08:00
|
|
|
await wrapper.setProps({
|
|
|
|
// manually setting this prop because that Transition is not available in testing,
|
|
|
|
// updating model value event was emitted via transition hooks.
|
|
|
|
modelValue: false,
|
|
|
|
})
|
|
|
|
await nextTick()
|
2020-12-07 00:13:05 +08:00
|
|
|
await rAF()
|
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.find('.el-dialog__body').exists()).toBe(false)
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
2020-12-31 14:33:17 +08:00
|
|
|
|
|
|
|
test('should emit close event', async () => {
|
|
|
|
let visible = true
|
|
|
|
const onClose = jest.fn()
|
|
|
|
const onClosed = jest.fn()
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: visible,
|
2021-09-04 19:29:28 +08:00
|
|
|
'onUpdate:modelValue': (val: boolean) => (visible = val),
|
2020-12-31 14:33:17 +08:00
|
|
|
onClose,
|
|
|
|
onClosed,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.vm.visible).toBe(true)
|
|
|
|
await nextTick()
|
|
|
|
await rAF()
|
|
|
|
await nextTick()
|
|
|
|
|
2021-09-18 10:04:25 +08:00
|
|
|
await triggerCompositeClick(wrapper.find('.el-overlay-dialog'))
|
2020-12-31 14:33:17 +08:00
|
|
|
await nextTick()
|
|
|
|
await rAF()
|
|
|
|
await nextTick()
|
|
|
|
expect(onClose).toHaveBeenCalled()
|
|
|
|
expect(onClosed).toHaveBeenCalled()
|
|
|
|
expect(visible).toBe(false)
|
|
|
|
})
|
2021-12-07 17:51:15 +08:00
|
|
|
|
|
|
|
test('closeIcon', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
closeIcon: Delete,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
await nextTick()
|
|
|
|
await rAF()
|
|
|
|
const closeIcon = wrapper.find('svg')
|
|
|
|
expect(closeIcon.exists()).toBe(true)
|
|
|
|
const svg = mount(Delete).find('svg').element
|
|
|
|
expect(closeIcon.element.innerHTML).toBe(svg.innerHTML)
|
|
|
|
})
|
2022-02-03 21:04:25 +08:00
|
|
|
|
|
|
|
test('should render draggable prop', async () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
modelValue: true,
|
|
|
|
draggable: true,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
await rAF()
|
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.find('.is-draggable').exists()).toBe(true)
|
|
|
|
})
|
2020-09-09 21:18:08 +08:00
|
|
|
})
|
|
|
|
})
|