import { mount } from '@vue/test-utils'
import InputNumber from '../src/index.vue'
import { ref, nextTick } from 'vue'
const mouseup = new Event('mouseup')
const _mount = options => mount({
components: {
'el-input-number': InputNumber,
},
...options,
})
describe('InputNumber.vue', () => {
test('create', async () => {
const wrapper = _mount({
template: `
`,
setup() {
const num = ref(1)
return {
num,
}
},
})
expect(wrapper.find('input').exists()).toBe(true)
})
test('modelValue', () => {
const wrapper = _mount({
template: '',
setup() {
const inputText = ref(1)
return {
inputText,
}
},
})
expect(wrapper.find('input').element.value).toEqual('1')
})
test('min', async () => {
const wrapper = _mount({
template: '',
setup() {
const num = ref(1)
return {
num,
}
},
})
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: '',
setup() {
const num = ref(5)
return {
num,
}
},
})
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 = '
'
const wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
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 wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
await wrapper.find('input').setValue(3)
expect(wrapper.find('input').element.value).toEqual('4')
})
test('precision', async () => {
const wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
await wrapper.find('input').setValue(1.1111111111)
expect(wrapper.find('input').element.value).toEqual('1.11')
})
test('disabled', async () => {
const wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
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 wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
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: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
expect(wrapper.find('.el-icon-arrow-down').exists()).toBe(true)
expect(wrapper.find('.el-icon-arrow-up').exists()).toBe(true)
})
test('change-event', async () => {
const wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
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 wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
await wrapper.find('input').trigger('blur')
expect(wrapper.getComponent(InputNumber).emitted('blur')).toHaveLength(1)
})
test('focus-event', async () => {
const wrapper = _mount({
template: '',
setup() {
const num = ref(0)
return {
num,
}
},
})
await wrapper.find('input').trigger('focus')
expect(wrapper.getComponent(InputNumber).emitted('focus')).toHaveLength(1)
})
test('clear', async () => {
const wrapper = _mount({
template: '',
setup() {
const num = ref(2)
return {
num,
}
},
})
const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
elInput.handleInputChange('')
await nextTick()
expect(wrapper.vm.num).toBe(undefined)
elInput.increase()
await nextTick()
expect(wrapper.vm.num).toBe(1)
elInput.handleInputChange('')
await nextTick()
expect(wrapper.vm.num).toBe(undefined)
elInput.decrease()
await nextTick()
expect(wrapper.vm.num).toBe(1)
})
})