From 4e14db6674876b873b52afc6d414133474e50a67 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Thu, 10 Oct 2024 14:33:09 -0300 Subject: [PATCH 1/2] test: fix tests --- frontend/cypress/e2e/pages/SearchPage.cy.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts index 2273f9f57e..e51aa6e908 100644 --- a/frontend/cypress/e2e/pages/SearchPage.cy.ts +++ b/frontend/cypress/e2e/pages/SearchPage.cy.ts @@ -53,15 +53,10 @@ describe("Search Page", () => { }); it("displays autocomplete results", () => { - cy.get("#search-box") - .find("cds-combo-box-item") - .should("have.length", 3) - .should("be.visible"); - cy.wait("@predictiveSearch").then((interception) => { const data = interception.response.body; - cy.wrap(data).should("be.an", "array").and("have.length", 3); + cy.wrap(data).should("be.an", "array").and("have.length.greaterThan", 0); cy.get("#search-box") .find("cds-combo-box-item") @@ -89,7 +84,7 @@ describe("Search Page", () => { cy.wait("@predictiveSearch").then((interception) => { const data = interception.response.body; - cy.wrap(data).should("be.an", "array").and("have.length.greaterThan", 3); + cy.wrap(data).should("be.an", "array").and("have.length.greaterThan", 0); cy.get("#search-box") .find("cds-combo-box-item") @@ -102,11 +97,11 @@ describe("Search Page", () => { }); describe("and user clicks a result", () => { - const clientNumber = "00001297"; + const clientNumber = "00054076"; beforeEach(() => { cy.get("#search-box") .find("cds-combo-box-item") - .should("have.length", 3) + .should("have.length.greaterThan", 0) .should("be.visible"); cy.get("#search-box").find(`cds-combo-box-item[data-value^="${clientNumber}"]`).click(); From f30c248f0a04d9d99a39ddc9b9cbd0b91c7267f8 Mon Sep 17 00:00:00 2001 From: Fernando Terra Date: Thu, 10 Oct 2024 15:14:28 -0300 Subject: [PATCH 2/2] fix: do not prevent the clearing action --- .../forms/AutoCompleteInputComponent.vue | 10 +-- .../forms/AutoCompleteInputComponent.spec.ts | 62 +++++++++++++------ 2 files changed, 50 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue index d621342871..1f3075e400 100644 --- a/frontend/src/components/forms/AutoCompleteInputComponent.vue +++ b/frontend/src/components/forms/AutoCompleteInputComponent.vue @@ -192,10 +192,12 @@ const selectAutocompleteItem = (event: any) => { }; const preSelectAutocompleteItem = (event: any) => { - const newValue = event?.detail?.item?.getAttribute("data-id"); - emit("click:option", newValue); - if (props.preventSelection) { - event?.preventDefault(); + if (event?.detail?.item) { + const newValue = event?.detail?.item?.getAttribute("data-id"); + emit("click:option", newValue); + if (props.preventSelection) { + event?.preventDefault(); + } } }; diff --git a/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts b/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts index 0f6f4e0718..a4ab0dca02 100644 --- a/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts +++ b/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts @@ -13,6 +13,7 @@ describe("Auto Complete Input Component", () => { { code: "TC", name: "TAMCADA" }, { code: "TD", name: "TADANARA" }, ]; + const eventSelectContent = (value: string) => { return { detail: { @@ -21,6 +22,14 @@ describe("Auto Complete Input Component", () => { }; }; + const eventClearContent = () => { + return { + detail: { + item: undefined, + }, + }; + }; + const setInputValue = async (inputWrapper: DOMWrapper, value: string) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -309,29 +318,46 @@ describe("Auto Complete Input Component", () => { expect(wrapper.emitted("update:selected-value")![0][0]).toEqual(selectedContent); }); - it('emits the "click:option" event with the code of the clicked option and prevents selecting it', async () => { - const wrapper = mount(AutoCompleteInputComponent, { - props: { - id, - modelValue: "", - contents, - validations: [], - label: id, - tip: "", - preventSelection: true, - }, + describe("when preventSelection is true", () => { + let wrapper: VueWrapper; + beforeEach(() => { + wrapper = mount(AutoCompleteInputComponent, { + props: { + id, + modelValue: "", + contents, + validations: [], + label: id, + tip: "", + preventSelection: true, + }, + }); }); - await wrapper.setProps({ modelValue: "T" }); - await wrapper.find(`#${id}`).trigger("input"); + it('emits the "click:option" event with the code of the clicked option and prevents selecting it', async () => { + await wrapper.setProps({ modelValue: "T" }); + await wrapper.find(`#${id}`).trigger("input"); - const code = "TB"; - await wrapper.find(`#${id}`).trigger("cds-combo-box-beingselected", eventSelectContent(code)); + const code = "TB"; + await wrapper.find(`#${id}`).trigger("cds-combo-box-beingselected", eventSelectContent(code)); - expect(wrapper.emitted("click:option")).toBeTruthy(); - expect(wrapper.emitted("click:option")![0][0]).toEqual(code); + expect(wrapper.emitted("click:option")).toBeTruthy(); + expect(wrapper.emitted("click:option")![0][0]).toEqual(code); + + expect(wrapper.emitted("update:selected-value")).toBeFalsy(); + }); - expect(wrapper.emitted("update:selected-value")).toBeFalsy(); + it("doesn't prevent the clearing action", async () => { + await wrapper.setProps({ modelValue: "T" }); + await wrapper.find(`#${id}`).trigger("input"); + + // User initiated event to clear the value + await wrapper.find(`#${id}`).trigger("cds-combo-box-beingselected", eventClearContent()); + + // Clears the value + expect(wrapper.emitted("update:selected-value")).toBeTruthy(); + expect(wrapper.emitted("update:selected-value")![0][0]).toEqual(undefined); + }); }); it('emits the "update:selected-value" event when an option from the list is clicked', async () => {