feat: mise en place de TU avec react testing library + quelques refacto sur les typages

packages/app/jest.config.ts

@@ -8,10 +8,14 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 /** @type {import('jest').Config} */
 const config = {
-  // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-
   testEnvironment: "jest-environment-jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testMatch: ["**/__tests__/**/*?(*.)+(test|spec).[jt]s?(x)"],
+  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/cypress/"],
+  testTimeout: 20000,
+  moduleNameMapper: {
+    "(../){0,}design-system/@design-system": "<rootDir>/src/design-system/server.ts",
+  },
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

packages/app/jest.setup.js

@@ -0,0 +1,27 @@
+import "@testing-library/jest-dom";
+
+import { expect, jest } from "@jest/globals";
+import { screen } from "@testing-library/react";
+
+global.jest = jest;
+global.expect = expect;
+global.screen = screen;
+
+import * as mockRouter from "next-router-mock";
+
+const useRouter = mockRouter.useRouter;
+
+jest.mock("next/navigation", () => ({
+  ...mockRouter,
+  useSearchParams: () => {
+    const router = useRouter();
+    const path = router.query;
+    return new URLSearchParams(path);
+  },
+  usePathname: jest.fn(),
+  redirect: jest.fn(),
+}));
+
+jest.mock("@formkit/auto-animate/react", () => ({
+  useAutoAnimate: jest.fn(() => []),
+}));

packages/app/package.json

@@ -12,7 +12,8 @@
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "tsc": "node_modules/.bin/tsc --pretty --noEmit",
-    "test": "jest --watch",
+    "test": "jest --silent",
+    "test:watch": "jest --watch --silent",
     "type-check": "tsc",
     "generateEnvDeclaration": "ts-node --project scripts/tsconfig.json scripts/generateEnvDeclaration.ts",
     "generateModelsFromSchema": "ts-node --project scripts/tsconfig.json scripts/generateModelsFromSchema.ts",
@@ -72,13 +73,15 @@
     "@faker-js/faker": "^8.1.0",
     "@hookform/devtools": "^4.3.0",
     "@next/eslint-plugin-next": "14.0.0",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@tsconfig/next": "^2.0.0",
     "@tsconfig/node16": "^16.1.0",
     "@types/cors": "^2.8.13",
     "@types/dotenv": "^8.2.0",
-    "@types/jest": "^29.5.9",
+    "@types/jest": "^29.5.12",
     "@types/jsonwebtoken": "^9.0.3",
     "@types/mime": "^3.0.1",
     "@types/node": "^20.7.0",
@@ -105,6 +108,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "json-schema-to-typescript": "^12.0.0",
+    "next-router-mock": "^0.9.13",
     "prettier": "^3.0.0",
     "sass": "^1.68.0",
     "ts-node": "^10.9.1",

packages/app/src/api/core-domain/infra/auth/ProConnectProvider.ts

@@ -1,5 +1,5 @@
 import { logger } from "@api/utils/pino";
-import { type OAuthConfig, type OAuthUserConfig } from "next-auth/providers";
+import { type OAuthConfig, type OAuthUserConfig } from "next-auth/providers/oauth";
 
 export interface Organization {
   id: number;

packages/app/src/api/core-domain/infra/pdf/templates/DeclarationReceipt.tsx

@@ -10,7 +10,7 @@ import { isEqual } from "date-fns";
 import { BaseReceiptTemplate, type BaseReceiptTemplateProps } from "./BaseReceiptTemplate";
 
 const insertSoftHyphens = (url: string, everyNChars: number) => {
-  const parts = [];
+  const parts: string[] = [];
   for (let i = 0; i < url.length; i += everyNChars) {
     parts.push(url.substring(i, i + everyNChars));
   }

packages/app/src/api/core-domain/infra/pdf/templates/RepresentationEquilibreeReceipt.tsx

@@ -7,7 +7,7 @@ import { isEqual } from "date-fns";
 import { BaseReceiptTemplate, type BaseReceiptTemplateProps } from "./BaseReceiptTemplate";
 
 const insertSoftHyphens = (url: string, everyNChars: number) => {
-  const parts = [];
+  const parts: string[] = [];
   for (let i = 0; i < url.length; i += everyNChars) {
     parts.push(url.substring(i, i + everyNChars));
   }

packages/app/src/app/(default)/index-egapro/declaration/ues/UESForm.tsx

@@ -11,6 +11,7 @@ import { isCompanyClosed } from "@common/core-domain/helpers/entreprise";
 import { zodFr } from "@common/utils/zod";
 import { ClientBodyPortal } from "@components/utils/ClientBodyPortal";
 import { ClientOnly } from "@components/utils/ClientOnly";
+import { alternativeTableStyles as styles } from "@design-system";
 import { AlertMessage } from "@design-system/client";
 import { getCompany } from "@globalActions/company";
 import { CLOSED_COMPANY_ERROR, CompanyErrorCodes } from "@globalActions/companyErrorCodes";
@@ -21,7 +22,6 @@ import { useCallback, useEffect, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 
-import styles from "../../../../../design-system/base/AlternativeTable.module.css";
 import { INVALID_SIREN, MANDATORY_SIREN, NOT_FOUND_SIREN } from "../../../messages";
 import { BackNextButtons } from "../BackNextButtons";
 import { funnelConfig, type FunnelKey } from "../declarationFunnelConfiguration";

packages/app/src/app/(default)/index-egapro/simulateur/(funnel)/(indicateurs2ou3)/__tests__/indicateur2ou3.test.tsx

@@ -0,0 +1,88 @@
+import { fireEvent, render, type RenderResult } from "@testing-library/react";
+import { wait } from "@testing-library/user-event/dist/utils";
+
+import { effectifs } from "../../indicateur1/__tests__/mock";
+import { Indic2or3Form } from "../Form";
+import { indicateur1 } from "./mock";
+
+jest.mock("next-auth/react", () => ({
+  useSession: jest.fn(() => ({ data: undefined })),
+}));
+
+jest.mock("../../../../../../../common/utils/zustand", () => ({
+  storePicker: () => () => [
+    {
+      effectifs,
+      indicateur1,
+    },
+    () => {},
+  ],
+}));
+
+jest.mock("../../useSimuFunnelStore", () => ({
+  useSimuFunnelStore: () => ({ effectifs, indicateur1 }),
+  useSimuFunnelStoreHasHydrated: () => true,
+}));
+
+describe("when rendering", () => {
+  let r: RenderResult;
+  beforeEach(() => {
+    r = render(<Indic2or3Form indicateur={2} />);
+  });
+  describe("when clicking on radio 'Non'", () => {
+    beforeEach(async () => {
+      await wait();
+      fireEvent.click(r.getByLabelText("Non"));
+    });
+    it("should display warning & allow next step", async () => {
+      await wait();
+      expect(r.queryByText("L'indicateur n'est pas calculable")).toBeInTheDocument();
+      expect(r.queryByText("Catégorie socio-professionnelle")).not.toBeInTheDocument();
+
+      expect(r.getByRole("button", { name: "Suivant" })).not.toHaveAttribute("disabled");
+    });
+  });
+  describe("when clicking on radio 'Oui'", () => {
+    beforeEach(async () => {
+      await wait();
+      fireEvent.click(r.getByLabelText("Oui"));
+    });
+    it("should forbid next step", async () => {
+      await wait();
+      expect(r.getByRole("button", { name: "Suivant" })).toHaveAttribute("disabled");
+    });
+    describe("when filling percentage of raised employees fields", () => {
+      beforeEach(async () => {
+        await wait();
+        fireEvent.change(r.getByLabelText("ouv - Femmes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("emp - Femmes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("tam - Femmes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("ic - Femmes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("ouv - Hommes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("emp - Hommes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("tam - Hommes"), {
+          target: { value: 10 },
+        });
+        fireEvent.change(r.getByLabelText("ic - Hommes"), {
+          target: { value: 10 },
+        });
+      });
+      it("should allow next step", async () => {
+        await wait();
+        expect(r.getByRole("button", { name: "Suivant" })).not.toHaveAttribute("disabled");
+      });
+    });
+  });
+});

packages/app/src/app/(default)/index-egapro/simulateur/(funnel)/(indicateurs2ou3)/__tests__/mock.ts

@@ -0,0 +1,34 @@
+export const indicateur1 = {
+  mode: "niveau_branche",
+  remunerations: [
+    {
+      name: "1",
+      category: {
+        ":29": {
+          womenCount: 40,
+          menCount: 40,
+          womenSalary: 40000,
+          menSalary: 40000,
+        },
+        "30:39": {
+          womenCount: 40,
+          menCount: 40,
+          womenSalary: 40000,
+          menSalary: 40000,
+        },
+        "40:49": {
+          womenCount: 40,
+          menCount: 40,
+          womenSalary: 40000,
+          menSalary: 40000,
+        },
+        "50:": {
+          womenCount: 40,
+          menCount: 40,
+          womenSalary: 40000,
+          menSalary: 40000,
+        },
+      },
+    },
+  ],
+};

packages/app/src/app/(default)/index-egapro/simulateur/(funnel)/effectifs/__tests__/effectifs.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render } from "@testing-library/react";
+import { wait } from "@testing-library/user-event/dist/utils";
+
+import { EffectifsForm } from "../Form";
+
+jest.mock("next-auth/react", () => ({
+  useSession: jest.fn(() => ({})),
+}));
+
+describe("<EffectifsForm />", () => {
+  it("should wait for valid form to allow next step", async () => {
+    const { getByLabelText, getByRole } = render(<EffectifsForm />);
+    fireEvent.click(getByLabelText("De 50 à 250 inclus"));
+    expect(getByRole("button", { name: "Suivant" })).toHaveAttribute("disabled");
+    fireEvent.change(getByLabelText("ouv, :29, femmes"), { target: { value: 1 } });
+    await wait();
+    expect(getByRole("button", { name: "Suivant" })).not.toHaveAttribute("disabled");
+  });
+});