chore(jest): introduce coverage check

.github/workflows/unit.yml

@@ -17,4 +17,4 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Run jest test
-        run: npm run test:unit
+        run: npm run test:jest:coverage

jest.config.mjs

@@ -14,6 +14,14 @@ const config = {
   testEnvironment: "jest-environment-jsdom",
   testMatch: ["**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
   testPathIgnorePatterns: ["/node_modules/", "/.next/", "/e2e/"],
+  collectCoverageFrom: ["**/*.{ts,tsx}", "!**/*.d.ts", "!**/node_modules/**"],
+  coverageThreshold: {
+    global: {
+      branches: 5,
+      functions: 5,
+      lines: 5,
+    },
+  },
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -16,7 +16,8 @@
     "prisma:migrate-prod": "prisma migrate deploy",
     "prisma:seed": "prisma db seed",
     "test:e2e": "playwright test",
-    "test:unit": "jest",
+    "test:jest": "jest",
+    "test:jest:coverage": "jest --coverage",
     "test:local-e2e-docker": "chmod +x ./scripts/runE2ELocally.sh && ./scripts/runE2ELocally.sh --copy-tests"
   },
   "prisma": {

src/scenes/Application/components/ApplicationSteps/components/__tests__/ApplicationStep.test.tsx

@@ -0,0 +1,90 @@
+import { screen, render } from "@testing-library/react";
+import ApplicationStep from "../ApplicationStep";
+import getLocalApplicationDataStepCompleted from "@/services/helpers/localData/getLocalApplicationDataStepCompleted";
+
+jest.mock(
+  "../../../../../../services/helpers/localData/getLocalApplicationDataStepCompleted"
+);
+
+const renderComponent = ({
+  isCompleted,
+  shouldUseLocalIsCompleted,
+  isLocalCompleted,
+}: {
+  isCompleted: boolean;
+  shouldUseLocalIsCompleted: boolean;
+  isLocalCompleted: boolean;
+}) => {
+  (getLocalApplicationDataStepCompleted as jest.Mock).mockReturnValue(
+    isLocalCompleted
+  );
+  const step = {
+    id: 1,
+    position: 1,
+    title: "Personal Details",
+    isCompleted,
+    formFields: [],
+  };
+  render(
+    <ApplicationStep
+      step={step}
+      shouldUseLocalIsCompleted={shouldUseLocalIsCompleted}
+    />
+  );
+};
+
+describe("ApplicationStep", () => {
+  it("should render the step with the correct text", () => {
+    renderComponent({
+      isCompleted: false,
+      shouldUseLocalIsCompleted: false,
+      isLocalCompleted: false,
+    });
+    expect(
+      screen.getByRole("link", { name: "1. Personal Details" })
+    ).toBeVisible();
+    expect(
+      screen.queryByTestId("Step 1 completed icon")
+    ).not.toBeInTheDocument();
+  });
+
+  it("should render the step with the correct text and icon when completed", () => {
+    renderComponent({
+      isCompleted: true,
+      shouldUseLocalIsCompleted: false,
+      isLocalCompleted: false,
+    });
+    expect(
+      screen.getByRole("link", { name: "1. Personal Details" })
+    ).toBeVisible();
+    expect(screen.queryByTestId("Step 1 completed icon")).toBeVisible();
+  });
+
+  describe("when shouldUseLocalIsCompleted is true", () => {
+    it("should render the step with the correct text and icon when not completed", () => {
+      renderComponent({
+        isCompleted: false,
+        shouldUseLocalIsCompleted: true,
+        isLocalCompleted: false,
+      });
+      expect(
+        screen.getByRole("link", { name: "1. Personal Details" })
+      ).toBeVisible();
+      expect(
+        screen.queryByTestId("Step 1 completed icon")
+      ).not.toBeInTheDocument();
+    });
+
+    it("should render the step with the correct text and icon when completed", () => {
+      renderComponent({
+        isCompleted: false,
+        shouldUseLocalIsCompleted: true,
+        isLocalCompleted: true,
+      });
+      expect(
+        screen.getByRole("link", { name: "1. Personal Details" })
+      ).toBeVisible();
+      expect(screen.queryByTestId("Step 1 completed icon")).toBeVisible();
+    });
+  });
+});