From b40a59a3d537a1c38e54e2c93bee7467d74f4953 Mon Sep 17 00:00:00 2001 From: AcWrong02 <147061401+AcWrong02@users.noreply.github.com> Date: Fri, 1 Dec 2023 10:37:01 +0800 Subject: [PATCH] test(Numeric): [Numeric] add unit test to Numeric Component (#983) --- .../src/numeric/__tests__/numeric.test.tsx | 249 ++++++++++++++++-- 1 file changed, 230 insertions(+), 19 deletions(-) diff --git a/packages/vue/src/numeric/__tests__/numeric.test.tsx b/packages/vue/src/numeric/__tests__/numeric.test.tsx index 6ea836bfd..ef7f97a2d 100644 --- a/packages/vue/src/numeric/__tests__/numeric.test.tsx +++ b/packages/vue/src/numeric/__tests__/numeric.test.tsx @@ -1,8 +1,10 @@ import { mountPcMode } from '@opentiny-internal/vue-test-utils' import { describe, expect, test, vi } from 'vitest' import Numeric from '@opentiny/vue-numeric' -import { nextTick } from 'vue' +import { IconChevronUp } from '@opentiny/vue-icon' +import { nextTick, ref } from 'vue' +const mouseup = new Event('mouseup') let value = 1 describe('PC Mode', () => { @@ -16,39 +18,221 @@ describe('PC Mode', () => { expect(wrapper.find('.tiny-input-medium').exists()).toBe(true) }) - test.todo('circulate 向上到达最大值后从最小值开始，或反过来') + test('circulate 向上到达最大值后从最小值开始，或反过来', async () => { + const value = ref(0) + const min = ref(0) + const max = ref(5) - test.todo('mouse-wheel 设置鼠标滚动滑轮是否改变数值') + const wrapper = mount(() => ( + + )) + expect(wrapper.find('.tiny-numeric__decrease').exists()).toBe(true) + wrapper.find('.tiny-numeric__decrease').trigger('mousedown') + document.dispatchEvent(mouseup) + expect(value.value).toBe(5) - test.todo('v-model 设置输入组件的默认值') + await nextTick() - test.todo('min 规定组件可输入的最小数值') + wrapper.find('.tiny-numeric__increase').trigger('mousedown') + document.dispatchEvent(mouseup) + expect(value.value).toBe(0) + }) - test.todo('max 规定组件可输入的最大数值') + test('mouse-wheel 设置鼠标滚动滑轮是否改变数值', async () => { + const value = 1 + const inputValue = ref(1) + const wrapper = mount(() => ) - test.todo('step 设置按上下方向键或点击上下按钮增减的数值') + wrapper.find('input').trigger('focus') + await nextTick() - test.todo('step-strictly 是否只能输入 step 的倍数') + wrapper.find('input').trigger('mousewheel', { wheelDelta: -150 }) + await nextTick() + expect(Number(wrapper.find('input').element.value)).toBeLessThan(value) - test.todo('numeric-size 计数器尺寸') + inputValue.value = value - test.todo('disabled 是否禁用计数器') + await nextTick() + wrapper.find('input').trigger('mousewheel', { wheelDelta: 150 }) + await nextTick() + expect(Number(wrapper.find('input').element.value)).toBeGreaterThan(value) + }) - test.todo('controls 是否使用控制按钮') + test('v-model 设置输入组件的默认值', async () => { + const inputValue = ref(1) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.value).toEqual('1') + }) - test.todo('controls-position 控制按钮位置') + test('min 规定组件可输入的最小数值', async () => { + const inputValue = ref(1) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.value).toEqual('3') + wrapper.find('.tiny-numeric__decrease').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('3') + }) - test.todo('name 原生属性') + test('max 规定组件可输入的最大数值', async () => { + const inputValue = ref(6) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.value).toEqual('3') + wrapper.find('.tiny-numeric__increase').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('3') + }) - test.todo('label 输入框关联的label文字') + test('step 按上下按钮增减数值', async () => { + const num = ref(0) + const wrapper = mount(() => ) + wrapper.find('.tiny-numeric__decrease').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('-2') + wrapper.find('.tiny-numeric__increase').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('0') + wrapper.find('.tiny-numeric__increase').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('2') + }) - test.todo('placeholder 设置输入框内的提示占位文本') + test('step 按上下方向键增减数值', async () => { + const num = ref(0) + const wrapper = mount(() => ) + wrapper.find('input').element.focus() + await nextTick() - test.todo('precision 数值精度') + wrapper.find('input').trigger('keydown.up') + await nextTick() + expect(wrapper.find('input').element.value).toEqual('1') + + wrapper.find('input').trigger('keydown.down') + await nextTick() + expect(wrapper.find('input').element.value).toEqual('0') + }) + + test('step-strictly 是否只能输入 step 的倍数', async () => { + const num = ref(0) + const wrapper = mount(() => ) + await wrapper.find('input').setValue(3) + expect(wrapper.find('input').element.value).toEqual('4') + }) + + test('numeric-size 计数器尺寸', async () => { + const num = ref(0) + // mini size + let wrapper = mount(() => ) + expect(wrapper.find('.tiny-numeric--mini').exists()).toBe(true) + expect(wrapper.find('.tiny-input-mini').exists()).toBe(true) + await nextTick() + + // small size + wrapper = mount(() => ) + expect(wrapper.find('.tiny-numeric--small').exists()).toBe(true) + expect(wrapper.find('.tiny-input-small').exists()).toBe(true) + await nextTick() + + // medium size + wrapper = mount(() => ) + expect(wrapper.find('.tiny-numeric--medium').exists()).toBe(true) + expect(wrapper.find('.tiny-input-medium').exists()).toBe(true) + await nextTick() + }) + + test('disabled 是否禁用计数器', async () => { + const num = ref(0) + const wrapper = mount(() => ) + wrapper.find('.tiny-numeric__decrease').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('0') + wrapper.find('.tiny-numeric__increase').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(wrapper.find('input').element.value).toEqual('0') + }) + + test('controls 是否使用控制按钮', async () => { + const num = ref(0) + const wrapper = mount(() => ) + expect(wrapper.find('.tiny-numeric__decrease').exists()).toBe(false) + expect(wrapper.find('.tiny-numeric__increase').exists()).toBe(false) + }) + + test('controls-position 控制按钮位置', async () => { + const num = ref(0) + const wrapper = mount(() => ) + expect(wrapper.find('.tiny-numeric__decrease').findComponent(IconChevronUp).exists()).toBe(false) + expect(wrapper.find('.tiny-numeric__increase').findComponent(IconChevronUp).exists()).toBe(false) + }) + + test('name 原生属性', async () => { + const num = ref(0) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.name).toEqual('name') + }) + + test('label 输入框关联的label文字', async () => { + const num = ref(0) + const wrapper = mount(() => ) + expect(wrapper.find('input').attributes('aria-label')).toEqual('label') + }) + + test('placeholder 设置输入框内的提示占位文本', async () => { + const num = ref(0) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.placeholder).toEqual('please input') + }) + + test('precision 数值精度为2', async () => { + const num = ref(1.1111111111) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.value).toEqual('1.11') + + num.value = 17.275 + await nextTick() + expect(wrapper.find('input').element.value).toEqual('17.28') + + num.value = 17.274 + await nextTick() + expect(wrapper.find('input').element.value).toEqual('17.27') + + num.value = 17 + await nextTick() + expect(wrapper.find('input').element.value).toEqual('17.00') + + num.value = 17.5 + await nextTick() + expect(wrapper.find('input').element.value).toEqual('17.50') + }) + + test('precision 数值精度为3', async () => { + const num = ref(1.5) + const wrapper = mount(() => ) + expect(wrapper.find('input').element.value).toEqual('1.500') + }) test.todo('format 数字格式化置项') - test.todo('allow-empty 计数器内容的可清空') + test('allow-empty 计数器内容的可清空', async () => { + const num = ref(0) + // allow-empty = false + let wrapper = mount(() => ) + wrapper.find('input').setValue('') + await nextTick() + expect(wrapper.find('input').element.value).toEqual('0') + + // allow-empty = true + wrapper = mount(() => ) + wrapper.find('input').setValue('') + await nextTick() + expect(wrapper.find('input').element.value).toEqual('') + }) /** * events @@ -61,7 +245,34 @@ describe('PC Mode', () => { expect(focus).toHaveBeenCalled() }) - test.todo('blur 设置组件失去焦点时触发的回调函数') + test('blur 设置组件失去焦点时触发的回调函数', async () => { + const blur = vi.fn() + const wrapper = mount(() => ) + await wrapper.find('input').trigger('blur') + await nextTick() + expect(blur).toHaveBeenCalled() + }) - test.todo('change 设置组件的值变化时触发的回调函数') + test('change 设置组件的值变化时触发的回调函数', async () => { + const num = ref(1) + const change = vi.fn() + const wrapper = mount(() => ) + + num.value = 2 + await nextTick() + expect(change).toHaveBeenCalledTimes(1) + expect(change).toHaveBeenCalledWith(2, 1) + + wrapper.find('.tiny-numeric__decrease').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(change).toHaveBeenCalledTimes(2) + expect(change).toHaveBeenCalledWith(1, 2) + + wrapper.find('.tiny-numeric__increase').trigger('mousedown') + document.dispatchEvent(mouseup) + await nextTick() + expect(change).toHaveBeenCalledTimes(3) + expect(change).toHaveBeenCalledWith(2, 1) + }) })