Config frontend tests (#408)

* test: configure vitest and RTL

* test: add test boilerplates

* feat(ci): added test-unit frontend

---------

Co-authored-by: Stan Girard <girard.stanislas@gmail.com>

.github/workflows/CI-test/vitest.yml

@@ -0,0 +1,24 @@
+name: Vitest
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+        run:
+            working-directory: ./frontend
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+          cache-dependency-path: yarn.lock
+      - run: yarn run test-unit

frontend/app/(home)/__tests__/Home.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { getProcessEnvManager } from "@/lib/helpers/getProcessEnvManager";
+
+import HomePage from "../page";
+
+describe("HomePage", () => {
+  it("should render HomePage component properly", () => {
+    const { overwriteEnvValuesWith, resetEnvValues } = getProcessEnvManager();
+
+    overwriteEnvValuesWith({
+      NEXT_PUBLIC_ENV: "not-local",
+    });
+
+    render(<HomePage />);
+    const homePage = screen.getByTestId("home-page");
+    expect(homePage).toBeDefined();
+
+    resetEnvValues();
+  });
+});

frontend/app/(home)/page.tsx

@@ -9,7 +9,7 @@ const HomePage = (): JSX.Element => {
   }
 
   return (
-    <main className="">
+    <main data-testid="home-page">
       <Hero />
       <Features />
     </main>

frontend/lib/helpers/__tests__/getEnvManager.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+
+import { getProcessEnvManager } from "../getProcessEnvManager";
+
+describe("getEnvManager", () => {
+  it("should overwrite environment values", () => {
+    process.env.MY_VALUE = "test value";
+    const processEnvManager = getProcessEnvManager();
+
+    processEnvManager.overwriteEnvValuesWith({ MY_VALUE: "new value" });
+
+    expect(process.env.MY_VALUE).toBe("new value");
+  });
+
+  it("should reset environment values", () => {
+    //@ts-expect-error doing this for testing purposes
+    process.env = {
+      TEST_ENV: "test value",
+    };
+    const { resetEnvValues, originalEnvValues, getCurrentEnvValues } =
+      getProcessEnvManager();
+
+    process.env.TEST_ENV = "test value overwritten";
+    resetEnvValues();
+
+    expect(originalEnvValues).toEqual(getCurrentEnvValues());
+  });
+
+  it("should return a copy of the current environment values", () => {
+    process.env.TEST_ENV = "test value";
+    const { getCurrentEnvValues } = getProcessEnvManager();
+    const envValues = getCurrentEnvValues();
+    expect(envValues).toEqual({ ...process.env, TEST_ENV: "test value" });
+  });
+
+  it("should return the copy of original environment values", () => {
+    const initEnvValues = {
+      TEST_ENV_1: "test value",
+      TEST_ENV_2: "test value2",
+    };
+    //@ts-expect-error doing this for testing purposes
+    process.env = { ...initEnvValues };
+
+    const { originalEnvValues } = getProcessEnvManager();
+
+    process.env.TEST_ENV_1 = "test value overwritten";
+
+    expect(originalEnvValues).toEqual(initEnvValues);
+  });
+});

frontend/lib/helpers/getProcessEnvManager.ts

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const getProcessEnvManager = () => {
+  const originalEnvValues = { ...process.env };
+
+  const overwriteEnvValuesWith = (values: Record<string, unknown>): void => {
+    Object.keys(values).forEach((key) => {
+      process.env[key] = values[key] as string;
+    });
+  };
+
+  const clearEnvValues = (): void => {
+    //remove all existing env values
+    Object.keys(process.env).forEach((key) => {
+      delete process.env[key];
+    });
+  };
+
+  const resetEnvValues = (): void => {
+    clearEnvValues();
+    Object.keys(originalEnvValues).forEach((key) => {
+      process.env[key] = originalEnvValues[key] as string;
+    });
+  };
+
+  const getCurrentEnvValues = (): Record<string, unknown> => {
+    return { ...process.env };
+  };
+
+  return {
+    resetEnvValues,
+    overwriteEnvValuesWith,
+    originalEnvValues,
+    getCurrentEnvValues,
+  };
+};

frontend/package.json

@@ -8,6 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "lint-fix": "eslint --fix .",
+    "test-unit": "vitest run",
     "test-type": "tsc --noEmit --emitDeclarationOnly false",
     "test": "yarn test-type",
     "precommit": "yarn lint && yarn test",
@@ -62,6 +63,11 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/next": "^9.0.0",
     "husky": "^8.0.3",
+    "vitest": "^0.32.2",
+    "@testing-library/react": "^14.0.0",
+    "@vitejs/plugin-react": "^4.0.1",
+    "dotenv": "^16.3.1",
+    "jsdom": "^22.1.0",
     "react-icons": "^4.8.0"
   }
 }

frontend/vitest.config.ts

@@ -0,0 +1,19 @@
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vitest/config";
+
+// https://vitejs.dev/config/
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["dotenv/config"],
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "."),
+    },
+  },
+});