chore: convert Cypress files to TypeScript

cypress.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
+      return require('./cypress/plugins/index.ts')(on, config)
     },
     baseUrl: 'http://localhost:9999',
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',

cypress/e2e/components/Alert.spec.js → cypress/e2e/components/Alert.spec.ts

@@ -1,5 +1,5 @@
 describe("Alert", () => {
-  before(() => {
+  beforeEach(() => {
     cy.renderFromStorybook("alert--with-a-close-button");
   });
 
@@ -10,7 +10,7 @@ describe("Alert", () => {
 
   it("hides the alert when closed", () => {
     cy.get('[aria-label="Close"]').click();
-    cy.get('[role="alert"]').should("not.be.visible");
+    cy.get('[role="alert"]').should("not.exist");
     cy.get('[role="alert"]').should("not.exist");
   });
 });

cypress/e2e/components/Radio.spec.js → cypress/e2e/components/Radio.spec.ts

@@ -11,6 +11,7 @@ describe("Radio", () => {
       radio().should("be.checked");
     });
   });
+
   describe("Checked", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radio--set-to-default-checked");
@@ -19,6 +20,7 @@ describe("Radio", () => {
       radio().should("be.checked");
     });
   });
+
   describe("Disabled", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radio--set-to-disabled");
@@ -32,6 +34,7 @@ describe("Radio", () => {
       radio().eq(1).should("be.disabled");
     });
   });
+
   describe("Controlled", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radio--controlled");
@@ -47,6 +50,7 @@ describe("Radio", () => {
       radio().eq(1).should("not.be.checked");
     });
   });
+
   describe("Set Focus", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radio--using-ref-to-control-focus");
@@ -77,6 +81,7 @@ describe("Radio Group", () => {
       radio().eq(1).should("not.be.checked");
     });
   });
+
   describe("All Props", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radiogroup--radio-group-with-all-props");
@@ -87,6 +92,7 @@ describe("Radio Group", () => {
       radio().eq(2).should("not.be.checked");
     });
   });
+
   describe("Disabled", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radiogroup--set-to-disabled");
@@ -102,15 +108,18 @@ describe("Radio Group", () => {
       radio().eq(2).should("be.disabled");
     });
   });
