ZEVA-1744: Unit tests for 3 supplementary components

frontend/jest.config.js

@@ -1,29 +1,30 @@
 module.exports = {
-  testEnvironment: 'jest-environment-jsdom',
-  collectCoverageFrom: ['src/**/*.{js,jsx}'],
-  coverageReporters: ['json'],
+  testEnvironment: "jest-environment-jsdom",
+  collectCoverageFrom: ["src/**/*.{js,jsx}"],
+  coverageReporters: ["json", "html", "lcov"],
   coverageThreshold: {
     global: {
       branches: 1,
       functions: 1,
       lines: 1,
-      statements: -6000
-    }
+      statements: -6000,
+    },
   },
-  moduleFileExtensions: ['js', 'node', 'json'],
+  moduleFileExtensions: ["js", "node", "json"],
   moduleNameMapper: {
-    '^.+\\.(css|less|scss)$': '<rootDir>/__mocks__/style.js'
+    "^.+\\.(css|less|scss)$": "<rootDir>/__mocks__/style.js",
   },
-  setupFiles: ['./jest.setup.js'],
+  setupFiles: ["./jest.setup.js"],
   testEnvironmentOptions: {
-    url: 'http://localhost/'
+    url: "http://localhost/",
   },
   transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest'
+    "^.+\\.(js|jsx)$": "babel-jest",
   },
-  coveragePathIgnorePatterns: ['node_modules/'],
+  testPathIgnorePatterns: ["/node_modules/", "/__tests__/test-data/"],
+  coveragePathIgnorePatterns: ["node_modules/", "/__tests__/test-data/"],
   verbose: true,
   globals: {
-    __VERSION__: ''
-  }
-}
+    __VERSION__: "",
+  },
+};

frontend/jest.setup.js

@@ -1,6 +1,6 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { fab } from '@fortawesome/free-brands-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons'
-import { fas } from '@fortawesome/free-solid-svg-icons'
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
 
-library.add(fab, far, fas)
+library.add(fab, far, fas);

frontend/package.json

@@ -64,7 +64,8 @@
     "@storybook/addon-storyshots": "^6.1.21",
     "@storybook/react": "^6.1.21",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
+    "@testing-library/react": "^10.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.1.0",

frontend/src/supplementary/components/UploadEvidence.js

@@ -1,17 +1,16 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import axios from 'axios'
-import ExcelFileDrop from '../../app/components/FileDrop'
-import getFileSize from '../../app/utilities/getFileSize'
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios";
+import ExcelFileDrop from "../../app/components/FileDrop";
+import getFileSize from "../../app/utilities/getFileSize";
 
 const UploadEvidence = (props) => {
-  const { details, setUploadFiles, files, setDeleteFiles, deleteFiles } = props
+  const { details, setUploadFiles, files, setDeleteFiles, deleteFiles } = props;
 
   const removeFile = (removedFile) => {
-    const found = files.findIndex((file) => file === removedFile)
-    files.splice(found, 1)
-    setUploadFiles([...files])
-  }
+    const updatedFiles = files.filter((file) => file !== removedFile);
+    setUploadFiles(updatedFiles);
+  };
 
   return (
     <>
@@ -47,21 +46,21 @@ const UploadEvidence = (props) => {
                       onClick={() => {
                         axios
                           .get(attachment.url, {
-                            responseType: 'blob',
+                            responseType: "blob",
                             headers: {
-                              Authorization: null
-                            }
+                              Authorization: null,
+                            },
                           })
                           .then((response) => {
                             const objectURL = window.URL.createObjectURL(
-                              new Blob([response.data])
-                            )
-                            const link = document.createElement('a')
-                            link.href = objectURL
-                            link.setAttribute('download', attachment.filename)
-                            document.body.appendChild(link)
-                            link.click()
-                          })
+                              new Blob([response.data]),
+                            );
+                            const link = document.createElement("a");
+                            link.href = objectURL;
+                            link.setAttribute("download", attachment.filename);
+                            document.body.appendChild(link);
+                            link.click();
+                          });
                       }}
                       type="button"
                     >
@@ -75,7 +74,7 @@ const UploadEvidence = (props) => {
                     <button
                       className="delete"
                       onClick={() => {
-                        setDeleteFiles([...deleteFiles, attachment.id])
+                        setDeleteFiles([...deleteFiles, attachment.id]);
                       }}
                       type="button"
                     >
@@ -84,7 +83,7 @@ const UploadEvidence = (props) => {
                   </div>
                 </div>
               ))}
