running-tools

A collection of tools for runners and their coaches
git clone https://git.ashermorgan.net/running-tools/
Log | Files | Refs | README

PaceInput.spec.js (2567B)

      1 import { test, expect } from 'vitest';
      2 import { mount, shallowMount } from '@vue/test-utils';
      3 import PaceInput from '@/components/PaceInput.vue';
      4 
      5 test('should correctly render input label', () => {
      6   // Initialize component
      7   const wrapper = mount(PaceInput, {
      8     propsData: {
      9       modelValue: {
     10         distanceValue: 3,
     11         distanceUnit: 'miles',
     12         time: 1000,
     13       },
     14       label: 'My input',
     15     },
     16   });
     17 
     18   // Assert input fields are correct
     19   expect(wrapper.findAll('input')[0].element.ariaLabel).to.equal('My input distance value');
     20   expect(wrapper.find('select').element.ariaLabel).to.equal('My input distance unit');
     21   expect(wrapper.findComponent({ name: 'time-input' }).vm.label).to.equal('My input duration');
     22 });
     23 
     24 test('should be initialized to modelValue', () => {
     25   // Initialize component
     26   const wrapper = shallowMount(PaceInput, {
     27     propsData: {
     28       modelValue: {
     29         distanceValue: 3,
     30         distanceUnit: 'miles',
     31         time: 1000,
     32       }
     33     },
     34   });
     35 
     36   // Assert input fields are correct
     37   expect(wrapper.findComponent({ name: 'decimal-input' }).vm.modelValue).to.equal(3);
     38   expect(wrapper.find('select').element.value).to.equal('miles');
     39   expect(wrapper.findComponent({ name: 'time-input' }).vm.modelValue).to.equal(1000);
     40 });
     41 
     42 test('should emit event when inputs are modified', async () => {
     43   // Initialize component
     44   const wrapper = shallowMount(PaceInput, {
     45     propsData: {
     46       modelValue: {
     47         distanceValue: 5,
     48         distanceUnit: 'kilometers',
     49         time: 1200,
     50       },
     51     },
     52   });
     53 
     54   // Update distance value
     55   await wrapper.findComponent({ name: 'decimal-input' }).setValue(3);
     56   expect(wrapper.emitted()['update:modelValue']).to.deep.equal([
     57     [{
     58       distanceValue: 3,
     59       distanceUnit: 'kilometers',
     60       time: 1200,
     61     }],
     62   ]);
     63 
     64   // Update distance unit
     65   await wrapper.find('select').setValue('miles');
     66   expect(wrapper.emitted()['update:modelValue']).to.deep.equal([
     67     [{
     68       distanceValue: 3,
     69       distanceUnit: 'kilometers',
     70       time: 1200,
     71     }],
     72     [{
     73       distanceValue: 3,
     74       distanceUnit: 'miles',
     75       time: 1200,
     76     }],
     77   ]);
     78 
     79   // Update time
     80   await wrapper.findComponent({ name: 'time-input' }).setValue(1000);
     81   expect(wrapper.emitted()['update:modelValue']).to.deep.equal([
     82     [{
     83       distanceValue: 3,
     84       distanceUnit: 'kilometers',
     85       time: 1200,
     86     }],
     87     [{
     88       distanceValue: 3,
     89       distanceUnit: 'miles',
     90       time: 1200,
     91     }],
     92     [{
     93       distanceValue: 3,
     94       distanceUnit: 'miles',
     95       time: 1000,
     96     }],
     97   ]);
     98 });