running-tools

commit ab7065f6464966d494328bb514b3327cdebb4f64
parent bdbbf1631f72763c51a3516eed29b53c63a35819
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sun, 29 Jun 2025 18:35:03 -0700

Add unit tests for PaceInput/TimeInput labels

Diffstat:
M
src/components/TimeInput.vue
 | 
21
++++++++++-----------
M
tests/unit/components/PaceInput.spec.js
 | 
21
++++++++++++++++++++-
M
tests/unit/components/TimeInput.spec.js
 | 
17
++++++++++++++++-

3 files changed, 46 insertions(+), 13 deletions(-)
diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue
@@ -30,22 +30,21 @@ const model = defineModel({
   },
 });
 
-const props = defineProps({
+interface Props {
   /**
-   * Whether to show the hour field
+   * Whether to show the hour field (defaults to true)
    */
-  showHours: {
-    type: Boolean,
-    default: true,
-  },
+  showHours?: boolean,
 
   /**
-   * The prefix for each field's aria-label
+   * The prefix for each field's aria-label (defaults to 'Input')
    */
-  label: {
-    type: String,
-    default: '',
-  },
+  label?: string,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showHours: true,
+  label: 'Input',
 });
 
 /**
diff --git a/tests/unit/components/PaceInput.spec.js b/tests/unit/components/PaceInput.spec.js
@@ -1,7 +1,26 @@
 import { test, expect } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import PaceInput from '@/components/PaceInput.vue';
 
+test('should correctly render input label', () => {
+  // Initialize component
+  const wrapper = mount(PaceInput, {
+    propsData: {
+      modelValue: {
+        distanceValue: 3,
+        distanceUnit: 'miles',
+        time: 1000,
+      },
+      label: 'My input',
+    },
+  });
+
+  // Assert input fields are correct
+  expect(wrapper.findAll('input')[0].element.ariaLabel).to.equal('My input distance value');
+  expect(wrapper.find('select').element.ariaLabel).to.equal('My input distance unit');
+  expect(wrapper.findComponent({ name: 'time-input' }).vm.label).to.equal('My input duration');
+});
+
 test('should be initialized to modelValue', () => {
   // Initialize component
   const wrapper = shallowMount(PaceInput, {
diff --git a/tests/unit/components/TimeInput.spec.js b/tests/unit/components/TimeInput.spec.js
@@ -1,7 +1,22 @@
 import { test, expect } from 'vitest';
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import TimeInput from '@/components/TimeInput.vue';
 
+test('should correctly render input label', () => {
+  // Initialize component
+  const wrapper = mount(TimeInput, {
+    propsData: {
+      modelValue: 0,
+      label: 'My input',
+    },
+  });
+
+  // Assert input fields are correct
+  expect(wrapper.findAll('input')[0].element.ariaLabel).to.equal('My input hours');
+  expect(wrapper.findAll('input')[1].element.ariaLabel).to.equal('My input minutes');
+  expect(wrapper.findAll('input')[2].element.ariaLabel).to.equal('My input seconds');
+});
+
 test('value should be 0:00:0.00 by default', () => {
   // Initialize component
   const wrapper = shallowMount(TimeInput);