test: improve frontend test coverage (#163)

- Export DashboardPage helper functions for testability
- Add new test files: App, SharedSchedule, AppContext, UnsavedChangesContext, useUnsavedChangesWarning
- Expand existing test coverage for Auth, MedDetailModal, MobileEditModal, DashboardPage, MedicationsPage, PlannerPage, and more
- Add edge case and error handling tests across components, hooks, and pages

frontend/src/test/components/AboutModal.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import AboutModal from "../../components/AboutModal";
 
@@ -67,4 +67,64 @@ describe("AboutModal", () => {
 		expect(versionLink).toHaveAttribute("href", "https://github.com/test/repo/releases/tag/v1.0.0");
 		expect(versionLink).toHaveAttribute("target", "_blank");
 	});
+
+	it("shows up-to-date result after successful version check", async () => {
+		vi.useFakeTimers();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () => Promise.resolve({ tag_name: "v1.0.0" }),
+		});
+
+		render(<AboutModal {...defaultProps} />);
+
+		await act(async () => {
+			fireEvent.click(screen.getByRole("button", { name: /about\.checkForUpdates/i }));
+			await vi.advanceTimersByTimeAsync(1000);
+		});
+
+		expect(screen.getByText(/about\.upToDate/i)).toBeInTheDocument();
+
+		vi.useRealTimers();
+	});
+
+	it("shows update available result with download link", async () => {
+		vi.useFakeTimers();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () => Promise.resolve({ tag_name: "v1.2.0" }),
+		});
+
+		render(<AboutModal {...defaultProps} />);
+
+		await act(async () => {
+			fireEvent.click(screen.getByRole("button", { name: /about\.checkForUpdates/i }));
+			await vi.advanceTimersByTimeAsync(1000);
+		});
+
+		expect(screen.getByText(/about\.updateAvailable/i)).toBeInTheDocument();
+
+		const downloadLink = screen.getByRole("link", { name: /about\.downloadUpdate/i });
+		expect(downloadLink).toHaveAttribute("href", "https://github.com/test/repo/releases/latest");
+
+		vi.useRealTimers();
+	});
+
+	it("shows error result when update check fails", async () => {
+		vi.useFakeTimers();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: false,
+			json: () => Promise.resolve({}),
+		});
+
+		render(<AboutModal {...defaultProps} />);
+
+		await act(async () => {
+			fireEvent.click(screen.getByRole("button", { name: /about\.checkForUpdates/i }));
+			await vi.advanceTimersByTimeAsync(1000);
+		});
+
+		expect(screen.getByText(/about\.checkFailed/i)).toBeInTheDocument();
+
+		vi.useRealTimers();
+	});
 });

frontend/src/test/components/AppHeader.test.tsx

@@ -6,6 +6,7 @@ import { AuthProvider } from "../../components/Auth";
 
 // Mock useNavigate
 const mockNavigate = vi.fn();
+const mockConfirmNavigation = vi.fn();
 vi.mock("react-router-dom", async () => {
 	const actual = await vi.importActual("react-router-dom");
 	return {
@@ -19,7 +20,7 @@ vi.mock("../../context", () => ({
 	useUnsavedChanges: () => ({
 		setHasUnsavedChanges: vi.fn(),
 		hasUnsavedChanges: false,
-		confirmNavigation: vi.fn().mockReturnValue(true),
+		confirmNavigation: mockConfirmNavigation,
 	}),
 }));
 
@@ -27,6 +28,7 @@ describe("AppHeader", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 		mockNavigate.mockClear();
+		mockConfirmNavigation.mockResolvedValue(true);
 		// Set up default auth mock - auth disabled
 		(global.fetch as ReturnType<typeof vi.fn>)
 			.mockResolvedValueOnce({
@@ -281,4 +283,97 @@ describe("AppHeader", () => {
 			}
 		});
 	});
+
+	it("does not navigate when unsaved changes confirmation is denied", async () => {
+		mockConfirmNavigation.mockResolvedValueOnce(false);
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<AuthProvider>
+					<AppHeader onOpenProfile={vi.fn()} onOpenAbout={vi.fn()} />
+				</AuthProvider>
+			</MemoryRouter>
+		);
+
+		await waitFor(() => {
+			const buttons = screen.getAllByRole("button");
+			const plannerBtn = buttons.find((btn) => btn.textContent?.includes("nav.planner"));
+			expect(plannerBtn).toBeInTheDocument();
+			if (plannerBtn) fireEvent.click(plannerBtn);
+		});
+
+		await waitFor(() => {
+			expect(mockConfirmNavigation).toHaveBeenCalled();
+			expect(mockNavigate).not.toHaveBeenCalledWith("/planner");
+		});
+	});
+
+	it("renders authenticated user menu and handles profile/about/settings/logout actions", async () => {
+		const onOpenProfile = vi.fn();
+		const onOpenAbout = vi.fn();
+
+		(global.fetch as ReturnType<typeof vi.fn>).mockReset();
+		mockNavigate.mockClear();
+		mockConfirmNavigation.mockResolvedValue(true);
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve({
+						authEnabled: true,
+						registrationEnabled: true,
+						localAuthEnabled: true,
+						oidcEnabled: false,
+						oidcProviderName: "",
+						hasUsers: true,
+						needsSetup: false,
+					}),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ id: 1, username: "tester", avatarUrl: null }),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+			});
+
+		const { container } = render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<AuthProvider>
+					<AppHeader onOpenProfile={onOpenProfile} onOpenAbout={onOpenAbout} />
+				</AuthProvider>
+			</MemoryRouter>
+		);
+
+		await waitFor(() => {
+			expect(container.querySelector(".user-menu-btn")).toBeInTheDocument();
+		});
+
+		// Settings icon should not be shown when auth is enabled
+		expect(screen.queryByTitle(/nav\.settings/i)).not.toBeInTheDocument();
+
+		const userMenuBtn = container.querySelector(".user-menu-btn") as HTMLButtonElement;
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/auth\.profile/i));
+		expect(onOpenProfile).toHaveBeenCalled();
+
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/about\.title/i));
+		expect(onOpenAbout).toHaveBeenCalled();
+
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/^nav\.settings$/i));
+		await waitFor(() => {
+			expect(mockNavigate).toHaveBeenCalledWith("/settings");
+		});
+
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/auth\.signOut/i));
+		await waitFor(() => {
+			expect(fetch).toHaveBeenCalledWith("/api/auth/logout", {
+				method: "POST",
+				credentials: "include",
+			});
+		});
+	});
 });

