Specify error_id in combo box component. Add combo box component unit…

… test.
GSA · Oct 25, 2024 · 435f1fe · 435f1fe
1 parent 4cdd2e4
commit 435f1fe
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/training-front-end/src/components/__tests__/USWDSComboBox.spec.js b/training-front-end/src/components/__tests__/USWDSComboBox.spec.js
@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+import { mount } from '@vue/test-utils';
+import USWDSComboBox from "../form-components/USWDSComboBox.vue";
+
+describe('USWDSComboBox', () => {
+    it('renders properly', () => {
+        const wrapper = mount(USWDSComboBox, {
+            props: {
+                modelValue: '',
+                validator: {
+                    $error: false,
+                    $errors: []
+                },
+                name: 'testAgency',
+                label: 'Test Agency',
+                items: [
+                    { id: 1, name: 'Option 1' },
+                    { id: 2, name: 'Option 2' },
+                    { id: 3, name: 'Option 3' }
+                ],
+                required: true
+            }
+        })
+
+        expect(wrapper.find('.usa-form-group').exists()).toBe(true)
+        expect(wrapper.find('.usa-label').text()).toBe('Test Agency (*Required)')
+        expect(wrapper.findAll('option').length).toBe(3)
+    })
+
+    it('displays errors when validator has errors', async () => {
+        const wrapper = mount(USWDSComboBox, {
+            props: {
+                modelValue: '',
+                validator: {
+                    $error: true,
+                    $errors: [{ $property: 'agency', $message: 'Agency is required' }]
+                },
+                name: 'testAgency',
+                label: 'Test Agency',
+                items: [
+                    { id: 1, name: 'Option 1' },
+                    { id: 2, name: 'Option 2' },
+                    { id: 3, name: 'Option 3' }
+                ]
+            }
+        })
+
+        expect(wrapper.find('.usa-form-group--error').exists()).toBe(true)
+        expect(wrapper.find('.usa-error-message').text()).toBe('Agency is required')
+    })
+
+    it('emits update:modelValue event on select', async () => {
+        const wrapper = mount(USWDSComboBox, {
+            props: {
+                modelValue: '',
+                validator: {
+                    $error: false,
+                    $errors: []
+                },
+                name: 'testAgency',
+                label: 'Test Agency',
+                items: [
+                    { id: 1, name: 'Option 1' },
+                    { id: 2, name: 'Option 2' },
+                    { id: 3, name: 'Option 3' }
+                ]
+            }
+        })
+
+        const select = wrapper.find('select')
+        await select.setValue('1')
+
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')[0]).toEqual(['1'])
+    })
+})
diff --git a/training-front-end/src/components/form-components/USWDSComboBox.vue b/training-front-end/src/components/form-components/USWDSComboBox.vue
@@ -1,11 +1,11 @@
 <script setup>
-import {onMounted} from 'vue';
+import {computed, onMounted} from 'vue';
 import USWDS from "@uswds/uswds/js";
 import FormLabel from "./FormLabel.vue";
 
 const {comboBox} = USWDS;
 
-defineProps({
+const props = defineProps({
   'modelValue': {
     type: String,
     required: false,
@@ -43,6 +43,8 @@ onMounted(() => {
 function selected(event) {
   emit('update:modelValue', event.target.value)
 }
+
+var error_id = computed(() => props.name + '-input-error-message')
 </script>
 <template>
   <div