From 296f6b2e8a92a35632769ada0c7984b750ee7677 Mon Sep 17 00:00:00 2001 From: Haider Alshamma 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 +++ .../numberFromDimension.spec.ts | 24 +++++++++---------- 26 files changed, 74 insertions(+), 17 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 @@ +/// + +declare namespace Cypress { + interface Chainable { + isNotInViewport(element: string): Chainable; + isInViewport(element: string): Chainable; + renderFromStorybook(element: string): Chainable; + pressEscapeKey(): Chainable; + clickOutsideElement(): Chainable; + tab(): Chainable; + paste({ + destinationSelector, + pastePayload, + }: { + destinationSelector: string; + pastePayload: string; + }): Chainable; + } +} 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/src/utils/numberFromDimension/numberFromDimension.spec.ts b/src/utils/numberFromDimension/numberFromDimension.spec.ts index 1dcc5ee16..620d3c721 100644 --- a/src/utils/numberFromDimension/numberFromDimension.spec.ts +++ b/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); + }); +});