TimeInput.spec.js (6890B)
1 import { test, expect } from 'vitest'; 2 import { mount, shallowMount } from '@vue/test-utils'; 3 import TimeInput from '@/components/TimeInput.vue'; 4 5 test('should correctly render input label', () => { 6 // Initialize component 7 const wrapper = mount(TimeInput, { 8 propsData: { 9 modelValue: 0, 10 label: 'My input', 11 }, 12 }); 13 14 // Assert input fields are correct 15 expect(wrapper.findAll('input')[0].element.ariaLabel).to.equal('My input hours'); 16 expect(wrapper.findAll('input')[1].element.ariaLabel).to.equal('My input minutes'); 17 expect(wrapper.findAll('input')[2].element.ariaLabel).to.equal('My input seconds'); 18 }); 19 20 test('value should be 0:00:0.00 by default', () => { 21 // Initialize component 22 const wrapper = shallowMount(TimeInput); 23 24 // Assert value is 0:00:00.00 25 expect(wrapper.vm.hours).to.equal(0); 26 expect(wrapper.vm.minutes).to.equal(0); 27 expect(wrapper.vm.seconds).to.equal(0.00); 28 }); 29 30 test('should read value prop', () => { 31 // Initialize component 32 const wrapper = shallowMount(TimeInput, { 33 propsData: { modelValue: 3600 + 60 + 1.5 }, 34 }); 35 36 // Assert value is 1:01:01.50 37 expect(wrapper.vm.hours).to.equal(1); 38 expect(wrapper.vm.minutes).to.equal(1); 39 expect(wrapper.vm.seconds).to.equal(1.50); 40 }); 41 42 test('should update when value prop changes', async () => { 43 // Initialize component 44 const wrapper = shallowMount(TimeInput); 45 46 // Set value prop to 60 47 await wrapper.setProps({ modelValue: 60 }); 48 49 // Assert value is 0:01:00.00 50 expect(wrapper.vm.hours).to.equal(0); 51 expect(wrapper.vm.minutes).to.equal(1); 52 expect(wrapper.vm.seconds).to.equal(0.00); 53 }); 54 55 test('should emit input event when value changes', async () => { 56 // Initialize component 57 const wrapper = shallowMount(TimeInput); 58 59 // Change value to 1:00:00.00 60 await wrapper.findAllComponents({ name: 'integer-input' })[0].setValue(1); 61 62 // Assert input event was emitted 63 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3600.00]]); 64 65 // Change value to 1:00:01.50 66 await wrapper.findComponent({ name: 'decimal-input' }).setValue(1.5); 67 68 // Assert another input event was emitted 69 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3600.00], [3601.50]]); 70 }); 71 72 test('up arrow should increment value', async () => { 73 // Initialize component 74 const wrapper = mount(TimeInput, { 75 propsData: { modelValue: 59 }, 76 }); 77 78 // Press up arrow in hours field 79 await wrapper.find('input.hours').trigger('keydown', { key: 'ArrowUp' }); 80 81 // Assert value is 01:00:59.00 and input event was emitted 82 expect(wrapper.vm.internalValue).to.equal(3659); 83 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3659]]); 84 85 // Press up arrow in seconds field 86 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 87 88 // Assert value is 01:01:00.00 and input event was emitted 89 expect(wrapper.vm.internalValue).to.equal(3660); 90 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3659], [3660]]); 91 }); 92 93 test('up arrow should not increment value past the 2 field maximum', async () => { 94 // Initialize component 95 const wrapper = mount(TimeInput, { 96 propsData: { modelValue: 3598, showHours: false }, 97 }); 98 99 // Press up arrow in seconds field 100 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 101 102 // Assert value is 59:59.00 and input event was emitted 103 expect(wrapper.vm.internalValue).to.equal(3599); 104 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3599]]); 105 106 // Press up arrow in seconds field 107 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 108 109 // Assert value is 59:59.99 and input event was gmitted 110 expect(wrapper.vm.internalValue).to.equal(3599.99); 111 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3599], [3599.99]]); 112 113 // Press up arrow in seconds field 114 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 115 116 // Assert value is still 59:59.99 and input event was not emitted 117 expect(wrapper.vm.internalValue).to.equal(3599.99); 118 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[3599], [3599.99]]); 119 }); 120 121 test('up arrow should not increment value past the 3 field maximum', async () => { 122 // Initialize component 123 const wrapper = mount(TimeInput, { 124 propsData: { modelValue: 359998, showHours: true }, 125 }); 126 127 // Press up arrow in seconds field 128 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 129 130 // Assert value is 99:59:59.00 and input event was emitted 131 expect(wrapper.vm.internalValue).to.equal(359999); 132 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[359999]]); 133 134 // Press up arrow in seconds field 135 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 136 137 // Assert value is 99:59:59.99 and input event was emitted 138 expect(wrapper.vm.internalValue).to.equal(359999.99); 139 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[359999], [359999.99]]); 140 141 // Press up arrow in seconds field 142 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowUp' }); 143 144 // Assert value is still 99:59:59.99 and input event was not emitted 145 expect(wrapper.vm.internalValue).to.equal(359999.99); 146 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[359999], [359999.99]]); 147 }); 148 149 test('down arrow should decrement value', async () => { 150 // Initialize component 151 const wrapper = mount(TimeInput, { 152 propsData: { modelValue: 3660 }, 153 }); 154 155 // Press down arrow in hours field 156 await wrapper.find('input.hours').trigger('keydown', { key: 'ArrowDown' }); 157 158 // Assert value is 00:01:00.00 and input event was emitted 159 expect(wrapper.vm.internalValue).to.equal(60); 160 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[60]]); 161 162 // Press down arrow in seconds field 163 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowDown' }); 164 165 // Assert value is 00:00:59.00 and input event was emitted 166 expect(wrapper.vm.internalValue).to.equal(59); 167 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[60], [59]]); 168 }); 169 170 test('down arrow should not decrement value past the minimum', async () => { 171 // Initialize component 172 const wrapper = mount(TimeInput, { 173 propsData: { modelValue: 1 }, 174 }); 175 176 // Press down arrow in seconds field 177 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowDown' }); 178 179 // Assert value is 00:00:00.00 and input event was emitted 180 expect(wrapper.vm.internalValue).to.equal(0); 181 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[0]]); 182 183 // Press down arrow in seconds field 184 await wrapper.find('input.seconds').trigger('keydown', { key: 'ArrowDown' }); 185 186 // Assert value is still 00:00:00.00 and input event was not emitted 187 expect(wrapper.vm.internalValue).to.equal(0); 188 expect(wrapper.emitted()['update:modelValue']).to.deep.equal([[0]]); 189 });