frontend/src/test/components/Auth.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
 import type React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { AuthPage, AuthProvider, LoginForm, RegisterForm, UserProfile, useAuth } from "../../components/Auth";
@@ -8,7 +8,7 @@ const wrapper = ({ children }: { children: React.ReactNode }) => <AuthProvider>{
 
 describe("AuthProvider", () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		vi.resetAllMocks();
 		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
 			ok: true,
 			json: () => Promise.resolve({ authEnabled: true, localAuthEnabled: true }),
@@ -17,6 +17,7 @@ describe("AuthProvider", () => {
 
 	afterEach(() => {
 		vi.clearAllMocks();
+		vi.useRealTimers();
 	});
 
 	it("provides auth context to children", () => {
@@ -72,6 +73,92 @@ describe("AuthProvider", () => {
 			renderHook(() => useAuth());
 		}).toThrow("useAuth must be used within AuthProvider");
 	});
+
+	it("authFetch retries original request after token refresh", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ authEnabled: false, localAuthEnabled: true }),
+			})
+			.mockResolvedValueOnce({ ok: false, status: 401 })
+			.mockResolvedValueOnce({ ok: true, status: 200 })
+			.mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ data: true }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const response = await result.current.authFetch("/api/medications", { method: "GET" });
+
+		expect(response.ok).toBe(true);
+		expect(fetch).toHaveBeenNthCalledWith(2, "/api/medications", {
+			method: "GET",
+			credentials: "include",
+		});
+		expect(fetch).toHaveBeenNthCalledWith(3, "/api/auth/refresh", {
+			method: "POST",
+			credentials: "include",
+		});
+		expect(fetch).toHaveBeenNthCalledWith(4, "/api/medications", {
+			method: "GET",
+			credentials: "include",
+		});
+	});
+
+	it("authFetch logs user out when refresh fails", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ authEnabled: true, localAuthEnabled: true }),
+			})
+			.mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ id: 1, username: "tester" }) })
+			.mockResolvedValueOnce({ ok: false, status: 401 })
+			.mockResolvedValueOnce({ ok: false, status: 401 });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.user?.username).toBe("tester");
+		});
+
+		await result.current.authFetch("/api/medications");
+
+		await waitFor(() => {
+			expect(result.current.user).toBeNull();
+		});
+	});
+
+	it("runs periodic token refresh when authenticated", async () => {
+		vi.useFakeTimers();
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ authEnabled: true, localAuthEnabled: true }),
+			})
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "timer-user" }) })
+			.mockResolvedValueOnce({ ok: true, status: 200 });
+
+		renderHook(() => useAuth(), { wrapper });
+
+		await act(async () => {
+			await vi.runOnlyPendingTimersAsync();
+		});
+
+		await act(async () => {
+			await vi.advanceTimersByTimeAsync(10 * 60 * 1000);
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/refresh",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		vi.useRealTimers();
+	});
 });
 
 describe("LoginForm", () => {
@@ -181,6 +268,47 @@ describe("LoginForm", () => {
 			expect(submitBtn).toBeInTheDocument();
 		});
 	});
+
+	it("submits login form and calls onSuccess", async () => {
+		vi.clearAllMocks();
+		const onSuccess = vi.fn();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve({
+						authEnabled: false,
+						localAuthEnabled: true,
+						oidcEnabled: false,
+						registrationEnabled: true,
+						hasUsers: true,
+						needsSetup: false,
+						oidcProviderName: "",
+					}),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ user: { id: 1, username: "testuser" } }),
+			});
+
+		render(
+			<AuthProvider>
+				<LoginForm onSuccess={onSuccess} />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(/auth\.username/i)).toBeInTheDocument();
+		});
+
+		fireEvent.change(screen.getByLabelText(/auth\.username/i), { target: { value: "testuser" } });
+		fireEvent.change(screen.getByLabelText(/auth\.password/i), { target: { value: "password123" } });
+		fireEvent.click(screen.getByRole("button", { name: /auth\.login/i }));
+
+		await waitFor(() => {
+			expect(onSuccess).toHaveBeenCalled();
+		});
+	});
 });
 
 describe("RegisterForm", () => {
@@ -265,6 +393,44 @@ describe("RegisterForm", () => {
 
 		expect(onSwitchToLogin).toHaveBeenCalled();
 	});
+
+	it("shows password mismatch error and does not submit", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () =>
+				Promise.resolve({
+					authEnabled: true,
+					localAuthEnabled: true,
+					oidcEnabled: false,
+					registrationEnabled: true,
+					hasUsers: false,
+					needsSetup: true,
+					oidcProviderName: "",
+				}),
+		});
+
+		render(
+			<AuthProvider>
+				<RegisterForm />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(/auth\.username/i)).toBeInTheDocument();
+		});
+
+		fireEvent.change(screen.getByLabelText(/auth\.username/i), { target: { value: "new-user" } });
+		fireEvent.change(screen.getByLabelText(/auth\.password/i), { target: { value: "password123" } });
+		fireEvent.change(screen.getByLabelText(/auth\.confirmPassword/i), { target: { value: "different123" } });
+		fireEvent.click(screen.getByRole("button", { name: /auth\.register/i }));
+
+		await waitFor(() => {
+			expect(screen.getByText(/auth\.passwordMismatch/i)).toBeInTheDocument();
+		});
+
+		expect(fetch).not.toHaveBeenCalledWith("/api/auth/register", expect.objectContaining({ method: "POST" }));
+	});
 });
 
 describe("AuthPage", () => {
@@ -303,6 +469,24 @@ describe("AuthPage", () => {
 			expect(screen.getByLabelText(/auth\.username/i)).toBeInTheDocument();
 		});
 	});