+
   describe("Controlled", () => {
     beforeEach(() => {
       cy.renderFromStorybook("radiogroup--controlled");
     });
+
     it("has the correct initial values", () => {
       radio().eq(0).should("be.checked");
       radio().eq(1).should("not.be.checked");
       radio().eq(2).should("not.be.checked");
     });
+
     it("values are not updated on click", () => {
       radio().eq(0).check();
       radio().eq(1).check();

cypress/e2e/components/Sidebar.spec.js → cypress/e2e/components/Sidebar.spec.ts

@@ -8,29 +8,35 @@ describe("Sidebar", () => {
     beforeEach(() => {
       cy.renderFromStorybook("sidebar--sidebar");
     });
+
     it("is hidden", () => {
       Sidebar().should("not.be.visible");
     });
+
     it("slides in when triggered", () => {
       trigger().click();
       Sidebar().should("be.visible");
     });
+
     it("slides out", () => {
       trigger().click();
       overlay().should("be.visible");
       overlay().click({ force: true });
       Sidebar().should("not.be.visible");
     });
   });
+
   describe("Accessibility", () => {
     beforeEach(() => {
       cy.renderFromStorybook("sidebar--sidebar");
     });
+
     it("focuses the close button when opened", () => {
       trigger().click();
       cy.focused().type("{enter}");
       Sidebar().should("not.be.visible");
     });
+
     it("focuses the trigger when closed", () => {
       trigger().click();
       cy.focused().type("{enter}");
@@ -39,27 +45,33 @@ describe("Sidebar", () => {
       Sidebar().should("be.visible");
     });
   });
+
   describe("Open by default", () => {
     beforeEach(() => {
       cy.renderFromStorybook("sidebar--open-by-default");
     });
+
     it("is shown", () => {
       Sidebar().should("be.visible");
     });
+
     it("slides out when overlay clicked", () => {
       overlay().click({ force: true });
       Sidebar().should("not.be.visible");
     });
+
     it("slides out when close button clicked", () => {
       closeButton().click({ force: true });
       Sidebar().should("not.be.visible");
     });
+
     it("slides in", () => {
       overlay().click({ force: true });
       trigger().click();
       Sidebar().should("be.visible");
     });
   });
+
   describe("Custom offset", () => {
     beforeEach(() => {
       cy.renderFromStorybook("sidebar--with-custom-offset");

cypress/e2e/components/Tabs.spec.js → cypress/e2e/components/Tabs.spec.ts

@@ -91,7 +91,7 @@ describe("Tabs", () => {
     });
 
     it("renders both scroll indicators when tabs are hidden on the left and right", () => {
-      cy.get(".tab-container").scrollTo(50);
+      cy.get(".tab-container").scrollTo(50, 0);
 
       cy.get("svg.nds-icon--leftArrow").should("not.exist");
       cy.get("svg.nds-icon--rightArrow").should("exist");

cypress/e2e/components/Tooltip.spec.js → cypress/e2e/components/Tooltip.spec.ts

@@ -3,24 +3,29 @@ describe("Tooltip", () => {
     beforeEach(() => {
       cy.renderFromStorybook("tooltip--tooltip");
     });
+
     it("hides content without interaction", () => {
-      cy.get('[role="tooltip"]').should("not.be.visible");
+      cy.get('[role="tooltip"]').should("not.exist");
     });
+
     it("shows content on hover", () => {
       cy.get('[aria-haspopup="true"]').trigger("mouseover");
       cy.get('[role="tooltip"]').should("be.visible");
       cy.isInViewport('[role="tooltip"]');
     });
   });
+
   describe("can be open by default", () => {
     beforeEach(() => {
       cy.renderFromStorybook("tooltip--open-by-default");
     });
+
     it("shows content initially", () => {
       cy.get('[aria-haspopup="true"]').trigger("mouseover");
       cy.get('[role="tooltip"]').should("be.visible");
       cy.isInViewport('[role="tooltip"]');
     });
+
     it("hides content on hover", () => {
       cy.get('[aria-haspopup="true"]').trigger("mouseover");
       cy.get('[aria-haspopup="true"]').trigger("mouseout");

cypress/support/commands.js → cypress/support/commands.ts

@@ -44,6 +44,7 @@ Cypress.Commands.add("clickOutsideElement", () => {
 
 Cypress.Commands.add("isInViewport", (element) => {
   cy.get(element).then(($el) => {
+    // @ts-ignore
     const bottom = Cypress.$(cy.state("window")).height();
     const rect = $el[0].getBoundingClientRect();
 
@@ -58,7 +59,7 @@ Cypress.Commands.add("isNotInViewport", (element) => {
   });
 });
 
-Cypress.Commands.add("paste", ({ destinationSelector, pastePayload, pasteType }) => {
+Cypress.Commands.add("paste", ({ destinationSelector, pastePayload }) => {
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
   cy.get(destinationSelector).then((destination) => {
     const pasteEvent = Object.assign(new Event("paste", { bubbles: true, cancelable: true }), {

cypress/support/index.ts

@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    isNotInViewport(element: string): Chainable<Element>;
+    isInViewport(element: string): Chainable<Element>;
+    renderFromStorybook(element: string): Chainable<Element>;
+    pressEscapeKey(): Chainable<Element>;
+    clickOutsideElement(): Chainable<Element>;
+    tab(): Chainable<Element>;
+    paste({
+      destinationSelector,
+      pastePayload,
+    }: {
+      destinationSelector: string;
+      pastePayload: string;
+    }): Chainable<Element>;
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node", "./support"]
+  },
+  "include": ["**/*.ts"]
+}

src/DropdownMenu/DropdownMenu.story.tsx

@@ -20,8 +20,8 @@ const customColors = {
 
 export default {
   title: "Components/DropdownMenu",
-  parameters: {
-    chromatic: { diffThreshold: 0.4 },
+  chromatic: {
+    diffThreshold: 0.4,
   },
 };
 

src/utils/numberFromDimension/numberFromDimension.spec.ts

@@ -1,17 +1,17 @@
-import numberFromDimension from "."
+import numberFromDimension from ".";
 
 describe("numberFromDimension", () => {
   it("returns the numerical value from a css dimension", () => {
-    const dimension = "12px"
-    const numericalValue = 12
-    
-    expect(numberFromDimension(dimension)).toEqual(numericalValue)
-  })
-  
+    const dimension = "12px";
+    const numericalValue = 12;
+
+    expect(numberFromDimension(dimension)).toEqual(numericalValue);
+  });
+
   it("handles any css unit", () => {
-    const dimension = "12deg"
-    const numericalValue = 12
+    const dimension = "12deg";
+    const numericalValue = 12;
 
-    expect(numberFromDimension(dimension)).toEqual(numericalValue)
-  })
-})
+    expect(numberFromDimension(dimension)).toEqual(numericalValue);
+  });
+});