some frontend unittesting

frontend/app/__tests__/auth/forgot.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ForgotPassword from "@/app/auth/forgot/page";
+
+// Mock the auth components
+jest.mock("@/components/auth/forgot-form", () => {
+  return function MockForgotForm() {
+    return <div data-testid="forgot-form">Forgot Password Form Mock</div>;
+  };
+});
+
+jest.mock("@/components/auth/authWrapper", () => {
+  return function MockAuthWrapper({ children }: { children: React.ReactNode }) {
+    return <div data-testid="auth-wrapper">{children}</div>;
+  };
+});
+
+describe("Forgot Password Page", () => {
+  it("renders forgot password page with correct Hebrew text", () => {
+    render(<ForgotPassword />);
+
+    // Check if the main heading text is rendered
+    expect(screen.getByText("שכחת את הסיסמה?")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "הכנס את כתובת האימייל שלך ונשלח לך קישור לאיפוס הסיסמה",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders forgot form component", () => {
+    render(<ForgotPassword />);
+
+    expect(screen.getByTestId("forgot-form")).toBeInTheDocument();
+  });
+
+  it("renders auth wrapper component", () => {
+    render(<ForgotPassword />);
+
+    expect(screen.getByTestId("auth-wrapper")).toBeInTheDocument();
+  });
+
+  it("renders back to login link with correct text", () => {
+    render(<ForgotPassword />);
+
+    expect(screen.getByText("נזכרת בסיסמה?")).toBeInTheDocument();
+    expect(screen.getByText("חזור להתחברות")).toBeInTheDocument();
+
+    const loginLink = screen.getByRole("link", { name: "חזור להתחברות" });
+    expect(loginLink).toHaveAttribute("href", "/auth/login");
+  });
+
+  it("has proper heading styling", () => {
+    render(<ForgotPassword />);
+
+    const heading = screen.getByText("שכחת את הסיסמה?");
+    expect(heading).toHaveClass("text-2xl", "font-bold");
+  });
+
+  it("has proper description styling", () => {
+    render(<ForgotPassword />);
+
+    const description = screen.getByText(
+      "הכנס את כתובת האימייל שלך ונשלח לך קישור לאיפוס הסיסמה",
+    );
+    expect(description).toHaveClass("mt-2", "text-gray-600");
+  });
+
+  it("has proper container styling for the form", () => {
+    render(<ForgotPassword />);
+
+    const formContainer = screen.getByTestId("forgot-form").parentElement;
+    expect(formContainer).toHaveClass("mt-6", "w-full");
+  });
+
+  it("has proper link styling", () => {
+    render(<ForgotPassword />);
+
+    const loginLink = screen.getByRole("link", { name: "חזור להתחברות" });
+    expect(loginLink).toHaveClass("text-title", "font-medium", "underline");
+  });
+
+  it("has proper text container styling", () => {
+    render(<ForgotPassword />);
+
+    const textContainer = screen.getByText("נזכרת בסיסמה?").parentElement;
+    expect(textContainer).toHaveClass(
+      "mt-4",
+      "flex",
+      "w-full",
+      "items-center",
+      "justify-center",
+      "gap-1",
+    );
+  });
+});

frontend/app/__tests__/auth/login.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Login from "@/app/auth/login/page";
+
+// Mock the auth components
+jest.mock("@/components/auth/loginForm", () => {
+  return function MockLoginForm() {
+    return <div data-testid="login-form">Login Form Mock</div>;
+  };
+});
+
+jest.mock("@/components/auth/authWrapper", () => {
+  return function MockAuthWrapper({ children }: { children: React.ReactNode }) {
+    return <div data-testid="auth-wrapper">{children}</div>;
+  };
+});
+
+describe("Login Page", () => {
+  it("renders login page with correct Hebrew text", () => {
+    render(<Login />);
+
+    // Check if the main heading text is rendered
+    expect(screen.getByText("נראה שאתה עדיין לא מחובר,")).toBeInTheDocument();
+    expect(screen.getByText("אז איך נכניס אותך למגרש?")).toBeInTheDocument();
+  });
+
+  it("renders login form component", () => {
+    render(<Login />);
+
+    expect(screen.getByTestId("login-form")).toBeInTheDocument();
+  });
+
+  it("renders auth wrapper component", () => {
+    render(<Login />);
+
+    expect(screen.getByTestId("auth-wrapper")).toBeInTheDocument();
+  });
+
+  it("renders signup link with correct text", () => {
+    render(<Login />);
+
+    expect(screen.getByText("עדיין לא נרשמת?")).toBeInTheDocument();
+    expect(screen.getByText("בתור שחקן")).toBeInTheDocument();
+
+    const signupLink = screen.getByRole("link", { name: "בתור שחקן" });
+    expect(signupLink).toHaveAttribute("href", "/auth/signup");
+  });
+
+  it("renders field manager contact link", () => {
+    render(<Login />);
+
+    expect(screen.getByText("או")).toBeInTheDocument();
+    expect(screen.getByText("כמנהל מגרש")).toBeInTheDocument();
+
+    const managerLink = screen.getByRole("link", { name: "כמנהל מגרש" });
+    expect(managerLink).toHaveAttribute("href", "/contact");
+  });
+
+  it("has proper link styling", () => {
+    render(<Login />);
+
+    const loginLink = screen.getByRole("link", { name: "כמנהל מגרש" });
+    expect(loginLink).toHaveClass("text-title", "font-medium", "underline");
+  });
+});

frontend/app/__tests__/auth/signup.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import SignUp from "@/app/auth/signup/page";
+
+// Mock the auth components
+jest.mock("@/components/auth/signupForm", () => {
+  return function MockSignupForm() {
+    return <div data-testid="signup-form">Signup Form Mock</div>;
+  };
+});
+
+jest.mock("@/components/auth/authWrapper", () => {
+  return function MockAuthWrapper({ children }: { children: React.ReactNode }) {
+    return <div data-testid="auth-wrapper">{children}</div>;
+  };
+});
+
+describe("SignUp Page", () => {
+  it("renders signup page with correct Hebrew text", () => {
+    render(<SignUp />);
+
+    // Check if the main heading text is rendered
+    expect(
+      screen.getByText("כמה פרטים קטנים ואתה על המגרש"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders signup form component", () => {
+    render(<SignUp />);
+
+    expect(screen.getByTestId("signup-form")).toBeInTheDocument();
+  });
+
+  it("renders auth wrapper component", () => {
+    render(<SignUp />);
+
+    expect(screen.getByTestId("auth-wrapper")).toBeInTheDocument();
+  });
+
+  it("renders login link with correct text", () => {
+    render(<SignUp />);
+
+    expect(screen.getByText("כבר רשום למערכת?")).toBeInTheDocument();
+    expect(screen.getByText("התחבר עכשיו")).toBeInTheDocument();
+
+    const loginLink = screen.getByRole("link", { name: "התחבר עכשיו" });
+    expect(loginLink).toHaveAttribute("href", "/auth/login");
+  });
+
+  it("has proper styling classes on the login link", () => {
+    render(<SignUp />);
+
+    const loginLink = screen.getByRole("link", { name: "התחבר עכשיו" });
+    expect(loginLink).toHaveClass(
+      "font-medium",
+      "text-blue-500",
+      "underline",
+      "hover:text-blue-700",
+    );
+  });
+
+  it("has proper container styling", () => {
+    render(<SignUp />);
+
+    const linkContainer = screen.getByText("כבר רשום למערכת?").parentElement;
+    expect(linkContainer).toHaveClass(
+      "mt-4",
+      "flex",
+      "w-full",
+      "items-center",
+      "justify-center",
+      "gap-1",
+      "text-sm",
+    );
+  });
+});

frontend/app/__tests__/components/auth/authWrapper.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import AuthWrapper from "@/components/auth/authWrapper";
+
+describe("AuthWrapper Component", () => {
+  it("renders children correctly", () => {
+    const testChildren = <div data-testid="test-children">Test Content</div>;
+
+    render(<AuthWrapper>{testChildren}</AuthWrapper>);
+
+    expect(screen.getByTestId("test-children")).toBeInTheDocument();
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
+  });
+
+  it("renders symbol image with correct attributes", () => {
+    render(
+      <AuthWrapper>
+        <div>Test</div>
+      </AuthWrapper>,
+    );
+
+    const symbolImage = screen.getByAltText("symbol");
+    expect(symbolImage).toBeInTheDocument();
+    expect(symbolImage).toHaveAttribute("src", "/symbol.png");
+    expect(symbolImage).toHaveAttribute("width", "100");
+    expect(symbolImage).toHaveAttribute("height", "100");
+  });
+
+  it("renders logo image with correct attributes", () => {
+    render(
+      <AuthWrapper>
+        <div>Test</div>
+      </AuthWrapper>,
+    );
+
+    const logoImage = screen.getByAltText("Logo");
+    expect(logoImage).toBeInTheDocument();
+    expect(logoImage).toHaveAttribute("src", "/logo.png");
+    expect(logoImage).toHaveAttribute("width", "100");
+    expect(logoImage).toHaveAttribute("height", "100");
+  });
+
+  it("has correct container styling classes", () => {
+    render(
+      <AuthWrapper>
+        <div data-testid="content">Test</div>
+      </AuthWrapper>,
+    );
+
+    const container = screen.getByTestId("content").parentElement;
+    expect(container).toHaveClass(
+      "flex",
+      "min-h-screen",
+      "flex-col",
+      "items-center",
+      "px-6",
+      "py-10",
+    );
+  });
+
+  it("has correct symbol image positioning", () => {
+    render(
+      <AuthWrapper>
+        <div>Test</div>
+      </AuthWrapper>,
+    );
+
+    const symbolImage = screen.getByAltText("symbol");
+    expect(symbolImage).toHaveClass("absolute", "top-0", "left-0", "z-1");
+  });
+
+  it("has correct logo container styling", () => {
+    render(
+      <AuthWrapper>
+        <div>Test</div>
+      </AuthWrapper>,
+    );
+
+    const logoImage = screen.getByAltText("Logo");
+    const logoContainer = logoImage.parentElement;
+    expect(logoContainer).toHaveClass(
+      "flex",
+      "w-full",
+      "justify-center",
+      "py-5",
+    );
+  });
+
+  it("has correct logo styling", () => {
+    render(
+      <AuthWrapper>
+        <div>Test</div>
+      </AuthWrapper>,
+    );
+
+    const logoImage = screen.getByAltText("Logo");
+    expect(logoImage).toHaveClass("mb-4", "rounded-full", "shadow-2xl");
+  });
+});