mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
388 lines
12 KiB
TypeScript
388 lines
12 KiB
TypeScript
import { nextTick, ref } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
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')
|
|
|
|
describe('InputNumber.vue', () => {
|
|
test('create', async () => {
|
|
const num = ref(1)
|
|
const wrapper = mount(() => (
|
|
<InputNumber label="描述文字" v-model={num.value} />
|
|
))
|
|
expect(wrapper.find('input').exists()).toBe(true)
|
|
})
|
|
|
|
test('modelValue', () => {
|
|
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 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 inputText = ref<number | undefined>(1)
|
|
const wrapper = mount(() => (
|
|
<InputNumber modelValue={inputText.value} placeholder="input number" />
|
|
))
|
|
expect(wrapper.find('input').element.value).toEqual('1')
|
|
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 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 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 () => {
|
|
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()
|
|
expect(wrapper.find('input').element.value).toEqual('-2')
|
|
wrapper.find('.el-input-number__increase').trigger('mousedown')
|
|
document.dispatchEvent(mouseup)
|
|
await nextTick()
|
|
expect(wrapper.find('input').element.value).toEqual('0')
|
|
wrapper.find('.el-input-number__increase').trigger('mousedown')
|
|
document.dispatchEvent(mouseup)
|
|
await nextTick()
|
|
expect(wrapper.find('input').element.value).toEqual('2')
|
|
})
|
|
|
|
test('step-strictly', async () => {
|
|
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 num = ref(0)
|
|
const wrapper = mount(() => (
|
|
<InputNumber precision={2} v-model={num.value} />
|
|
))
|
|
it.each([
|
|
[1.1111111111, '1.11'],
|
|
[17.275, '17.28'],
|
|
[17.2745, '17.27'],
|
|
[1.09, '1.09'],
|
|
[1.009, '1.01'],
|
|
[10.999, '11.00'],
|
|
[15, '15.00'],
|
|
[15.5, '15.50'],
|
|
[15.555, '15.56'],
|
|
])(
|
|
'each precision accuracy test: $input $output',
|
|
async (input, output) => {
|
|
await wrapper.find('input').setValue(input)
|
|
expect(wrapper.find('input').element.value).toEqual(`${output}`)
|
|
}
|
|
)
|
|
})
|
|
|
|
describe('precision accuracy 3', () => {
|
|
const num = ref(0)
|
|
const wrapper = mount(() => (
|
|
<InputNumber precision={3} v-model={num.value} />
|
|
))
|
|
it.each([
|
|
[1.1111111111, '1.111'],
|
|
[17.275, '17.275'],
|
|
[17.2745, '17.275'],
|
|
[1.09, '1.090'],
|
|
[10.999, '10.999'],
|
|
[10.9999, '11.000'],
|
|
[15.555, '15.555'],
|
|
[1.3335, '1.334'],
|
|
])(
|
|
'each precision accuracy test: $input $output',
|
|
async (input, output) => {
|
|
await wrapper.find('input').setValue(input)
|
|
expect(wrapper.find('input').element.value).toEqual(`${output}`)
|
|
}
|
|
)
|
|
})
|
|
|
|
test('disabled', async () => {
|
|
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()
|
|
expect(wrapper.find('input').element.value).toEqual('0')
|
|
wrapper.find('.el-input-number__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(() => (
|
|
<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 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 num = ref(0)
|
|
const wrapper = mount(() => <InputNumber v-model={num.value} />)
|
|
wrapper.find('.el-input-number__increase').trigger('mousedown')
|
|
document.dispatchEvent(mouseup)
|
|
await nextTick()
|
|
expect(wrapper.getComponent(InputNumber).emitted('change')).toHaveLength(1)
|
|
expect(wrapper.getComponent(InputNumber).emitted().change[0]).toEqual([
|
|
1, 0,
|
|
])
|
|
expect(wrapper.getComponent(InputNumber).emitted('input')).toHaveLength(1)
|
|
expect(
|
|
wrapper.getComponent(InputNumber).emitted('update:modelValue')
|
|
).toHaveLength(1)
|
|
wrapper.find('.el-input-number__increase').trigger('mousedown')
|
|
document.dispatchEvent(mouseup)
|
|
await nextTick()
|
|
expect(wrapper.getComponent(InputNumber).emitted('change')).toHaveLength(2)
|
|
expect(wrapper.getComponent(InputNumber).emitted().change[1]).toEqual([
|
|
2, 1,
|
|
])
|
|
expect(wrapper.getComponent(InputNumber).emitted('input')).toHaveLength(2)
|
|
expect(
|
|
wrapper.getComponent(InputNumber).emitted('update:modelValue')
|
|
).toHaveLength(2)
|
|
})
|
|
|
|
test('blur-event', async () => {
|
|
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 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 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(num.value).toBe(null)
|
|
elInput.increase()
|
|
await nextTick()
|
|
expect(num.value).toBe(1)
|
|
elInput.increase()
|
|
await nextTick()
|
|
expect(num.value).toBe(2)
|
|
elInput.handleInputChange('')
|
|
await nextTick()
|
|
expect(num.value).toBe(null)
|
|
elInput.decrease()
|
|
await nextTick()
|
|
expect(num.value).toBe(1)
|
|
elInput.decrease()
|
|
await nextTick()
|
|
expect(num.value).toBe(1)
|
|
})
|
|
|
|
test('clear with value-on-clear="min"', async () => {
|
|
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(num.value).toBe(1)
|
|
elInput.increase()
|
|
await nextTick()
|
|
expect(num.value).toBe(2)
|
|
elInput.handleInputChange('')
|
|
await nextTick()
|
|
expect(num.value).toBe(1)
|
|
elInput.decrease()
|
|
await nextTick()
|
|
expect(num.value).toBe(1)
|
|
})
|
|
|
|
test('clear with value-on-clear="max"', async () => {
|
|
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(num.value).toBe(10)
|
|
elInput.increase()
|
|
await nextTick()
|
|
expect(num.value).toBe(10)
|
|
elInput.handleInputChange('')
|
|
await nextTick()
|
|
expect(num.value).toBe(10)
|
|
elInput.decrease()
|
|
await nextTick()
|
|
expect(num.value).toBe(9)
|
|
})
|
|
|
|
test('clear with :value-on-clear="5"', async () => {
|
|
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(num.value).toBe(5)
|
|
elInput.increase()
|
|
await nextTick()
|
|
expect(num.value).toBe(6)
|
|
elInput.handleInputChange('')
|
|
await nextTick()
|
|
expect(num.value).toBe(5)
|
|
elInput.decrease()
|
|
await nextTick()
|
|
expect(num.value).toBe(4)
|
|
})
|
|
|
|
test('check increase and decrease button when modelValue not in [min, max]', async () => {
|
|
const num1 = ref(-5)
|
|
const num2 = ref(15)
|
|
const inputNumber1 = ref<InputNumberInstance>()
|
|
const inputNumber2 = ref<InputNumberInstance>()
|
|
|
|
mount(() => (
|
|
<>
|
|
<InputNumber ref={inputNumber1} v-model={num1.value} min={1} max={10} />
|
|
<InputNumber ref={inputNumber2} v-model={num2.value} min={1} max={10} />
|
|
</>
|
|
))
|
|
|
|
expect(num1.value).toBe(1)
|
|
expect(num2.value).toBe(10)
|
|
|
|
inputNumber1.value!.decrease()
|
|
await nextTick()
|
|
expect(num1.value).toBe(1)
|
|
inputNumber1.value!.increase()
|
|
await nextTick()
|
|
expect(num1.value).toBe(2)
|
|
inputNumber1.value!.increase()
|
|
await nextTick()
|
|
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(() => (
|
|
<ElFormItem label="Foobar" data-test-ref="item">
|
|
<InputNumber />
|
|
</ElFormItem>
|
|
))
|
|
|
|
await nextTick()
|
|
const formItem = wrapper.find('[data-test-ref="item"]')
|
|
const formItemLabel = formItem.find('.el-form-item__label')
|
|
const innerInput = wrapper.find('.el-input__inner')
|
|
expect(formItem.attributes().role).toBeFalsy()
|
|
expect(formItemLabel.attributes().for).toBe(innerInput.attributes().id)
|
|
})
|
|
|
|
test('specified id attachment', async () => {
|
|
const wrapper = mount(() => (
|
|
<ElFormItem label="Foobar" data-test-ref="item">
|
|
<InputNumber id="foobar" />
|
|
</ElFormItem>
|
|
))
|
|
|
|
await nextTick()
|
|
const formItem = wrapper.find('[data-test-ref="item"]')
|
|
const formItemLabel = formItem.find('.el-form-item__label')
|
|
const innerInput = wrapper.find('.el-input__inner')
|
|
expect(formItem.attributes().role).toBeFalsy()
|
|
expect(innerInput.attributes().id).toBe('foobar')
|
|
expect(formItemLabel.attributes().for).toBe(innerInput.attributes().id)
|
|
})
|
|
|
|
test('form item role is group when multiple inputs', async () => {
|
|
const wrapper = mount(() => (
|
|
<ElFormItem label="Foobar" data-test-ref="item">
|
|
<InputNumber />
|
|
<InputNumber />
|
|
</ElFormItem>
|
|
))
|
|
|
|
await nextTick()
|
|
const formItem = wrapper.find('[data-test-ref="item"]')
|
|
expect(formItem.attributes().role).toBe('group')
|
|
})
|
|
})
|
|
})
|