mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +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
550 lines
15 KiB
TypeScript
550 lines
15 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import WdButton from '@/uni_modules/wot-design-uni/components/wd-button/wd-button.vue'
|
|
import wdIcon from '@/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue'
|
|
import { describe, test, expect, vi, beforeEach } from 'vitest'
|
|
import { nextTick } from 'vue'
|
|
import { ButtonSize, ButtonType, ButtonOpenType, ButtonLang, ButtonScope } from '@/uni_modules/wot-design-uni/components/wd-button/types'
|
|
|
|
describe('WdButton', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
// 测试基本渲染
|
|
test('基本渲染', () => {
|
|
const wrapper = mount(WdButton)
|
|
|
|
expect(wrapper.classes()).toContain('wd-button')
|
|
expect(wrapper.classes()).toContain('is-primary')
|
|
expect(wrapper.classes()).toContain('is-medium')
|
|
expect(wrapper.classes()).toContain('is-round')
|
|
})
|
|
|
|
// 测试按钮类型
|
|
test('不同按钮类型', () => {
|
|
const types: ButtonType[] = ['primary', 'success', 'info', 'warning', 'error', 'default', 'text', 'icon']
|
|
|
|
types.forEach((type) => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { type }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain(`is-${type}`)
|
|
})
|
|
})
|
|
|
|
// 测试按钮尺寸
|
|
test('不同按钮尺寸', () => {
|
|
const sizes: ButtonSize[] = ['small', 'medium', 'large']
|
|
|
|
sizes.forEach((size) => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { size }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain(`is-${size}`)
|
|
})
|
|
})
|
|
|
|
// 测试朴素按钮
|
|
test('朴素按钮', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { plain: true }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain('is-plain')
|
|
})
|
|
|
|
// 测试圆角按钮
|
|
test('圆角按钮', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { round: true }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain('is-round')
|
|
})
|
|
|
|
// 测试细边框按钮
|
|
test('细边框按钮', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { hairline: true }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain('is-hairline')
|
|
})
|
|
|
|
// 测试块级按钮
|
|
test('块级按钮', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { block: true }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain('is-block')
|
|
})
|
|
|
|
// 测试禁用状态
|
|
test('禁用按钮', async () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { disabled: true }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain('is-disabled')
|
|
|
|
// 点击禁用按钮不应该触发事件
|
|
await wrapper.trigger('click')
|
|
|
|
expect(wrapper.emitted('click')).toBeFalsy()
|
|
})
|
|
|
|
// 测试加载状态
|
|
test('加载状态', async () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { loading: true }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain('is-loading')
|
|
expect(wrapper.find('.wd-button__loading').exists()).toBe(true)
|
|
expect(wrapper.find('.wd-button__loading-svg').exists()).toBe(true)
|
|
|
|
// 点击加载中按钮不应该触发事件
|
|
await wrapper.trigger('click')
|
|
|
|
expect(wrapper.emitted('click')).toBeFalsy()
|
|
})
|
|
|
|
// 测试自定义加载颜色
|
|
test('自定义加载颜色', async () => {
|
|
const loadingColor = '#ff0000'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
loading: true,
|
|
loadingColor
|
|
}
|
|
})
|
|
|
|
await nextTick()
|
|
|
|
// 检查加载图标样式
|
|
expect(wrapper.find('.wd-button__loading-svg').attributes('style')).toContain('background-image: url(')
|
|
})
|
|
|
|
// 测试图标按钮
|
|
test('带图标的按钮', () => {
|
|
const icon = 'add'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { icon }
|
|
})
|
|
|
|
expect(wrapper.findComponent(wdIcon).exists()).toBe(true)
|
|
expect(wrapper.findComponent(wdIcon).props('name')).toBe(icon)
|
|
})
|
|
|
|
// 测试自定义图标前缀
|
|
test('自定义图标前缀', () => {
|
|
const classPrefix = 'custom-icon'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
icon: 'add',
|
|
classPrefix
|
|
}
|
|
})
|
|
expect(wrapper.findComponent(wdIcon).props('classPrefix')).toBe(classPrefix)
|
|
})
|
|
|
|
// 测试插槽内容
|
|
test('插槽内容', () => {
|
|
const buttonText = 'Button Text'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
slots: {
|
|
default: buttonText
|
|
}
|
|
})
|
|
|
|
expect(wrapper.find('.wd-button__text').text()).toBe(buttonText)
|
|
})
|
|
|
|
// 测试点击事件
|
|
test('非禁用或加载状态下触发点击事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
|
|
await wrapper.trigger('click')
|
|
|
|
expect(wrapper.emitted('click')).toBeTruthy()
|
|
expect(wrapper.emitted('click')?.length).toBe(1)
|
|
})
|
|
|
|
// 测试自定义样式
|
|
test('自定义样式', () => {
|
|
const customStyle = 'color: red;'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { customStyle }
|
|
})
|
|
|
|
expect(wrapper.attributes('style')).toBe(customStyle)
|
|
})
|
|
|
|
// 测试自定义类名
|
|
test('自定义类名', () => {
|
|
const customClass = 'my-button'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { customClass }
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain(customClass)
|
|
})
|
|
|
|
// 测试开放能力
|
|
test('设置开放能力', () => {
|
|
const openType: ButtonOpenType = 'share'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { openType }
|
|
})
|
|
|
|
expect(wrapper.attributes('open-type')).toBe(openType)
|
|
})
|
|
|
|
// 测试禁用状态下不应用开放能力
|
|
test('禁用状态下不应用开放能力', () => {
|
|
const openType: ButtonOpenType = 'share'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
openType,
|
|
disabled: true
|
|
}
|
|
})
|
|
|
|
expect(wrapper.attributes('open-type')).toBeUndefined()
|
|
})
|
|
|
|
// 测试加载状态下不应用开放能力
|
|
test('加载状态下不应用开放能力', () => {
|
|
const openType: ButtonOpenType = 'share'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
openType,
|
|
loading: true
|
|
}
|
|
})
|
|
|
|
expect(wrapper.attributes('open-type')).toBeUndefined()
|
|
})
|
|
|
|
// 测试语言设置
|
|
test('设置语言属性', () => {
|
|
const lang: ButtonLang = 'en'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { lang }
|
|
})
|
|
|
|
expect(wrapper.attributes('lang')).toBe(lang)
|
|
})
|
|
|
|
// 测试会话来源
|
|
test('设置会话来源属性', () => {
|
|
const sessionFrom = 'test-session'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { sessionFrom }
|
|
})
|
|
|
|
expect(wrapper.attributes('session-from')).toBe(sessionFrom)
|
|
})
|
|
|
|
// 测试会话内消息卡片标题
|
|
test('设置会话内消息卡片标题属性', () => {
|
|
const sendMessageTitle = 'Message Title'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { sendMessageTitle }
|
|
})
|
|
|
|
expect(wrapper.attributes('send-message-title')).toBe(sendMessageTitle)
|
|
})
|
|
|
|
// 测试会话内消息卡片路径
|
|
test('设置会话内消息卡片路径属性', () => {
|
|
const sendMessagePath = '/pages/index/index'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { sendMessagePath }
|
|
})
|
|
|
|
expect(wrapper.attributes('send-message-path')).toBe(sendMessagePath)
|
|
})
|
|
|
|
// 测试会话内消息卡片图片
|
|
test('设置会话内消息卡片图片属性', () => {
|
|
const sendMessageImg = 'https://example.com/image.jpg'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { sendMessageImg }
|
|
})
|
|
|
|
expect(wrapper.attributes('send-message-img')).toBe(sendMessageImg)
|
|
})
|
|
|
|
// 测试 APP 参数
|
|
test('设置 APP 参数属性', () => {
|
|
const appParameter = 'app-param'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { appParameter }
|
|
})
|
|
|
|
expect(wrapper.attributes('app-parameter')).toBe(appParameter)
|
|
})
|
|
|
|
// 测试显示会话内消息卡片
|
|
test('设置显示会话内消息卡片属性', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { showMessageCard: true }
|
|
})
|
|
|
|
expect(wrapper.attributes('show-message-card')).toBe('true')
|
|
})
|
|
|
|
// 测试按钮 ID
|
|
test('设置按钮 ID 属性', () => {
|
|
const buttonId = 'test-button-id'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { buttonId }
|
|
})
|
|
|
|
expect(wrapper.attributes('id')).toBe(buttonId)
|
|
})
|
|
|
|
// 测试支付宝小程序授权范围
|
|
test('设置授权范围属性', () => {
|
|
const scope: ButtonScope = 'phoneNumber'
|
|
|
|
const wrapper = mount(WdButton, {
|
|
props: { scope }
|
|
})
|
|
|
|
expect(wrapper.attributes('scope')).toBe(scope)
|
|
})
|
|
|
|
// 测试阻止祖先节点点击态
|
|
test('设置阻止祖先节点点击态属性', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { hoverStopPropagation: true }
|
|
})
|
|
|
|
expect(wrapper.attributes('hover-stop-propagation')).toBe('true')
|
|
})
|
|
|
|
// 测试 hover 类名
|
|
test('设置 hover 类名', () => {
|
|
const wrapper = mount(WdButton)
|
|
|
|
expect(wrapper.attributes('hover-class')).toBe('wd-button--active')
|
|
})
|
|
|
|
// 测试禁用状态下不应用 hover 类名
|
|
test('禁用状态下不应用 hover 类名', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { disabled: true }
|
|
})
|
|
|
|
expect(wrapper.attributes('hover-class')).toBe('')
|
|
})
|
|
|
|
// 测试加载状态下不应用 hover 类名
|
|
test('加载状态下不应用 hover 类名', () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: { loading: true }
|
|
})
|
|
|
|
expect(wrapper.attributes('hover-class')).toBe('')
|
|
})
|
|
|
|
// 测试 hover 开始时间
|
|
test('设置 hover 开始时间属性', () => {
|
|
const wrapper = mount(WdButton)
|
|
|
|
expect(wrapper.attributes('hover-start-time')).toBe('20')
|
|
})
|
|
|
|
// 测试 hover 停留时间
|
|
test('设置 hover 停留时间属性', () => {
|
|
const wrapper = mount(WdButton)
|
|
|
|
expect(wrapper.attributes('hover-stay-time')).toBe('70')
|
|
})
|
|
|
|
// 测试获取用户信息事件
|
|
test('触发获取用户信息事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { userInfo: { nickName: 'Test User' } }
|
|
|
|
await wrapper.trigger('getuserinfo', { detail })
|
|
|
|
expect(wrapper.emitted('getuserinfo')).toBeTruthy()
|
|
const getuserinfoEvent = wrapper.emitted('getuserinfo')
|
|
expect(getuserinfoEvent && getuserinfoEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试客服会话事件
|
|
test('触发客服会话事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { path: '/pages/index/index' }
|
|
|
|
await wrapper.trigger('contact', { detail })
|
|
|
|
expect(wrapper.emitted('contact')).toBeTruthy()
|
|
const contactEvent = wrapper.emitted('contact')
|
|
expect(contactEvent && contactEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试获取手机号事件
|
|
test('触发获取手机号事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { phoneNumber: '12345678901' }
|
|
|
|
await wrapper.trigger('getphonenumber', { detail })
|
|
|
|
expect(wrapper.emitted('getphonenumber')).toBeTruthy()
|
|
const getphonenumberEvent = wrapper.emitted('getphonenumber')
|
|
expect(getphonenumberEvent && getphonenumberEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试错误事件
|
|
test('触发错误事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { errMsg: 'Error message' }
|
|
|
|
await wrapper.trigger('error', { detail })
|
|
|
|
expect(wrapper.emitted('error')).toBeTruthy()
|
|
const errorEvent = wrapper.emitted('error')
|
|
expect(errorEvent && errorEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试打开 APP 事件
|
|
test('触发打开 APP 事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { errMsg: 'launchApp:ok' }
|
|
|
|
await wrapper.trigger('launchapp', { detail })
|
|
|
|
expect(wrapper.emitted('launchapp')).toBeTruthy()
|
|
const launchappEvent = wrapper.emitted('launchapp')
|
|
expect(launchappEvent && launchappEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试打开设置页面事件
|
|
test('触发打开设置页面事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { authSetting: {} }
|
|
|
|
await wrapper.trigger('opensetting', { detail })
|
|
|
|
expect(wrapper.emitted('opensetting')).toBeTruthy()
|
|
const opensettingEvent = wrapper.emitted('opensetting')
|
|
expect(opensettingEvent && opensettingEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试选择头像事件
|
|
test('触发选择头像事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { avatarUrl: 'https://example.com/avatar.jpg' }
|
|
|
|
await wrapper.trigger('chooseavatar', { detail })
|
|
|
|
expect(wrapper.emitted('chooseavatar')).toBeTruthy()
|
|
const chooseavatarEvent = wrapper.emitted('chooseavatar')
|
|
expect(chooseavatarEvent && chooseavatarEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试同意隐私授权事件
|
|
test('触发同意隐私授权事件', async () => {
|
|
const wrapper = mount(WdButton)
|
|
const detail = { errMsg: 'agree:ok' }
|
|
|
|
await wrapper.trigger('agreeprivacyauthorization', { detail })
|
|
|
|
expect(wrapper.emitted('agreeprivacyauthorization')).toBeTruthy()
|
|
const agreeprivacyauthorizationEvent = wrapper.emitted('agreeprivacyauthorization')
|
|
expect(agreeprivacyauthorizationEvent && agreeprivacyauthorizationEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试支付宝小程序授权 - 手机号
|
|
test('处理手机号授权事件', async () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
scope: 'phoneNumber'
|
|
}
|
|
})
|
|
|
|
const detail = { phoneNumber: '12345678901' }
|
|
|
|
await wrapper.trigger('getAuthorize', { detail })
|
|
|
|
expect(wrapper.emitted('getphonenumber')).toBeTruthy()
|
|
const getphonenumberEvent = wrapper.emitted('getphonenumber')
|
|
expect(getphonenumberEvent && getphonenumberEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试支付宝小程序授权 - 用户信息
|
|
test('处理用户信息授权事件', async () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
scope: 'userInfo'
|
|
}
|
|
})
|
|
|
|
const detail = { userInfo: { nickName: 'Test User' } }
|
|
|
|
await wrapper.trigger('getAuthorize', { detail })
|
|
|
|
expect(wrapper.emitted('getuserinfo')).toBeTruthy()
|
|
const getuserinfoEvent = wrapper.emitted('getuserinfo')
|
|
expect(getuserinfoEvent && getuserinfoEvent[0][0]).toEqual(detail)
|
|
})
|
|
|
|
// 测试加载图标构建
|
|
test('不同类型的加载图标构建', async () => {
|
|
const types: ButtonType[] = ['primary', 'success', 'info', 'warning', 'error', 'default']
|
|
|
|
for (const type of types) {
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
type,
|
|
loading: true
|
|
}
|
|
})
|
|
|
|
await nextTick()
|
|
|
|
// 检查加载图标是否构建成功
|
|
expect(wrapper.find('.wd-button__loading-svg').attributes('style')).toContain('background-image: url(')
|
|
}
|
|
})
|
|
|
|
// 测试朴素按钮的加载图标
|
|
test('朴素按钮的加载图标构建', async () => {
|
|
const wrapper = mount(WdButton, {
|
|
props: {
|
|
plain: true,
|
|
loading: true
|
|
}
|
|
})
|
|
|
|
await nextTick()
|
|
|
|
// 检查加载图标是否构建成功
|
|
expect(wrapper.find('.wd-button__loading-svg').attributes('style')).toContain('background-image: url(')
|
|
})
|
|
})
|