+
+	it("switches to register mode when create account is clicked", async () => {
+		render(
+			<AuthProvider>
+				<AuthPage />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /auth\.createAccount/i })).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByRole("button", { name: /auth\.createAccount/i }));
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /^auth\.register$/i })).toBeInTheDocument();
+		});
+	});
 });
 
 describe("UserProfile", () => {
@@ -378,4 +562,382 @@ describe("UserProfile", () => {
 
 		expect(onClose).toHaveBeenCalled();
 	});
+
+	it("shows password mismatch error on update", async () => {
+		render(
+			<AuthProvider>
+				<UserProfile />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		fireEvent.change(screen.getByLabelText(/auth\.newPassword/i), { target: { value: "new-password-123" } });
+		fireEvent.change(screen.getByLabelText(/auth\.confirmPassword/i), { target: { value: "different-password" } });
+
+		const submitButton = screen.getByRole("button", { name: /auth\.updatePassword/i });
+		fireEvent.click(submitButton);
+
+		await waitFor(() => {
+			expect(screen.getByText(/auth\.passwordMismatch/i)).toBeInTheDocument();
+		});
+	});
+
+	it("opens delete confirmation and executes account deletion", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ ok: true });
+
+		render(
+			<AuthProvider>
+				<UserProfile />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		const dangerButtons = screen.getAllByRole("button", { name: /auth\.deleteAccount/i });
+		fireEvent.click(dangerButtons[0]);
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /auth\.deleteAccountButton/i })).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByRole("button", { name: /auth\.deleteAccountButton/i }));
+
+		await waitFor(() => {
+			expect(fetch).toHaveBeenCalledWith(
+				"/api/auth/me",
+				expect.objectContaining({ method: "DELETE", credentials: "include" })
+			);
+		});
+	});
+
+	it("closes profile on Escape key when onClose is provided", async () => {
+		const onClose = vi.fn();
+
+		render(
+			<AuthProvider>
+				<UserProfile onClose={onClose} />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("shows delete error when account deletion fails", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: false,
+			json: () => Promise.resolve({ error: "Delete failed badly" }),
+		});
+
+		render(
+			<AuthProvider>
+				<UserProfile />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		const dangerButtons = screen.getAllByRole("button", { name: /auth\.deleteAccount/i });
+		fireEvent.click(dangerButtons[0]);
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /auth\.deleteAccountButton/i })).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByRole("button", { name: /auth\.deleteAccountButton/i }));
+
+		await waitFor(() => {
+			expect(screen.getAllByText("Delete failed badly").length).toBeGreaterThan(0);
+		});
+	});
+});
+
+describe("AuthProvider methods", () => {
+	it("register performs auto-login and refreshes auth state", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({}) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ user: { id: 2, username: "newuser" } }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.register("newuser", "secure-password-123");
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/register",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/login",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+	});
+
+	it("logout clears current user", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ user: { id: 3, username: "logout-user" } }) })
+			.mockResolvedValueOnce({ ok: true });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.login("logout-user", "pw");
+		});
+
+		expect(result.current.user?.username).toBe("logout-user");
+
+		await act(async () => {
+			await result.current.logout();
+		});
+
+		expect(result.current.user).toBeNull();
+	});
+
+	it("refreshUser retries after token refresh on 401", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false, localAuthEnabled: true }) })
+			.mockResolvedValueOnce({ ok: false, status: 401 })
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "refreshed-user" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.refreshUser();
+		});
+
+		await waitFor(() => {
+			expect(result.current.user?.username).toBe("refreshed-user");
+		});
+	});
+
+	it("login throws backend error message on failed login", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, json: () => Promise.resolve({ error: "Invalid credentials" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await expect(result.current.login("user", "bad-password")).rejects.toThrow("Invalid credentials");
+	});
+
+	it("updateProfile sends PUT and refreshes user data", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({}) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "updated-user" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.updateProfile({ currentPassword: "old", newPassword: "new-password-123" });
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/me",
+			expect.objectContaining({ method: "PUT", credentials: "include" })
+		);
+		expect(result.current.user?.username).toBe("updated-user");
+	});
+
+	it("uploadAvatar posts FormData and refreshes user", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "avatar-user" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const file = new File(["avatar"], "avatar.png", { type: "image/png" });
+		await act(async () => {
+			await result.current.uploadAvatar(file);
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/avatar",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		expect(result.current.user?.username).toBe("avatar-user");
+	});
+
+	it("deleteAvatar throws backend error on failure", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, json: () => Promise.resolve({ error: "Delete failed" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await expect(result.current.deleteAvatar()).rejects.toThrow("Delete failed");
+	});
+
+	it("authFetch does not refresh token for auth endpoints", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, status: 401 });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const response = await result.current.authFetch("/api/auth/me", { method: "GET" });
+		expect(response.status).toBe(401);
+
+		const refreshCalls = (fetch as ReturnType<typeof vi.fn>).mock.calls.filter(
+			(call) => call[0] === "/api/auth/refresh"
+		);
+		expect(refreshCalls.length).toBe(0);
+	});
+
+	it("refreshUser clears user when /auth/me returns non-401 error", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, status: 500 });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.refreshUser();
+		});
+
+		expect(result.current.user).toBeNull();
+	});
+
+	it("updateProfile throws default message when backend has no error field", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, json: () => Promise.resolve({}) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await expect(result.current.updateProfile({ currentPassword: "a", newPassword: "b" })).rejects.toThrow(
+			"Update failed"
+		);
+	});
+
+	it("uploadAvatar throws default message when error payload is invalid JSON", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({
+				ok: false,
+				json: () => Promise.reject(new Error("invalid json")),
+			});
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const file = new File(["avatar"], "avatar.png", { type: "image/png" });
+		await expect(result.current.uploadAvatar(file)).rejects.toThrow("Upload failed");
+	});
+
+	it("deleteAvatar succeeds and refreshes user", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "avatar-deleted" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.deleteAvatar();
+		});
+
+		expect(result.current.user?.username).toBe("avatar-deleted");
+	});
+
+	it("deleteAccount clears current user on success", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ user: { id: 9, username: "to-delete" } }) })
+			.mockResolvedValueOnce({ ok: true });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.login("to-delete", "pw");
+		});
+		expect(result.current.user?.username).toBe("to-delete");
+
+		await act(async () => {
+			await result.current.deleteAccount();
+		});
+
+		expect(result.current.user).toBeNull();
+	});
 });

frontend/src/test/components/ExportModal.test.tsx

