From 5051703b03786f76bfceccab0096328dc5eb6f8e Mon Sep 17 00:00:00 2001
From: arifmanawer <112596030+arifmanawer@users.noreply.github.com>
Date: Mon, 12 May 2025 17:39:08 -0400
Subject: [PATCH 1/3] fixing gemini

---
 frontend/src/services/geminiService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/services/geminiService.ts b/frontend/src/services/geminiService.ts
index f4e56f5..a0961a4 100644
--- a/frontend/src/services/geminiService.ts
+++ b/frontend/src/services/geminiService.ts
@@ -53,7 +53,7 @@ export async function analyzeImage(file: File): Promise<GeminiResponse> {
   const formData = new FormData();
   formData.append('file', file);
 
-  const response = await fetch('/api/gemini/analyze-image', {
+  const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/gemini/analyze-image`, {
     method: 'POST',
     body: formData,
     headers: {

From 555a46373d5cde7e963a7f7a4c9a590297283d8c Mon Sep 17 00:00:00 2001
From: arifmanawer <112596030+arifmanawer@users.noreply.github.com>
Date: Mon, 12 May 2025 17:57:23 -0400
Subject: [PATCH 2/3] fixed recipe link from generated recipes

---
 frontend/src/pages/GeminiPage.tsx | 5 ++++-
 frontend/src/pages/SignupPage.tsx | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/GeminiPage.tsx b/frontend/src/pages/GeminiPage.tsx
index 17dc4f4..e5777f4 100644
--- a/frontend/src/pages/GeminiPage.tsx
+++ b/frontend/src/pages/GeminiPage.tsx
@@ -138,7 +138,10 @@ export default function GeminiPage() {
                         className="border rounded-lg p-4 hover:shadow-md transition-shadow"
                       >
                         <div className="flex gap-4">
-                          <Link to={`/recipes/${recipe.id}`}>
+                          <Link
+                            to={`/recipes/${recipe.id}`}
+                            state={{ recipe: recipe }}
+                          >
                             <img
                               src={recipe.image}
                               alt={recipe.title}
diff --git a/frontend/src/pages/SignupPage.tsx b/frontend/src/pages/SignupPage.tsx
index e7796ac..99c9846 100644
--- a/frontend/src/pages/SignupPage.tsx
+++ b/frontend/src/pages/SignupPage.tsx
@@ -112,6 +112,7 @@ function SignupPage() {
         <div className="flex space-x-4">
           <button
             type="button"
+            disabled
             className="flex w-1/2 items-center justify-center space-x-2
                        rounded border border-gray-300 py-2 text-sm
                        bg-gray-200 cursor-not-allowed"
@@ -120,6 +121,7 @@ function SignupPage() {
           </button>
           <button
             type="button"
+            disabled
             className="flex w-1/2 items-center justify-center space-x-2
                        rounded border border-gray-300 py-2 text-sm
                        bg-gray-200 cursor-not-allowed"

From a5d8211de5b6467d73e34df49fcea049a6cda252 Mon Sep 17 00:00:00 2001
From: arifmanawer <112596030+arifmanawer@users.noreply.github.com>
Date: Wed, 14 May 2025 11:23:32 -0400
Subject: [PATCH 3/3] tests for frontend

---
 .../src/components/__tests__/Recipe.test.tsx  | 143 ++++++++++++++
 .../pages/__tests__/FavoritesPage.test.tsx    | 184 ++++++++++++++++++
 .../src/pages/__tests__/GeminiPage.test.tsx   | 135 +++++++++++++
 .../__tests__/IndividualRecipePage.test.tsx   | 120 ++++++++++++
 .../src/pages/__tests__/LoginPage.test.tsx    |  89 +++++++++
 .../src/pages/__tests__/SignupPage.test.tsx   | 110 +++++++++++
 6 files changed, 781 insertions(+)
 create mode 100644 frontend/src/components/__tests__/Recipe.test.tsx
 create mode 100644 frontend/src/pages/__tests__/FavoritesPage.test.tsx
 create mode 100644 frontend/src/pages/__tests__/GeminiPage.test.tsx
 create mode 100644 frontend/src/pages/__tests__/IndividualRecipePage.test.tsx
 create mode 100644 frontend/src/pages/__tests__/LoginPage.test.tsx
 create mode 100644 frontend/src/pages/__tests__/SignupPage.test.tsx

diff --git a/frontend/src/components/__tests__/Recipe.test.tsx b/frontend/src/components/__tests__/Recipe.test.tsx
new file mode 100644
index 0000000..797653f
--- /dev/null
+++ b/frontend/src/components/__tests__/Recipe.test.tsx
@@ -0,0 +1,143 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import Recipe from "../Recipe";
+
+// Mock fetch
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+// Mock localStorage
+const mockLocalStorage = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  clear: vi.fn(),
+};
+Object.defineProperty(window, "localStorage", { value: mockLocalStorage });
+
+describe("Recipe", () => {
+  const mockRecipe = {
+    id: 1,
+    title: "Test Recipe",
+    image: "test-image.jpg",
+    readyInMinutes: 30,
+    servings: 4,
+    vegan: true,
+    vegetarian: true,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockLocalStorage.getItem.mockReturnValue(
+      JSON.stringify({
+        user: { id: "test-user-id" },
+      })
+    );
+  });
+
+  const renderRecipe = (props = {}) => {
+    return render(
+      <BrowserRouter>
+        <Recipe recipe={mockRecipe} {...props} />
+      </BrowserRouter>
+    );
+  };
+
+  it("renders recipe card with all elements", () => {
+    renderRecipe();
+
+    expect(screen.getByText("Test Recipe")).toBeInTheDocument();
+    expect(screen.getByText("30 mins")).toBeInTheDocument();
+    expect(screen.getByText("Servings: 4")).toBeInTheDocument();
+    expect(screen.getByText("Vegan")).toBeInTheDocument();
+    expect(screen.getByText("Vegetarian")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "View Recipe" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders recipe image correctly", () => {
+    renderRecipe();
+
+    const image = screen.getByAltText("Test Recipe");
+    expect(image).toHaveAttribute("src", "test-image.jpg");
+  });
+
+  it("shows fallback when no image is provided", () => {
+    renderRecipe({
+      recipe: { ...mockRecipe, image: "" },
+    });
+
+    expect(screen.getByText("No image available")).toBeInTheDocument();
+  });
+
+  it("toggles favorite state when clicking favorite button", async () => {
+    mockFetch.mockResolvedValueOnce({ ok: true });
+    renderRecipe();
+
+    const favoriteButton = screen.getByRole("button", {
+      name: "Add to favorites",
+    });
+    fireEvent.click(favoriteButton);
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.stringContaining("/user/favorite"),
+      expect.objectContaining({
+        method: "POST",
+        headers: expect.objectContaining({
+          "Content-Type": "application/json",
+          ID: "test-user-id",
+        }),
+        body: JSON.stringify(mockRecipe),
+      })
+    );
+  });
+
+  it("shows alert when trying to favorite without being logged in", async () => {
+    mockLocalStorage.getItem.mockReturnValue(null);
+    const mockAlert = vi.spyOn(window, "alert").mockImplementation(() => {});
+
+    renderRecipe();
+
+    const favoriteButton = screen.getByRole("button", {
+      name: "Add to favorites",
+    });
+    fireEvent.click(favoriteButton);
+
+    expect(mockAlert).toHaveBeenCalledWith(
+      "Please sign in to use this feature."
+    );
+    expect(mockFetch).not.toHaveBeenCalled();
+
+    mockAlert.mockRestore();
+  });
+
+  it("handles favorite API error gracefully", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      text: () => Promise.resolve("API Error"),
+    });
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    renderRecipe();
+
+    const favoriteButton = screen.getByRole("button", {
+      name: "Add to favorites",
+    });
+    await fireEvent.click(favoriteButton);
+
+    expect(consoleError).toHaveBeenCalled();
+
+    consoleError.mockRestore();
+  });
+
+  it("renders with initial favorite state", () => {
+    renderRecipe({ initialFavorited: true });
+
+    expect(
+      screen.getByRole("button", { name: "Remove from favorites" })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/__tests__/FavoritesPage.test.tsx b/frontend/src/pages/__tests__/FavoritesPage.test.tsx
new file mode 100644
index 0000000..4f38949
--- /dev/null
+++ b/frontend/src/pages/__tests__/FavoritesPage.test.tsx
@@ -0,0 +1,184 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import FavoritesPage from "../favoritePage";
+
+// Mock fetch
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+// Mock localStorage
+const mockLocalStorage = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  clear: vi.fn(),
+};
+Object.defineProperty(window, "localStorage", { value: mockLocalStorage });
+
+describe("FavoritesPage", () => {
+  const mockRecipes = [
+    {
+      id: 1,
+      title: "Recipe 1",
+      image: "image1.jpg",
+      readyInMinutes: 30,
+      servings: 4,
+      vegan: true,
+      vegetarian: true,
+      glutenFree: false,
+      dairyFree: true,
+    },
+    {
+      id: 2,
+      title: "Recipe 2",
+      image: "image2.jpg",
+      readyInMinutes: 45,
+      servings: 6,
+      vegan: false,
+      vegetarian: true,
+      glutenFree: true,
+      dairyFree: false,
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockLocalStorage.getItem.mockReturnValue(
+      JSON.stringify({
+        user: { id: "test-user-id" },
+      })
+    );
+  });
+
+  const renderFavoritesPage = () => {
+    return render(
+      <BrowserRouter>
+        <FavoritesPage />
+      </BrowserRouter>
+    );
+  };
+
+  it("renders loading state initially", () => {
+    renderFavoritesPage();
+    expect(screen.getByText("Loading favorites…")).toBeInTheDocument();
+  });
+
+  it("shows error when user is not logged in", async () => {
+    mockLocalStorage.getItem.mockReturnValue(null);
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/Please sign in to view favorites/i)
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("displays favorite recipes when loaded successfully", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ recipes: mockRecipes }),
+    });
+
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("Recipe 1")).toBeInTheDocument();
+      expect(screen.getByText("Recipe 2")).toBeInTheDocument();
+    });
+  });
+
+  it("shows empty state when no favorites exist", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ recipes: [] }),
+    });
+
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(/You haven't favorited any recipes yet/i)
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("handles filter toggle", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ recipes: mockRecipes }),
+    });
+
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("Recipe 1")).toBeInTheDocument();
+    });
+
+    const filterButton = screen.getByText("Show Filters");
+    fireEvent.click(filterButton);
+
+    expect(screen.getByText("Hide Filters")).toBeInTheDocument();
+    expect(screen.getByText("Dietary Preferences")).toBeInTheDocument();
+  });
+
+  it("filters recipes based on dietary preferences", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ recipes: mockRecipes }),
+    });
+
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("Recipe 1")).toBeInTheDocument();
+    });
+
+    // Open filters
+    fireEvent.click(screen.getByText("Show Filters"));
+
+    // Enable vegan filter
+    const veganCheckbox = screen.getByLabelText("vegan");
+    fireEvent.click(veganCheckbox);
+
+    // Should only show Recipe 1 (vegan)
+    expect(screen.getByText("Recipe 1")).toBeInTheDocument();
+    expect(screen.queryByText("Recipe 2")).not.toBeInTheDocument();
+  });
+
+  it("resets filters when clear filters is clicked", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: () => Promise.resolve({ recipes: mockRecipes }),
+    });
+
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(screen.getByText("Recipe 1")).toBeInTheDocument();
+    });
+
+    // Open filters
+    fireEvent.click(screen.getByText("Show Filters"));
+
+    // Enable vegan filter
+    const veganCheckbox = screen.getByLabelText("vegan");
+    fireEvent.click(veganCheckbox);
+
+    // Clear filters
+    fireEvent.click(screen.getByText("Clear Filters"));
+
+    // Should show all recipes again
+    expect(screen.getByText("Recipe 1")).toBeInTheDocument();
+    expect(screen.getByText("Recipe 2")).toBeInTheDocument();
+  });
+
+  it("handles API error gracefully", async () => {
+    mockFetch.mockRejectedValueOnce(new Error("API Error"));
+    renderFavoritesPage();
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error: API Error/i)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/src/pages/__tests__/GeminiPage.test.tsx b/frontend/src/pages/__tests__/GeminiPage.test.tsx
new file mode 100644
index 0000000..7f9c1d5
--- /dev/null
+++ b/frontend/src/pages/__tests__/GeminiPage.test.tsx
@@ -0,0 +1,135 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import GeminiPage from "../GeminiPage";
+import { analyzeImage } from "@/services/geminiService";
+import { toast } from "react-hot-toast";
+
+// Mock the services and dependencies
+vi.mock("@/services/geminiService", () => ({
+  analyzeImage: vi.fn(),
+}));
+
+vi.mock("react-hot-toast", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe("GeminiPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderGeminiPage = () => {
+    return render(
+      <BrowserRouter>
+        <GeminiPage />
+      </BrowserRouter>
+    );
+  };
+
+  it("renders the page with all elements", () => {
+    renderGeminiPage();
+
+    expect(screen.getByText("Food Image Analysis")).toBeInTheDocument();
+    expect(screen.getByText("Click to upload an image")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Analyze Image" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("Analysis Results")).toBeInTheDocument();
+  });
+
+  it("handles file selection and preview", async () => {
+    renderGeminiPage();
+
+    const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
+    const input = screen.getByLabelText("Click to upload an image");
+
+    fireEvent.change(input, { target: { files: [file] } });
+
+    await waitFor(() => {
+      expect(screen.getByText("test.jpg")).toBeInTheDocument();
+    });
+  });
+
+  it("handles successful image analysis", async () => {
+    const mockAnalysis = {
+      ingredients: ["tomato", "onion", "garlic"],
+      recipes: [
+        {
+          id: 1,
+          title: "Test Recipe",
+          image: "test.jpg",
+          usedIngredientCount: 2,
+          missedIngredientCount: 1,
+        },
+      ],
+    };
+
+    (analyzeImage as any).mockResolvedValueOnce(mockAnalysis);
+
+    renderGeminiPage();
+
+    // Upload file
+    const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
+    const input = screen.getByLabelText("Click to upload an image");
+    fireEvent.change(input, { target: { files: [file] } });
+
+    // Click analyze
+    const analyzeButton = screen.getByRole("button", { name: "Analyze Image" });
+    fireEvent.click(analyzeButton);
+
+    await waitFor(() => {
+      expect(analyzeImage).toHaveBeenCalledWith(file);
+      expect(toast.success).toHaveBeenCalledWith(
+        "Image analyzed successfully!"
+      );
+    });
+
+    // Check if results are displayed
+    expect(screen.getByText("Detected Ingredients")).toBeInTheDocument();
+    expect(screen.getByText("Suggested Recipes")).toBeInTheDocument();
+    expect(screen.getByText("tomato")).toBeInTheDocument();
+    expect(screen.getByText("Test Recipe")).toBeInTheDocument();
+  });
+
+  it("handles failed image analysis", async () => {
+    (analyzeImage as any).mockRejectedValueOnce(new Error("Analysis failed"));
+
+    renderGeminiPage();
+
+    // Upload file
+    const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
+    const input = screen.getByLabelText("Click to upload an image");
+    fireEvent.change(input, { target: { files: [file] } });
+
+    // Click analyze
+    const analyzeButton = screen.getByRole("button", { name: "Analyze Image" });
+    fireEvent.click(analyzeButton);
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith("Failed to analyze image");
+    });
+  });
+
+  it("shows loading state during analysis", async () => {
+    (analyzeImage as any).mockImplementation(
+      () => new Promise((resolve) => setTimeout(resolve, 100))
+    );
+
+    renderGeminiPage();
+
+    // Upload file
+    const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
+    const input = screen.getByLabelText("Click to upload an image");
+    fireEvent.change(input, { target: { files: [file] } });
+
+    // Click analyze
+    const analyzeButton = screen.getByRole("button", { name: "Analyze Image" });
+    fireEvent.click(analyzeButton);
+
+    expect(screen.getByText("Analyzing...")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/__tests__/IndividualRecipePage.test.tsx b/frontend/src/pages/__tests__/IndividualRecipePage.test.tsx
new file mode 100644
index 0000000..c07c652
--- /dev/null
+++ b/frontend/src/pages/__tests__/IndividualRecipePage.test.tsx
@@ -0,0 +1,120 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { BrowserRouter, MemoryRouter, Route, Routes } from "react-router-dom";
+import IndividualRecipePage from "../IndividualRecipePage";
+
+const mockRecipe = {
+  id: 1,
+  title: "Test Recipe",
+  image: "test-image.jpg",
+  readyInMinutes: 30,
+  servings: 4,
+  vegan: true,
+  vegetarian: true,
+  glutenFree: false,
+  summary: "<p>Test summary</p>",
+  instructions: "Step 1. Do this. Step 2. Do that.",
+  extendedIngredients: [
+    { name: "Ingredient 1", amount: 2, unit: "cups" },
+    { name: "Ingredient 2", amount: 1, unit: "tbsp" },
+  ],
+  spoonacularScore: 80,
+  aggregateLikes: 100,
+};
+
+describe("IndividualRecipePage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderRecipePage = (recipe = mockRecipe) => {
+    return render(
+      <MemoryRouter
+        initialEntries={[
+          {
+            pathname: "/recipes/1",
+            state: { recipe },
+          },
+        ]}
+      >
+        <Routes>
+          <Route path="/recipes/:id" element={<IndividualRecipePage />} />
+        </Routes>
+      </MemoryRouter>
+    );
+  };
+
+  it("renders recipe details correctly", () => {
+    renderRecipePage();
+
+    expect(screen.getByTestId("recipe-title")).toHaveTextContent("Test Recipe");
+    expect(screen.getByTestId("recipe-image")).toHaveAttribute(
+      "src",
+      "test-image.jpg"
+    );
+    expect(screen.getByText("vegetarian")).toBeInTheDocument();
+    expect(screen.getByText("vegan")).toBeInTheDocument();
+  });
+
+  it("shows recipe summary", () => {
+    renderRecipePage();
+
+    expect(screen.getByText("Test summary")).toBeInTheDocument();
+  });
+
+  it("shows ingredients list", () => {
+    renderRecipePage();
+
+    expect(screen.getByText("Ingredients")).toBeInTheDocument();
+    expect(screen.getByText("Ingredient 1")).toBeInTheDocument();
+    expect(screen.getByText("2 cups")).toBeInTheDocument();
+    expect(screen.getByText("Ingredient 2")).toBeInTheDocument();
+    expect(screen.getByText("1 tbsp")).toBeInTheDocument();
+  });
+
+  it("handles missing recipe data", () => {
+    render(
+      <MemoryRouter>
+        <IndividualRecipePage />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Recipe not found.")).toBeInTheDocument();
+  });
+
+  it("handles missing image", () => {
+    renderRecipePage({ ...mockRecipe, image: "" });
+
+    expect(screen.getByText("No image available")).toBeInTheDocument();
+  });
+
+  it("shows nutrition information", () => {
+    renderRecipePage();
+
+    expect(screen.getByText("Nutrition Information")).toBeInTheDocument();
+    expect(screen.getByText("Calories")).toBeInTheDocument();
+    expect(screen.getByText("Protein")).toBeInTheDocument();
+    expect(screen.getByText("Fat")).toBeInTheDocument();
+    expect(screen.getByText("Carbs")).toBeInTheDocument();
+    expect(screen.getByText("Fiber")).toBeInTheDocument();
+  });
+
+  it("has working navigation links", () => {
+    renderRecipePage();
+
+    const backLink = screen.getByText("← Back to Recipes");
+    expect(backLink).toBeInTheDocument();
+    expect(backLink).toHaveAttribute("href", "/recipes");
+  });
+
+  it("handles print functionality", () => {
+    const mockPrint = vi.spyOn(window, "print").mockImplementation(() => {});
+    renderRecipePage();
+
+    const printButton = screen.getByTitle("Print this page");
+    fireEvent.click(printButton);
+
+    expect(mockPrint).toHaveBeenCalled();
+    mockPrint.mockRestore();
+  });
+});
diff --git a/frontend/src/pages/__tests__/LoginPage.test.tsx b/frontend/src/pages/__tests__/LoginPage.test.tsx
new file mode 100644
index 0000000..d8ac8ae
--- /dev/null
+++ b/frontend/src/pages/__tests__/LoginPage.test.tsx
@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import LoginPage from "../LoginPage";
+import { signIn } from "@/services/authService";
+
+// Mock the auth service
+vi.mock("@/services/authService", () => ({
+  signIn: vi.fn(),
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+describe("LoginPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderLoginPage = () => {
+    return render(
+      <BrowserRouter>
+        <LoginPage />
+      </BrowserRouter>
+    );
+  };
+
+  it("renders login form with all elements", () => {
+    renderLoginPage();
+
+    expect(screen.getByText("ChefIT")).toBeInTheDocument();
+    expect(screen.getByText("Welcome Back")).toBeInTheDocument();
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Login" })).toBeInTheDocument();
+  });
+
+  it("handles form submission with valid credentials", async () => {
+    (signIn as any).mockResolvedValueOnce({ error: null });
+    renderLoginPage();
+
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("Password"), {
+      target: { value: "password123" },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: "Login" }));
+
+    expect(signIn).toHaveBeenCalledWith("test@example.com", "password123");
+    expect(mockNavigate).toHaveBeenCalledWith("/");
+  });
+
+  it("handles form submission with invalid credentials", async () => {
+    const errorMessage = "Invalid credentials";
+    (signIn as any).mockResolvedValueOnce({ error: { message: errorMessage } });
+    renderLoginPage();
+
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("Password"), {
+      target: { value: "wrongpassword" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Login" }));
+
+    expect(signIn).toHaveBeenCalledWith("test@example.com", "wrongpassword");
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("has working navigation links", () => {
+    renderLoginPage();
+
+    const signUpLink = screen.getByText("Sign up");
+    const homeLink = screen.getByText("Home");
+
+    expect(signUpLink).toBeInTheDocument();
+    expect(homeLink).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/__tests__/SignupPage.test.tsx b/frontend/src/pages/__tests__/SignupPage.test.tsx
new file mode 100644
index 0000000..4eae486
--- /dev/null
+++ b/frontend/src/pages/__tests__/SignupPage.test.tsx
@@ -0,0 +1,110 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import SignupPage from "../SignupPage";
+import { signUp } from "@/services/authService";
+
+// Mock the auth service
+vi.mock("@/services/authService", () => ({
+  signUp: vi.fn(),
+}));
+
+// Mock useNavigate
+const mockNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+describe("SignupPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderSignupPage = () => {
+    return render(
+      <BrowserRouter>
+        <SignupPage />
+      </BrowserRouter>
+    );
+  };
+
+  it("renders signup form with all elements", () => {
+    renderSignupPage();
+
+    expect(screen.getByText("ChefIT")).toBeInTheDocument();
+    expect(screen.getByText("Create an account")).toBeInTheDocument();
+    expect(screen.getByLabelText("Name")).toBeInTheDocument();
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Create Account" })
+    ).toBeInTheDocument();
+  });
+
+  it("handles form submission with valid credentials", async () => {
+    (signUp as any).mockResolvedValueOnce({ error: null });
+    renderSignupPage();
+
+    fireEvent.change(screen.getByLabelText("Name"), {
+      target: { value: "John Doe" },
+    });
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("Password"), {
+      target: { value: "password123" },
+    });
+
+    await fireEvent.click(
+      screen.getByRole("button", { name: "Create Account" })
+    );
+
+    expect(signUp).toHaveBeenCalledWith("test@example.com", "password123");
+    expect(mockNavigate).toHaveBeenCalledWith("/login");
+  });
+
+  it("handles form submission with invalid credentials", async () => {
+    const errorMessage = "Email already exists";
+    (signUp as any).mockResolvedValueOnce({ error: { message: errorMessage } });
+    renderSignupPage();
+
+    fireEvent.change(screen.getByLabelText("Name"), {
+      target: { value: "John Doe" },
+    });
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "existing@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("Password"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Account" }));
+
+    expect(signUp).toHaveBeenCalledWith("existing@example.com", "password123");
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("has working navigation links", () => {
+    renderSignupPage();
+
+    const signInLink = screen.getByText("Sign in");
+    const homeLink = screen.getByText("Home");
+
+    expect(signInLink).toBeInTheDocument();
+    expect(homeLink).toBeInTheDocument();
+  });
+
+  it("shows disabled social login buttons", () => {
+    renderSignupPage();
+
+    const googleButton = screen.getByRole("button", { name: "Google" });
+    const facebookButton = screen.getByRole("button", { name: "Facebook" });
+
+    expect(googleButton).toBeDisabled();
+    expect(facebookButton).toBeDisabled();
+  });
+});