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,6 +1,7 @@
 /// <reference types="cypress" />
 
 import "./component";
+import "cypress-real-events";
 
 import Commands from "./commands";
 

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",

packages/react/src/component-tests/IcAccordion/IcAccordion.cy.tsx

@@ -162,20 +162,32 @@ describe("IcAccordionGroup", () => {
         <TwoAccordionsWithOneExpanded />
       </IcAccordionGroup>
     );
+    cy.checkHydrated(IC_ACCORDION_GROUP);
+
     cy.get(getAccordionSelector(1))
       .invoke("prop", "expanded")
       .should("eq", false);
     cy.get(getAccordionSelector(2))
       .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", () => {

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(<BasicSideNav />);
+      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(<DynamicExpandedSideNav />);
 

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(<ToggleGroupSingle />);
+      cy.checkHydrated(IC_TOGGLE_BUTTON_GROUP);
+
+      getToggle(2).focus().realPress(["Shift", "Tab"]);
+      cy.get(IC_TOGGLE_BUTTON_GROUP).should(HAVE_FOCUS);
+    });
   });
   describe("screenshots", () => {
     beforeEach(() => {

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/**/*"],