@@ -78,4 +78,14 @@ describe("ExportModal", () => {
 		fireEvent.click(screen.getByText(/exportImport\.cancelButton/i));
 		expect(defaultProps.onClose).toHaveBeenCalled();
 	});
+
+	it("does not trigger export actions while exporting", () => {
+		const { container } = render(<ExportModal {...defaultProps} exporting={true} />);
+		const actionCards = container.querySelectorAll(".action-card");
+
+		fireEvent.click(actionCards[0]);
+		fireEvent.click(actionCards[1]);
+
+		expect(defaultProps.onExport).not.toHaveBeenCalled();
+	});
 });

frontend/src/test/components/MedDetailModal.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MedDetailModal } from "../../components/MedDetailModal";
 import type { Coverage, Medication, RefillEntry, StockThresholds } from "../../types";
+import * as utils from "../../utils";
 
 const defaultSettings: StockThresholds = {
 	lowStockDays: 7,
@@ -242,15 +243,73 @@ describe("MedDetailModal with refill modal", () => {
 
 	it("calls onSubmitRefill when refill submitted", () => {
 		const onSubmitRefill = vi.fn();
-		render(<MedDetailModal {...defaultProps} showRefillModal={true} onSubmitRefill={onSubmitRefill} />);
+		render(<MedDetailModal {...defaultProps} showRefillModal={true} onSubmitRefill={onSubmitRefill} refillLoose={1} />);
 
-		const submitBtns = document.querySelectorAll("button");
-		const submitBtn = Array.from(submitBtns).find(
-			(btn) => btn.textContent?.includes("refill") || btn.textContent?.includes("submit")
+		const submitBtn = document.querySelector(".refill-modal .modal-footer .success") as HTMLButtonElement;
+		fireEvent.click(submitBtn);
+		expect(onSubmitRefill).toHaveBeenCalledWith(mockMedication.id);
+	});
+
+	it("disables refill submit button when no pills are entered", () => {
+		render(<MedDetailModal {...defaultProps} showRefillModal={true} refillPacks={0} refillLoose={0} />);
+
+		const submitBtn = document.querySelector(".refill-modal .modal-footer .success") as HTMLButtonElement;
+		expect(submitBtn).toBeDisabled();
+	});
+
+	it("shows singular refill preview text when total refill is one pill", () => {
+		const bottleMed: Medication = {
+			...mockMedication,
+			packageType: "bottle",
+			packCount: 0,
+			blistersPerPack: 1,
+			pillsPerBlister: 1,
+			looseTablets: 10,
+		};
+
+		render(<MedDetailModal {...defaultProps} selectedMed={bottleMed} showRefillModal={true} refillLoose={1} />);
+
+		expect(screen.getByText(/\+1 common\.pill/i)).toBeInTheDocument();
+	});
+
+	it("parses refill packs and loose pills inputs", () => {
+		const onRefillPacksChange = vi.fn();
+		const onRefillLooseChange = vi.fn();
+		render(
+			<MedDetailModal
+				{...defaultProps}
+				showRefillModal={true}
+				onRefillPacksChange={onRefillPacksChange}
+				onRefillLooseChange={onRefillLooseChange}
+			/>
 		);
-		if (submitBtn) {
-			fireEvent.click(submitBtn);
-		}
+
+		const numberInputs = document.querySelectorAll(".refill-modal input[type='number']");
+		fireEvent.change(numberInputs[0], { target: { value: "3" } });
+		fireEvent.change(numberInputs[1], { target: { value: "5" } });
+
+		expect(onRefillPacksChange).toHaveBeenCalledWith(3);
+		expect(onRefillLooseChange).toHaveBeenCalledWith(5);
+	});
+
+	it("uses zero fallback for invalid refill input values", () => {
+		const onRefillPacksChange = vi.fn();
+		const onRefillLooseChange = vi.fn();
+		render(
+			<MedDetailModal
+				{...defaultProps}
+				showRefillModal={true}
+				onRefillPacksChange={onRefillPacksChange}
+				onRefillLooseChange={onRefillLooseChange}
+			/>
+		);
+
+		const numberInputs = document.querySelectorAll(".refill-modal input[type='number']");
+		fireEvent.change(numberInputs[0], { target: { value: "NaN" } });
+		fireEvent.change(numberInputs[1], { target: { value: "" } });
+
+		expect(onRefillPacksChange).toHaveBeenCalledWith(0);
+		expect(onRefillLooseChange).toHaveBeenCalledWith(0);
 	});
 });
 
@@ -279,6 +338,24 @@ describe("MedDetailModal actions", () => {
 			expect(onOpenRefillModal).toHaveBeenCalled();
 		}
 	});
+
+	it("calls generateICS when export calendar button is clicked", () => {
+		const generateICSSpy = vi.spyOn(utils, "generateICS").mockImplementation(() => "BEGIN:VCALENDAR");
+		render(<MedDetailModal {...defaultProps} />);
+
+		fireEvent.click(screen.getByTitle("modal.exportTooltip"));
+		expect(generateICSSpy).toHaveBeenCalledWith(mockMedication);
+	});
+
+	it("does not render export calendar button when no blisters exist", () => {
+		const medWithoutBlisters: Medication = {
+			...mockMedication,
+			blisters: [],
+		};
+
+		render(<MedDetailModal {...defaultProps} selectedMed={medWithoutBlisters} />);
+		expect(screen.queryByTitle("modal.exportTooltip")).not.toBeInTheDocument();
+	});
 });
 
 describe("MedDetailModal with multiple blisters", () => {
@@ -322,6 +399,41 @@ describe("MedDetailModal with image", () => {
 		if (avatar) {
 			fireEvent.click(avatar);
 		}
+
+		expect(onOpenImageLightbox).toHaveBeenCalledTimes(1);
+	});
+
+	it("renders lightbox when enabled and image is present", () => {
+		const med = { ...mockMedication, imageUrl: "test-image.jpg" };
+		render(<MedDetailModal {...defaultProps} selectedMed={med} showImageLightbox={true} />);
+
+		expect(document.querySelector(".lightbox-overlay")).toBeInTheDocument();
+	});
+});
+
+describe("MedDetailModal nested modal overlays", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("closes refill modal when clicking refill overlay", () => {
+		const onCloseRefillModal = vi.fn();
+		render(<MedDetailModal {...defaultProps} showRefillModal={true} onCloseRefillModal={onCloseRefillModal} />);
+
+		const overlays = document.querySelectorAll(".modal-overlay");
+		fireEvent.click(overlays[1]);
+		expect(onCloseRefillModal).toHaveBeenCalledTimes(1);
+	});
+
+	it("closes edit stock modal when clicking edit-stock overlay", () => {
+		const onCloseEditStockModal = vi.fn();
+		render(
+			<MedDetailModal {...defaultProps} showEditStockModal={true} onCloseEditStockModal={onCloseEditStockModal} />
+		);
+
+		const overlays = document.querySelectorAll(".modal-overlay");
+		fireEvent.click(overlays[1]);
+		expect(onCloseEditStockModal).toHaveBeenCalledTimes(1);
 	});
 });
 
