mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
7e84c5c91f
* chore: 🚀 引入vitest做组件测试 * chore: 🚀 引入vitest做组件测试 * chore: 🚀 update workflow * chore: 🚀 update workflow * chore: 🚀 update workflow * chore: 🚀 update workflow * chore: 🚀 update nodejs version * chore: 🚀 update nodejs version
1013 lines
28 KiB
TypeScript
1013 lines
28 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
||
import '../mocks/wd-transition.mock'
|
||
import WdMessageBox from '@/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue'
|
||
import { describe, test, expect, vi } from 'vitest'
|
||
import { nextTick, defineComponent } from 'vue'
|
||
import WdPopup from '@/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue'
|
||
import WdButton from '@/uni_modules/wot-design-uni/components/wd-button/wd-button.vue'
|
||
import WdInput from '@/uni_modules/wot-design-uni/components/wd-input/wd-input.vue'
|
||
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
|
||
|
||
const globalComponents = {
|
||
WdPopup,
|
||
WdButton,
|
||
WdInput,
|
||
WdMessageBox
|
||
}
|
||
|
||
// 创建一个测试组件，使用 useMessageBox
|
||
const TestComponent = defineComponent({
|
||
props: {
|
||
// 添加回调函数作为 props，方便测试
|
||
onConfirm: {
|
||
type: Function,
|
||
default: () => {}
|
||
},
|
||
onCancel: {
|
||
type: Function,
|
||
default: () => {}
|
||
}
|
||
},
|
||
setup(props) {
|
||
const messageBox = useMessage()
|
||
|
||
// 暴露 messageBox 方法供测试使用
|
||
return {
|
||
messageBox,
|
||
props
|
||
}
|
||
},
|
||
template: `
|
||
<div>
|
||
<wd-message-box></wd-message-box>
|
||
</div>
|
||
`
|
||
})
|
||
|
||
describe('WdMessageBox with useMessageBox', () => {
|
||
// 测试基本渲染和 alert 方法
|
||
test('渲染消息框并显示提示', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 确认组件已渲染
|
||
expect(wrapper.findComponent(WdMessageBox).exists()).toBe(true)
|
||
|
||
// 使用 alert 方法显示消息框
|
||
const alertPromise = wrapper.vm.messageBox.alert('这是一条提示消息')
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.props('selector')).toBe('')
|
||
|
||
// 检查内容是否正确
|
||
expect(messageBox.text()).toContain('这是一条提示消息')
|
||
|
||
// 点击确认按钮
|
||
await messageBox.findComponent(WdButton).trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await alertPromise.catch(() => null)
|
||
expect(result).toEqual({ action: 'confirm', value: '' })
|
||
})
|
||
|
||
// 测试 confirm 方法
|
||
test('显示确认对话框并处理确认操作', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示确认框
|
||
const confirmPromise = wrapper.vm.messageBox.confirm({
|
||
title: '确认操作',
|
||
msg: '确定要执行此操作吗？'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
|
||
// 检查内容是否正确
|
||
expect(messageBox.text()).toContain('确认操作')
|
||
expect(messageBox.text()).toContain('确定要执行此操作吗？')
|
||
|
||
// 检查是否显示取消按钮
|
||
const buttons = messageBox.findAllComponents(WdButton)
|
||
expect(buttons.length).toBe(2)
|
||
|
||
// 点击确认按钮
|
||
await buttons[1].trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await confirmPromise
|
||
expect(result).toEqual({ action: 'confirm', value: '' })
|
||
})
|
||
|
||
// 测试 confirm 方法的取消操作
|
||
test('显示确认对话框并处理取消操作', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示确认框
|
||
const confirmPromise = wrapper.vm.messageBox.confirm('确定要取消吗？')
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
|
||
// 检查内容是否正确
|
||
expect(messageBox.text()).toContain('确定要取消吗？')
|
||
|
||
// 点击取消按钮
|
||
const buttons = messageBox.findAllComponents(WdButton)
|
||
await buttons[0].trigger('click')
|
||
|
||
// 等待 Promise 拒绝
|
||
try {
|
||
await confirmPromise
|
||
// 如果 Promise 解析，测试应该失败
|
||
expect(true).toBe(false)
|
||
} catch (error) {
|
||
expect(error).toEqual({ action: 'cancel' })
|
||
}
|
||
})
|
||
|
||
// 测试 prompt 方法
|
||
test('显示输入对话框并处理输入', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框
|
||
const promptPromise = wrapper.vm.messageBox.prompt({
|
||
title: '请输入',
|
||
msg: '请输入您的姓名',
|
||
inputValue: '',
|
||
inputPlaceholder: '姓名'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
|
||
// 检查内容是否正确
|
||
expect(messageBox.text()).toContain('请输入')
|
||
expect(messageBox.text()).toContain('请输入您的姓名')
|
||
|
||
// 检查是否显示输入框
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
|
||
// 输入内容
|
||
await input.setValue('张三')
|
||
|
||
// 点击确认按钮
|
||
const buttons = messageBox.findAllComponents(WdButton)
|
||
await buttons[1].trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await promptPromise
|
||
expect(result).toEqual({ action: 'confirm', value: '张三' })
|
||
})
|
||
|
||
// 测试自定义样式
|
||
test('使用useMessageBox应用自定义样式', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框
|
||
wrapper.vm.messageBox.alert({
|
||
title: '提示',
|
||
msg: '这是一条消息'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查标题和消息是否正确
|
||
expect(messageBox.text()).toContain('提示')
|
||
expect(messageBox.text()).toContain('这是一条消息')
|
||
})
|
||
|
||
// 测试标题和内容
|
||
test('渲染标题和消息', async () => {
|
||
const title = '提示'
|
||
const msg = '这是一条消息'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框，并设置标题和消息
|
||
wrapper.vm.messageBox.alert({
|
||
title,
|
||
msg
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查标题和消息是否正确显示
|
||
const messageBoxHtml = messageBox.html()
|
||
expect(messageBoxHtml).toContain(title)
|
||
expect(messageBoxHtml).toContain(msg)
|
||
})
|
||
|
||
// 测试按钮文本
|
||
test('渲染自定义按钮文本', async () => {
|
||
const confirmButtonText = '自定义确定'
|
||
const cancelButtonText = '自定义取消'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框，并设置自定义按钮文本
|
||
wrapper.vm.messageBox.confirm({
|
||
title: '提示',
|
||
msg: '这是一条消息',
|
||
confirmButtonText,
|
||
cancelButtonText
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查按钮文本是否正确显示
|
||
const buttons = messageBox.findAllComponents(WdButton)
|
||
expect(buttons.length).toBe(2)
|
||
expect(buttons[1].text()).toContain(confirmButtonText)
|
||
expect(buttons[0].text()).toContain(cancelButtonText)
|
||
})
|
||
|
||
// 测试按钮事件 - 确认
|
||
test('处理确认按钮点击', async () => {
|
||
const onConfirm = vi.fn()
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
props: {
|
||
onConfirm
|
||
},
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框
|
||
const alertPromise = wrapper.vm.messageBox.alert('确认消息')
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 找到确认按钮并点击
|
||
const confirmButton = messageBox.findComponent(WdButton)
|
||
await confirmButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await alertPromise
|
||
|
||
// 验证结果
|
||
expect(result).toEqual({ action: 'confirm', value: '' })
|
||
})
|
||
|
||
// 测试按钮事件 - 取消
|
||
test('处理取消按钮点击', async () => {
|
||
const onCancel = vi.fn()
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
props: {
|
||
onCancel
|
||
},
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框
|
||
const confirmPromise = wrapper.vm.messageBox.confirm('取消消息')
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 找到取消按钮并点击
|
||
const buttons = messageBox.findAllComponents(WdButton)
|
||
expect(buttons.length).toBe(2)
|
||
await buttons[0].trigger('click')
|
||
|
||
// 等待 Promise 拒绝
|
||
try {
|
||
await confirmPromise
|
||
// 如果 Promise 解析，测试应该失败
|
||
expect(true).toBe(false)
|
||
} catch (error) {
|
||
expect(error).toEqual({ action: 'cancel' })
|
||
}
|
||
})
|
||
|
||
// 测试点击蒙层
|
||
test('处理蒙层点击', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框，允许点击蒙层关闭
|
||
const confirmPromise = wrapper.vm.messageBox.confirm({
|
||
title: '提示',
|
||
msg: '点击蒙层关闭',
|
||
closeOnClickModal: true
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 模拟点击蒙层
|
||
messageBox.findComponent(WdPopup).vm.$emit('click-modal')
|
||
await nextTick() // 等待更新
|
||
|
||
// 等待 Promise 拒绝
|
||
try {
|
||
await confirmPromise
|
||
// 如果 Promise 解析，测试应该失败
|
||
expect(true).toBe(false)
|
||
} catch (error) {
|
||
expect(error).toEqual({ action: 'modal' })
|
||
}
|
||
})
|
||
|
||
// 测试禁用点击蒙层关闭
|
||
test('closeOnClickModal为false时不关闭', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框，禁止点击蒙层关闭
|
||
const confirmPromise = wrapper.vm.messageBox.confirm({
|
||
title: '提示',
|
||
msg: '禁止点击蒙层关闭',
|
||
closeOnClickModal: false
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 模拟点击蒙层
|
||
messageBox.findComponent(WdPopup).vm.$emit('click-modal')
|
||
await nextTick() // 等待更新
|
||
|
||
// 消息框应该仍然显示，可以通过检查 DOM 来验证
|
||
expect(messageBox.isVisible()).toBe(true)
|
||
|
||
// 点击确认按钮关闭消息框
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await confirmPromise
|
||
expect(result).toEqual({ action: 'confirm', value: '' })
|
||
})
|
||
|
||
// 测试 Prompt 类型
|
||
test('渲染输入框类型', async () => {
|
||
const inputType = 'text'
|
||
const inputValue = 'test'
|
||
const inputPlaceholder = '请输入内容'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框
|
||
wrapper.vm.messageBox.prompt({
|
||
title: '请输入',
|
||
msg: '请输入内容',
|
||
inputType,
|
||
inputValue,
|
||
inputPlaceholder
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查输入框是否正确显示
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
expect(input.props('type')).toBe(inputType)
|
||
expect(input.props('modelValue')).toBe(inputValue)
|
||
expect(input.props('placeholder')).toBe(inputPlaceholder)
|
||
})
|
||
|
||
// 测试输入框校验 - 正则表达式
|
||
test('使用正则表达式验证输入', async () => {
|
||
const inputPattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
|
||
const inputError = '请输入正确的邮箱格式'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框，并设置校验规则
|
||
const promptPromise = wrapper.vm.messageBox.prompt({
|
||
title: '请输入邮箱',
|
||
msg: '请输入有效的邮箱地址',
|
||
inputPattern,
|
||
inputError,
|
||
inputValue: 'invalid-email' // 初始值是无效的
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查输入框是否正确显示
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
|
||
// 点击确认按钮，应该显示错误信息
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
await nextTick()
|
||
|
||
// 检查错误信息是否显示
|
||
expect(messageBox.html()).toContain(inputError)
|
||
|
||
// 修改输入值为有效值
|
||
input.vm.$emit('update:modelValue', 'test@example.com')
|
||
await nextTick()
|
||
|
||
// 再次点击确认按钮，应该关闭消息框
|
||
await confirmButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await promptPromise
|
||
expect(result).toEqual({ action: 'confirm', value: 'test@example.com' })
|
||
})
|
||
|
||
// 测试输入框校验 - 自定义校验函数
|
||
test('validates input with custom function', async () => {
|
||
// 创建自定义校验函数，只有当值为 'valid' 时才返回 true
|
||
const inputValidate = vi.fn((value) => {
|
||
return value === 'valid'
|
||
})
|
||
const inputError = '请输入 "valid"'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框，并设置自定义校验函数
|
||
const promptPromise = wrapper.vm.messageBox.prompt({
|
||
title: '请输入',
|
||
msg: '请输入 "valid"',
|
||
inputValidate,
|
||
inputError,
|
||
inputValue: 'invalid' // 初始值是无效的
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查输入框是否正确显示
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
|
||
// 点击确认按钮，应该显示错误信息
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
await nextTick()
|
||
|
||
// 验证校验函数被调用
|
||
expect(inputValidate).toHaveBeenCalled()
|
||
|
||
// 检查错误信息是否显示
|
||
expect(messageBox.html()).toContain(inputError)
|
||
|
||
// 修改输入值为有效值
|
||
input.vm.$emit('update:modelValue', 'valid')
|
||
await nextTick()
|
||
|
||
// 再次点击确认按钮，应该关闭消息框
|
||
await confirmButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await promptPromise
|
||
expect(result).toEqual({ action: 'confirm', value: 'valid' })
|
||
})
|
||
|
||
// 测试确认前钩子
|
||
test('handles beforeConfirm hook', async () => {
|
||
// 创建 beforeConfirm 钩子函数，接受输入并返回 true
|
||
const beforeConfirm = vi.fn(({ resolve }) => {
|
||
// 模拟异步操作
|
||
setTimeout(() => {
|
||
resolve(true)
|
||
}, 0)
|
||
})
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框，并设置 beforeConfirm 钩子
|
||
const confirmPromise = wrapper.vm.messageBox.confirm({
|
||
title: '确认操作',
|
||
msg: '确定要执行此操作吗？',
|
||
beforeConfirm
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 点击确认按钮，应该触发 beforeConfirm 钩子
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
|
||
// 验证 beforeConfirm 被调用
|
||
expect(beforeConfirm).toHaveBeenCalled()
|
||
|
||
// 等待 Promise 解析
|
||
const result = await confirmPromise
|
||
expect(result).toEqual({ action: 'confirm', value: '' })
|
||
})
|
||
|
||
// 测试确认前钩子 - 拒绝确认
|
||
test('handles beforeConfirm hook rejection', async () => {
|
||
// 创建 beforeConfirm 钩子函数，拒绝确认
|
||
const beforeConfirm = vi.fn(({ resolve }) => {
|
||
// 模拟异步操作
|
||
setTimeout(() => {
|
||
resolve(false)
|
||
}, 0)
|
||
})
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框，并设置 beforeConfirm 钩子
|
||
wrapper.vm.messageBox.confirm({
|
||
title: '确认操作',
|
||
msg: '确定要执行此操作吗？',
|
||
beforeConfirm
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 点击确认按钮，应该触发 beforeConfirm 钩子
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
|
||
// 验证 beforeConfirm 被调用
|
||
expect(beforeConfirm).toHaveBeenCalled()
|
||
|
||
// 消息框应该仍然显示，可以通过检查 DOM 来验证
|
||
await nextTick()
|
||
expect(messageBox.isVisible()).toBe(true)
|
||
|
||
// 再次点击确认按钮，应该再次触发 beforeConfirm 钩子
|
||
await confirmButton.trigger('click')
|
||
expect(beforeConfirm).toHaveBeenCalledTimes(2)
|
||
})
|
||
|
||
// 测试自定义按钮属性
|
||
test('applies custom button props', async () => {
|
||
const confirmButtonProps = {
|
||
type: 'success' as const, // 使用 const 断言修复类型错误
|
||
customClass: 'custom-confirm'
|
||
}
|
||
const cancelButtonProps = {
|
||
type: 'error' as const, // 使用 const 断言修复类型错误
|
||
customClass: 'custom-cancel'
|
||
}
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 confirm 方法显示消息框，并设置自定义按钮属性
|
||
wrapper.vm.messageBox.confirm({
|
||
title: '提示',
|
||
msg: '这是一条消息',
|
||
confirmButtonProps,
|
||
cancelButtonProps
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查按钮是否应用了自定义属性
|
||
const buttons = messageBox.findAllComponents(WdButton)
|
||
expect(buttons.length).toBe(2)
|
||
|
||
// 确认按钮应该有 success 类型和自定义类名
|
||
expect(buttons[1].props('type')).toBe(confirmButtonProps.type)
|
||
expect(buttons[1].classes()).toContain(confirmButtonProps.customClass)
|
||
|
||
// 取消按钮应该有 error 类型和自定义类名
|
||
expect(buttons[0].props('type')).toBe(cancelButtonProps.type)
|
||
expect(buttons[0].classes()).toContain(cancelButtonProps.customClass)
|
||
})
|
||
|
||
// 测试插槽功能
|
||
test('renders custom content', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框，并设置自定义内容
|
||
wrapper.vm.messageBox.alert({
|
||
title: '提示',
|
||
msg: '<div class="custom-content">自定义内容</div>'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查自定义内容是否正确显示
|
||
expect(messageBox.html()).toContain('custom-content')
|
||
expect(messageBox.html()).toContain('自定义内容')
|
||
})
|
||
|
||
// 测试 selector 属性
|
||
test('applies selector prop', async () => {
|
||
// 注意：由于 useMessageBox 的实现，selector 属性可能不会直接传递给组件
|
||
// 这个测试主要是确保 messageBox 能够正常工作
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框
|
||
wrapper.vm.messageBox.alert({
|
||
title: '提示',
|
||
msg: '这是一条消息'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查 selector 属性是否存在（默认为空字符串）
|
||
expect(messageBox.props('selector')).toBe('')
|
||
})
|
||
|
||
// 测试 z-index 属性
|
||
test('applies z-index', async () => {
|
||
const zIndex = 1000
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框，并设置 z-index
|
||
wrapper.vm.messageBox.alert({
|
||
title: '提示',
|
||
msg: '这是一条消息',
|
||
zIndex
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查 z-index 是否正确应用到 popup 组件
|
||
const popup = messageBox.findComponent(WdPopup)
|
||
expect(popup.props('zIndex')).toBe(zIndex)
|
||
})
|
||
|
||
// 测试懒渲染
|
||
test('applies lazy render', async () => {
|
||
const lazyRender = true
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 alert 方法显示消息框，并设置 lazyRender
|
||
wrapper.vm.messageBox.alert({
|
||
title: '提示',
|
||
msg: '这是一条消息',
|
||
lazyRender
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查 lazyRender 是否正确应用到 popup 组件
|
||
const popup = messageBox.findComponent(WdPopup)
|
||
expect(popup.props('lazyRender')).toBe(lazyRender)
|
||
})
|
||
|
||
// 测试输入框大小
|
||
test('applies input size', async () => {
|
||
const inputSize = 'large'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框，并设置 inputSize
|
||
wrapper.vm.messageBox.prompt({
|
||
title: '请输入',
|
||
msg: '请输入内容',
|
||
inputSize
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查输入框是否正确显示
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
expect(input.props('size')).toBe(inputSize)
|
||
})
|
||
|
||
// 测试输入值变化
|
||
test('handles input value change', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框
|
||
const promptPromise = wrapper.vm.messageBox.prompt({
|
||
title: '请输入',
|
||
msg: '请输入内容',
|
||
inputValue: 'initial value'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查输入框是否正确显示
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
expect(input.props('modelValue')).toBe('initial value')
|
||
|
||
// 修改输入值
|
||
input.vm.$emit('update:modelValue', 'new value')
|
||
await nextTick()
|
||
|
||
// 点击确认按钮
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await promptPromise
|
||
expect(result).toEqual({ action: 'confirm', value: 'new value' })
|
||
})
|
||
|
||
// 测试空输入值清除错误
|
||
test('clears error when input is empty', async () => {
|
||
// 创建自定义校验函数，只有当值不为空时才返回 true
|
||
const inputValidate = vi.fn((value) => {
|
||
return value !== ''
|
||
})
|
||
const inputError = '请输入内容'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框，并设置自定义校验函数
|
||
const promptPromise = wrapper.vm.messageBox.prompt({
|
||
title: '请输入',
|
||
msg: '请输入内容',
|
||
inputValidate,
|
||
inputError,
|
||
inputValue: '' // 初始值是空的
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 检查输入框是否正确显示
|
||
const input = messageBox.findComponent(WdInput)
|
||
expect(input.exists()).toBe(true)
|
||
|
||
// 点击确认按钮，应该显示错误信息
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
await nextTick()
|
||
|
||
// 检查错误信息是否显示
|
||
expect(messageBox.html()).toContain(inputError)
|
||
|
||
// 修改输入值为非空值
|
||
input.vm.$emit('update:modelValue', 'new value')
|
||
await nextTick()
|
||
|
||
// 再次点击确认按钮，应该关闭消息框
|
||
await confirmButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
const result = await promptPromise
|
||
expect(result).toEqual({ action: 'confirm', value: 'new value' })
|
||
})
|
||
|
||
// 测试多次调用 messageBox
|
||
test('can be called multiple times', async () => {
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 第一次调用 alert 方法
|
||
const alertPromise1 = wrapper.vm.messageBox.alert('第一条消息')
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
let messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
expect(messageBox.text()).toContain('第一条消息')
|
||
|
||
// 点击确认按钮关闭第一个消息框
|
||
await messageBox.findComponent(WdButton).trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
await alertPromise1
|
||
|
||
// 第二次调用 alert 方法
|
||
const alertPromise2 = wrapper.vm.messageBox.alert('第二条消息')
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
expect(messageBox.text()).toContain('第二条消息')
|
||
|
||
// 点击确认按钮关闭第二个消息框
|
||
await messageBox.findComponent(WdButton).trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
await alertPromise2
|
||
})
|
||
|
||
// 测试关闭时重置错误
|
||
test('resets error when closed', async () => {
|
||
// 创建自定义校验函数，始终返回 false
|
||
const inputValidate = vi.fn(() => false)
|
||
const inputError = '输入错误'
|
||
|
||
const wrapper = mount(TestComponent, {
|
||
global: {
|
||
components: globalComponents
|
||
}
|
||
})
|
||
|
||
// 使用 prompt 方法显示输入框，并设置自定义校验函数
|
||
const promptPromise = wrapper.vm.messageBox
|
||
.prompt({
|
||
title: '请输入',
|
||
msg: '请输入内容',
|
||
inputValidate,
|
||
inputError
|
||
})
|
||
.catch(() => null) // 捕获错误，避免测试失败
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示
|
||
const messageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(messageBox.exists()).toBe(true)
|
||
|
||
// 点击确认按钮，应该显示错误信息
|
||
const confirmButton = messageBox.findAllComponents(WdButton)[1]
|
||
await confirmButton.trigger('click')
|
||
await nextTick()
|
||
|
||
// 检查错误信息是否显示
|
||
expect(messageBox.html()).toContain(inputError)
|
||
|
||
// 点击取消按钮关闭消息框
|
||
const cancelButton = messageBox.findAllComponents(WdButton)[0]
|
||
await cancelButton.trigger('click')
|
||
|
||
// 等待 Promise 解析
|
||
await promptPromise
|
||
|
||
// 再次使用 prompt 方法显示输入框
|
||
wrapper.vm.messageBox.prompt({
|
||
title: '请再次输入',
|
||
msg: '请输入内容'
|
||
})
|
||
|
||
await nextTick()
|
||
|
||
// 检查消息框是否显示，且错误信息应该被重置
|
||
const newMessageBox = wrapper.findComponent(WdMessageBox)
|
||
expect(newMessageBox.exists()).toBe(true)
|
||
expect(newMessageBox.html()).not.toContain(inputError)
|
||
})
|
||
})
|