diff --git a/packages/components/message-box/__tests__/message-box.test.ts b/packages/components/message-box/__tests__/message-box.test.ts index 0ee0d8166a..8ec625202d 100644 --- a/packages/components/message-box/__tests__/message-box.test.ts +++ b/packages/components/message-box/__tests__/message-box.test.ts @@ -1,4 +1,3 @@ -// @ts-nocheck import { markRaw } from 'vue' import { mount } from '@vue/test-utils' import { afterEach, describe, expect, it, test, vi } from 'vitest' @@ -8,6 +7,8 @@ import { QuestionFilled as QuestionFilledIcon } from '@element-plus/icons-vue' import MessageBox from '../src/messageBox' import { ElMessageBox } from '..' +import type { Action } from '..' + const selector = '.el-overlay' const QuestionFilled = markRaw(QuestionFilledIcon) @@ -45,16 +46,16 @@ describe('MessageBox', () => { width: '100px', }, }) - const msgbox: HTMLElement = document.querySelector(selector) + const msgbox: HTMLElement = document.querySelector(selector)! expect(msgbox).toBeDefined() await rAF() expect( - msgbox.querySelector('.el-message-box__title span').textContent + msgbox.querySelector('.el-message-box__title span')?.textContent ).toEqual('消息') expect( - msgbox.querySelector('.el-message-box__message').querySelector('p') - .textContent + msgbox.querySelector('.el-message-box__message')?.querySelector('p') + ?.textContent ).toEqual('这是一段内容') /** custom inline style */ expect( @@ -78,12 +79,12 @@ describe('MessageBox', () => { message: '这是一段内容', }) await rAF() - const icon = document.querySelector('.el-message-box__status') + const icon = document.querySelector('.el-message-box__status')! expect(icon.classList.contains('el-icon')).toBe(true) const svg = mount(QuestionFilled).find('svg').element - expect(icon.querySelector('svg').innerHTML).toBe(svg.innerHTML) + expect(icon.querySelector('svg')!.innerHTML).toBe(svg.innerHTML) }) test('html string', async () => { @@ -93,7 +94,7 @@ describe('MessageBox', () => { message: 'html string', }) await rAF() - const message = document.querySelector('.el-message-box__message strong') + const message = document.querySelector('.el-message-box__message strong')! expect(message.textContent).toEqual('html string') }) @@ -104,7 +105,7 @@ describe('MessageBox', () => { title: '消息', message: '这是一段内容', distinguishCancelAndClose: true, - callback: (action) => { + callback: (action: Action) => { msgAction = action }, }) @@ -127,9 +128,9 @@ describe('MessageBox', () => { type: 'warning', }) await rAF() - await triggerNativeCompositeClick(document.querySelector(selector)) + await triggerNativeCompositeClick(document.querySelector(selector)!) await rAF() - const msgbox: HTMLElement = document.querySelector(selector) + const msgbox: HTMLElement = document.querySelector(selector)! expect(msgbox.style.display).toEqual('') expect(msgbox.querySelector('.el-icon-warning')).toBeDefined() }) @@ -142,10 +143,10 @@ describe('MessageBox', () => { await rAF() const btn = document .querySelector(selector) - .querySelector('.el-button--primary') as HTMLButtonElement + ?.querySelector('.el-button--primary') as HTMLButtonElement btn.click() await rAF() - const msgbox: HTMLElement = document.querySelector(selector) + const msgbox: HTMLElement = document.querySelector(selector)! expect(msgbox).toBe(null) }) @@ -157,7 +158,7 @@ describe('MessageBox', () => { await rAF() const btnElm = document.querySelector( '.el-message-box__btns .el-button--primary' - ) + )! const haveFocus = btnElm.isSameNode(document.activeElement) expect(haveFocus).toBe(false) }) @@ -170,10 +171,10 @@ describe('MessageBox', () => { }) await rAF() const inputElm = document - .querySelector(selector) - .querySelector('.el-message-box__input') + .querySelector(selector)! + .querySelector('.el-message-box__input')! const haveFocus = inputElm - .querySelector('input') + .querySelector('input')! .isSameNode(document.activeElement) expect(inputElm).toBeDefined() expect(haveFocus).toBe(true) @@ -186,8 +187,8 @@ describe('MessageBox', () => { }) await rAF() const textareaElm = document - .querySelector(selector) - .querySelector('textarea') + .querySelector(selector)! + .querySelector('textarea')! const haveFocus = textareaElm.isSameNode(document.activeElement) expect(haveFocus).toBe(true) }) @@ -197,7 +198,7 @@ describe('MessageBox', () => { MessageBox({ title: '消息', message: '这是一段内容', - callback: (action) => { + callback: (action: Action) => { msgAction = action }, }) @@ -239,7 +240,7 @@ describe('MessageBox', () => { test('beforeClose', async () => { let msgAction = '' MessageBox({ - callback: (action) => { + callback: (action: Action) => { msgAction = action }, title: '消息', @@ -262,7 +263,7 @@ describe('MessageBox', () => { test('resolve', async () => { let msgAction = '' MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示').then( - (action) => { + (action: Action) => { msgAction = action } ) @@ -275,6 +276,29 @@ describe('MessageBox', () => { expect(msgAction).toEqual('confirm') }) + test('resolve prompt value', async () => { + let inputValue = '' + let msgAction = '' + MessageBox.prompt('请输入内容', '提示').then(({ value, action }) => { + inputValue = value + msgAction = action + }) + await rAF() + const input = document + .querySelector(selector)! + .querySelector('.el-message-box__input input') as HTMLInputElement + input.value = 'test value' + input.dispatchEvent(new Event('input')) + await rAF() + const btn = document.querySelector( + '.el-message-box__btns .el-button--primary' + ) as HTMLButtonElement + btn.click() + await rAF() + expect(inputValue).toEqual('test value') + expect(msgAction).toEqual('confirm') + }) + test('reject', async () => { let msgAction = '' MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示').catch( @@ -312,7 +336,7 @@ describe('MessageBox', () => { title: 'append to test', message: 'append to test', }) - const msgbox: HTMLElement = document.querySelector(`body > ${selector}`) + const msgbox: HTMLElement = document.querySelector(`body > ${selector}`)! expect(msgbox).toBeDefined() }) @@ -322,7 +346,7 @@ describe('MessageBox', () => { message: 'append to test', appendTo: '.not-existing-selector', }) - const msgbox: HTMLElement = document.querySelector(`body > ${selector}`) + const msgbox: HTMLElement = document.querySelector(`body > ${selector}`)! expect(msgbox).toBeDefined() }) @@ -334,7 +358,7 @@ describe('MessageBox', () => { message: 'append to test', appendTo: htmlElement, }) - const msgbox: HTMLElement = htmlElement.querySelector(selector) + const msgbox: HTMLElement = htmlElement.querySelector(selector)! expect(msgbox).toBeDefined() }) @@ -347,7 +371,7 @@ describe('MessageBox', () => { message: 'append to test', appendTo: '.custom-html-element', }) - const msgbox: HTMLElement = htmlElement.querySelector(selector) + const msgbox: HTMLElement = htmlElement.querySelector(selector)! expect(msgbox).toBeDefined() }) }) @@ -412,7 +436,9 @@ describe('MessageBox', () => { }) await rAF() const msgbox: HTMLElement = document.querySelector(selector)! - const confirmBtn = msgbox.querySelector('.el-button--primary')! + const confirmBtn = msgbox.querySelector( + '.el-button--primary' + )! as HTMLButtonElement const error = msgbox.querySelector('.el-message-box__errormsg')! expect(inputValidator).toHaveBeenCalledTimes(0) diff --git a/packages/components/message-box/src/message-box.type.ts b/packages/components/message-box/src/message-box.type.ts index 52b209531f..4543e935e5 100644 --- a/packages/components/message-box/src/message-box.type.ts +++ b/packages/components/message-box/src/message-box.type.ts @@ -9,7 +9,7 @@ type MessageBoxButtonType = (typeof buttonTypes)[number] export type Action = 'confirm' | 'close' | 'cancel' export type MessageBoxType = '' | 'prompt' | 'alert' | 'confirm' -export type MessageBoxData = MessageBoxInputData | Action +export type MessageBoxData = MessageBoxInputData & Action export interface MessageBoxInputData { value: string action: Action