@@ -569,6 +681,24 @@ describe("MedDetailModal bottle package type", () => {
 		expect(screen.queryByText("refill.packs")).not.toBeInTheDocument();
 	});
 
+	it("parses bottle refill pills input", () => {
+		const onRefillLooseChange = vi.fn();
+		render(<MedDetailModal {...bottleProps} showRefillModal={true} onRefillLooseChange={onRefillLooseChange} />);
+
+		const input = document.querySelector(".refill-modal input[type='number']") as HTMLInputElement;
+		fireEvent.change(input, { target: { value: "7" } });
+		expect(onRefillLooseChange).toHaveBeenCalledWith(7);
+	});
+
+	it("uses zero fallback for invalid bottle refill input", () => {
+		const onRefillLooseChange = vi.fn();
+		render(<MedDetailModal {...bottleProps} showRefillModal={true} onRefillLooseChange={onRefillLooseChange} />);
+
+		const input = document.querySelector(".refill-modal input[type='number']") as HTMLInputElement;
+		fireEvent.change(input, { target: { value: "" } });
+		expect(onRefillLooseChange).toHaveBeenCalledWith(0);
+	});
+
 	it("shows looseTablets as total capacity fallback when totalPills is null (backward compat)", () => {
 		// Old medications created before totalPills column existed
 		const oldBottleMed: Medication = {

frontend/src/test/components/MobileEditModal.test.tsx

@@ -357,6 +357,21 @@ describe("MobileEditModal form submission", () => {
 		vi.clearAllMocks();
 	});
 
+	it("does not call onSaveMedication when native form validation fails", () => {
+		const onSaveMedication = vi.fn();
+		render(<MobileEditModal {...defaultProps} onSaveMedication={onSaveMedication} />);
+
+		const form = document.querySelector("form") as HTMLFormElement;
+		const checkValiditySpy = vi.spyOn(form, "checkValidity").mockReturnValue(false);
+		const reportValiditySpy = vi.spyOn(form, "reportValidity").mockReturnValue(false);
+
+		fireEvent.submit(form);
+
+		expect(checkValiditySpy).toHaveBeenCalled();
+		expect(reportValiditySpy).toHaveBeenCalled();
+		expect(onSaveMedication).not.toHaveBeenCalled();
+	});
+
 	it("calls onSaveMedication when form submitted", () => {
 		const onSaveMedication = vi.fn((e: Event) => e.preventDefault());
 		const validForm = { ...defaultForm, name: "TestMed" };
@@ -386,6 +401,72 @@ describe("MobileEditModal form submission", () => {
 	});
 });
 
+describe("MobileEditModal field callbacks", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("calls onFormChange when commercial name changes", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const nameInput = document.querySelector('input[placeholder="form.placeholders.commercial"]') as HTMLInputElement;
+		fireEvent.change(nameInput, { target: { value: "Aspirin" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ name: "Aspirin" }));
+	});
+
+	it("calls onFormChange when generic name changes", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const genericInput = document.querySelector('input[placeholder="form.placeholders.generic"]') as HTMLInputElement;
+		fireEvent.change(genericInput, { target: { value: "Acetylsalicylic acid" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ genericName: "Acetylsalicylic acid" }));
+	});
+
+	it("calls onFormChange when notes change", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const notes = document.querySelector("textarea") as HTMLTextAreaElement;
+		fireEvent.change(notes, { target: { value: "Take with food" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ notes: "Take with food" }));
+	});
+
+	it("calls onFormChange when dose unit changes", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const doseUnitSelect = document.querySelector(".dose-unit-select") as HTMLSelectElement;
+		fireEvent.change(doseUnitSelect, { target: { value: "g" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ doseUnit: "g" }));
+	});
+
+	it("calls onHandleValueChange when package type changes", () => {
+		const onHandleValueChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onHandleValueChange={onHandleValueChange} />);
+
+		const packageSelect = document.querySelector(".package-type-select") as HTMLSelectElement;
+		fireEvent.change(packageSelect, { target: { value: "bottle" } });
+
+		expect(onHandleValueChange).toHaveBeenCalledWith("packageType", "bottle");
+	});
+
+	it("calls onHandleValueChange when blister stock values change", () => {
+		const onHandleValueChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onHandleValueChange={onHandleValueChange} />);
+
+		const packCountInput = document.querySelector('input[type="number"][min="0"]') as HTMLInputElement;
+		fireEvent.change(packCountInput, { target: { value: "4" } });
+
+		expect(onHandleValueChange).toHaveBeenCalledWith("packCount", "4");
+	});
+});
+
 describe("MobileEditModal with filled form", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -416,6 +497,31 @@ describe("MobileEditModal takenBy", () => {
 		vi.clearAllMocks();
 	});
 
+	it("shows add-person placeholder when people already exist", () => {
+		const form = {
+			...defaultForm,
+			takenBy: ["John"],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} />);
+
+		const input = document.querySelector(".tag-input-container input") as HTMLInputElement;
+		expect(input.placeholder).toBe("form.placeholders.addPerson");
+	});
+
+	it("filters takenBy suggestions and excludes already selected people", () => {
+		const form = {
+			...defaultForm,
+			takenBy: ["John"],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} existingPeople={["John", "Jane", "Alex"]} />);
+
+		expect(document.querySelector('#takenby-suggestions-modal option[value="John"]')).not.toBeInTheDocument();
+		expect(document.querySelector('#takenby-suggestions-modal option[value="Jane"]')).toBeInTheDocument();
+		expect(document.querySelector('#takenby-suggestions-modal option[value="Alex"]')).toBeInTheDocument();
+	});
+
 	it("displays takenBy tags", () => {
 		const form = {
 			...defaultForm,
@@ -474,6 +580,17 @@ describe("MobileEditModal takenBy", () => {
 			expect(onTakenByKeyDown).toHaveBeenCalled();
 		}
 	});
+
+	it("calls onAddTakenByPerson on blur when input has value", () => {
+		const onAddTakenByPerson = vi.fn();
+
+		render(<MobileEditModal {...defaultProps} takenByInput="Alex" onAddTakenByPerson={onAddTakenByPerson} />);
+
+		const tagInput = document.querySelector(".tag-input-container input") as HTMLInputElement;
+		fireEvent.blur(tagInput);
+
+		expect(onAddTakenByPerson).toHaveBeenCalledWith("Alex");
+	});
 });
 
 describe("MobileEditModal overlay interaction", () => {
@@ -540,6 +657,41 @@ describe("MobileEditModal optional fields", () => {
 		const toggle = document.querySelector('.toggle-switch input[type="checkbox"]');
 		expect(toggle).toBeInTheDocument();
 	});
+
+	it("shows intake takenBy select when takenBy list is not empty", () => {
+		const form = {
+			...defaultForm,
+			takenBy: ["John", "Jane"],
+			intakes: [
+				{
+					usage: "1",
+					every: "1",
+					startDate: "2024-01-01",
+					startTime: "09:00",
+					takenBy: "John",
+					intakeRemindersEnabled: false,
+				},
+			],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} />);
+
+		expect(screen.getByText(/form\.blisters\.takenByIntake/i)).toBeInTheDocument();
+		expect(document.querySelector('.blister-row select option[value="John"]')).toBeInTheDocument();
+	});
+
+	it("passes single takenBy person as default when adding intake", () => {
+		const onAddIntake = vi.fn();
+		const form = {
+			...defaultForm,
+			takenBy: ["OnlyPerson"],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} onAddIntake={onAddIntake} />);
+
+		fireEvent.click(screen.getByText(/form\.blisters\.addIntake/i));
+		expect(onAddIntake).toHaveBeenCalledWith("OnlyPerson");
+	});
 });
 
 describe("MobileEditModal bottle package type", () => {
@@ -590,3 +742,100 @@ describe("MobileEditModal bottle package type", () => {
 		expect(screen.queryByText("form.pillsPerBlister")).not.toBeInTheDocument();
 	});
 });