-          {files.map((file, index) => (
+          {files.map((file) => (
             <div className="row" key={file.name}>
               <div className="col-8 filename">{file.name}</div>
               <div className="col-3 size" key="size">
@@ -94,7 +93,7 @@ const UploadEvidence = (props) => {
                 <button
                   className="delete"
                   onClick={() => {
-                    removeFile(file)
+                    removeFile(file);
                   }}
                   type="button"
                 >
@@ -106,7 +105,7 @@ const UploadEvidence = (props) => {
         </div>
       )}
     </>
-  )
-}
+  );
+};
 
-export default UploadEvidence
+export default UploadEvidence;

frontend/src/supplementary/components/__tests__/SupplementaryAlerts.test.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import SupplementaryAlert from "../SupplementaryAlert";
+import "@testing-library/jest-dom/extend-expect";
+import { SupplimentaryAlertsTestData } from "./test-data/testData";
+
+// mock the alert component
+jest.mock(
+  "../../../app/components/Alert",
+  () =>
+    ({ title, icon, classname, message }) => (
+      <div data-testid="alert-mock">
+        <span data-testid="title">{title}</span>
+        <span data-testid="icon">{icon}</span>
+        <span data-testid="classname">{classname}</span>
+        <span data-testid="message">{message}</span>
+      </div>
+    ),
+);
+
+describe("SupplementaryAlert", () => {
+  const { testCases } = SupplimentaryAlertsTestData;
+  const setup = (status) => {
+    render(<SupplementaryAlert {...defaultProps} status={status} />);
+  };
+
+  const defaultProps = {
+    date: "2024-12-10",
+    user: "John Doe",
+  };
+
+  const checkStatusRender = (title, icon, classname, message) => {
+    expect(screen.getByTestId("title").textContent).toBe(title);
+    expect(screen.getByTestId("icon").textContent).toBe(icon);
+    expect(screen.getByTestId("classname").textContent).toBe(classname);
+    expect(screen.getByTestId("message").textContent).toBe(message);
+  };
+
+  testCases.forEach(({ status, expected }) => {
+    it(`renders correctly for status "${status}"`, () => {
+      setup(status);
+      checkStatusRender(
+        expected.title,
+        expected.icon,
+        expected.classname,
+        expected.message,
+      );
+    });
+  });
+});

frontend/src/supplementary/components/__tests__/SupplierInformation.test.js

@@ -0,0 +1,102 @@
+import React from "react";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import SupplierInformation from "../SupplierInformation";
+import { SupplierInfoTestData } from "./test-data/testData";
+
+describe("SupplierInformation component", () => {
+  const mockHandleInputChange = jest.fn();
+  const { mockDetails, mockNewData, mockUser } = SupplierInfoTestData;
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const defaultProps = {
+    details: mockDetails,
+    handleInputChange: mockHandleInputChange,
+    newData: mockNewData,
+    user: mockUser,
+    isEditable: true,
+  };
+
+  const setup = () => {
+    render(<SupplierInformation {...defaultProps} />);
+  };
+
+  it("displays initial values", () => {
+    setup();
+    expect(screen.getByText("Test Company")).toBeInTheDocument();
+    // address used in multiple places
+    expect(
+      screen.getAllByText("123 Main St, Suite 100, Surrey, BC, Canada, V0S1N0"),
+    ).not.toHaveLength(0);
+    expect(
+      screen.getAllByText("456 Elm St, Victoria, BC, Canada, V8V1V1"),
+    ).not.toHaveLength(0);
+    expect(screen.getByText("Ford")).toBeInTheDocument();
+    expect(screen.getByText("Toyota")).toBeInTheDocument();
+    expect(screen.getByText("Class A")).toBeInTheDocument();
+  });
+
+  it("applies the highlight class when values differ", () => {
+    setup();
+    expect(screen.getByDisplayValue("New Test Company")).toHaveClass(
+      "highlight",
+    );
+    expect(screen.getByDisplayValue("Class B")).toHaveClass("highlight");
+  });
+
+  it("does not apply the highlight class when values match", () => {
+    const props = {
+      ...defaultProps,
+      newData: {
+        supplierInfo: {
+          ...SupplierInfoTestData.mockNewData.supplierInfo,
+          legalName: "Test Company",
+          supplierClass: "Class A",
+        },
+      },
+    };
+
+    render(<SupplierInformation {...props} />);
+
+    expect(screen.getByDisplayValue("Test Company")).not.toHaveClass(
+      "highlight",
+    );
+    expect(screen.getByDisplayValue("Class A")).not.toHaveClass("highlight");
+  });
+
+  it("calls handleInputChange on input change", () => {
+    setup();
+    const input = screen.getByDisplayValue("New Test Company");
+    fireEvent.change(input, { target: { value: "Updated Company" } });
+
+    expect(mockHandleInputChange).toHaveBeenCalledTimes(1);
+  });
+  it("renders a message for non-government users", () => {
+    setup();
+    expect(
+      screen.getByText(
+        "Make the required updates in the fields next to the original submitted values and provide an explanation in the comment box at the bottom of this form.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("does not render the message for government users", () => {
+    const props = {
+      ...defaultProps,
+      user: { isGovernment: true },
+    };
+    render(<SupplierInformation {...props} />);
+    expect(
+      screen.queryByText(
+        "Make the required updates in the fields next to the original submitted values and provide an explanation in the comment box at the bottom of this form.",
+      ),
+    ).not.toBeInTheDocument();
+  });
+});