From f80b33ac423e76c061f38d5a889765ec631eb902 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Mon, 25 Sep 2023 17:29:24 -0400
Subject: [PATCH] chore: convert Cypress files to TypeScript

---
 .../{Alert.spec.js => Alert.spec.ts}          |  4 ++--
 ...syncSelect.spec.js => AsyncSelect.spec.ts} |  0
 ...{DatePicker.spec.js => DatePicker.spec.ts} |  0
 .../{DateRange.spec.js => DateRange.spec.ts}  |  0
 ...pdownMenu.spec.js => DropdownMenu.spec.ts} |  0
 .../{NavBar.spec.js => NavBar.spec.ts}        |  0
 .../{Radio.spec.js => Radio.spec.ts}          |  9 +++++++++
 .../{Select.spec.js => Select.spec.ts}        |  0
 .../{Sidebar.spec.js => Sidebar.spec.ts}      | 12 ++++++++++++
 .../{Switcher.spec.js => Switcher.spec.ts}    |  0
 .../{Table.spec.js => Table.spec.ts}          |  0
 .../components/{Tabs.spec.js => Tabs.spec.ts} |  2 +-
 ...{TimePicker.spec.js => TimePicker.spec.ts} |  0
 .../{TimeRange.spec.js => TimeRange.spec.ts}  |  0
 .../{Toast.spec.js => Toast.spec.ts}          |  0
 ...ntainer.spec.js => ToastContainer.spec.ts} |  0
 .../{Toggle.spec.js => Toggle.spec.ts}        |  0
 .../{Tooltip.spec.js => Tooltip.spec.ts}      |  7 ++++++-
 ...atedText.spec.js => TruncatedText.spec.ts} |  0
 cypress/plugins/{index.js => index.ts}        |  0
 cypress/support/{commands.js => commands.ts}  |  3 ++-
 cypress/support/{e2e.js => e2e.ts}            |  0
 cypress/support/index.ts                      | 19 +++++++++++++++++++
 cypress/tsconfig.json                         |  8 ++++++++
 src/DropdownMenu/DropdownMenu.story.tsx       |  3 +++
 tsconfig.json                                 |  1 +
 26 files changed, 63 insertions(+), 5 deletions(-)
 rename cypress/e2e/components/{Alert.spec.js => Alert.spec.ts} (83%)
 rename cypress/e2e/components/{AsyncSelect.spec.js => AsyncSelect.spec.ts} (100%)
 rename cypress/e2e/components/{DatePicker.spec.js => DatePicker.spec.ts} (100%)
 rename cypress/e2e/components/{DateRange.spec.js => DateRange.spec.ts} (100%)
 rename cypress/e2e/components/{DropdownMenu.spec.js => DropdownMenu.spec.ts} (100%)
 rename cypress/e2e/components/{NavBar.spec.js => NavBar.spec.ts} (100%)
 rename cypress/e2e/components/{Radio.spec.js => Radio.spec.ts} (99%)
 rename cypress/e2e/components/{Select.spec.js => Select.spec.ts} (100%)
 rename cypress/e2e/components/{Sidebar.spec.js => Sidebar.spec.ts} (99%)
 rename cypress/e2e/components/{Switcher.spec.js => Switcher.spec.ts} (100%)
 rename cypress/e2e/components/{Table.spec.js => Table.spec.ts} (100%)
 rename cypress/e2e/components/{Tabs.spec.js => Tabs.spec.ts} (99%)
 rename cypress/e2e/components/{TimePicker.spec.js => TimePicker.spec.ts} (100%)
 rename cypress/e2e/components/{TimeRange.spec.js => TimeRange.spec.ts} (100%)
 rename cypress/e2e/components/{Toast.spec.js => Toast.spec.ts} (100%)
 rename cypress/e2e/components/{ToastContainer.spec.js => ToastContainer.spec.ts} (100%)
 rename cypress/e2e/components/{Toggle.spec.js => Toggle.spec.ts} (100%)
 rename cypress/e2e/components/{Tooltip.spec.js => Tooltip.spec.ts} (94%)
 rename cypress/e2e/components/{TruncatedText.spec.js => TruncatedText.spec.ts} (100%)
 rename cypress/plugins/{index.js => index.ts} (100%)
 rename cypress/support/{commands.js => commands.ts} (98%)
 rename cypress/support/{e2e.js => e2e.ts} (100%)
 create mode 100644 cypress/support/index.ts
 create mode 100644 cypress/tsconfig.json

