Skip to content

Commit

Permalink
Merge pull request #6395 from Sage/FE-6233-final-selection
Browse files Browse the repository at this point in the history 
feat(select): add selectionConfirmed property to event emitted on change
  • Loading branch information
@edleeks87
edleeks87 authored Nov 8, 2023
2 parents f208450 + 7a7c436 commit 9f05ff7
Show file tree
Hide file tree
Showing 22 changed files with 751 additions and 92 deletions.
88 changes: 88 additions & 0 deletions cypress/components/select/filterable-select/filterable-select.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1018,6 +1018,7 @@ context("Tests for FilterableSelect component", () => {
selectOption(positionOfElement(position)).click();
cy.get("@onChange").should("have.been.calledWith", {
target: { value: option },
selectionConfirmed: true,
});
});

Expand Down Expand Up @@ -1147,6 +1148,93 @@ context("Tests for FilterableSelect component", () => {
});
});

describe("selection confirmed", () => {
it("is set on the event when options are clicked", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectListText("One").click();
cy.get('[data-element="confirmed-selection-1"]').should("exist");
dropdownButton().click();
selectListText("Five").click();
cy.get('[data-element="confirmed-selection-1"]').should("not.exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
dropdownButton().click();
selectListText("Seven").click();
cy.get('[data-element="confirmed-selection-5"]').should("not.exist");
cy.get('[data-element="confirmed-selection-7"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option using ArrowDown key to navigate", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-1"]').should("exist");
selectInput().realPress("ArrowDown");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-1"]').should("not.exist");
cy.get('[data-element="confirmed-selection-3"]').should("exist");
selectInput().realPress("ArrowDown");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-3"]').should("not.exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-5"]').should("not.exist");
cy.get('[data-element="confirmed-selection-6"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option using ArrowUp key to navigate", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-9"]').should("exist");
selectInput().realPress("ArrowUp");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-9"]').should("not.exist");
cy.get('[data-element="confirmed-selection-7"]').should("exist");
selectInput().realPress("ArrowUp");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-7"]').should("not.exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-5"]').should("not.exist");
cy.get('[data-element="confirmed-selection-4"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option after filtering", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
commonDataElementInputPreview().click().type("th");
cy.get('[data-element="confirmed-selection-3"]').should("not.exist");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-3"]').should("exist");
});
});

it("should not throw when filter text does not match option text", () => {
CypressMountWithProviders(
<stories.FilterableSelectComponent
value={undefined}
onChange={undefined}
/>
);

commonDataElementInputPreview().type("abc");
selectInput().realPress("Enter");
getDataElementByValue("input").should("have.attr", "value", "");
});

describe("Accessibility tests for FilterableSelect component", () => {
it("should pass accessibilty tests for FilterableSelect", () => {
CypressMountWithProviders(<stories.FilterableSelectComponent />);
Expand Down
136 changes: 136 additions & 0 deletions cypress/components/select/multi-select/multi-select.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -915,6 +915,7 @@ context("Tests for MultiSelect component", () => {
selectOption(positionOfElement(position)).click();
cy.get("@onChange").should("have.been.calledWith", {
target: { value: option },
selectionConfirmed: true,
});
});

Expand Down Expand Up @@ -1099,6 +1100,141 @@ context("Tests for MultiSelect component", () => {
});
});

describe("selection confirmed", () => {
it("is set on the event when options are clicked", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectListText("One").click();
selectListText("Five").click();
selectListText("Seven").click();

cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 3);
cy.get('[data-element="confirmed-selection-1"]').should("exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
cy.get('[data-element="confirmed-selection-7"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option using ArrowDown key to navigate", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
selectInput().realPress("ArrowDown");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
selectInput().realPress("ArrowDown");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");

cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 4);
cy.get('[data-element="confirmed-selection-1"]').should("exist");
cy.get('[data-element="confirmed-selection-3"]').should("exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
cy.get('[data-element="confirmed-selection-6"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option using ArrowUp key to navigate", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
selectInput().realPress("ArrowUp");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
selectInput().realPress("ArrowUp");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");

cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 4);
cy.get('[data-element="confirmed-selection-9"]').should("exist");
cy.get('[data-element="confirmed-selection-7"]').should("exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
cy.get('[data-element="confirmed-selection-4"]').should("exist");
});

it("is set on the event when the selected options are removed via Backspace key", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");

cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 4);

selectInput().realPress("Backspace");
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 3);
selectInput().realPress("Backspace");
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 2);
selectInput().realPress("Backspace");
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 1);
selectInput().realPress("Backspace");
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 0);
});

