Merge pull request #1711 from AletheiaFact/setup-cypress-component-te…

…sting feat: Configuration branch to enable the component testing area
AletheiaFact · Feb 19, 2025 · 7fe75d4 · 7fe75d4
2 parents eadf1ae + a1d0fc1
commit 7fe75d4
Show file tree

Hide file tree

Showing 45 changed files with 445 additions and 90 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -110,3 +110,5 @@ jobs:
                   wait-on: "http://localhost:3000"
               env:
                   CI: true
+            - name: Run Cypress Component Tests
+            - run: yarn cypress run --component
diff --git a/.yarn/cache/@cypress-react-npm-9.0.0-1782969f65-b0ad2bff80.zip b/.yarn/cache/@cypress-react-npm-9.0.0-1782969f65-b0ad2bff80.zip
diff --git a/...est-npm-2.88.12-9c79415088-2c6fbf7f31.zip → ...quest-npm-3.0.7-c52826fe4d-af17367647.zip b/...est-npm-2.88.12-9c79415088-2c6fbf7f31.zip → ...quest-npm-3.0.7-c52826fe4d-af17367647.zip
diff --git a/.yarn/cache/call-bind-apply-helpers-npm-1.0.1-cda777c96d-3c55343261.zip b/.yarn/cache/call-bind-apply-helpers-npm-1.0.1-cda777c96d-3c55343261.zip
diff --git a/.yarn/cache/call-bound-npm-1.0.3-f4cbf26326-a93bbe0f2d.zip b/.yarn/cache/call-bound-npm-1.0.3-f4cbf26326-a93bbe0f2d.zip
diff --git a/.yarn/cache/ci-info-npm-4.1.0-f0fb92b1e5-dcf286abdc.zip b/.yarn/cache/ci-info-npm-4.1.0-f0fb92b1e5-dcf286abdc.zip
diff --git a/.yarn/cache/cypress-npm-12.17.4-8b5af8205b-c9c79f5493.zip b/.yarn/cache/cypress-npm-12.17.4-8b5af8205b-c9c79f5493.zip
diff --git a/.yarn/cache/cypress-npm-13.17.0-5641326a05-c1d87358e8.zip b/.yarn/cache/cypress-npm-13.17.0-5641326a05-c1d87358e8.zip
diff --git a/.yarn/cache/dunder-proto-npm-1.0.1-90eb6829db-149207e36f.zip b/.yarn/cache/dunder-proto-npm-1.0.1-90eb6829db-149207e36f.zip
diff --git a/.yarn/cache/es-define-property-npm-1.0.1-3fc6324f1c-0512f4e5d5.zip b/.yarn/cache/es-define-property-npm-1.0.1-3fc6324f1c-0512f4e5d5.zip
diff --git a/.yarn/cache/es-errors-npm-1.3.0-fda0c9b8a8-ec1414527a.zip b/.yarn/cache/es-errors-npm-1.3.0-fda0c9b8a8-ec1414527a.zip
diff --git a/.yarn/cache/es-object-atoms-npm-1.1.1-362d8043c2-214d376728.zip b/.yarn/cache/es-object-atoms-npm-1.1.1-362d8043c2-214d376728.zip
diff --git a/.yarn/cache/form-data-npm-4.0.1-f1a27a1c2e-ccee458cd5.zip b/.yarn/cache/form-data-npm-4.0.1-f1a27a1c2e-ccee458cd5.zip
diff --git a/.yarn/cache/function-bind-npm-1.1.2-7a55be9b03-2b0ff4ce70.zip b/.yarn/cache/function-bind-npm-1.1.2-7a55be9b03-2b0ff4ce70.zip
diff --git a/.yarn/cache/get-intrinsic-npm-1.2.7-2e0e0e7564-a1597b3b43.zip b/.yarn/cache/get-intrinsic-npm-1.2.7-2e0e0e7564-a1597b3b43.zip
diff --git a/.yarn/cache/get-proto-npm-1.0.1-4d30bac614-4fc96afdb5.zip b/.yarn/cache/get-proto-npm-1.0.1-4d30bac614-4fc96afdb5.zip
diff --git a/.yarn/cache/gopd-npm-1.2.0-df89ffa78e-cc6d8e655e.zip b/.yarn/cache/gopd-npm-1.2.0-df89ffa78e-cc6d8e655e.zip
diff --git a/.yarn/cache/has-symbols-npm-1.1.0-9aa7dc2ac1-b2316c7302.zip b/.yarn/cache/has-symbols-npm-1.1.0-9aa7dc2ac1-b2316c7302.zip
diff --git a/.yarn/cache/hasown-npm-2.0.2-80fe6c9901-e8516f776a.zip b/.yarn/cache/hasown-npm-2.0.2-80fe6c9901-e8516f776a.zip
diff --git a/...ature-npm-1.3.6-5b2eff4373-10be2af476.zip → ...ature-npm-1.4.0-086af1c8e9-f07f4cc048.zip b/...ature-npm-1.3.6-5b2eff4373-10be2af476.zip → ...ature-npm-1.4.0-086af1c8e9-f07f4cc048.zip
diff --git a/.yarn/cache/is-ci-npm-3.0.1-d9aea361e1-192c66dc78.zip b/.yarn/cache/is-ci-npm-3.0.1-d9aea361e1-192c66dc78.zip
diff --git a/.yarn/cache/math-intrinsics-npm-1.1.0-9204d80e7d-0e513b29d1.zip b/.yarn/cache/math-intrinsics-npm-1.1.0-9204d80e7d-0e513b29d1.zip
diff --git a/.yarn/cache/object-inspect-npm-1.13.3-b4e129b6d9-8c96210211.zip b/.yarn/cache/object-inspect-npm-1.13.3-b4e129b6d9-8c96210211.zip
diff --git a/.yarn/cache/qs-npm-6.10.4-9b6a538d57-31e4fedd75.zip b/.yarn/cache/qs-npm-6.10.4-9b6a538d57-31e4fedd75.zip
diff --git a/.yarn/cache/qs-npm-6.13.1-84fb125e32-86c5059146.zip b/.yarn/cache/qs-npm-6.13.1-84fb125e32-86c5059146.zip
diff --git a/.yarn/cache/requires-port-npm-1.0.0-fd036b488a-eee0e303ad.zip b/.yarn/cache/requires-port-npm-1.0.0-fd036b488a-eee0e303ad.zip
diff --git a/.yarn/cache/side-channel-list-npm-1.0.0-14f74146d1-603b928997.zip b/.yarn/cache/side-channel-list-npm-1.0.0-14f74146d1-603b928997.zip
diff --git a/.yarn/cache/side-channel-map-npm-1.0.1-5903573b3c-42501371cd.zip b/.yarn/cache/side-channel-map-npm-1.0.1-5903573b3c-42501371cd.zip
diff --git a/.yarn/cache/side-channel-npm-1.1.0-4993930974-bf73d6d668.zip b/.yarn/cache/side-channel-npm-1.1.0-4993930974-bf73d6d668.zip
diff --git a/.yarn/cache/side-channel-weakmap-npm-1.0.2-027acaf499-a815c89bc7.zip b/.yarn/cache/side-channel-weakmap-npm-1.0.2-027acaf499-a815c89bc7.zip
diff --git a/.yarn/cache/sshpk-npm-1.18.0-e75427668c-01d43374ee.zip b/.yarn/cache/sshpk-npm-1.18.0-e75427668c-01d43374ee.zip
diff --git a/.yarn/cache/tldts-core-npm-6.1.71-cc68dd578b-f2a6e02a04.zip b/.yarn/cache/tldts-core-npm-6.1.71-cc68dd578b-f2a6e02a04.zip
diff --git a/.yarn/cache/tldts-npm-6.1.71-74ea01b8d1-0831e1941f.zip b/.yarn/cache/tldts-npm-6.1.71-74ea01b8d1-0831e1941f.zip
diff --git a/.yarn/cache/tmp-npm-0.2.3-ac2a701365-73b5c96b6e.zip b/.yarn/cache/tmp-npm-0.2.3-ac2a701365-73b5c96b6e.zip
diff --git a/.yarn/cache/tough-cookie-npm-4.1.3-08285e2518-c9226afff3.zip b/.yarn/cache/tough-cookie-npm-4.1.3-08285e2518-c9226afff3.zip
diff --git a/.yarn/cache/tough-cookie-npm-5.1.0-a5655b81b0-6f985b41e9.zip b/.yarn/cache/tough-cookie-npm-5.1.0-a5655b81b0-6f985b41e9.zip
diff --git a/.yarn/cache/universalify-npm-0.2.0-9984e61c10-e86134cb12.zip b/.yarn/cache/universalify-npm-0.2.0-9984e61c10-e86134cb12.zip
diff --git a/.yarn/cache/url-parse-npm-1.5.10-64fa2bcd6d-fbdba6b1d8.zip b/.yarn/cache/url-parse-npm-1.5.10-64fa2bcd6d-fbdba6b1d8.zip
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -6,11 +6,20 @@ export default defineConfig({
     screenshotOnRunFailure: false,
     pageLoadTimeout: 480000,
     defaultCommandTimeout: 65000,
+
     e2e: {
+        baseUrl: process.env.CYPRESS_BASE_URL || "http://localhost:3000",
         // 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.ts").default(on, config);
         },
     },
+
+    component: {
+        devServer: {
+            framework: "next",
+            bundler: "webpack",
+        },
+    },
 });
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from "cypress/react18";
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount;
+        }
+    }
+}
+
+Cypress.Commands.add("mount", mount);
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
         "@babel/polyfill": "^7.12.1",
         "@casl/ability": "^6.0.0",
         "@compodoc/compodoc": "^1.1.21",
