mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
7fe4e0b026
* feat(components): [el-message] & [el-notification] appendTo option added * fix(components): unit test and replaced warn with debugWarn
113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import { nextTick, h } from 'vue'
|
|
import { rAF } from '@element-plus/test-utils/tick'
|
|
import Notification, { closeAll } from '../src/notify'
|
|
|
|
import type { NotificationHandle } from '../src/notification'
|
|
|
|
const selector = '.el-notification'
|
|
|
|
describe('Notification on command', () => {
|
|
afterEach(() => {
|
|
closeAll()
|
|
})
|
|
|
|
test('it should get component handle', async () => {
|
|
const handle = Notification()
|
|
await rAF()
|
|
expect(document.querySelector(selector)).toBeDefined()
|
|
|
|
handle.close()
|
|
await rAF()
|
|
await nextTick()
|
|
expect(document.querySelector(selector)).toBeNull()
|
|
expect(
|
|
document.querySelector('[class^="container_notification"]')
|
|
).toBeNull()
|
|
})
|
|
|
|
test('it should be able to render vnode', async () => {
|
|
const testClassName = 'test-classname'
|
|
const { close } = Notification({
|
|
duration: 0,
|
|
message: h('div', { class: testClassName }, 'test-content'),
|
|
})
|
|
|
|
await rAF()
|
|
expect(document.querySelector(`.${testClassName}`)).toBeDefined()
|
|
close()
|
|
})
|
|
|
|
test('it should be able to close notification by manually close', async () => {
|
|
const { close } = Notification({
|
|
duration: 0,
|
|
})
|
|
await rAF()
|
|
|
|
const element = document.querySelector(selector)
|
|
expect(element).toBeDefined()
|
|
close()
|
|
await rAF()
|
|
await nextTick()
|
|
|
|
expect(document.querySelector(selector)).toBeNull()
|
|
})
|
|
|
|
test('it should close all notifications', async () => {
|
|
const notifications: NotificationHandle[] = []
|
|
const onClose = jest.fn()
|
|
for (let i = 0; i < 4; i++) {
|
|
notifications.push(
|
|
Notification({
|
|
onClose,
|
|
duration: 0,
|
|
})
|
|
)
|
|
}
|
|
// jest.runAllTicks()
|
|
await rAF()
|
|
|
|
expect(document.querySelectorAll(selector).length).toBe(4)
|
|
closeAll()
|
|
// jest.runAllTicks()
|
|
await rAF()
|
|
expect(onClose).toHaveBeenCalledTimes(notifications.length)
|
|
expect(document.querySelectorAll(selector).length).toBe(0)
|
|
})
|
|
|
|
test('it should be able to render all types notification', () => {
|
|
for (const type of ['success', 'warning', 'error', 'info'] as const) {
|
|
Notification[type]({})
|
|
expect(document.querySelector(`.el-icon-${type}`)).toBeDefined()
|
|
}
|
|
})
|
|
|
|
test('it should appendTo specified HTMLElement', async () => {
|
|
const htmlElement = document.createElement('div')
|
|
const handle = Notification({
|
|
appendTo: htmlElement,
|
|
})
|
|
await rAF()
|
|
expect(htmlElement.querySelector(selector)).toBeDefined()
|
|
|
|
handle.close()
|
|
await rAF()
|
|
await nextTick()
|
|
expect(htmlElement.querySelector(selector)).toBeNull()
|
|
})
|
|
|
|
test('it should appendTo specified selector', async () => {
|
|
const htmlElement = document.createElement('div')
|
|
htmlElement.classList.add('notification-manager')
|
|
document.body.appendChild(htmlElement)
|
|
const handle = Notification({
|
|
appendTo: '.notification-manager',
|
|
})
|
|
await rAF()
|
|
expect(htmlElement.querySelector(selector)).toBeDefined()
|
|
handle.close()
|
|
await rAF()
|
|
await nextTick()
|
|
expect(htmlElement.querySelector(selector)).toBeNull()
|
|
})
|
|
})
|