it("is set on the event when the selected options are removed via clicking close icon of Pills", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectListText("One").click();
selectListText("Five").click();
selectListText("Seven").click();

cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 3);
pillCloseIcon().eq(2).click();
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 2);
pillCloseIcon().eq(1).click();
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 1);
pillCloseIcon().eq(0).click();
cy.get('[data-element="confirmed-selections"]')
.children()
.should("have.length", 0);
});
});

it("should not add an empty Pill when filter text does not match option text", () => {
CypressMountWithProviders(<stories.MultiSelectComponent />);

multiSelectPill().should("not.exist");
commonDataElementInputPreview().type("abc");
selectInput().realPress("Enter");
multiSelectPill().should("not.exist");
});

describe("Accessibility tests for MultiSelect component", () => {
it("should pass accessibilty tests for MultiSelect", () => {
CypressMountWithProviders(<stories.MultiSelectComponent />);
Expand Down
74 changes: 74 additions & 0 deletions cypress/components/select/simple-select/simple-select.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1007,6 +1007,80 @@ context("Tests for SimpleSelect component", () => {
});
});

describe("selection confirmed", () => {
it("is set on the event when options are clicked", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectListText("One").click();
cy.get('[data-element="confirmed-selection-1"]').should("exist");
dropdownButton().click();
selectListText("Five").click();
cy.get('[data-element="confirmed-selection-1"]').should("not.exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
dropdownButton().click();
selectListText("Seven").click();
cy.get('[data-element="confirmed-selection-5"]').should("not.exist");
cy.get('[data-element="confirmed-selection-7"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option using ArrowDown key to navigate", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-1"]').should("exist");
selectInput().realPress("ArrowDown");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-1"]').should("not.exist");
cy.get('[data-element="confirmed-selection-3"]').should("exist");
selectInput().realPress("ArrowDown");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-3"]').should("not.exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
selectInput().realPress("ArrowDown");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-5"]').should("not.exist");
cy.get('[data-element="confirmed-selection-6"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option using ArrowUp key to navigate", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-9"]').should("exist");
selectInput().realPress("ArrowUp");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-9"]').should("not.exist");
cy.get('[data-element="confirmed-selection-7"]').should("exist");
selectInput().realPress("ArrowUp");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-7"]').should("not.exist");
cy.get('[data-element="confirmed-selection-5"]').should("exist");
selectInput().realPress("ArrowUp");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-5"]').should("not.exist");
cy.get('[data-element="confirmed-selection-4"]').should("exist");
});

it("is set on the event when Enter key is pressed on an option after using alpha key", () => {
CypressMountWithProviders(<stories.SelectionConfirmed />);

dropdownButton().click();
selectInput().type("t", { force: true });
cy.get('[data-element="confirmed-selection-2"]').should("not.exist");
selectInput().realPress("Enter");
cy.get('[data-element="confirmed-selection-2"]').should("exist");
});
});

describe("Accessibility tests for SimpleSelect component", () => {
it("should pass accessibility tests for SimpleSelect", () => {
CypressMountWithProviders(<stories.SimpleSelectComponent />);
Expand Down
Loading

0 comments on commit 9f05ff7

Please sign in to comment.