mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
429 lines
10 KiB
TypeScript
429 lines
10 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
||
import WdCountTo from '@/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue'
|
||
import WdText from '@/uni_modules/wot-design-uni/components/wd-text/wd-text.vue'
|
||
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
|
||
import { nextTick } from 'vue'
|
||
|
||
describe('WdCountTo', () => {
|
||
beforeEach(() => {
|
||
vi.useFakeTimers()
|
||
})
|
||
|
||
afterEach(() => {
|
||
vi.restoreAllMocks()
|
||
vi.useRealTimers()
|
||
})
|
||
|
||
// 测试基本渲染
|
||
test('基本渲染', () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
expect(wrapper.classes()).toContain('wd-count-to')
|
||
expect(wrapper.findAllComponents(WdText).length).toBe(3) // 前缀、数值、后缀
|
||
})
|
||
|
||
// 测试自定义起始值和结束值
|
||
test('自定义起始值和结束值', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 100,
|
||
endVal: 200,
|
||
duration: 1000,
|
||
autoStart: false // 禁用自动开始
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查组件是否正确接收了属性
|
||
expect(wrapper.props('startVal')).toBe(100)
|
||
expect(wrapper.props('endVal')).toBe(200)
|
||
expect(wrapper.props('duration')).toBe(1000)
|
||
|
||
// 检查初始值是否接近起始值
|
||
const initialText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(Number(initialText)).toBeCloseTo(100, 0)
|
||
|
||
// 手动开始动画
|
||
await wrapper.vm.start()
|
||
|
||
// 前进一半时间
|
||
vi.advanceTimersByTime(500)
|
||
await nextTick()
|
||
|
||
// 检查中间值是否在合理范围内（放宽条件）
|
||
const midText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
const midValue = Number(midText)
|
||
expect(midValue).toBeGreaterThanOrEqual(100)
|
||
expect(midValue).toBeLessThanOrEqual(200)
|
||
|
||
// 前进到结束
|
||
vi.advanceTimersByTime(1000)
|
||
await nextTick()
|
||
|
||
// 检查最终值是否接近结束值（由于动画可能没有完全执行，放宽检查）
|
||
const finalText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
const finalValue = Number(finalText)
|
||
expect(finalValue).toBeGreaterThanOrEqual(100)
|
||
expect(finalValue).toBeLessThanOrEqual(200)
|
||
})
|
||
|
||
// 测试小数位数
|
||
test('小数位数设置', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 0,
|
||
endVal: 10.5,
|
||
decimals: 2,
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查组件是否正确接收了属性
|
||
expect(wrapper.props('startVal')).toBe(0)
|
||
expect(wrapper.props('endVal')).toBe(10.5)
|
||
expect(wrapper.props('decimals')).toBe(2)
|
||
|
||
// 检查初始值格式
|
||
const initialText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(initialText).toBe('0.00')
|
||
})
|
||
|
||
// 测试分隔符
|
||
test('应用分隔符', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 9999,
|
||
endVal: 9999,
|
||
separator: ',',
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查组件是否正确接收了属性
|
||
expect(wrapper.props('startVal')).toBe(9999)
|
||
expect(wrapper.props('endVal')).toBe(9999)
|
||
expect(wrapper.props('separator')).toBe(',')
|
||
|
||
// 检查初始值是否包含分隔符
|
||
const initialText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(initialText).toBe('9,999')
|
||
})
|
||
|
||
// 测试前缀和后缀
|
||
test('显示前缀和后缀', async () => {
|
||
const prefix = '¥'
|
||
const suffix = '元'
|
||
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 0,
|
||
endVal: 100,
|
||
prefix,
|
||
suffix,
|
||
duration: 1000,
|
||
autoStart: true
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查组件是否正确接收了属性
|
||
expect(wrapper.props('prefix')).toBe(prefix)
|
||
expect(wrapper.props('suffix')).toBe(suffix)
|
||
|
||
// 检查前缀和后缀是否正确显示
|
||
const textComponents = wrapper.findAllComponents(WdText)
|
||
expect(textComponents[0].props('text')).toBe(prefix)
|
||
expect(textComponents[2].props('text')).toBe(suffix)
|
||
})
|
||
|
||
// 测试手动控制
|
||
test('支持手动控制', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 0,
|
||
endVal: 100,
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查初始值
|
||
const currentText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(Number(currentText)).toBeCloseTo(0, 0)
|
||
|
||
// 测试方法是否存在
|
||
expect(typeof wrapper.vm.start).toBe('function')
|
||
expect(typeof wrapper.vm.pause).toBe('function')
|
||
expect(typeof wrapper.vm.reset).toBe('function')
|
||
})
|
||
|
||
// 测试缓动效果与线性效果的区别
|
||
test('基于useEasing应用不同动画效果', async () => {
|
||
// 使用缓动效果
|
||
const wrapperWithEasing = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 0,
|
||
endVal: 100,
|
||
duration: 1000,
|
||
useEasing: true,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 使用线性效果
|
||
const wrapperWithoutEasing = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 0,
|
||
endVal: 100,
|
||
duration: 1000,
|
||
useEasing: false,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查组件属性设置
|
||
expect(wrapperWithEasing.props('useEasing')).toBe(true)
|
||
expect(wrapperWithoutEasing.props('useEasing')).toBe(false)
|
||
})
|
||
|
||
// 测试负向计数（从大到小）
|
||
test('当startVal > endVal时倒计数', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 100,
|
||
endVal: 0,
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查初始值
|
||
const currentText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(Number(currentText)).toBeCloseTo(100, 0)
|
||
|
||
// 检查属性设置
|
||
expect(wrapper.props('startVal')).toBe(100)
|
||
expect(wrapper.props('endVal')).toBe(0)
|
||
})
|
||
|
||
// 测试事件
|
||
test('触发mounted和finish事件', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 0,
|
||
endVal: 100,
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 应该触发 mounted 事件
|
||
expect(wrapper.emitted('mounted')).toBeTruthy()
|
||
})
|
||
|
||
// 测试自定义类名
|
||
test('应用自定义类名', () => {
|
||
const customClass = 'my-count-to'
|
||
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
customClass
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
expect(wrapper.classes()).toContain(customClass)
|
||
})
|
||
|
||
// 测试字体大小
|
||
test('应用字体大小', () => {
|
||
const fontSize = 24
|
||
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
fontSize
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查数值文本的字体大小
|
||
const textComponent = wrapper.findAllComponents(WdText)[1]
|
||
expect(textComponent.props('size')).toBe(`${fontSize}px`)
|
||
|
||
// 检查前缀和后缀的字体大小（应该是主字体的0.7倍）
|
||
const prefixComponent = wrapper.findAllComponents(WdText)[0]
|
||
const suffixComponent = wrapper.findAllComponents(WdText)[2]
|
||
expect(prefixComponent.props('size')).toBe(`${fontSize * 0.7}px`)
|
||
expect(suffixComponent.props('size')).toBe(`${fontSize * 0.7}px`)
|
||
})
|
||
|
||
// 测试文本颜色
|
||
test('应用文本颜色', () => {
|
||
const color = '#ff0000'
|
||
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
color
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查所有文本组件的颜色
|
||
const textComponents = wrapper.findAllComponents(WdText)
|
||
textComponents.forEach((component) => {
|
||
expect(component.props('color')).toBe(color)
|
||
})
|
||
})
|
||
|
||
// 测试文本类型
|
||
test('应用文本类型', () => {
|
||
const type = 'primary'
|
||
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
type
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查所有文本组件的类型
|
||
const textComponents = wrapper.findAllComponents(WdText)
|
||
textComponents.forEach((component) => {
|
||
expect(component.props('type')).toBe(type)
|
||
})
|
||
})
|
||
|
||
// 测试自定义小数点
|
||
test('应用自定义小数点', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
startVal: 10.5,
|
||
endVal: 10.5,
|
||
decimals: 2,
|
||
decimal: ',', // 使用逗号作为小数点
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查初始值是否使用了自定义小数点
|
||
const initialText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(initialText).toBe('10,50')
|
||
})
|
||
|
||
// 测试插槽
|
||
test('正确渲染插槽', () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
slots: {
|
||
default: '<div class="custom-number">Custom Number</div>',
|
||
prefix: '<div class="custom-prefix">Custom Prefix</div>',
|
||
suffix: '<div class="custom-suffix">Custom Suffix</div>'
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查自定义插槽内容
|
||
expect(wrapper.find('.custom-number').exists()).toBe(true)
|
||
expect(wrapper.find('.custom-prefix').exists()).toBe(true)
|
||
expect(wrapper.find('.custom-suffix').exists()).toBe(true)
|
||
})
|
||
|
||
// 测试非数字值处理
|
||
test('处理非数字值', async () => {
|
||
const wrapper = mount(WdCountTo, {
|
||
props: {
|
||
// 使用数字类型而不是字符串
|
||
startVal: 10,
|
||
endVal: 20,
|
||
duration: 1000,
|
||
autoStart: false
|
||
},
|
||
global: {
|
||
components: {
|
||
WdText
|
||
}
|
||
}
|
||
})
|
||
|
||
// 检查初始值是否正确
|
||
const initialText = wrapper.findAllComponents(WdText)[1].props('text')
|
||
expect(Number(initialText)).toBeCloseTo(10, 0)
|
||
})
|
||
})
|