UnitCalculator.spec.js (7800B)
1 import { beforeEach, test, expect } from 'vitest'; 2 import { shallowMount } from '@vue/test-utils'; 3 import UnitCalculator from '@/views/UnitCalculator.vue'; 4 5 beforeEach(() => { 6 localStorage.clear(); 7 }) 8 9 test('should correctly update controls when category changes', async () => { 10 // Initialize component 11 const wrapper = shallowMount(UnitCalculator); 12 13 // Change category 14 await wrapper.find('select[aria-label="Selected unit category"]').setValue('time'); 15 16 // Assert controls are correct 17 expect(wrapper.findComponent({ name: 'decimal-input' }).vm.modelValue).to.equal(1); 18 expect(wrapper.find('select[aria-label="Input units"]').element.value).to.equal('seconds'); 19 expect(wrapper.find('select[aria-label="Output units"]').element.value).to.equal('hh:mm:ss'); 20 21 // Change category 22 await wrapper.find('select[aria-label="Selected unit category"]').setValue('speed_and_pace'); 23 24 // Assert controls are correct 25 expect(wrapper.findComponent({ name: 'time-input' }).vm.modelValue).to.equal(600); 26 expect(wrapper.find('select[aria-label="Input units"]').element.value).to.equal('seconds_per_mile'); 27 expect(wrapper.find('select[aria-label="Output units"]').element.value).to.equal('miles_per_hour'); 28 29 // Change category 30 await wrapper.find('select[aria-label="Selected unit category"]').setValue('distance'); 31 32 // Assert controls are correct 33 expect(wrapper.findComponent({ name: 'decimal-input' }).vm.modelValue).to.equal(1); 34 expect(wrapper.find('select[aria-label="Input units"]').element.value).to.equal('miles'); 35 expect(wrapper.find('select[aria-label="Output units"]').element.value).to.equal('kilometers'); 36 }); 37 38 test('outputValue should be correct', async () => { 39 // Initialize component 40 const wrapper = shallowMount(UnitCalculator); 41 42 // Change category and update input 43 await wrapper.find('select[aria-label="Selected unit category"]').setValue('distance'); 44 await wrapper.find('select[aria-label="Input units"]').setValue('kilometers'); 45 await wrapper.findComponent({ name: 'decimal-input' }).setValue(2); 46 await wrapper.find('select[aria-label="Output units"]').setValue('meters'); 47 48 // Assert output is correct 49 expect(wrapper.find('span[aria-label="Output value"]').element.textContent).to.equal('2000.000'); 50 51 // Change category and update input 52 await wrapper.find('select[aria-label="Selected unit category"]').setValue('time'); 53 await wrapper.find('select[aria-label="Input units"]').setValue('minutes'); 54 await wrapper.findComponent({ name: 'decimal-input' }).setValue(3); 55 await wrapper.find('select[aria-label="Output units"]').setValue('seconds'); 56 57 // Assert output is correct 58 expect(wrapper.find('span[aria-label="Output value"]').element.textContent).to.equal('180.000'); 59 60 // Change category and update input 61 await wrapper.find('select[aria-label="Selected unit category"]').setValue('speed_and_pace'); 62 await wrapper.find('select[aria-label="Input units"]').setValue('miles_per_hour'); 63 await wrapper.findComponent({ name: 'decimal-input' }).setValue(2); 64 await wrapper.find('select[aria-label="Output units"]').setValue('seconds_per_mile'); 65 66 // Assert output is correct 67 expect(wrapper.find('span[aria-label="Output value"]').element.textContent).to.equal('00:30:00.000'); 68 }); 69 70 test('should correctly convert to and from hh:mm:ss', async () => { 71 // Initialize component 72 const wrapper = shallowMount(UnitCalculator); 73 74 // Change category and update input 75 await wrapper.find('select[aria-label="Selected unit category"]').setValue('time'); 76 await wrapper.find('select[aria-label="Input units"]').setValue('hh:mm:ss'); 77 await wrapper.findComponent({ name: 'time-input' }).setValue(60); 78 await wrapper.find('select[aria-label="Output units"]').setValue('minutes'); 79 80 // Assert controls are correct 81 expect(wrapper.find('span[aria-label="Output value"]').element.textContent).to.equal('1.000'); 82 83 // Update input 84 await wrapper.find('select[aria-label="Input units"]').setValue('minutes'); 85 await wrapper.findComponent({ name: 'decimal-input' }).setValue(1); 86 await wrapper.find('select[aria-label="Output units"]').setValue('hh:mm:ss'); 87 88 // Assert controls are correct 89 expect(wrapper.find('span[aria-label="Output value"]').element.textContent).to.equal('00:01:00.000'); 90 }); 91 92 test('should correctly load saved inputs', async () => { 93 // Initialize localStorage 94 localStorage.setItem('running-tools.unit-calculator-inputs', JSON.stringify({ 95 distance: { 96 inputValue: 5, 97 inputUnit: 'kilometers', 98 outputUnit: 'miles', 99 }, 100 time: { 101 inputValue: 90, 102 inputUnit: 'hh:mm:ss', 103 outputUnit: 'minutes', 104 }, 105 speed_and_pace: { 106 inputValue: 15, 107 inputUnit: 'miles_per_hour', 108 outputUnit: 'seconds_per_mile', 109 }, 110 })); 111 112 // Initialize component 113 const wrapper = shallowMount(UnitCalculator); 114 115 // Change category 116 await wrapper.find('select[aria-label="Selected unit category"]').setValue('time'); 117 118 // Assert inputs are correct 119 expect(wrapper.findComponent({ name: 'time-input' }).vm.modelValue).to.equal(90); 120 expect(wrapper.find('select[aria-label="Input units"]').element.value).to.equal('hh:mm:ss'); 121 expect(wrapper.find('select[aria-label="Output units"]').element.value).to.equal('minutes'); 122 123 // Change category 124 await wrapper.find('select[aria-label="Selected unit category"]').setValue('speed_and_pace'); 125 126 // Assert inputs are correct 127 expect(wrapper.findComponent({ name: 'decimal-input' }).vm.modelValue).to.equal(15); 128 expect(wrapper.find('select[aria-label="Input units"]').element.value).to.equal('miles_per_hour'); 129 expect(wrapper.find('select[aria-label="Output units"]').element.value).to.equal('seconds_per_mile'); 130 131 // Change category 132 await wrapper.find('select[aria-label="Selected unit category"]').setValue('distance'); 133 134 // Assert inputs are correct 135 expect(wrapper.findComponent({ name: 'decimal-input' }).vm.modelValue).to.equal(5); 136 expect(wrapper.find('select[aria-label="Input units"]').element.value).to.equal('kilometers'); 137 expect(wrapper.find('select[aria-label="Output units"]').element.value).to.equal('miles'); 138 }); 139 140 test('should correctly save inputs', async () => { 141 // Initialize component 142 const wrapper = shallowMount(UnitCalculator); 143 144 // Change category and update input 145 await wrapper.find('select[aria-label="Selected unit category"]').setValue('distance'); 146 await wrapper.find('select[aria-label="Input units"]').setValue('kilometers'); 147 await wrapper.findComponent({ name: 'decimal-input' }).setValue(5); 148 await wrapper.find('select[aria-label="Output units"]').setValue('miles'); 149 150 // Change category and update input 151 await wrapper.find('select[aria-label="Selected unit category"]').setValue('time'); 152 await wrapper.find('select[aria-label="Input units"]').setValue('hh:mm:ss'); 153 await wrapper.findComponent({ name: 'time-input' }).setValue(90); 154 await wrapper.find('select[aria-label="Output units"]').setValue('minutes'); 155 156 // Change category and update input 157 await wrapper.find('select[aria-label="Selected unit category"]').setValue('speed_and_pace'); 158 await wrapper.find('select[aria-label="Input units"]').setValue('miles_per_hour'); 159 await wrapper.findComponent({ name: 'decimal-input' }).setValue(15); 160 await wrapper.find('select[aria-label="Output units"]').setValue('seconds_per_mile'); 161 162 // Initialize localStorage 163 expect(localStorage.getItem('running-tools.unit-calculator-inputs')).to.equal(JSON.stringify({ 164 distance: { 165 inputValue: 5, 166 inputUnit: 'kilometers', 167 outputUnit: 'miles', 168 }, 169 time: { 170 inputValue: 90, 171 inputUnit: 'hh:mm:ss', 172 outputUnit: 'minutes', 173 }, 174 speed_and_pace: { 175 inputValue: 15, 176 inputUnit: 'miles_per_hour', 177 outputUnit: 'seconds_per_mile', 178 }, 179 })); 180 });