Comp 737 (#664)

* [COMP-737] Updated to Node 24, fixed breaking tests

* [COMP-737] Add package-lock

* [COMP-737] Testing actions now working

* [COMP-737] removed code-cov from action and created ticket to fix

Author: Ckoelewyn

.github/workflows/web.ci.yml

@@ -23,7 +23,7 @@ jobs:
     if: github.repository == 'bcgov/EPIC.compliance'
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - run: "true"
 
   linting:
@@ -32,12 +32,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [24.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
@@ -54,13 +54,13 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [24.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -73,18 +73,20 @@ jobs:
         run: |
           npx cypress run --component --headed --browser chrome
 
-      - name: Coverage Report
-        run: |
-          npx nyc report --reporter=lcov --reporter=text-summary
+      # Disabled because nyc is not supported and needs to be replaced.
+      # [COMP-769]
+      # - name: Coverage Report
+      #   run: |
+      #     npx nyc report --reporter=lcov --reporter=text-summary
 
   build-check:
     needs: setup-job
     runs-on: ubuntu-24.04
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies

compliance-api/Makefile

@@ -52,10 +52,12 @@ build-req: clean ## Upgrade requirements
 	pip install -Ur requirements/repo-libraries.txt
 
 install: clean ## Install python virtrual environment
-	test -f venv/bin/activate || python3 -m venv  $(CURRENT_ABS_DIR)/venv ;\
+	test -f venv/bin/activate || python3.10 -m venv  $(CURRENT_ABS_DIR)/venv ;\
 	. venv/bin/activate ;\
 	pip install --upgrade pip ;\
-	pip install -Ur requirements.txt
+	pip install -Ur requirements.txt ;\
+	pip install -Ur requirements/dev.txt ;\
+	pip install -Ur requirements/prod.txt
 
 install-dev: ## Install local application
 	. venv/bin/activate ; \
@@ -139,7 +141,7 @@ tag: push ## tag image
 # COMMANDS - Local                                                              #
 #################################################################################
 run: db ## Run the project in local
-	. venv/bin/activate && python -m flask run -p 3200
+	. venv/bin/activate && python -m flask run -p 5000
 
 db: ## Update the local database
 	. venv/bin/activate && flask db upgrade

compliance-web/.storybook/main.ts compliance-web/.storybook/main.ctscompliance-web/.storybook/main.ts renamed to compliance-web/.storybook/main.cts

@@ -0,0 +1,34 @@
+import { defineConfig } from "cypress";
+import { defineConfig as defineViteConfig } from "vite";
+
+import react from "@vitejs/plugin-react-swc";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import istanbul from "vite-plugin-istanbul";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+      viteConfig: defineViteConfig({
+        plugins: [
+          TanStackRouterVite(),
+          react(),
+          tsconfigPaths(),
+          istanbul({ cypress: true, requireEnv: false }),
+        ],
+        resolve: {
+          alias: {
+            "@": path.resolve(dirname, "src"),
+          },
+        },
+      }),
+    },
+  },
+});

compliance-web/cypress.config.cjs

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { mount } from "cypress/react18";
+import { mount } from "cypress/react";
 import ProjectDetailsForm from "@/components/App/ProjectDetailsForm"; // Adjust path accordingly
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { FormProvider, useForm } from "react-hook-form";

compliance-web/cypress.config.mjs

@@ -1,5 +1,5 @@
 import React from "react";
-import { mount } from "cypress/react18";
+import { mount } from "cypress/react";
 import CaseFileDrawer from "@/components/App/CaseFiles/CaseFileDrawer";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { CaseFile } from "@/models/CaseFile";