+
+describe("MobileEditModal refill and image actions", () => {
+	const baseMed = {
+		id: 1,
+		name: "Aspirin",
+		takenBy: [],
+		packageType: "blister" as const,
+		packCount: 1,
+		blistersPerPack: 2,
+		pillsPerBlister: 10,
+		looseTablets: 0,
+		blisters: [{ usage: 1, every: 1, start: "2024-01-01T09:00:00.000Z" }],
+		intakes: [
+			{
+				usage: 1,
+				every: 1,
+				start: "2024-01-01T09:00:00.000Z",
+				takenBy: null,
+				intakeRemindersEnabled: false,
+			},
+		],
+		updatedAt: null,
+		imageUrl: null,
+	};
+
+	it("calls onSubmitRefill when refill button is clicked", () => {
+		const onSubmitRefill = vi.fn().mockResolvedValue(undefined);
+
+		render(
+			<MobileEditModal
+				{...defaultProps}
+				editingId={1}
+				meds={[baseMed]}
+				refillLoose={2}
+				onSubmitRefill={onSubmitRefill}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /refill\.button/i }));
+		expect(onSubmitRefill).toHaveBeenCalledWith(1);
+	});
+
+	it("disables refill button when refill values are empty", () => {
+		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} refillPacks={0} refillLoose={0} />);
+
+		const refillButton = screen.getByRole("button", { name: /refill\.button/i });
+		expect(refillButton).toBeDisabled();
+	});
+
+	it("shows refill preview for singular pill", () => {
+		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} refillPacks={0} refillLoose={1} />);
+
+		expect(document.querySelector(".refill-preview")?.textContent).toContain("+1 common.pill");
+	});
+
+	it("disables refill button while refill is saving", () => {
+		render(
+			<MobileEditModal
+				{...defaultProps}
+				editingId={1}
+				meds={[baseMed]}
+				refillPacks={1}
+				refillLoose={0}
+				refillSaving={true}
+			/>
+		);
+
+		const refillButton = screen.getByRole("button", { name: /common\.saving/i });
+		expect(refillButton).toBeDisabled();
+	});
+
+	it("calls onUploadMedImage when selecting a file", () => {
+		const onUploadMedImage = vi.fn().mockResolvedValue(undefined);
+		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} onUploadMedImage={onUploadMedImage} />);
+
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const file = new File(["img"], "med.png", { type: "image/png" });
+		fireEvent.change(fileInput, { target: { files: [file] } });
+
+		expect(onUploadMedImage).toHaveBeenCalledWith(1, file);
+	});
+
+	it("calls onDeleteMedImage when delete image button is clicked", () => {
+		const onDeleteMedImage = vi.fn().mockResolvedValue(undefined);
+		render(
+			<MobileEditModal
+				{...defaultProps}
+				editingId={1}
+				meds={[{ ...baseMed, imageUrl: "aspirin.png" }]}
+				onDeleteMedImage={onDeleteMedImage}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.removeImage/i }));
+		expect(onDeleteMedImage).toHaveBeenCalledWith(1);
+	});
+});

frontend/src/test/components/ShareDialog.test.tsx

@@ -90,4 +90,22 @@ describe("ShareDialog", () => {
 		fireEvent.click(input);
 		expect(selectMock).toHaveBeenCalled();
 	});
