diff --git a/cypress.d.ts b/cypress.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..b568b6b91dcfe94482673b79ca25f5ebc02fa89e --- /dev/null +++ b/cypress.d.ts @@ -0,0 +1,10 @@ +import { mount } from "cypress/react18"; + +declare global { + namespace Cypress { + interface Chainable { + mount: typeof mount; + login(): Chainable<void>; + } + } +} diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 5c57c92db26323d7e4c11e22b118f2c045b02d0d..16bc7789a8ae9e15b2f1e7396287202aab152d3a 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -26,8 +26,13 @@ // Import React Testing Library commands (select by a11y role etc) import "@testing-library/cypress/add-commands"; +import { mount } from "cypress/react18"; // import custom auth commands Cypress.Commands.add("login", () => { cy.setCookie("ce-deploy-auth", "DEADBEEF"); }); + +Cypress.Commands.add("mount", (component, options) => { + return mount(component, options); +}); diff --git a/cypress/support/component.jsx b/cypress/support/component.jsx index c9dbcc773edd0ece3d9a64b7198ee3a1225bf908..a39fd5311ecc1744a934afbdce64bedda6b64eb6 100644 --- a/cypress/support/component.jsx +++ b/cypress/support/component.jsx @@ -15,7 +15,6 @@ // Import commands.js using ES2015 syntax: import "./commands"; -import { ReduxProvider } from "../../src/store/ReduxProvider"; // Alternatively you can use CommonJS syntax: // require("./commands") @@ -23,8 +22,9 @@ import { ReduxProvider } from "../../src/store/ReduxProvider"; import { mount } from "cypress/react"; import { interceptAPI } from "./interceptAPI"; import configure from "./configureWindowVars"; -Cypress.Commands.add("mount", (component, options = {}) => { +import { ReduxProvider } from "../../src/store/ReduxProvider"; +Cypress.Commands.add("mount", (component, options = {}) => { const wrappedComponent = <ReduxProvider>{component}</ReduxProvider>; return mount(wrappedComponent, options); }); diff --git a/src/api/UserProvider.spec.tsx b/src/api/UserProvider.spec.tsx index 694323e4566ec8933554ebd51eceeea016c8a948..2f0abdeb3a77ad611f6bebef8ecf8bdf188af9b5 100644 --- a/src/api/UserProvider.spec.tsx +++ b/src/api/UserProvider.spec.tsx @@ -1,27 +1,10 @@ import { useContext } from "react"; import { userContext } from "@ess-ics/ce-ui-common"; import { SnackbarProvider } from "notistack"; -import { DeployAPIProvider } from "./APIProvider"; import { UserProvider } from "./UserProvider"; -function AppHarness({ children }) { - return ( - <SnackbarProvider - preventDuplicate - maxSnack="5" - > - <DeployAPIProvider>{children}</DeployAPIProvider> - </SnackbarProvider> - ); -} - -function mountIntoHarness(children) { - cy.mount(<AppHarness>{children}</AppHarness>); -} - function DisplayUserContextValue() { const contextValue = useContext(userContext); - return <pre id="display">{JSON.stringify(contextValue, null, 2)}</pre>; } @@ -32,10 +15,15 @@ describe("UserProvider", () => { }); it("provides the user", () => { - mountIntoHarness( - <UserProvider> - <DisplayUserContextValue /> - </UserProvider> + cy.mount( + <SnackbarProvider + preventDuplicate + maxSnack={5} + > + <UserProvider> + <DisplayUserContextValue /> + </UserProvider> + </SnackbarProvider> ); cy.wait("@getUserRoles"); diff --git a/src/components/IOC/IOCTable/IOCTable.spec.tsx b/src/components/IOC/IOCTable/IOCTable.spec.tsx index 2237395696eaefcccf2574e6eb8feac93f3224a3..2bc1b0c690b0fbb3c040fee41076c731ab46d925 100644 --- a/src/components/IOC/IOCTable/IOCTable.spec.tsx +++ b/src/components/IOC/IOCTable/IOCTable.spec.tsx @@ -45,7 +45,7 @@ describe("IOCTable", () => { .should(($el) => { const text = $el.text().trim().toLowerCase(); const expected = firstRowData[index].trim().toLowerCase(); - cy.expect(text).to.equal(expected); + expect(text).to.equal(expected); }); } }); diff --git a/src/components/host/HostTable.spec.tsx b/src/components/host/HostTable.spec.tsx index 5ad3da3dd8906568fd57931d9af2592972358bb2..d3b612fd5eca7f0a8782d867a1220732e47a4348 100644 --- a/src/components/host/HostTable.spec.tsx +++ b/src/components/host/HostTable.spec.tsx @@ -45,7 +45,7 @@ describe("HostTable", () => { .should(($el) => { const text = $el.text().trim().toLowerCase(); const expected = firstRowData[index].trim().toLowerCase(); - cy.expect(text).to.equal(expected); + expect(text).to.equal(expected); }); } }); diff --git a/tsconfig.json b/tsconfig.json index 543a317d1cd9bf51be54531b1cf058202959f5fd..d291f9f921a5ad6280b635c80fbcc49492171cf2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,8 +20,14 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, - "types": ["@types/react", "@types/react-dom", "vite/client"] + "types": [ + "cypress", + "@testing-library/cypress", + "@types/react", + "@types/react-dom", + "vite/client" + ] }, - "include": ["src"], + "include": ["src", "cypress.d.ts"], "exclude": ["node_modules", "build"] }