Add frontend tests

.github/workflows/build.yml

@@ -45,11 +45,10 @@ jobs:
       working-directory: ./frontend
       run: npm ci
 
-    # Run react-scripts tests
-    # Note: There are currently no tests
-    # - name: Install Dependencies
-    #   working-directory: ./frontend
-    #   run: npm run test
+    # Run Jest tests
+    - name: Run Tests
+      working-directory: ./frontend
+      run: npm run test
 
     # SAMPLE-APP #
       # Install Packages

frontend/jest.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
+	preset: 'ts-jest',
+	//testEnvironment: 'node',
+    testEnvironment: 'jsdom',
+    testMatch: ['**/*.test.ts', '**/*.test.tsx'],
+    transform: {}
+};
+
+export default config;

frontend/package.json

@@ -9,9 +9,6 @@
   "author": "Rike Exner",
   "license": "MIT",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
     "mini.css": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -21,17 +18,30 @@
     "react-scripts": "^5.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-typescript": "^7.24.1",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

frontend/src/.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
+}

frontend/src/pages/Login.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import toast from "react-hot-toast";
+import Login from "./Login";
+import * as api from "../helpers/api";
+
+  jest.mock("react-hot-toast", () => ({
+    success: jest.fn(),
+    error: jest.fn(),
+  }));
+
+describe("Login Component", () => {
+  it("renders form elements and submits successfully", async () => {
+    const mockLogin = jest.spyOn(api, "login").mockResolvedValueOnce({ token: "someToken" });
+    const { getByLabelText, getByText } = render(
+        <MemoryRouter>
+          <Login />
+        </MemoryRouter>
+      );
+
+      const emailInput = getByLabelText("E-Mail:") as HTMLInputElement;
+      const passwordInput = getByLabelText("Password:") as HTMLInputElement;
+      const submitButton = getByText("Submit");
+
+      fireEvent.change(emailInput, { target: { value: "[email protected]" } });
+      fireEvent.change(passwordInput, { target: { value: "password123" } });
+      fireEvent.click(submitButton);
+
+      await waitFor(() => expect(mockLogin).toHaveBeenCalledWith({ email: "[email protected]", password: "password123" }));
+      expect(mockLogin).toHaveBeenCalledTimes(1);
+      expect(toast.success).toHaveBeenCalledWith("Login successful");
+    });
+  });
+
+  it("validates form fields", () => {
+    const { getByLabelText, getByText } = render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    );
+
+    const emailInput = getByLabelText("E-Mail:") as HTMLInputElement;
+    const passwordInput = getByLabelText("Password:") as HTMLInputElement;
+    const submitButton = getByText("Submit");
+
+    fireEvent.click(submitButton);
+
+    expect(emailInput.nextElementSibling?.textContent).toBe("Required");
+    expect(passwordInput.nextElementSibling?.textContent).toBe("Required");
+  });
+
+  it("handles form submission failure", async () => {
+    const { container, getByLabelText } = render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    );
+
+    const formElement = container.querySelector("form");
+
+    fireEvent.change(getByLabelText("E-Mail:"), { target: { value: "[email protected]" } });
+    fireEvent.change(getByLabelText("Password:"), { target: { value: "password123" } });
+
+    jest.spyOn(api, "login").mockRejectedValueOnce({ message: "An error occurred while logging in" });
+
+    fireEvent.submit(formElement as Element);
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith("An error occurred while logging in"));
+  });

frontend/src/pages/SignUp.test.tsx

