feat: basic testing done

front/.blueprints/component/__kebabCase_name__/__kebabCase_name__.component.test.tsx

@@ -0,0 +1,10 @@
+import { screen, render } from "@testing-library/react";
+import { {{pascalCase name}} } from "./{{kebabCase name}}.component";
+
+describe("{{pascalCase name}} component", () => {
+    it("renders", () => {
+        render(<{{pascalCase name}}/>);
+        const element = screen.getByTestId("{{kebabCase name}}");
+        expect(element).toBeInTheDocument();
+    });
+});

front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.test.tsx

@@ -0,0 +1,10 @@
+import { screen, render } from "@testing-library/react";
+import { {{pascalCase name}} } from "./{{kebabCase name}}.view";
+
+describe("{{pascalCase name}} view", () => {
+    it("renders", () => {
+        render(<{{pascalCase name}}/>);
+        const element = screen.getByTestId("{{kebabCase name}}");
+        expect(element).toBeInTheDocument();
+    });
+});

front/jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "jest";
+import nextJest from "next/jest.js";
+
+const config: Config = {
+    collectCoverage: true,
+    coverageDirectory: "coverage",
+    coverageProvider: "v8",
+    modulePaths: ["<rootDir>"],
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+    testEnvironment: "jsdom",
+    testPathIgnorePatterns: ["<rootDir>/node_modules/"],
+    modulePathIgnorePatterns: ["<rootDir>/.blueprints"],
+};
+
+const createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: "./",
+});
+
+export default createJestConfig(config);

front/jest.setup.ts

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+import * as React from "react";
+
+if (typeof window !== "undefined") {
+    window.React = React;
+}

front/package.json

@@ -6,7 +6,10 @@
         "dev": "next dev -p 3016",
         "build": "next build",
         "start": "next start -p 3016",
-        "lint": "next lint"
+        "lint": "next lint",
+        "test:load": "loadtest -c 10 --rps 200 http://localhost:3016",
+        "test": "jest",
+        "test:watch": "jest --watch"
     },
     "dependencies": {
         "next": "14.2.3",
@@ -16,15 +19,23 @@
         "react-dom": "^18"
     },
     "devDependencies": {
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@types/jest": "^30.0.0",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "eslint-config-prettier": "^9.1.0",
+        "jest": "^30.0.4",
+        "jest-environment-jsdom": "^30.0.4",
         "lint-staged": "^15.2.10",
+        "loadtest": "^8.2.0",
         "prettier": "3.3.3",
         "sass": "^1.77.8",
+        "ts-node": "^10.9.2",
         "typescript": "^5"
     }
 }

front/src/modules/common/components/navbar-header/navbar-header.component.test.tsx

@@ -0,0 +1,13 @@
+import { screen, render } from "@testing-library/react";
+import { NavbarHeader } from "./navbar-header.component";
+
+describe("NavbarHeader", () => {
+    beforeAll(() => {
+        document.documentElement.setAttribute("data-theme", "light");
+    });
+    it("renders", () => {
+        render(<NavbarHeader />);
+        const element = screen.getByTestId("navbar-header");
+        expect(element).toBeInTheDocument();
+    });
+});

front/src/modules/common/components/navbar-header/navbar-header.component.tsx

@@ -8,7 +8,7 @@ import { PropsWithChildren } from "react";
  * */
 export const NavbarHeader = (props: PropsWithChildren) => {
     return (
-        <header className={styles.header}>
+        <header className={styles.header} data-testid="navbar-header">
             <Link href={"/"} className={styles.logo}>
                 <img src="/main-logo.svg" alt="Main logo" />
                 <h1>Your brand</h1>

front/src/modules/common/components/theme-switcher/theme-switcher.component.test.tsx

@@ -0,0 +1,22 @@
+import { screen, render } from "@testing-library/react";
+import { ThemeSwitcher } from "./theme-switcher.component";
+
+describe("theme-switcher", () => {
+    beforeAll(() => {
+        document.documentElement.setAttribute("data-theme", "light");
+    });
+    it("renders", () => {
+        render(<ThemeSwitcher />);
+        const element = screen.getByTestId("theme-switcher");
+        expect(element).toBeInTheDocument();
+    });
+    it("changes the theme on click", () => {
+        render(<ThemeSwitcher />);
+        const element = screen.getByTestId("theme-switcher");
+        expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+        element.click();
+        expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+        element.click();
+        expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+    });
+});

front/src/modules/common/components/theme-switcher/theme-switcher.component.tsx

@@ -12,7 +12,7 @@ export const ThemeSwitcher = () => {
     };
 
     return (
-        <label className="switch">
+        <label className="switch" data-testid="theme-switcher">
             <input type="checkbox" onClick={changeHandler} />
             <span className="slider round"></span>
         </label>

front/tsconfig.json

@@ -20,14 +20,14 @@
         "paths": {
             "@/*": ["./src/*"]
         },
-        "typeRoots": ["./src/modules/auth/types"]
+        "typeRoots": ["./node_modules/@types", "./src/modules/auth/types"]
     },
     "include": [
         "next-env.d.ts",
         "**/*.ts",
         "**/*.tsx",
         ".next/types/**/*.ts",
-        "src/modules/**/*.d.ts"
-    ],
-    "exclude": ["node_modules"]
+        "src/modules/**/*.d.ts",
+        "./jest.setup.ts"
+    ]
 }

front/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./out-tsc/spec",
+        "types": ["jest", "node"],
+        "baseUrl": "./src"
+    },
+    "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}