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