+        "@cypress/react": "^9.0.0",
         "@dhaiwat10/react-link-preview": "^1.9.1",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
@@ -203,7 +204,7 @@
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.2.5",
         "concurrently": "^8.2.1",
-        "cypress": "^12.17.4",
+        "cypress": "13.17.0",
         "env-cmd": "^10.1.0",
         "eslint": "7.0.0",
         "eslint-config-next": "^12.0.10",

diff --git a/src/components/BackButton.cy.tsx b/src/components/BackButton.cy.tsx
@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+
+import React from "react";
+import { mount } from "cypress/react";
+import BackButton from "../../src/components/BackButton";
+
+describe("BackButton Component", () => {
+    describe("should not render on home page or root path", () => {
+        const mockRouter = (pathname: string) => {
+            cy.stub(require("next/router"), "useRouter").returns({
+                pathname,
+                route: pathname,
+                query: {},
+                asPath: pathname,
+                push: cy.stub(),
+                replace: cy.stub(),
+                prefetch: cy.stub().resolves(),
+            });
+        };
+
+        it("should render and handle callback", () => {
+            const callbackSpy = cy.spy().as("callbackSpy");
+
+            mount(<BackButton callback={callbackSpy} isVisible={true} />);
+
+            cy.get('[data-cy="testBackButton"]').should("be.visible").click();
+            cy.get("@callbackSpy").should("have.been.calledOnce");
+        });
+
+        it("should call router.back when no callback is provided", () => {
+            const routerBackSpy = cy.spy().as("routerBackSpy");
+
+            cy.stub(require("next/router"), "useRouter").returns({
+                pathname: "/another-page",
+                back: routerBackSpy,
+            });
+
+            mount(<BackButton isVisible={true} />);
+
+            cy.get('[data-cy="testBackButton"]').click();
+            cy.get("@routerBackSpy").should("have.been.calledOnce");
+        });
+
+        it("should not render when isVisible is false", () => {
+            mount(<BackButton isVisible={false} />);
+
+            cy.get('[data-cy="testBackButton"]').should("not.exist");
+        });
+
+        it("should not render on the root path", () => {
+            mockRouter("/");
+            mount(<BackButton isVisible={true} />);
+            cy.get('[data-cy="testBackButton"]').should("not.exist");
+        });
+
+        it("should not render on the home page path", () => {
+            mockRouter("/home-page");
+            mount(<BackButton isVisible={true} />);
+            cy.get('[data-cy="testBackButton"]').should("not.exist");
+        });
+    });
+});
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
@@ -1,23 +1,34 @@
 import { useTranslation } from "next-i18next";
 import React, { CSSProperties } from "react";