@@ -0,0 +1,135 @@
+import '@testing-library/jest-dom/jest-globals';
+import '@testing-library/jest-dom';
+
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import SignUp from "./SignUp";
+import * as api from "../helpers/api";
+import toast from "react-hot-toast";
+
+jest.mock("react-hot-toast", () => ({
+  success: jest.fn(),
+  error: jest.fn(),
+}));
+
+const mockRegister = jest.spyOn(api, "register");
+
+describe("SignUp Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the sign-up form", () => {
+    const { getByLabelText, getByText } = render(
+      <MemoryRouter>
+        <SignUp />
+      </MemoryRouter>
+    );
+
+    expect(getByLabelText("E-Mail:")).toBeInTheDocument();
+    expect(getByLabelText("Password:")).toBeInTheDocument();
+    expect(getByLabelText("Repeat Password:")).toBeInTheDocument();
+    expect(getByText("Submit")).toBeInTheDocument();
+  });
+
+  it("submits the form with valid input", async () => {
+    mockRegister.mockResolvedValueOnce({});
+
+    const { getByLabelText, container } = render(
+      <MemoryRouter>
+        <SignUp />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(getByLabelText("E-Mail:"), {
+      target: { value: "[email protected]" },
+    });
+    fireEvent.change(getByLabelText("Password:"), {
+      target: { value: "password123" },
+    });
+    fireEvent.change(getByLabelText("Repeat Password:"), {
+      target: { value: "password123" },
+    });
+
+    const formElement = container.querySelector("form");
+    fireEvent.submit(formElement as Element);
+
+    await waitFor(() => expect(mockRegister).toHaveBeenCalled());
+    expect(mockRegister).toHaveBeenCalledWith({
+      email: "[email protected]",
+      password: "password123",
+    });
+
+    expect(api.register).toHaveBeenCalledTimes(1);
+    expect(api.register).toHaveBeenCalledWith({
+      email: "[email protected]",
+      password: "password123",
+    });
+    expect(toast.success).toHaveBeenCalledWith("Registered successfully");
+  });
+
+  it("handles form submission failure", async () => {
+    const { container, getByLabelText } = render(
+      <MemoryRouter>
+        <SignUp />
+      </MemoryRouter>
+    );
+
+    const formElement = container.querySelector("form");
+
+    fireEvent.change(getByLabelText("E-Mail:"), {
+      target: { value: "[email protected]" },
+    });
+    fireEvent.change(getByLabelText("Password:"), {
+      target: { value: "password123" },
+    });
+    fireEvent.change(getByLabelText("Repeat Password:"), {
+      target: { value: "password123" },
+    });
+
+    jest.spyOn(api, "register").mockRejectedValueOnce({ message: "An error occurred while registering" });
+
+    fireEvent.submit(formElement as Element);
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith("An error occurred while registering"));
+  });
+
+  it("validates form fields", () => {
+    const { getByLabelText, getByText } = render(
+      <MemoryRouter>
+        <SignUp />
+      </MemoryRouter>
+    );
+
+    const emailInput = getByLabelText("E-Mail:") as HTMLInputElement;
+    const passwordInput = getByLabelText("Password:") as HTMLInputElement;
+    const repeatPasswordInput = getByLabelText("Repeat Password:") as HTMLInputElement;
+    const submitButton = getByText("Submit");
+
+    fireEvent.click(submitButton);
+
+    expect(emailInput.nextElementSibling?.textContent).toBe("Required");
+    expect(passwordInput.nextElementSibling?.textContent).toBe("Required");
+    expect(repeatPasswordInput.nextElementSibling?.textContent).toBe("Required");
+  });
+
+  it("does not submit invalid form", async () => {
+    const { getByLabelText, container } = render(
+      <MemoryRouter>
+        <SignUp />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(getByLabelText("E-Mail:"), { target: { value: "" } });
+    fireEvent.change(getByLabelText("Password:"), { target: { value: "" } });
+    fireEvent.change(getByLabelText("Repeat Password:"), {
+      target: { value: "" },
+    });
+
+    const formElement = container.querySelector("form");
+    fireEvent.submit(formElement as Element);
+
+    expect(mockRegister).not.toHaveBeenCalled();
+  });
+});

frontend/tsconfig.json

@@ -4,7 +4,7 @@
     "noImplicitAny": true,
     "module": "esnext",
     "target": "es5",
-    "jsx": "preserve",
+    "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,