IntegerInput.spec.js (1489B)
1 import { test, expect } from 'vitest'; 2 import { mount } from '@vue/test-utils'; 3 import IntegerInput from '@/components/IntegerInput.vue'; 4 5 test('should be initialized to modelValue', () => { 6 // Initialize component 7 const wrapper = mount(IntegerInput, { 8 propsData: { modelValue: 123 }, 9 }); 10 11 // Assert value is 1 12 expect(wrapper.find('input').element.value).to.equal('123'); 13 }); 14 15 test('should fire input event when value changes', async () => { 16 // Initialize component 17 const wrapper = mount(IntegerInput); 18 19 // Set value to 1 20 await wrapper.find('input').setValue('1'); 21 22 // Assert input event was emitted 23 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[1]]); 24 }); 25 26 test('should format value according to padding prop', async () => { 27 // Initialize component 28 const wrapper = mount(IntegerInput, { 29 propsData: { padding: 2 }, 30 }); 31 32 // Assert value is correctly formatted 33 expect(wrapper.find('input').element.value).to.equal('00'); 34 }); 35 36 test('should format input value on blur', async () => { 37 // Initialize component 38 const wrapper = mount(IntegerInput, { 39 propsData: { modelValue: 1, padding: 2 }, 40 }); 41 42 // Set value to '2' 43 await wrapper.find('input').setValue('2'); 44 45 // Assert value was not updated 46 expect(wrapper.find('input').element.value).to.equal('2'); 47 48 // Trigger blur event 49 await wrapper.find('input').trigger('blur'); 50 51 // Assert value was formatted 52 expect(wrapper.find('input').element.value).to.equal('02'); 53 });