From 2bac58d59a0339b66fb20725ee492136599d9514 Mon Sep 17 00:00:00 2001 From: Paulo Gomes da Cruz Junior Date: Fri, 1 Sep 2023 10:58:33 -0700 Subject: [PATCH] fix: fixing auto complete tests and blur event --- .../forms/AutoCompleteInputComponent.vue | 1 + .../forms/AutoCompleteInputComponent.spec.ts | 20 ++++--------------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue index d042146a4f..5c514f3a39 100644 --- 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 index 8a64949a9c..aaf2512b62 100644 --- 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(