fix: fixing auto complete tests and blur event

bcgov · Sep 1, 2023 · 2bac58d · 2bac58d
1 parent d401d72
commit 2bac58d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 16 deletions.
diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -111,6 +111,7 @@ revalidateBus.on(() => validateInput(inputValue.value))
       :invalid-text="error"
       @cds-combo-box-selected="selectAutocompleteItem"
       v-on:input="onTyping"
+      v-on:blur="(event:any) => validateInput(event.srcElement._filterInputValue)"
       :data-focus="id"
       :data-scroll="id"
       :data-id="'input-' + id"

diff --git a/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts b/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts
@@ -12,6 +12,7 @@ describe('Auto Complete Input Component', () => {
     { code: 'TC', name: 'TAMCADA' },
     { code: 'TD', name: 'TADANARA' }
   ]
+  const eventContent = (value:string) => {return { detail: { item: { 'data-id': value, getAttribute: (key:string) => value } }}}
 
   it('renders the input field with the provided id', () => {
     const wrapper = mount(AutoCompleteInputComponent, {
@@ -25,14 +26,7 @@ describe('Auto Complete Input Component', () => {
     })
 
     expect(wrapper.find(`#${id}`).exists()).toBe(true)
-    expect(wrapper.find(`#${id}list`).exists()).toBe(true)
 
-    const options = wrapper.findAll('.autocomplete-items-cell')
-
-    expect(options.length).toBe(contents.length)
-    for (let index = 0; index < contents.length; index++) {
-      expect(options[index].text()).toContain(contents[index].name)
-    }
   })
 
   it('emits the "update" event with the updated value', async () => {
@@ -102,9 +96,7 @@ describe('Auto Complete Input Component', () => {
       }
     })
 
-    const options = wrapper.findAll('.autocomplete-items-cell')
-    const firstOption = options[0]
-    await firstOption.trigger('click')
+    await wrapper.find(`#${id}`).trigger('cds-combo-box-selected',eventContent('TA'));
     expect(wrapper.emitted('update:selected-value')).toBeTruthy()
     expect(wrapper.emitted('update:selected-value')![0][0]).toEqual(contents[0])
   })
@@ -123,9 +115,7 @@ describe('Auto Complete Input Component', () => {
         }
       })
 
-      const options = wrapper.findAll('.autocomplete-items-cell')
-      const firstOption = options[0]
-      await firstOption.trigger('click')
+      await wrapper.find(`#${id}`).trigger('cds-combo-box-selected',eventContent(contents[0].code));
 
       // Now an option is effectively selected
       expect(wrapper.emitted('update:selected-value')).toBeTruthy()
@@ -143,9 +133,7 @@ describe('Auto Complete Input Component', () => {
     })
 
     it('emits the "update:selected-value" with the newly selected value', async () => {
-      const options = wrapper.findAll('.autocomplete-items-cell')
-      const secondOption = options[1]
-      await secondOption.trigger('click')
+      await wrapper.find(`#${id}`).trigger('cds-combo-box-selected',eventContent(contents[1].code));
 
       expect(wrapper.emitted('update:selected-value')).toHaveLength(2)
       expect(wrapper.emitted('update:selected-value')![1][0]).toEqual(