2021-01-14 17:01:37 +08:00
|
|
|
import { mount } from '@vue/test-utils'
|
|
|
|
import { rAF } from '@element-plus/test-utils/tick'
|
|
|
|
import { triggerNativeCompositeClick } from '@element-plus/test-utils/composite-click'
|
2021-12-04 11:20:06 +08:00
|
|
|
import { QuestionFilled } from '@element-plus/icons-vue'
|
2021-09-17 15:27:31 +08:00
|
|
|
import MessageBox from '../src/messageBox'
|
2020-10-19 13:50:22 +08:00
|
|
|
|
2021-01-14 17:01:37 +08:00
|
|
|
const selector = '.el-overlay'
|
2020-10-19 13:50:22 +08:00
|
|
|
|
2021-01-14 17:01:37 +08:00
|
|
|
const _mount = (invoker: () => void) => {
|
|
|
|
return mount(
|
|
|
|
{
|
|
|
|
template: '<div></div>',
|
|
|
|
mounted() {
|
|
|
|
invoker()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
attachTo: 'body',
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2021-01-14 17:01:37 +08:00
|
|
|
)
|
|
|
|
}
|
2020-10-19 13:50:22 +08:00
|
|
|
|
2021-01-14 17:01:37 +08:00
|
|
|
describe('MessageBox', () => {
|
|
|
|
afterEach(async () => {
|
2020-10-19 13:50:22 +08:00
|
|
|
MessageBox.close()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('create and close', async () => {
|
|
|
|
MessageBox({
|
|
|
|
type: 'success',
|
|
|
|
title: '消息',
|
|
|
|
message: '这是一段内容',
|
2021-09-22 10:06:40 +08:00
|
|
|
customStyle: {
|
|
|
|
width: '100px',
|
|
|
|
},
|
2020-10-19 13:50:22 +08:00
|
|
|
})
|
|
|
|
const msgbox: HTMLElement = document.querySelector(selector)
|
2021-01-14 17:01:37 +08:00
|
|
|
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgbox).toBeDefined()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
|
|
|
expect(
|
2021-09-04 19:29:28 +08:00
|
|
|
msgbox.querySelector('.el-message-box__title span').textContent
|
2021-01-14 17:01:37 +08:00
|
|
|
).toEqual('消息')
|
|
|
|
expect(
|
|
|
|
msgbox.querySelector('.el-message-box__message').querySelector('p')
|
2021-09-04 19:29:28 +08:00
|
|
|
.textContent
|
2021-01-14 17:01:37 +08:00
|
|
|
).toEqual('这是一段内容')
|
2021-09-22 10:06:40 +08:00
|
|
|
/** custom inline style */
|
|
|
|
expect(
|
|
|
|
(msgbox.querySelector('.el-message-box') as HTMLElement).style.width
|
|
|
|
).toEqual('100px')
|
2020-10-19 13:50:22 +08:00
|
|
|
MessageBox.close()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgbox.style.display).toEqual('none')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('invoke with strings', () => {
|
2021-01-14 17:01:37 +08:00
|
|
|
MessageBox({ title: '消息', message: '这是一段内容' })
|
2020-10-19 13:50:22 +08:00
|
|
|
const msgbox = document.querySelector(selector)
|
|
|
|
expect(msgbox).toBeDefined()
|
|
|
|
})
|
|
|
|
|
|
|
|
test('custom icon', async () => {
|
|
|
|
MessageBox({
|
|
|
|
type: 'warning',
|
2021-10-27 23:17:13 +08:00
|
|
|
icon: QuestionFilled,
|
2020-10-19 13:50:22 +08:00
|
|
|
message: '这是一段内容',
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
const icon = document.querySelector('.el-message-box__status')
|
2021-10-27 23:17:13 +08:00
|
|
|
|
|
|
|
expect(icon.classList.contains('el-icon')).toBe(true)
|
|
|
|
|
|
|
|
const svg = mount(QuestionFilled).find('svg').element
|
|
|
|
expect(icon.querySelector('svg').innerHTML).toBe(svg.innerHTML)
|
2020-10-19 13:50:22 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('html string', async () => {
|
|
|
|
MessageBox({
|
|
|
|
title: 'html string',
|
|
|
|
dangerouslyUseHTMLString: true,
|
|
|
|
message: '<strong>html string</strong>',
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
const message = document.querySelector('.el-message-box__message strong')
|
|
|
|
expect(message.textContent).toEqual('html string')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('distinguish cancel and close', async () => {
|
|
|
|
let msgAction = ''
|
2021-01-14 17:01:37 +08:00
|
|
|
const invoker = () => {
|
|
|
|
MessageBox({
|
|
|
|
title: '消息',
|
|
|
|
message: '这是一段内容',
|
|
|
|
distinguishCancelAndClose: true,
|
2021-09-04 19:29:28 +08:00
|
|
|
callback: (action) => {
|
2021-01-14 17:01:37 +08:00
|
|
|
msgAction = action
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
_mount(invoker)
|
|
|
|
await rAF()
|
|
|
|
|
|
|
|
const btn = document.querySelector(
|
2021-09-04 19:29:28 +08:00
|
|
|
'.el-message-box__close'
|
2021-01-14 17:01:37 +08:00
|
|
|
) as HTMLButtonElement
|
2020-10-19 13:50:22 +08:00
|
|
|
btn.click()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgAction).toEqual('close')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('alert', async () => {
|
|
|
|
MessageBox.alert('这是一段内容', {
|
|
|
|
title: '标题名称',
|
|
|
|
type: 'warning',
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
|
|
|
await triggerNativeCompositeClick(document.querySelector(selector))
|
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
const msgbox: HTMLElement = document.querySelector(selector)
|
|
|
|
expect(msgbox.style.display).toEqual('')
|
|
|
|
expect(msgbox.querySelector('.el-icon-warning')).toBeDefined()
|
|
|
|
})
|
|
|
|
|
2021-01-14 17:01:37 +08:00
|
|
|
test('confirm', async () => {
|
2020-10-19 13:50:22 +08:00
|
|
|
MessageBox.confirm('这是一段内容', {
|
|
|
|
title: '标题名称',
|
|
|
|
type: 'warning',
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
|
|
|
const btn = document
|
|
|
|
.querySelector(selector)
|
|
|
|
.querySelector('.el-button--primary') as HTMLButtonElement
|
2020-10-19 13:50:22 +08:00
|
|
|
btn.click()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
const msgbox: HTMLElement = document.querySelector(selector)
|
2021-01-14 17:01:37 +08:00
|
|
|
expect(msgbox).toBe(null)
|
2020-10-19 13:50:22 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('prompt', async () => {
|
|
|
|
MessageBox.prompt('这是一段内容', {
|
|
|
|
title: '标题名称',
|
|
|
|
inputPattern: /test/,
|
|
|
|
inputErrorMessage: 'validation failed',
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
|
|
|
const inputElm = document
|
|
|
|
.querySelector(selector)
|
|
|
|
.querySelector('.el-message-box__input')
|
|
|
|
const haveFocus = inputElm
|
|
|
|
.querySelector('input')
|
|
|
|
.isSameNode(document.activeElement)
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(inputElm).toBeDefined()
|
|
|
|
expect(haveFocus).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('prompt: focus on textarea', async () => {
|
|
|
|
MessageBox.prompt('这是一段内容', {
|
|
|
|
inputType: 'textarea',
|
|
|
|
title: '标题名称',
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
|
|
|
const textareaElm = document
|
|
|
|
.querySelector(selector)
|
|
|
|
.querySelector('textarea')
|
2020-10-19 13:50:22 +08:00
|
|
|
const haveFocus = textareaElm.isSameNode(document.activeElement)
|
|
|
|
expect(haveFocus).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('callback', async () => {
|
|
|
|
let msgAction = ''
|
|
|
|
MessageBox({
|
|
|
|
title: '消息',
|
|
|
|
message: '这是一段内容',
|
2021-09-04 19:29:28 +08:00
|
|
|
callback: (action) => {
|
2020-10-19 13:50:22 +08:00
|
|
|
msgAction = action
|
|
|
|
},
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
|
|
|
const closeBtn = document.querySelector(
|
2021-09-04 19:29:28 +08:00
|
|
|
'.el-message-box__close'
|
2021-01-14 17:01:37 +08:00
|
|
|
) as HTMLButtonElement
|
2020-10-19 13:50:22 +08:00
|
|
|
closeBtn.click()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgAction).toEqual('cancel')
|
|
|
|
})
|
|
|
|
|
2021-01-14 17:01:37 +08:00
|
|
|
test('beforeClose', async () => {
|
2020-10-19 13:50:22 +08:00
|
|
|
let msgAction = ''
|
|
|
|
MessageBox({
|
2021-09-04 19:29:28 +08:00
|
|
|
callback: (action) => {
|
2021-01-14 17:01:37 +08:00
|
|
|
msgAction = action
|
|
|
|
},
|
2020-10-19 13:50:22 +08:00
|
|
|
title: '消息',
|
|
|
|
message: '这是一段内容',
|
2021-01-14 17:01:37 +08:00
|
|
|
beforeClose: (_, __, done) => {
|
|
|
|
done()
|
2020-10-19 13:50:22 +08:00
|
|
|
},
|
|
|
|
})
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2021-09-04 19:29:28 +08:00
|
|
|
;(
|
|
|
|
document.querySelector(
|
|
|
|
'.el-message-box__btns .el-button--primary'
|
|
|
|
) as HTMLButtonElement
|
|
|
|
).click()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgAction).toEqual('confirm')
|
|
|
|
})
|
|
|
|
|
|
|
|
describe('promise', () => {
|
2021-01-14 17:01:37 +08:00
|
|
|
test('resolve', async () => {
|
2020-10-19 13:50:22 +08:00
|
|
|
let msgAction = ''
|
2021-01-14 17:01:37 +08:00
|
|
|
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示').then(
|
2021-09-04 19:29:28 +08:00
|
|
|
(action) => {
|
2020-10-19 13:50:22 +08:00
|
|
|
msgAction = action
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2021-01-14 17:01:37 +08:00
|
|
|
)
|
|
|
|
await rAF()
|
|
|
|
const btn = document.querySelector(
|
2021-09-04 19:29:28 +08:00
|
|
|
'.el-message-box__btns .el-button--primary'
|
2021-01-14 17:01:37 +08:00
|
|
|
) as HTMLButtonElement
|
2020-10-19 13:50:22 +08:00
|
|
|
btn.click()
|
2021-01-14 17:01:37 +08:00
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgAction).toEqual('confirm')
|
|
|
|
})
|
|
|
|
|
|
|
|
test('reject', async () => {
|
|
|
|
let msgAction = ''
|
2021-01-14 17:01:37 +08:00
|
|
|
MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示').catch(
|
2021-09-04 19:29:28 +08:00
|
|
|
(action) => {
|
2020-10-19 13:50:22 +08:00
|
|
|
msgAction = action
|
2021-09-04 19:29:28 +08:00
|
|
|
}
|
2021-01-14 17:01:37 +08:00
|
|
|
)
|
|
|
|
await rAF()
|
2021-09-04 19:29:28 +08:00
|
|
|
const btn = document.querySelector('.el-message-box__btns .el-button')
|
2021-01-14 17:01:37 +08:00
|
|
|
;(btn as HTMLButtonElement).click()
|
|
|
|
await rAF()
|
2020-10-19 13:50:22 +08:00
|
|
|
expect(msgAction).toEqual('cancel')
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|