From 06d4a516a5a42ce4908a8750948d2a4ea313b972 Mon Sep 17 00:00:00 2001 From: gd2910 <122624946+gd2910@users.noreply.github.com> Date: Thu, 21 Mar 2024 12:32:51 +0000 Subject: [PATCH] feat(react): added tabbing and other interactions into cypress tests suite Previously cypress did not support tabbing(keyboard), adding cypress-real-events allows us to test the components in a more comprehensive manner in which our users would interact with them --- packages/react/cypress/support/index.ts | 1 + packages/react/package-lock.json | 10 ++++++++++ packages/react/package.json | 1 + .../component-tests/IcAccordion/IcAccordion.cy.tsx | 14 +++++++++++++- .../IcSideNavigation/IcSideNavigation.cy.tsx | 13 +++++++++++++ .../IcToggleButtonGroup/IcToggleButtonGroup.cy.tsx | 7 +++++++ packages/react/tsconfig.json | 2 +- 7 files changed, 46 insertions(+), 2 deletions(-) diff --git a/packages/react/cypress/support/index.ts b/packages/react/cypress/support/index.ts index 844c78375c..27637ff7c1 100644 --- a/packages/react/cypress/support/index.ts +++ b/packages/react/cypress/support/index.ts @@ -1,6 +1,7 @@ /// import "./component"; +import "cypress-real-events"; import Commands from "./commands"; diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index aaf64d0fb4..efbd03aaec 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -38,6 +38,7 @@ "cypress-axe": "^1.5.0", "cypress-file-upload": "^5.0.8", "cypress-image-diff-js": "^2.1.3", + "cypress-real-events": "^1.12.0", "eslint-plugin-cypress": "^2.15.1", "mkdirp": "^1.0.4", "np": "^7.6.0", @@ -11178,6 +11179,15 @@ "cypress": ">=9.6.1" } }, + "node_modules/cypress-real-events": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.12.0.tgz", + "integrity": "sha512-oiy+4kGKkzc2PT36k3GGQqkGxNiVypheWjMtfyi89iIk6bYmTzeqxapaLHS3pnhZOX1IEbTDUVxh8T4Nhs1tyQ==", + "dev": true, + "peerDependencies": { + "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x" + } + }, "node_modules/cypress-recurse": { "version": "1.35.2", "dev": true, diff --git a/packages/react/package.json b/packages/react/package.json index 266241c8ea..d49489b629 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -69,6 +69,7 @@ "cypress-axe": "^1.5.0", "cypress-file-upload": "^5.0.8", "cypress-image-diff-js": "^2.1.3", + "cypress-real-events": "^1.12.0", "eslint-plugin-cypress": "^2.15.1", "mkdirp": "^1.0.4", "np": "^7.6.0", diff --git a/packages/react/src/component-tests/IcAccordion/IcAccordion.cy.tsx b/packages/react/src/component-tests/IcAccordion/IcAccordion.cy.tsx index 65b1cb01a8..46035b1199 100644 --- a/packages/react/src/component-tests/IcAccordion/IcAccordion.cy.tsx +++ b/packages/react/src/component-tests/IcAccordion/IcAccordion.cy.tsx @@ -162,6 +162,8 @@ describe("IcAccordionGroup", () => { ); + cy.checkHydrated(IC_ACCORDION_GROUP); + cy.get(getAccordionSelector(1)) .invoke("prop", "expanded") .should("eq", false); @@ -169,13 +171,23 @@ describe("IcAccordionGroup", () => { .invoke("prop", "expanded") .should("eq", true); - cy.get(getAccordionSelector(1)).click(); + cy.findShadowEl(getAccordionSelector(1), "button") + .focus() + .realPress("Space"); cy.get(getAccordionSelector(1)) .invoke("prop", "expanded") .should("eq", true); cy.get(getAccordionSelector(2)) .invoke("prop", "expanded") .should("eq", false); + + cy.realPress("Tab").realPress("Space"); + cy.get(getAccordionSelector(1)) + .invoke("prop", "expanded") + .should("eq", false); + cy.get(getAccordionSelector(2)) + .invoke("prop", "expanded") + .should("eq", true); }); it("both accordions should open when single expansion is false", () => { diff --git a/packages/react/src/component-tests/IcSideNavigation/IcSideNavigation.cy.tsx b/packages/react/src/component-tests/IcSideNavigation/IcSideNavigation.cy.tsx index 3a5155b364..31f8415b00 100644 --- a/packages/react/src/component-tests/IcSideNavigation/IcSideNavigation.cy.tsx +++ b/packages/react/src/component-tests/IcSideNavigation/IcSideNavigation.cy.tsx @@ -24,6 +24,7 @@ import { StaticSideNav, checkSideNavSize, } from "./IcSideNavigationTestData"; +import _ from "cypress/types/lodash"; const DEFAULT_HEIGHT = 1171; const DEFAULT_TEST_THRESHOLD = 0.06; @@ -285,6 +286,18 @@ describe("IcSideNavigation", () => { cy.checkSideNavSize(false); }); + it("expands when expand button is tabbed to and pressed", () => { + mount(); + cy.checkHydrated(SIDE_NAV_LABEL); + cy.findShadowEl("ic-side-navigation", ".title-link").focus(); + Cypress._.times(4, () => cy.realPress("Tab")); + cy.realPress("Enter"); + cy.checkSideNavSize(true); + + cy.clickOnShadowEl(SIDE_NAV_LABEL, EXPAND_BUTTON_SELECTOR); + cy.checkSideNavSize(false); + }); + it("renders collapsed and expanded when expanded state is externally controlled", () => { mount(); diff --git a/packages/react/src/component-tests/IcToggleButtonGroup/IcToggleButtonGroup.cy.tsx b/packages/react/src/component-tests/IcToggleButtonGroup/IcToggleButtonGroup.cy.tsx index b05c175aac..a818f37358 100644 --- a/packages/react/src/component-tests/IcToggleButtonGroup/IcToggleButtonGroup.cy.tsx +++ b/packages/react/src/component-tests/IcToggleButtonGroup/IcToggleButtonGroup.cy.tsx @@ -96,6 +96,13 @@ describe("IcToggleButtonGroup", () => { getToggle(1).click({ force: true }); cy.get(WIN_CONSOLE_SPY).should(NOT_HAVE_BEEN_CALLED); }); + it("should tab through toggles and check focus and selection state", () => { + mount(); + cy.checkHydrated(IC_TOGGLE_BUTTON_GROUP); + + getToggle(2).focus().realPress(["Shift", "Tab"]); + cy.get(IC_TOGGLE_BUTTON_GROUP).should(HAVE_FOCUS); + }); }); describe("screenshots", () => { beforeEach(() => { diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index d818bfa556..6ef39e8512 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -9,7 +9,7 @@ "noImplicitAny": true, "jsx": "react", "allowJs": true, - "types": ["cypress", "node", "cypress-axe", "cypress-file-upload"] + "types": ["cypress", "node", "cypress-axe", "cypress-file-upload", "cypress-real-events"] }, "include": ["src/**/*.ts", "src/**/*.tsx"], "exclude": ["**/__tests__/**", "cypress/**", "src/component-tests/**/*"],