-import  { ArrowBackOutlined }  from "@mui/icons-material";
+import { ArrowBackOutlined } from "@mui/icons-material";
 import { useRouter } from "next/router";
 import colors from "../styles/colors";
 
-function BackButton({ style, callback }: { style?: CSSProperties; callback?: () => void }) {
+function BackButton({
+    style,
+    callback,
+    isVisible = true,
+}: {
+    style?: CSSProperties;
+    callback?: () => void;
+    isVisible?: boolean;
+}) {
     const { t } = useTranslation();
     const router = useRouter();
-    const pathname = router.pathname || "";
+    const pathname = router?.pathname || "";
 
-    if (pathname !== "/" && pathname !== "/home-page") {
+    console.log("pthname:", pathname);
+    console.log("isVisible:", isVisible);
+
+    if (pathname !== "/" && pathname !== "/home-page" && isVisible) {
         return (
             <a
                 style={{
-                    display:"flex",
-                    alignContent:"center",
+                    display: "flex",
+                    alignContent: "center",
                     fontWeight: "bold",
                     color: colors.secondary,
-                    ...style
+                    ...style,
                 }}
                 data-cy="testBackButton"
                 onClick={() => {
@@ -30,7 +41,7 @@ function BackButton({ style, callback }: { style?: CSSProperties; callback?: ()
                     }
                 }}
             >
-                <ArrowBackOutlined fontSize="small"/> {t("common:back_button")}
+                <ArrowBackOutlined fontSize="small" /> {t("common:back_button")}
             </a>
         );
     } else {