feat: basic testing done

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>