From 435f1fe21e3d6955b1426ed86bc00923ec7e8604 Mon Sep 17 00:00:00 2001
From: Dan Felder <d.felder@kunzleigh.com>
Date: Fri, 25 Oct 2024 12:08:53 -0400
Subject: [PATCH] Specify error_id in combo box component. Add combo box
 component unit test.

---
 .../__tests__/USWDSComboBox.spec.js           | 76 +++++++++++++++++++
 .../form-components/USWDSComboBox.vue         |  6 +-
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 training-front-end/src/components/__tests__/USWDSComboBox.spec.js

diff --git a/training-front-end/src/components/__tests__/USWDSComboBox.spec.js b/training-front-end/src/components/__tests__/USWDSComboBox.spec.js
new file mode 100644
index 00000000..a7f4d48e
--- /dev/null
+++ 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'])
+    })
+})
\ No newline at end of file
diff --git a/training-front-end/src/components/form-components/USWDSComboBox.vue b/training-front-end/src/components/form-components/USWDSComboBox.vue
index 33166624..0262de1d 100644
--- 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