with some tests

frontend/app/page.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { expect, test, vi, beforeEach, afterEach } from "vitest";
+import Home from "./page";
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+test("renders loading state initially", () => {
+  vi.spyOn(global, "fetch").mockImplementation(() => new Promise(() => {}));
+  render(<Home />);
+  expect(screen.getByText("...")).toBeDefined();
+});
+
+test("renders counter value after fetch", async () => {
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ value: 42 }),
+  } as Response);
+
+  render(<Home />);
+  await waitFor(() => {
+    expect(screen.getByText("42")).toBeDefined();
+  });
+});
+
+test("renders +1 button", async () => {
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ value: 0 }),
+  } as Response);
+
+  render(<Home />);
+  expect(screen.getByText("+1")).toBeDefined();
+});
+
+test("clicking button calls increment endpoint", async () => {
+  const fetchSpy = vi.spyOn(global, "fetch")
+    .mockResolvedValueOnce({ json: () => Promise.resolve({ value: 0 }) } as Response)
+    .mockResolvedValueOnce({ json: () => Promise.resolve({ value: 1 }) } as Response);
+
+  render(<Home />);
+  await waitFor(() => expect(screen.getByText("0")).toBeDefined());
+
+  fireEvent.click(screen.getByText("+1"));
+
+  await waitFor(() => {
+    expect(fetchSpy).toHaveBeenCalledWith(
+      "http://localhost:8000/api/counter/increment",
+      { method: "POST" }
+    );
+  });
+});
+
+test("clicking button updates displayed count", async () => {
+  vi.spyOn(global, "fetch")
+    .mockResolvedValueOnce({ json: () => Promise.resolve({ value: 0 }) } as Response)
+    .mockResolvedValueOnce({ json: () => Promise.resolve({ value: 1 }) } as Response);
+
+  render(<Home />);
+  await waitFor(() => expect(screen.getByText("0")).toBeDefined());
+
+  fireEvent.click(screen.getByText("+1"));
+  await waitFor(() => expect(screen.getByText("1")).toBeDefined());
+});
+