2020-10-03 20:55:23 +08:00
|
|
|
import { h, nextTick } from 'vue'
|
2021-01-31 18:43:33 +08:00
|
|
|
import makeMount from '@element-plus/test-utils/make-mount'
|
2021-08-24 13:36:48 +08:00
|
|
|
import { rAF } from '@element-plus/test-utils/tick'
|
2020-10-04 14:49:39 +08:00
|
|
|
import { EVENT_CODE } from '@element-plus/utils/aria'
|
2021-10-27 23:17:13 +08:00
|
|
|
import { TypeComponentsMap } from '@element-plus/utils/icon'
|
2021-09-22 01:40:18 +08:00
|
|
|
import Message from '../src/message.vue'
|
2021-10-27 23:17:13 +08:00
|
|
|
import type { ComponentPublicInstance, CSSProperties, Component } from 'vue'
|
2020-10-03 20:55:23 +08:00
|
|
|
|
|
|
|
const AXIOM = 'Rem is the best girl'
|
|
|
|
|
|
|
|
jest.useFakeTimers()
|
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
type MessageInstance = ComponentPublicInstance<{
|
|
|
|
visible: boolean
|
2021-10-27 23:17:13 +08:00
|
|
|
iconComponent: string | Component
|
2021-09-04 19:29:28 +08:00
|
|
|
customStyle: CSSProperties
|
|
|
|
}>
|
2021-01-31 18:43:33 +08:00
|
|
|
|
|
|
|
const onClose = jest.fn()
|
|
|
|
const _mount = makeMount(Message, {
|
|
|
|
props: {
|
|
|
|
onClose,
|
|
|
|
},
|
|
|
|
})
|
2020-10-03 20:55:23 +08:00
|
|
|
|
|
|
|
describe('Message.vue', () => {
|
|
|
|
describe('render', () => {
|
|
|
|
test('basic render test', () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
2021-01-31 18:43:33 +08:00
|
|
|
const vm = wrapper.vm as MessageInstance
|
|
|
|
|
2020-10-03 20:55:23 +08:00
|
|
|
expect(wrapper.text()).toEqual(AXIOM)
|
2021-01-31 18:43:33 +08:00
|
|
|
expect(vm.visible).toBe(true)
|
2021-10-27 23:17:13 +08:00
|
|
|
expect(vm.iconComponent).toBe(TypeComponentsMap['info'])
|
2021-01-31 18:43:33 +08:00
|
|
|
expect(vm.customStyle).toEqual({ top: '20px', zIndex: 0 })
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('should be able to render VNode', () => {
|
|
|
|
const wrapper = _mount({
|
|
|
|
slots: {
|
|
|
|
default: h('span', { class: 'text-node' }, AXIOM),
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.find('.text-node').exists()).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should be able to render raw HTML with dangerouslyUseHTMLString prop', () => {
|
|
|
|
const tagClass = 'test-class'
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
dangerouslyUseHTMLString: true,
|
|
|
|
message: `<string class="${tagClass}"'>${AXIOM}</strong>`,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.find(`.${tagClass}`).exists()).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should not be able to render raw HTML without dangerouslyUseHTMLString prop', () => {
|
|
|
|
const tagClass = 'test-class'
|
|
|
|
const wrapper = _mount({
|
|
|
|
props: {
|
|
|
|
dangerouslyUseHTMLString: false,
|
|
|
|
message: `<string class="${tagClass}"'>${AXIOM}</strong>`,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.find(`.${tagClass}`).exists()).toBe(false)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('Message.type', () => {
|
|
|
|
test('should be able to render typed messages', () => {
|
|
|
|
for (const type of ['success', 'warning', 'info', 'error'] as const) {
|
|
|
|
const wrapper = _mount({ props: { type } })
|
|
|
|
|
2021-10-27 23:17:13 +08:00
|
|
|
expect(wrapper.findComponent(TypeComponentsMap[type]).exists()).toBe(
|
|
|
|
true
|
|
|
|
)
|
2020-10-03 20:55:23 +08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
test('should not be able to render invalid type icon', () => {
|
|
|
|
const type = 'some-type'
|
|
|
|
const wrapper = _mount({ props: { type } })
|
|
|
|
|
2021-10-28 23:37:26 +08:00
|
|
|
for (const key in TypeComponentsMap) {
|
|
|
|
if (key === type) {
|
|
|
|
expect(wrapper.findComponent(TypeComponentsMap[key]).exists()).toBe(
|
|
|
|
true
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
expect(wrapper.findComponent(TypeComponentsMap[key]).exists()).toBe(
|
|
|
|
false
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('event handlers', () => {
|
2021-01-31 18:43:33 +08:00
|
|
|
test('it should be able to close the message by clicking close button', async () => {
|
2020-10-03 20:55:23 +08:00
|
|
|
const onClose = jest.fn()
|
|
|
|
const wrapper = _mount({
|
|
|
|
slots: { default: AXIOM },
|
|
|
|
props: {
|
|
|
|
onClose,
|
|
|
|
showClose: true,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
const closeBtn = wrapper.find('.el-message__closeBtn')
|
|
|
|
expect(closeBtn.exists()).toBe(true)
|
2021-01-31 18:43:33 +08:00
|
|
|
await closeBtn.trigger('click')
|
|
|
|
expect((wrapper.vm as MessageInstance).visible).toBe(false)
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
|
2021-01-31 18:43:33 +08:00
|
|
|
test('it should close after duration', async () => {
|
2020-10-03 20:55:23 +08:00
|
|
|
const duration = 1000
|
|
|
|
const wrapper = _mount({ props: { duration } })
|
2021-01-31 18:43:33 +08:00
|
|
|
const vm = wrapper.vm as MessageInstance
|
|
|
|
await nextTick()
|
|
|
|
expect(vm.visible).toBe(true)
|
2020-10-03 20:55:23 +08:00
|
|
|
jest.runAllTimers()
|
2021-01-31 18:43:33 +08:00
|
|
|
await nextTick()
|
|
|
|
expect(vm.visible).toBe(false)
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('it should prevent close when hovered', async () => {
|
|
|
|
const duration = 1000
|
|
|
|
const wrapper = _mount({ props: { duration } })
|
2021-01-31 18:43:33 +08:00
|
|
|
const vm = wrapper.vm as MessageInstance
|
|
|
|
expect(vm.visible).toBe(true)
|
2020-10-03 20:55:23 +08:00
|
|
|
await wrapper.find('[role="alert"]').trigger('mouseenter')
|
|
|
|
jest.runAllTimers()
|
2021-01-31 18:43:33 +08:00
|
|
|
expect(vm.visible).toBe(true)
|
2020-10-03 20:55:23 +08:00
|
|
|
await wrapper.find('[role="alert"]').trigger('mouseleave')
|
2021-01-31 18:43:33 +08:00
|
|
|
expect(vm.visible).toBe(true)
|
2020-10-03 20:55:23 +08:00
|
|
|
jest.runAllTimers()
|
2021-01-31 18:43:33 +08:00
|
|
|
expect(vm.visible).toBe(false)
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('it should not close when duration is set to 0', () => {
|
|
|
|
const duration = 0
|
|
|
|
const wrapper = _mount({ props: { duration } })
|
2021-01-31 18:43:33 +08:00
|
|
|
const vm = wrapper.vm as MessageInstance
|
|
|
|
expect(vm.visible).toBe(true)
|
2020-10-03 20:55:23 +08:00
|
|
|
jest.runAllTimers()
|
2021-01-31 18:43:33 +08:00
|
|
|
expect(vm.visible).toBe(true)
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('it should close when esc is pressed', async () => {
|
|
|
|
const wrapper = _mount({ slots: { default: AXIOM } })
|
|
|
|
|
|
|
|
const event = new KeyboardEvent('keydown', {
|
2020-10-04 14:49:39 +08:00
|
|
|
code: EVENT_CODE.esc,
|
|
|
|
})
|
2020-10-03 20:55:23 +08:00
|
|
|
document.dispatchEvent(event)
|
|
|
|
|
2021-01-31 18:43:33 +08:00
|
|
|
expect((wrapper.vm as MessageInstance).visible).toBe(false)
|
2020-10-03 20:55:23 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('it should call close after transition ends', async () => {
|
|
|
|
const onClose = jest.fn()
|
|
|
|
const wrapper = _mount({
|
|
|
|
slots: { default: AXIOM },
|
|
|
|
props: { onClose },
|
|
|
|
})
|
2021-01-31 18:43:33 +08:00
|
|
|
await rAF()
|
|
|
|
const vm = wrapper.vm as MessageInstance
|
|
|
|
vm.visible = false
|
|
|
|
await rAF()
|
2020-10-03 20:55:23 +08:00
|
|
|
|
|
|
|
expect(onClose).toHaveBeenCalledTimes(1)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|