Implement Settings page with form validation (P2.9)

- Add client-side form for cycleLength, notificationTime, timezone
- Fetch user data on mount and pre-fill form values
- Submit updates via PATCH /api/user with loading states
- Display success/error messages with proper accessibility
- Clear messages when user modifies form
- 24 tests covering rendering, data loading, validation, error handling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/settings/page.test.tsx

@@ -0,0 +1,475 @@
+// ABOUTME: Unit tests for the Settings page component.
+// ABOUTME: Tests form rendering, data loading, validation, and save flow.
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock next/navigation
+const mockPush = vi.fn();
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+// Mock fetch
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+import SettingsPage from "./page";
+
+describe("SettingsPage", () => {
+  const mockUser = {
+    id: "user123",
+    email: "test@example.com",
+    cycleLength: 28,
+    notificationTime: "08:00",
+    timezone: "America/New_York",
+    garminConnected: false,
+    activeOverrides: [],
+    lastPeriodDate: "2024-01-01",
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockUser),
+    });
+  });
+
+  describe("rendering", () => {
+    it("renders the settings heading", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("heading", { name: /settings/i }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("renders cycle length input", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+    });
+
+    it("renders notification time input", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/notification time/i)).toBeInTheDocument();
+      });
+    });
+
+    it("renders timezone input", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/timezone/i)).toBeInTheDocument();
+      });
+    });
+
+    it("renders a save button", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /save/i }),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("renders a back link to dashboard", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByRole("link", { name: /back/i })).toHaveAttribute(
+          "href",
+          "/",
+        );
+      });
+    });
+
+    it("displays email as read-only", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText("test@example.com")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("data loading", () => {
+    it("fetches user data on mount", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith("/api/user");
+      });
+    });
+
+    it("shows loading state while fetching", async () => {
+      // Create a promise that we can control
+      let resolveUser: (value: unknown) => void = () => {};
+      const userPromise = new Promise((resolve) => {
+        resolveUser = resolve;
+      });
+      mockFetch.mockReturnValue({
+        ok: true,
+        json: () => userPromise,
+      });
+
+      render(<SettingsPage />);
+
+      expect(screen.getByText(/loading/i)).toBeInTheDocument();
+
+      resolveUser(mockUser);
+
+      await waitFor(() => {
+        expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+      });
+    });
+
+    it("pre-fills form with current user values", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toHaveValue(28);
+        expect(screen.getByLabelText(/notification time/i)).toHaveValue(
+          "08:00",
+        );
+        expect(screen.getByLabelText(/timezone/i)).toHaveValue(
+          "America/New_York",
+        );
+      });
+    });
+
+    it("shows error if fetching fails", async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        json: () => Promise.resolve({ error: "Failed to fetch user" }),
+      });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(/failed to fetch user/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("form submission", () => {
+    it("calls PATCH /api/user with updated values on save", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({ ...mockUser, cycleLength: 30 }),
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      fireEvent.change(cycleLengthInput, { target: { value: "30" } });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(mockFetch).toHaveBeenCalledWith("/api/user", {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            cycleLength: 30,
+            notificationTime: "08:00",
+            timezone: "America/New_York",
+          }),
+        });
+      });
+    });
+
+    it("shows loading state while saving", async () => {
+      let resolveSave: (value: unknown) => void = () => {};
+      const savePromise = new Promise((resolve) => {
+        resolveSave = resolve;
+      });
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockReturnValueOnce({
+          ok: true,
+          json: () => savePromise,
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /saving/i }),
+        ).toBeInTheDocument();
+      });
+
+      resolveSave(mockUser);
+    });
+
+    it("disables inputs while saving", async () => {
+      let resolveSave: (value: unknown) => void = () => {};
+      const savePromise = new Promise((resolve) => {
+        resolveSave = resolve;
+      });
+
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockReturnValueOnce({
+          ok: true,
+          json: () => savePromise,
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(cycleLengthInput).toBeDisabled();
+        expect(screen.getByLabelText(/notification time/i)).toBeDisabled();
+        expect(screen.getByLabelText(/timezone/i)).toBeDisabled();
+        expect(screen.getByRole("button")).toBeDisabled();
+      });
+
+      resolveSave(mockUser);
+    });
+
+    it("shows success message on save", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve({ ...mockUser, cycleLength: 30 }),
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(/settings saved/i)).toBeInTheDocument();
+      });
+    });
+
+    it("shows error on save failure", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockResolvedValueOnce({
+          ok: false,
+          json: () =>
+            Promise.resolve({ error: "cycleLength must be between 21 and 45" }),
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(
+          screen.getByText(/cycleLength must be between 21 and 45/i),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("re-enables form after error", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockResolvedValueOnce({
+          ok: false,
+          json: () => Promise.resolve({ error: "Failed to save" }),
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+      });
+
+      expect(screen.getByLabelText(/cycle length/i)).not.toBeDisabled();
+      expect(screen.getByLabelText(/notification time/i)).not.toBeDisabled();
+      expect(screen.getByLabelText(/timezone/i)).not.toBeDisabled();
+      expect(screen.getByRole("button", { name: /save/i })).not.toBeDisabled();
+    });
+  });
+
+  describe("validation", () => {
+    it("validates cycle length minimum (21)", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      expect(cycleLengthInput).toHaveAttribute("min", "21");
+    });
+
+    it("validates cycle length maximum (45)", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      expect(cycleLengthInput).toHaveAttribute("max", "45");
+    });
+
+    it("has cycle length input as number type", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      expect(cycleLengthInput).toHaveAttribute("type", "number");
+    });
+
+    it("has notification time input as time type", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/notification time/i)).toBeInTheDocument();
+      });
+
+      const notificationTimeInput = screen.getByLabelText(/notification time/i);
+      expect(notificationTimeInput).toHaveAttribute("type", "time");
+    });
+
+    it("requires timezone to be non-empty", async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/timezone/i)).toBeInTheDocument();
+      });
+
+      const timezoneInput = screen.getByLabelText(/timezone/i);
+      expect(timezoneInput).toHaveAttribute("required");
+    });
+  });
+
+  describe("error handling", () => {
+    it("clears error when user starts typing", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockResolvedValueOnce({
+          ok: false,
+          json: () => Promise.resolve({ error: "Failed to save" }),
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      fireEvent.change(cycleLengthInput, { target: { value: "30" } });
+
+      expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    });
+
+    it("clears success message when user modifies form", async () => {
+      mockFetch
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        })
+        .mockResolvedValueOnce({
+          ok: true,
+          json: () => Promise.resolve(mockUser),
+        });
+
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/cycle length/i)).toBeInTheDocument();
+      });
+
+      const saveButton = screen.getByRole("button", { name: /save/i });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(/settings saved/i)).toBeInTheDocument();
+      });
+
+      const cycleLengthInput = screen.getByLabelText(/cycle length/i);
+      fireEvent.change(cycleLengthInput, { target: { value: "30" } });
+
+      expect(screen.queryByText(/settings saved/i)).not.toBeInTheDocument();
+    });
+  });
+});