Skip to content

Commit

Permalink
feat(select): add selectionConfirmed property to event emitted on change
Browse files Browse the repository at this point in the history 
Adds a `CustomSelectChangeEvent` type which defines the shape of the new change event emitted when
the input value changes, backwards compatibility is maintained so it is still possible to continue
to use React's ChangeEvent. Within the new custom event there is a `selectionConfirmed` property
that indicates when a user has pressed `Enter` or clicked on a given `Option`.

fix #6330
  • Loading branch information
@edleeks87
edleeks87 committed Nov 3, 2023
1 parent a79fa6b commit 748a17b
Show file tree
Hide file tree
Showing 21 changed files with 635 additions and 35 deletions.
75 changes: 75 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 @@ -1002,6 +1002,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 @@ -1131,6 +1132,80 @@ 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");
});
});

describe("Accessibility tests for FilterableSelect component", () => {
it("should pass accessibilty tests for FilterableSelect", () => {
CypressMountWithProviders(<stories.FilterableSelectComponent />);
Expand Down
127 changes: 127 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 @@ -899,6 +899,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 @@ -1083,6 +1084,132 @@ 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);
});
});

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 @@ -991,6 +991,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
48 changes: 47 additions & 1 deletion src/components/select/filterable-select/filterable-select-test.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import React, { useState } from "react";
import partialAction from "../../../../.storybook/utils/partial-action";
import { FilterableSelect, Option, FilterableSelectProps } from "..";
import {
FilterableSelect,
Option,
FilterableSelectProps,
CustomSelectChangeEvent,
} from "..";
import OptionRow from "../option-row/option-row.component";
import Dialog from "../../dialog";
import Button from "../../button";

export default {
component: FilterableSelect,
title: "Select/Filterable/Test",
excludeStories: ["SelectionConfirmed"],
parameters: {
info: { disable: true },
chromatic: {
Expand Down Expand Up @@ -641,3 +647,43 @@ export const FilterableSelectNestedInDialog = () => {
</Dialog>
);
};

export const SelectionConfirmed = () => {
const [value, setValue] = React.useState("");
const [confirmedSelection, setConfirmedSelection] = useState("");

const handleChange = (event: CustomSelectChangeEvent) => {
setValue(event.target.value);
if (event.selectionConfirmed) {
setConfirmedSelection(event.target.value);
}
};
return (
<>
<FilterableSelect
name="testing"
value={value}
onChange={handleChange}
openOnFocus
label="Test"
placeholder=" "
>
<Option value="1" text="One" />
<Option value="2" text="Two" />
<Option value="3" text="Three" />
<Option value="4" text="Four" />
<Option value="5" text="Five" />
<Option value="6" text="Six" />
<Option value="7" text="Seven" />
<Option value="8" text="Eight" />
<Option value="9" text="Nine" />
</FilterableSelect>

{confirmedSelection ? (
<span data-element={`confirmed-selection-${confirmedSelection}`}>
{confirmedSelection}
</span>
) : null}
</>
);
};
Loading

0 comments on commit 748a17b

Please sign in to comment.