refactor(components): [input-number] use JSX in Unit test (#7890)

packages/components/input-number/__tests__/input-number.test.tsx

@@ -4,122 +4,74 @@ import { describe, expect, it, test } from 'vitest'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import { ElFormItem } from '@element-plus/components/form'
 import InputNumber from '../src/input-number.vue'
+import type { InputNumberInstance } from '../src/input-number'
 
 const mouseup = new Event('mouseup')
-const _mount = (options) =>
-  mount({
-    components: {
-      'el-input-number': InputNumber,
-      'el-form-item': ElFormItem,
-    },
-    ...options,
-  })
+
 describe('InputNumber.vue', () => {
   test('create', async () => {
-    const wrapper = _mount({
-      template: `
-        <el-input-number
-          label="描述文字"
-          v-model="num">
-        </el-input-number>
-      `,
-      setup() {
-        const num = ref(1)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(1)
+    const wrapper = mount(() => (
+      <InputNumber label="描述文字" v-model={num.value} />
+    ))
     expect(wrapper.find('input').exists()).toBe(true)
   })
+
   test('modelValue', () => {
-    const wrapper = _mount({
-      template: '<el-input-number :model-value="inputText" />',
-      setup() {
-        const inputText = ref(1)
-        return {
-          inputText,
-        }
-      },
-    })
+    const inputText = ref(1)
+    const wrapper = mount(() => <InputNumber modelValue={inputText.value} />)
     expect(wrapper.find('input').element.value).toEqual('1')
   })
+
   test('set modelValue undefined to form validate', async () => {
-    const wrapper = _mount({
-      template:
-        '<el-input-number :model-value="num" placeholder="input number"/><p>{{num}}</p>',
-      setup() {
-        const num = ref(undefined)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(undefined)
+    const wrapper = mount(() => (
+      <>
+        <InputNumber modelValue={num.value} placeholder="input number" />
+        <p>{num.value}</p>
+      </>
+    ))
     await nextTick()
     expect(wrapper.find('p').element.innerText).toBeUndefined()
   })
+
   test('set modelValue undefined to display placeholder', async () => {
-    const wrapper = _mount({
-      template:
-        '<el-input-number :model-value="inputText" placeholder="input number"/>',
-      setup() {
-        const inputText = ref(1)
-        return {
-          inputText,
-        }
-      },
-    })
+    const inputText = ref<number | undefined>(1)
+    const wrapper = mount(() => (
+      <InputNumber modelValue={inputText.value} placeholder="input number" />
+    ))
     expect(wrapper.find('input').element.value).toEqual('1')
-    wrapper.vm.inputText = undefined
+    inputText.value = undefined
     await nextTick()
     expect(wrapper.find('input').element.value).toEqual('')
     expect(wrapper.find('input').element.getAttribute('aria-valuenow')).toEqual(
       'null'
     )
   })
+
   test('min', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number :min="3" v-model="num" />',
-      setup() {
-        const num = ref(1)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(1)
+    const wrapper = mount(() => <InputNumber min={3} v-model={num.value} />)
     expect(wrapper.find('input').element.value).toEqual('3')
     wrapper.find('.el-input-number__decrease').trigger('mousedown')
     document.dispatchEvent(mouseup)
     await nextTick()
     expect(wrapper.find('input').element.value).toEqual('3')
   })
+
   test('max', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number :max="3" v-model="num" />',
-      setup() {
-        const num = ref(5)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(5)
+    const wrapper = mount(() => <InputNumber max={3} v-model={num.value} />)
     expect(wrapper.find('input').element.value).toEqual('3')
     wrapper.find('.el-input-number__increase').trigger('mousedown')
     document.dispatchEvent(mouseup)
     await nextTick()
     expect(wrapper.find('input').element.value).toEqual('3')
   })
+
   test('step, increase and decrease', async () => {
-    document.body.innerHTML = '<div id="app"></div>'
-    const wrapper = _mount({
-      template: '<el-input-number v-model="num" :step="2"/>',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => <InputNumber v-model={num.value} step={2} />)
     wrapper.find('.el-input-number__decrease').trigger('mousedown')
     document.dispatchEvent(mouseup)
     await nextTick()
@@ -133,30 +85,21 @@ describe('InputNumber.vue', () => {
     await nextTick()
     expect(wrapper.find('input').element.value).toEqual('2')
   })
+
   test('step-strictly', async () => {
-    const wrapper = _mount({
-      template:
-        '<el-input-number :step-strictly="true" :step="2" v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber step-strictly={true} step={2} v-model={num.value} />
+    ))
     await wrapper.find('input').setValue(3)
     expect(wrapper.find('input').element.value).toEqual('4')
   })
+
   describe('precision accuracy 2', () => {
-    const wrapper = _mount({
-      template: '<el-input-number :precision="2" v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber precision={2} v-model={num.value} />
+    ))
     it.each([
       [1.1111111111, '1.11'],
       [17.275, '17.28'],
@@ -175,16 +118,12 @@ describe('InputNumber.vue', () => {
       }
     )
   })
+
   describe('precision accuracy 3', () => {
-    const wrapper = _mount({
-      template: '<el-input-number :precision="3" v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber precision={3} v-model={num.value} />
+    ))
     it.each([
       [1.1111111111, '1.111'],
       [17.275, '17.275'],
@@ -202,16 +141,12 @@ describe('InputNumber.vue', () => {
       }
     )
   })
+
   test('disabled', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number :disabled="true" v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber disabled={true} v-model={num.value} />
+    ))
     wrapper.find('.el-input-number__decrease').trigger('mousedown')
     document.dispatchEvent(mouseup)
     await nextTick()
@@ -221,42 +156,28 @@ describe('InputNumber.vue', () => {
     await nextTick()
     expect(wrapper.find('input').element.value).toEqual('0')
   })
+
   test('controls', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number :controls="false" v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber controls={false} v-model={num.value} />
+    ))
     expect(wrapper.find('.el-input-number__increase').exists()).toBe(false)
     expect(wrapper.find('.el-input-number__decrease').exists()).toBe(false)
   })
+
   test('controls-position', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number controls-position="right" v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber controls-position="right" v-model={num.value} />
+    ))
     expect(wrapper.findComponent(ArrowDown).exists()).toBe(true)
     expect(wrapper.findComponent(ArrowUp).exists()).toBe(true)
   })
+
   test('change-event', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => <InputNumber v-model={num.value} />)
     wrapper.find('.el-input-number__increase').trigger('mousedown')
     document.dispatchEvent(mouseup)
     await nextTick()
@@ -280,203 +201,151 @@ describe('InputNumber.vue', () => {
       wrapper.getComponent(InputNumber).emitted('update:modelValue')
     ).toHaveLength(2)
   })
+
   test('blur-event', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => <InputNumber v-model={num.value} />)
     await wrapper.find('input').trigger('blur')
     expect(wrapper.getComponent(InputNumber).emitted('blur')).toHaveLength(1)
   })
+
   test('focus-event', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number v-model="num" />',
-      setup() {
-        const num = ref(0)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(0)
+    const wrapper = mount(() => <InputNumber v-model={num.value} />)
     await wrapper.find('input').trigger('focus')
     expect(wrapper.getComponent(InputNumber).emitted('focus')).toHaveLength(1)
   })
 
   test('clear with :value-on-clear="null"', async () => {
-    const wrapper = _mount({
-      template: '<el-input-number v-model="num" :min="1" :max="10"/>',
-      setup() {
-        const num = ref(2)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(2)
+    const wrapper = mount(() => (
+      <InputNumber v-model={num.value} min={1} max={10} />
+    ))
     const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(null)
+    expect(num.value).toBe(null)
     elInput.increase()
     await nextTick()
-    expect(wrapper.vm.num).toBe(1)
+    expect(num.value).toBe(1)
     elInput.increase()
     await nextTick()
-    expect(wrapper.vm.num).toBe(2)
+    expect(num.value).toBe(2)
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(null)
+    expect(num.value).toBe(null)
     elInput.decrease()
     await nextTick()
-    expect(wrapper.vm.num).toBe(1)
+    expect(num.value).toBe(1)
     elInput.decrease()
     await nextTick()
-    expect(wrapper.vm.num).toBe(1)
+    expect(num.value).toBe(1)
   })
 
   test('clear with value-on-clear="min"', async () => {
-    const wrapper = _mount({
-      template:
-        '<el-input-number v-model="num" value-on-clear="min" :min="1" :max="10"/>',
-      setup() {
-        const num = ref(2)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(2)
+    const wrapper = mount(() => (
+      <InputNumber value-on-clear="min" v-model={num.value} min={1} max={10} />
+    ))
     const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(1)
+    expect(num.value).toBe(1)
     elInput.increase()
     await nextTick()
-    expect(wrapper.vm.num).toBe(2)
+    expect(num.value).toBe(2)
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(1)
+    expect(num.value).toBe(1)
     elInput.decrease()
     await nextTick()
-    expect(wrapper.vm.num).toBe(1)
+    expect(num.value).toBe(1)
   })
 
   test('clear with value-on-clear="max"', async () => {
-    const wrapper = _mount({
-      template:
-        '<el-input-number v-model="num" value-on-clear="max" :min="1" :max="10"/>',
-      setup() {
-        const num = ref(2)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(2)
+    const wrapper = mount(() => (
+      <InputNumber value-on-clear="max" v-model={num.value} min={1} max={10} />
+    ))
     const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(10)
+    expect(num.value).toBe(10)
     elInput.increase()
     await nextTick()
-    expect(wrapper.vm.num).toBe(10)
+    expect(num.value).toBe(10)
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(10)
+    expect(num.value).toBe(10)
     elInput.decrease()
     await nextTick()
-    expect(wrapper.vm.num).toBe(9)
+    expect(num.value).toBe(9)
   })
 
   test('clear with :value-on-clear="5"', async () => {
-    const wrapper = _mount({
-      template:
-        '<el-input-number v-model="num" :value-on-clear="5" :min="1" :max="10"/>',
-      setup() {
-        const num = ref(2)
-        return {
-          num,
-        }
-      },
-    })
+    const num = ref(2)
+    const wrapper = mount(() => (
+      <InputNumber value-on-clear={5} v-model={num.value} min={1} max={10} />
+    ))
     const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(5)
+    expect(num.value).toBe(5)
     elInput.increase()
     await nextTick()
-    expect(wrapper.vm.num).toBe(6)
+    expect(num.value).toBe(6)
     elInput.handleInputChange('')
     await nextTick()
-    expect(wrapper.vm.num).toBe(5)
+    expect(num.value).toBe(5)
     elInput.decrease()
     await nextTick()
-    expect(wrapper.vm.num).toBe(4)
+    expect(num.value).toBe(4)
   })
 
   test('check increase and decrease button when modelValue not in [min, max]', async () => {
-    const wrapper = _mount({
-      template: `
-      <el-input-number
-        ref="inputNumber1"
-        v-model="num1"
-        :min="1"
-        :max="10"
-      />
-      <el-input-number
-        ref="inputNumber2"
-        v-model="num2"
-        :min="1"
-        :max="10"
-      />`,
-      setup() {
-        const num1 = ref(-5)
-        const num2 = ref(15)
-        const inputNumber1 = ref(null)
-        const inputNumber2 = ref(null)
-        return {
-          num1,
-          num2,
-          inputNumber1,
-          inputNumber2,
-        }
-      },
-    })
-    const elInputNumber1 = wrapper.vm.inputNumber1
-    const elInputNumber2 = wrapper.vm.inputNumber2
-    expect(wrapper.vm.num1).toBe(1)
-    expect(wrapper.vm.num2).toBe(10)
+    const num1 = ref(-5)
+    const num2 = ref(15)
+    const inputNumber1 = ref<InputNumberInstance>()
+    const inputNumber2 = ref<InputNumberInstance>()
 
-    elInputNumber1.decrease()
-    await nextTick()
-    expect(wrapper.vm.num1).toBe(1)
-    elInputNumber1.increase()
-    await nextTick()
-    expect(wrapper.vm.num1).toBe(2)
-    elInputNumber1.increase()
-    await nextTick()
-    expect(wrapper.vm.num1).toBe(3)
+    mount(() => (
+      <>
+        <InputNumber ref={inputNumber1} v-model={num1.value} min={1} max={10} />
+        <InputNumber ref={inputNumber2} v-model={num2.value} min={1} max={10} />
+      </>
+    ))
 
-    elInputNumber2.increase()
+    expect(num1.value).toBe(1)
+    expect(num2.value).toBe(10)
+
+    inputNumber1.value!.decrease()
     await nextTick()
-    expect(wrapper.vm.num2).toBe(10)
-    elInputNumber2.decrease()
+    expect(num1.value).toBe(1)
+    inputNumber1.value!.increase()
     await nextTick()
-    expect(wrapper.vm.num2).toBe(9)
-    elInputNumber2.decrease()
+    expect(num1.value).toBe(2)
+    inputNumber1.value!.increase()
     await nextTick()
-    expect(wrapper.vm.num2).toBe(8)
+    expect(num1.value).toBe(3)
+
+    inputNumber2.value!.increase()
+    await nextTick()
+    expect(num2.value).toBe(10)
+    inputNumber2.value!.decrease()
+    await nextTick()
+    expect(num2.value).toBe(9)
+    inputNumber2.value!.decrease()
+    await nextTick()
+    expect(num2.value).toBe(8)
   })
 
   describe('form item accessibility integration', () => {
     test('automatic id attachment', async () => {
-      const wrapper = _mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-          <el-input-number />
-        </el-form-item>`,
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <InputNumber />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')
@@ -487,11 +356,11 @@ describe('InputNumber.vue', () => {
     })
 
     test('specified id attachment', async () => {
-      const wrapper = _mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-          <el-input-number id="foobar" />
-        </el-form-item>`,
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <InputNumber id="foobar" />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')
@@ -503,12 +372,12 @@ describe('InputNumber.vue', () => {
     })
 
     test('form item role is group when multiple inputs', async () => {
-      const wrapper = _mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-          <el-input-number />
-          <el-input-number />
-        </el-form-item>`,
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <InputNumber />
+          <InputNumber />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')