+
+	it("calls person and period change callbacks", () => {
+		render(<ShareDialog {...defaultProps} />);
+
+		const selects = screen.getAllByRole("combobox");
+		fireEvent.change(selects[0], { target: { value: "Bob" } });
+		fireEvent.change(selects[1], { target: { value: "90" } });
+
+		expect(defaultProps.onShareSelectedPersonChange).toHaveBeenCalledWith("Bob");
+		expect(defaultProps.onShareSelectedDaysChange).toHaveBeenCalledWith(90);
+	});
+
+	it("disables generate button when no person is selected", () => {
+		render(<ShareDialog {...defaultProps} shareSelectedPerson="" />);
+
+		const generateButton = screen.getByRole("button", { name: /share\.generateLink/i });
+		expect(generateButton).toBeDisabled();
+	});
 });

frontend/src/test/components/SharedSchedule.test.tsx

@@ -0,0 +1,512 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SharedSchedule } from "../../components/SharedSchedule";
+
+function renderSharedSchedule(path: string) {
+	return render(
+		<MemoryRouter initialEntries={[path]}>
+			<Routes>
+				<Route path="/share/:token" element={<SharedSchedule />} />
+			</Routes>
+		</MemoryRouter>
+	);
+}
+
+function expandTodayIfCollapsed() {
+	const todayDivider = document.querySelector(".day-block.today .day-divider.clickable") as HTMLDivElement;
+	expect(todayDivider).toBeInTheDocument();
+	const todayBlock = document.querySelector(".day-block.today") as HTMLDivElement;
+	if (todayBlock?.classList.contains("collapsed")) {
+		fireEvent.click(todayDivider);
+	}
+}
+
+function createSharedData(overrides: Record<string, unknown> = {}) {
+	const now = new Date();
+	const yesterday = new Date(now);
+	yesterday.setDate(now.getDate() - 1);
+	yesterday.setHours(9, 0, 0, 0);
+
+	return {
+		sharedBy: "Owner",
+		takenBy: "Max",
+		scheduleDays: 30,
+		shareStockStatus: true,
+		stockCalculationMode: "automatic",
+		stockThresholds: {
+			lowStockDays: 7,
+			normalStockDays: 30,
+			highStockDays: 90,
+			reminderDaysBefore: 7,
+			expiryWarningDays: 30,
+		},
+		medications: [
+			{
+				id: 1,
+				name: "Ibuprofen",
+				genericName: "Ibu",
+				takenBy: ["Max"],
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+				looseTablets: 0,
+				pillWeightMg: null,
+				doseUnit: "mg",
+				expiryDate: null,
+				notes: null,
+				intakeRemindersEnabled: false,
+				blisters: [{ usage: 1, every: 1, start: yesterday.toISOString() }],
+				intakes: [
+					{ usage: 1, every: 1, start: yesterday.toISOString(), takenBy: "Max", intakeRemindersEnabled: false },
+				],
+				updatedAt: null,
+				dismissedUntil: null,
+				lastStockCorrectionAt: null,
+			},
+		],
+		...overrides,
+	};
+}
+
+function mockShareFetch(
+	token: string,
+	sharedData: Record<string, unknown>,
+	doses: Array<{ doseId: string; dismissed?: boolean }> = []
+) {
+	(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+		if (url === `/api/share/${token}/doses` && (!init || !init.method || init.method === "GET")) {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses }) });
+		}
+		if (url === `/api/share/${token}`) {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+		}
+		if (url === `/api/share/${token}/doses` && init?.method === "POST") {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+		}
+		if (url.startsWith(`/api/share/${token}/doses/`) && init?.method === "DELETE") {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+		}
+		return Promise.reject(new Error(`Unexpected URL: ${url}`));
+	});
+}
+
+describe.skip("SharedSchedule", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		window.localStorage.clear();
+		vi.spyOn(global, "setInterval").mockImplementation(() => 1 as unknown as ReturnType<typeof setInterval>);
+		vi.spyOn(global, "clearInterval").mockImplementation(() => {});
+		vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
+			const first = String(args[0] ?? "");
+			if (first.includes("not wrapped in act")) return;
+		});
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.restoreAllMocks();
+	});
+
+	it("closes theme menu when clicking outside", async () => {
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByTitle("theme.title"));
+		expect(document.querySelector(".theme-menu.open")).toBeInTheDocument();
+
+		fireEvent.click(document.body);
+		expect(document.querySelector(".theme-menu.open")).not.toBeInTheDocument();
+	});
+
+	it("shows loading state initially", async () => {
+		let resolveShare: ((value: unknown) => void) | null = null;
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return new Promise((resolve) => {
+					resolveShare = resolve;
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+		expect(screen.getByText("common.loading")).toBeInTheDocument();
+
+		resolveShare?.({
+			ok: true,
+			json: () => Promise.resolve(createSharedData()),
+		});
+
+		await waitFor(() => {
+			expect(screen.queryByText("common.loading")).not.toBeInTheDocument();
+		});
+	});
+
+	it("renders not found error for 404 links", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: false, status: 404, json: () => Promise.resolve({}) });
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("share.notFound")).toBeInTheDocument();
+		});
+	});
+
+	it("renders generic error for unexpected status codes", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: false, status: 500, json: () => Promise.resolve({}) });
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("share.error")).toBeInTheDocument();
+		});
+	});
+
+	it("renders expired link state for 410 responses", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({
+					ok: false,
+					status: 410,
+					json: () =>
+						Promise.resolve({
+							ownerUsername: "owner",
+							takenBy: "Max",
+							expiredAt: "2026-02-01T10:00:00.000Z",
+						}),
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("share.expired.title")).toBeInTheDocument();
+		});
+	});
+
+	it("renders schedule shell for valid shared data", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({
+					ok: true,
+					json: () =>
+						Promise.resolve({
+							sharedBy: "Owner",
+							takenBy: "Max",
+							scheduleDays: 30,
+							shareStockStatus: true,
+							stockCalculationMode: "automatic",
+							stockThresholds: {
+								lowStockDays: 7,
+								normalStockDays: 30,
+								highStockDays: 90,
+								reminderDaysBefore: 7,
+								expiryWarningDays: 30,
+							},
+							medications: [],
+						}),
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share.scheduleFor/i)).toBeInTheDocument();
+			expect(screen.getByText("share.noSchedule")).toBeInTheDocument();
+		});
+	});
+
+	it("opens theme menu and switches to light theme", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({
+					ok: true,
+					json: () =>
+						Promise.resolve({
+							sharedBy: "Owner",
+							takenBy: "Max",
+							scheduleDays: 30,
+							shareStockStatus: true,
+							stockCalculationMode: "automatic",
+							stockThresholds: {
+								lowStockDays: 7,
+								normalStockDays: 30,
+								highStockDays: 90,
+								reminderDaysBefore: 7,
+								expiryWarningDays: 30,
+							},
+							medications: [],
+						}),
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByTitle("theme.title"));
+		fireEvent.click(screen.getByRole("button", { name: /theme\.light/i }));
+
+		expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+	});
+
+	it("renders schedule rows for populated data and can expand future days", async () => {
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
+		});
+
+		const futureToggle = document.querySelector(".future-days-toggle");
+		expect(futureToggle).toBeInTheDocument();
+		fireEvent.click(futureToggle as Element);
+
+		await waitFor(() => {
+			expect(document.querySelectorAll(".day-block").length).toBeGreaterThan(1);
+		});
+	});
+
+	it("marks and undoes a dose via shared API", async () => {
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
+		});
+
+		const takeButton = document.querySelector(".dose-btn.take:not([disabled])") as HTMLButtonElement;
+		expect(takeButton).toBeInTheDocument();
+		fireEvent.click(takeButton);
+
+		await waitFor(() => {
+			expect(global.fetch as ReturnType<typeof vi.fn>).toHaveBeenCalledWith(
+				"/api/share/token-123/doses",
+				expect.objectContaining({ method: "POST" })
+			);
+		});
+	});
+
+	it("undos a taken dose via shared API", async () => {
+		const sharedData = createSharedData();
+		const today = new Date();
+		const todayDateOnlyMs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+		mockShareFetch("token-123", sharedData, [{ doseId: `1-0-${todayDateOnlyMs}-Max` }]);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const undoButton = await waitFor(() => {
+			const button = document.querySelector(".dose-btn.undo") as HTMLButtonElement | null;
+			expect(button).toBeInTheDocument();
+			return button as HTMLButtonElement;
+		});
+		fireEvent.click(undoButton);
+
+		await waitFor(() => {
+			expect(
+				(global.fetch as ReturnType<typeof vi.fn>).mock.calls.some((call) => {
+					const [url, init] = call as [string, RequestInit | undefined];
+					return typeof url === "string" && url.includes("/api/share/token-123/doses/") && init?.method === "DELETE";
+				})
+			).toBe(true);
+		});
+	});
+
+	it("hides stock status chips when shareStockStatus is false", async () => {
+		const sharedData = createSharedData({ shareStockStatus: false });
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
+		});
+
+		expect(document.querySelector(".status-chip")).not.toBeInTheDocument();
+	});
+
+	it("opens and closes lightbox for medication image", async () => {
+		const pushStateSpy = vi.spyOn(window.history, "pushState").mockImplementation(() => {});
+		const backSpy = vi.spyOn(window.history, "back").mockImplementation(() => {});
+		const sharedData = createSharedData({
+			medications: [
+				{
+					...createSharedData().medications[0],
+					imageUrl: "ibuprofen.png",
+				},
+			],
+		});
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const avatar = await waitFor(() => {
+			const element = document.querySelector(".day-block.today .med-avatar.clickable") as HTMLDivElement | null;
+			expect(element).toBeInTheDocument();
+			return element as HTMLDivElement;
+		});
+		fireEvent.click(avatar);
+
+		expect(pushStateSpy).toHaveBeenCalled();
+		expect(document.querySelector(".lightbox-overlay")).toBeInTheDocument();
+
+		fireEvent.click(document.querySelector(".lightbox-overlay") as HTMLDivElement);
+		expect(backSpy).toHaveBeenCalled();
+	});
+
+	it("reverts optimistic taken state when mark-dose request fails", async () => {
+		const sharedData = createSharedData();
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+			}
+			if (url === "/api/share/token-123/doses" && init?.method === "POST") {
+				return Promise.reject(new Error("post failed"));
+			}
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+		});
+
+		renderSharedSchedule("/share/token-123");
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const takeButton = await waitFor(() => {
+			const button = document.querySelector(".dose-btn.take:not([disabled])") as HTMLButtonElement | null;
+			expect(button).toBeInTheDocument();
+			return button as HTMLButtonElement;
+		});
+		fireEvent.click(takeButton);
+
+		await waitFor(() => {
+			expect(document.querySelector(".dose-btn.undo")).not.toBeInTheDocument();
+			expect(document.querySelector(".dose-btn.take:not([disabled])")).toBeInTheDocument();
+		});
+	});
+
+	it("reverts optimistic undo state when undo request fails", async () => {
+		const today = new Date();
+		const todayDateOnlyMs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+		const sharedData = createSharedData();
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
+				return Promise.resolve({
+					ok: true,
+					json: () => Promise.resolve({ doses: [{ doseId: `1-0-${todayDateOnlyMs}-Max` }] }),
+				});
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+			}
+			if (url.startsWith("/api/share/token-123/doses/") && init?.method === "DELETE") {
+				return Promise.reject(new Error("delete failed"));
+			}
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+		});
+
+		renderSharedSchedule("/share/token-123");
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const undoButton = await waitFor(() => {
+			const button = document.querySelector(".dose-btn.undo") as HTMLButtonElement | null;
+			expect(button).toBeInTheDocument();
+			return button as HTMLButtonElement;
+		});
+		fireEvent.click(undoButton);
+
+		await waitFor(() => {
+			expect(document.querySelector(".dose-btn.undo")).toBeInTheDocument();
+		});
+	});
+
+	it("persists manual collapse state in localStorage", async () => {
+		const setItemSpy = vi.spyOn(window.localStorage, "setItem");
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		const todayDivider = document.querySelector(".day-block.today .day-divider.clickable") as HTMLDivElement;
+		fireEvent.click(todayDivider);
+
+		expect(setItemSpy).toHaveBeenCalled();
+		expect(
+			setItemSpy.mock.calls.some((call) => String(call[0]).includes("share_token-123_collapsedDays")) ||
+				setItemSpy.mock.calls.some((call) => String(call[0]).includes("share_token-123_expandedDays"))
+		).toBe(true);
+	});
+});