@@ -90,13 +90,13 @@ describe("CaseFileDrawer Component", () => {
 
   function mountComponent(isEditMode = false) {
     const onSubmitSpy = cy.spy().as("onSubmitSpy");
-    
+
     return mount(
       <QueryClientProvider client={queryClient}>
         <AuthProvider {...OidcConfig}>
-          <CaseFileDrawer 
-            onSubmit={onSubmitSpy} 
-            caseFile={isEditMode ? mockCaseFile : undefined} 
+          <CaseFileDrawer
+            onSubmit={onSubmitSpy}
+            caseFile={isEditMode ? mockCaseFile : undefined}
           />
         </AuthProvider>
       </QueryClientProvider>
@@ -108,12 +108,12 @@ describe("CaseFileDrawer Component", () => {
 
     // Check title
     cy.contains("Create Case File").should("be.visible");
-    
+
     // Check form fields are present
     cy.get('input[name="project"]').should("be.visible");
     cy.get('input[name="initiation"]').should("be.visible");
     cy.get('input[name="primaryOfficer"]').should("be.visible");
-    
+
     // Check submit button
     cy.contains("button", "Create").should("be.visible");
   });
@@ -123,12 +123,12 @@ describe("CaseFileDrawer Component", () => {
 
     // Check title shows case file number
     cy.contains("CF-2023-001").should("be.visible");
-    
+
     // Check form fields are populated with case file data
     cy.get('input[name="project"]').should("have.value", "Project 1");
     cy.get('input[name="initiation"]').should("have.value", "Initiation 1");
     cy.get('input[name="primaryOfficer"]').should("have.value", "User 1");
-    
+
     // Check submit button
     cy.contains("button", "Save").should("be.visible");
   });

compliance-web/cypress/components/_components/_App/ProjectDetailsForm.cy.tsx

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { mount } from "cypress/react18";
+import { mount } from "cypress/react";
 import CaseFileForm from "@/components/App/CaseFiles/CaseFileForm";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { FormProvider, useForm } from "react-hook-form";

compliance-web/cypress/components/_components/_App/_CaseFiles/CaseFileDrawer.cy.tsx

@@ -1,4 +1,4 @@
-import { mount } from "cypress/react18";
+import { mount } from "cypress/react";
 import CaseFileActions from "@/components/App/CaseFiles/Profile/CaseFileActions";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ModalProvider from "@/components/Shared/Modals/ModalProvider";

compliance-web/cypress/components/_components/_App/_CaseFiles/CaseFileForm.cy.tsx

@@ -1,8 +1,8 @@
-import { mount } from "cypress/react18";
+import { mount } from "cypress/react";
 import CaseFileComplaintsTable from "@/components/App/CaseFiles/Profile/CaseFileComplaintsTable";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { 
-  RouterProvider, 
+import {
+  RouterProvider,
   createMemoryHistory,
   createRootRoute,
   createRoute,
@@ -58,13 +58,13 @@ describe("CaseFileComplaintsTable", () => {
 
     // Create a simple router for testing
     const rootRoute = createRootRoute();
-    
+
     const complaintsRoute = createRoute({
       getParentRoute: () => rootRoute,
       path: '/ce-database/complaints/$complaintNumber',
       component: () => <div>Complaint Detail Page</div>
     });
-    
+
     const indexRoute = createRoute({
       getParentRoute: () => rootRoute,
       path: '/',
@@ -76,11 +76,11 @@ describe("CaseFileComplaintsTable", () => {
     });
 
     const routeTree = rootRoute.addChildren([indexRoute, complaintsRoute]);
-    
+
     const memoryHistory = createMemoryHistory({
       initialEntries: ['/'],
     });
-    
+
     const router = createRouter({
       routeTree,
       history: memoryHistory,
@@ -117,26 +117,26 @@ describe("CaseFileComplaintsTable", () => {
   it("expands accordion when clicked", () => {
     // Click on the first accordion to expand it
     cy.get('[role="button"]').first().click();
-    
+
     // Should show expanded content
     cy.contains("Concern Description").should("exist");
     cy.contains("Source").should("exist");
     cy.contains("Date Received").should("exist");
-    
+
     // Should show ExpandLessRounded icon when expanded
     cy.get('[data-testid="ExpandLessRoundedIcon"]').should("exist");
   });
 
   it("displays complaint details when expanded", () => {
     // Expand the first accordion
     cy.get('[role="button"]').first().click();
-    
+
     // Check for concern description
     cy.contains("Test concern description 1").should("exist");
-    
+
     // Check for source
     cy.contains("Source 1").should("exist");
-    
+
     // Check for formatted date
     cy.contains("2023-04-15").should("exist");
   });
@@ -155,29 +155,29 @@ describe("CaseFileComplaintsTable", () => {
     // Just check that the link has the correct href
     cy.get('a').contains("COMP_123").should('have.attr', 'href')
       .and('include', '/ce-database/complaints/');
-    
+
     // And that clicking doesn't throw errors
     cy.get('a').contains("COMP_123").click();
   });
 
   it("collapses accordion when clicked again", () => {
     // Expand the first accordion
     cy.get('[role="button"]').first().click();
-    
+
     // Verify it's expanded
     cy.contains("Concern Description").should("exist");
-    
+
     // Click again to collapse
     cy.get('[role="button"]').first().click();
-    
+
     // Verify it's collapsed (content should not be visible)
     cy.contains("Concern Description").should("not.be.visible");
   });
 
   it("shows no complaints message when there are no complaints", () => {
     // Set empty complaints data
     queryClient.setQueryData(["complaints-by-caseFileId", 1], []);
-    
+
     // Re-mount with empty data
     const rootRoute = createRootRoute();
     const indexRoute = createRoute({
@@ -192,9 +192,9 @@ describe("CaseFileComplaintsTable", () => {
     const routeTree = rootRoute.addChildren([indexRoute]);
     const memoryHistory = createMemoryHistory({ initialEntries: ['/'] });
     const router = createRouter({ routeTree, history: memoryHistory });
-    
+
     mount(<RouterProvider router={router as never} />);
-    
+
     cy.contains("You do not have any created complaints on this file.").should("exist");
   });
-}); 
+});