Skip to content

Commit

Permalink
Merge branch 'master' into pill-playwright-refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@divyajindel
divyajindel authored Nov 9, 2023
2 parents c994cae + 375a967 commit aa2dddb
Show file tree
Hide file tree
Showing 54 changed files with 2,752 additions and 1,286 deletions.
34 changes: 34 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,37 @@
## [123.7.0](https://github.com/Sage/carbon/compare/v123.6.0...v123.7.0) (2023-11-08)


### Features

* **select:** add selectionConfirmed property to event emitted on change ([748a17b](https://github.com/Sage/carbon/commit/748a17b8185a2d9a2bd58843efbd4a10739c2e8d)), closes [#6330](https://github.com/Sage/carbon/issues/6330)


### Bug Fixes

* **filterable-select, multi-select:** handle when filter text has no match and enter pressed ([84ebef7](https://github.com/Sage/carbon/commit/84ebef7df4573d3205db9ebd424d88c2a26f4c3e))
* **option:** ensure fill prop is not passed to underlying DOM element ([2a8cfc1](https://github.com/Sage/carbon/commit/2a8cfc11bae33c52496a65741ad02a339989beff))

## [123.6.0](https://github.com/Sage/carbon/compare/v123.5.1...v123.6.0) (2023-11-08)


### Features

* **toast:** add alignY prop to allow vertical alignment to be configurable ([64203e1](https://github.com/Sage/carbon/commit/64203e1a618294c9c8c71964963377ae2891e134)), closes [#6301](https://github.com/Sage/carbon/issues/6301)

### [123.5.1](https://github.com/Sage/carbon/compare/v123.5.0...v123.5.1) (2023-11-08)


### Bug Fixes

* **multi-action-button, split-button:** fix aria role ([c16a1e4](https://github.com/Sage/carbon/commit/c16a1e4357518a122681675875999d61408a60b8)), closes [#6383](https://github.com/Sage/carbon/issues/6383)

## [123.5.0](https://github.com/Sage/carbon/compare/v123.4.4...v123.5.0) (2023-11-07)


### Features

* **icon:** 4 icons added to the icon font ([33f979a](https://github.com/Sage/carbon/commit/33f979ad1690fba0229a73e5999744168814378b))

### [123.4.4](https://github.com/Sage/carbon/compare/v123.4.3...v123.4.4) (2023-11-06)


Expand Down
74 changes: 0 additions & 74 deletions cypress/components/global-header/global-header.cy.tsx
View file

This file was deleted.

9 changes: 9 additions & 0 deletions cypress/components/multi-action-button/multi-action-button.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -720,6 +720,15 @@ context("Tests for MultiActionButton component", () => {
cy.checkAccessibility();
});

// TODO: test passes even when it shouldn't, see FE-6267
it("should pass accessibility tests for MultiActionButton when open", () => {
CypressMountWithProviders(<MultiActionButtonList />);

multiActionButton().eq(0).trigger("keydown", keyCode("Enter"));

cy.checkAccessibility();
});

it("should pass accessibility tests for MultiActionButton disabled prop", () => {
CypressMountWithProviders(<MultiActionButtonList disabled />);

Expand Down
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
Loading

0 comments on commit aa2dddb

Please sign in to comment.