diff --git a/cypress/e2e/components/Alert.spec.js b/cypress/e2e/components/Alert.spec.ts
similarity index 83%
rename from cypress/e2e/components/Alert.spec.js
rename to cypress/e2e/components/Alert.spec.ts
index b576b9a51..ec9d711b2 100644
--- a/cypress/e2e/components/Alert.spec.js
+++ b/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");
   });
 });
diff --git a/cypress/e2e/components/AsyncSelect.spec.js b/cypress/e2e/components/AsyncSelect.spec.ts
similarity index 100%
rename from cypress/e2e/components/AsyncSelect.spec.js
rename to cypress/e2e/components/AsyncSelect.spec.ts
diff --git a/cypress/e2e/components/DatePicker.spec.js b/cypress/e2e/components/DatePicker.spec.ts
similarity index 100%
rename from cypress/e2e/components/DatePicker.spec.js
rename to cypress/e2e/components/DatePicker.spec.ts
diff --git a/cypress/e2e/components/DateRange.spec.js b/cypress/e2e/components/DateRange.spec.ts
similarity index 100%
rename from cypress/e2e/components/DateRange.spec.js
rename to cypress/e2e/components/DateRange.spec.ts
diff --git a/cypress/e2e/components/DropdownMenu.spec.js b/cypress/e2e/components/DropdownMenu.spec.ts
similarity index 100%
rename from cypress/e2e/components/DropdownMenu.spec.js
rename to cypress/e2e/components/DropdownMenu.spec.ts
diff --git a/cypress/e2e/components/NavBar.spec.js b/cypress/e2e/components/NavBar.spec.ts
similarity index 100%
rename from cypress/e2e/components/NavBar.spec.js
rename to cypress/e2e/components/NavBar.spec.ts
diff --git a/cypress/e2e/components/Radio.spec.js b/cypress/e2e/components/Radio.spec.ts
similarity index 99%
rename from cypress/e2e/components/Radio.spec.js
rename to cypress/e2e/components/Radio.spec.ts
index 969b539e2..94a5eb2a5 100644
--- a/cypress/e2e/components/Radio.spec.js
+++ b/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();
diff --git a/cypress/e2e/components/Select.spec.js b/cypress/e2e/components/Select.spec.ts
similarity index 100%
rename from cypress/e2e/components/Select.spec.js
rename to cypress/e2e/components/Select.spec.ts
diff --git a/cypress/e2e/components/Sidebar.spec.js b/cypress/e2e/components/Sidebar.spec.ts
similarity index 99%
rename from cypress/e2e/components/Sidebar.spec.js
rename to cypress/e2e/components/Sidebar.spec.ts
index e16f20e36..b0ebf91c9 100644
--- a/cypress/e2e/components/Sidebar.spec.js
+++ b/cypress/e2e/components/Sidebar.spec.ts
@@ -8,13 +8,16 @@ 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");
@@ -22,15 +25,18 @@ describe("Sidebar", () => {
       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");
diff --git a/cypress/e2e/components/Switcher.spec.js b/cypress/e2e/components/Switcher.spec.ts
similarity index 100%
rename from cypress/e2e/components/Switcher.spec.js
rename to cypress/e2e/components/Switcher.spec.ts
diff --git a/cypress/e2e/components/Table.spec.js b/cypress/e2e/components/Table.spec.ts
similarity index 100%
rename from cypress/e2e/components/Table.spec.js
rename to cypress/e2e/components/Table.spec.ts
diff --git a/cypress/e2e/components/Tabs.spec.js b/cypress/e2e/components/Tabs.spec.ts
similarity index 99%
rename from cypress/e2e/components/Tabs.spec.js
rename to cypress/e2e/components/Tabs.spec.ts
index df16a740f..dc0c9dcd2 100644
--- a/cypress/e2e/components/Tabs.spec.js
+++ b/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");
diff --git a/cypress/e2e/components/TimePicker.spec.js b/cypress/e2e/components/TimePicker.spec.ts
similarity index 100%
rename from cypress/e2e/components/TimePicker.spec.js
rename to cypress/e2e/components/TimePicker.spec.ts
diff --git a/cypress/e2e/components/TimeRange.spec.js b/cypress/e2e/components/TimeRange.spec.ts
similarity index 100%
rename from cypress/e2e/components/TimeRange.spec.js
rename to cypress/e2e/components/TimeRange.spec.ts
diff --git a/cypress/e2e/components/Toast.spec.js b/cypress/e2e/components/Toast.spec.ts
similarity index 100%
rename from cypress/e2e/components/Toast.spec.js
rename to cypress/e2e/components/Toast.spec.ts
diff --git a/cypress/e2e/components/ToastContainer.spec.js b/cypress/e2e/components/ToastContainer.spec.ts
similarity index 100%
rename from cypress/e2e/components/ToastContainer.spec.js
rename to cypress/e2e/components/ToastContainer.spec.ts
diff --git a/cypress/e2e/components/Toggle.spec.js b/cypress/e2e/components/Toggle.spec.ts
similarity index 100%
rename from cypress/e2e/components/Toggle.spec.js
rename to cypress/e2e/components/Toggle.spec.ts
diff --git a/cypress/e2e/components/Tooltip.spec.js b/cypress/e2e/components/Tooltip.spec.ts
similarity index 94%
rename from cypress/e2e/components/Tooltip.spec.js
rename to cypress/e2e/components/Tooltip.spec.ts
index 49a928026..80ed9acfc 100644
--- a/cypress/e2e/components/Tooltip.spec.js
+++ b/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");
diff --git a/cypress/e2e/components/TruncatedText.spec.js b/cypress/e2e/components/TruncatedText.spec.ts
similarity index 100%
rename from cypress/e2e/components/TruncatedText.spec.js
rename to cypress/e2e/components/TruncatedText.spec.ts
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.ts
similarity index 100%
rename from cypress/plugins/index.js
rename to cypress/plugins/index.ts
diff --git a/cypress/support/commands.js b/cypress/support/commands.ts
similarity index 98%
rename from cypress/support/commands.js
rename to cypress/support/commands.ts
index aff63a131..ef756fc01 100644
--- a/cypress/support/commands.js
+++ b/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 }), {
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.ts
similarity index 100%
rename from cypress/support/e2e.js
rename to cypress/support/e2e.ts
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
new file mode 100644
index 000000000..b633f09db
--- /dev/null
+++ b/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>;
+  }
+}
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
new file mode 100644
index 000000000..6e0cd9f0e
--- /dev/null
+++ b/cypress/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node", "./support"]
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/src/DropdownMenu/DropdownMenu.story.tsx b/src/DropdownMenu/DropdownMenu.story.tsx
index 3a3229142..dfb403e5e 100644
--- a/src/DropdownMenu/DropdownMenu.story.tsx
+++ b/src/DropdownMenu/DropdownMenu.story.tsx
@@ -20,6 +20,9 @@ const customColors = {
 
 export default {
   title: "Components/DropdownMenu",
+  chromatic: {
+    diffThreshold: 0.4,
+  },
 };
 
 export const _DropdownMenu = () => (
diff --git a/tsconfig.json b/tsconfig.json
index c85521bdc..f0e2becdd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noImplicitAny": false,
+    "types": ["cypress", "node"],
     "jsx": "react"
   },
   "include": ["src/**/*"],