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) }) })