Merge pull request #50 from jadmsaadaot/SUBMIT-task#82

Add working example for cypress component test

submit-web/cypress/components/Projects/project.cy.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { mount } from "cypress/react18";
+import { Project } from "../../../src/components/Projects/Project";
+import { TestWrapper } from "../utils/TestWrapper";
+
+const MockProjectComponent = () => {
+  return (
+    <Project
+      accountProject={{
+        project: {
+          name: "Test Project 2",
+          ea_certificate: "1234",
+        },
+        packages: [],
+      }}
+    />
+  );
+};
+describe("<Project />", () => {
+  it("renders", () => {
+    mount(<TestWrapper component={MockProjectComponent} />);
+    cy.contains("Test Project");
+  });
+});

submit-web/cypress/components/Projects/projects.cy.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { mount } from "cypress/react18";
+import { ProjectsPage } from "../../../src/routes/_authenticated/_dashboard/projects";
+import { useAccount } from "../../../src/store/accountStore";
+import { mockZustandStore, setupTokenStorage } from "../utils";
+import { AppConfig } from "../../../src/utils/config";
+import { TestWrapper } from "../utils/TestWrapper";
+
+describe("<ProjectsPage />", () => {
+  beforeEach(() => {
+    mockZustandStore(useAccount, {
+      proponentId: 201,
+      accountId: 1,
+      isLoading: false,
+    });
+    setupTokenStorage();
+    cy.intercept("GET", `${AppConfig.apiUrl}/projects/accounts/1`, [
+      {
+        id: 1,
+        project_id: 1,
+        account_id: 1,
+        name: "Test Project",
+        project: {
+          id: 1,
+          name: "Test Project",
+          ea_certificate: "1234",
+        },
+        packages: [],
+      },
+    ]).as("getProjects");
+  });
+  it("renders", () => {
+    mount(<TestWrapper component={ProjectsPage} />);
+
+    cy.wait("@getProjects");
+    cy.contains("Test Project");
+    cy.contains("Management Plans");
+  });
+});

submit-web/cypress/components/utils/TestWrapper.tsx

@@ -0,0 +1,47 @@
+import { ThemeProvider } from "@emotion/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createRootRoute,
+  createRouter,
+  RouteComponent,
+  RouterProvider,
+} from "@tanstack/react-router";
+import React from "react";
+import { ReactNode } from "react";
+import { AuthProvider } from "react-oidc-context";
+import { OidcConfig } from "../../../src/utils/config";
+import { theme } from "../../../src/styles/theme";
+
+export const TestWrapper = ({
+  component,
+}: {
+  component: RouteComponent<ReactNode>;
+}) => {
+  const rootRoute = createRootRoute();
+  const queryClient = new QueryClient();
+
+  const mockAuth = {
+    // mock the necessary properties and methods for useAuth context
+    isAuthenticated: true,
+    user: { profile: { name: "Test User" } },
+    signoutRedirect: cy.stub(),
+    signinRedirect: cy.stub(),
+    // add other necessary mocks here
+  };
+  const router = createRouter({
+    routeTree: rootRoute,
+    context: {
+      authentication: mockAuth,
+    },
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <AuthProvider {...OidcConfig}>
+          <RouterProvider router={router} defaultComponent={component} />
+        </AuthProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+};

submit-web/cypress/components/utils/index.tsx

@@ -0,0 +1,21 @@
+import { OidcConfig } from "../../../src/utils/config";
+
+export const mockZustandStore = (storeModule, initialState) => {
+  const storeResetFn = storeModule.getState().reset;
+
+  storeModule.setState(initialState, true); // Reset the store state to initialState
+
+  // Clean up the mock after each test
+  return () => {
+    storeResetFn();
+  };
+};
+
+export const setupTokenStorage = () => {
+  sessionStorage.setItem(
+    `oidc.user:${OidcConfig.authority}:${OidcConfig.client_id}`,
+    JSON.stringify({
+      access_token: "1234",
+    }),
+  );
+};

submit-web/src/App.tsx

@@ -12,17 +12,15 @@ const queryClient = new QueryClient();
 
 function App() {
   return (
-    <>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <AuthProvider {...OidcConfig}>
-            <ModalProvider />
-            <SnackBarProvider />
-            <RouterProviderWithAuthContext />
-          </AuthProvider>
-        </ThemeProvider>
-      </QueryClientProvider>
-    </>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <AuthProvider {...OidcConfig}>
+          <ModalProvider />
+          <SnackBarProvider />
+          <RouterProviderWithAuthContext />
+        </AuthProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }
 

submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx

@@ -13,7 +13,7 @@ export const Route = createFileRoute("/_authenticated/_dashboard/projects/")({
   meta: () => [{ title: "All Projects" }],
 });
 
-function ProjectsPage() {
+export function ProjectsPage() {
   const { accountId } = useAccount();
   const {
     data: projectsData,