feat: notification center frontend core (PR-3)

- Bell icon in icon registry (Phosphor Bell) - NotificationProvider context with polling (15s unread / 30s list) - useNotifications() hook with optimistic updates - NotificationCenter component: bell + badge + dropdown panel - NotificationItem component: severity icon, title, relative time, actions - AppShell integration: mount in header-actions, hidden on mobile - CSS styles: dropdown, items, unread/read states, empty state - formatRelativeTime utility (custom, no new deps) - 25 frontend tests (9 hook + 6 item + 10 center) Quality gates: vitest 25 passed, tsc clean, eslint clean
2026-05-29 13:14:50 +02:00
parent cbd3436ff7
commit 2bec205a30
15 changed files with 1974 additions and 402 deletions
@@ -0,0 +1,156 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { NotificationCenter } from "./notification-center";
+import { NotificationProvider } from "../state/notifications";
+
+vi.mock("../api/notifications", () => ({
+	getNotifications: vi.fn(),
+	getUnreadCount: vi.fn(),
+	markNotificationRead: vi.fn(),
+	markAllNotificationsRead: vi.fn(),
+	dismissNotification: vi.fn(),
+}));
+
+import { getNotifications, getUnreadCount } from "../api/notifications";
+
+const mockedGetNotifications = vi.mocked(getNotifications);
+const mockedGetUnreadCount = vi.mocked(getUnreadCount);
+
+const makeNotification = (id: string, overrides?: Record<string, unknown>) => ({
+	id,
+	user_id: "user-1",
+	category: "instance",
+	severity: "info" as const,
+	title: `Notification ${id}`,
+	message: null,
+	source_type: null,
+	source_id: null,
+	metadata: {},
+	read_at: null,
+	dismissed_at: null,
+	created_at: "2026-05-29T10:00:00Z",
+	...overrides,
+});
+
+function wrapper({ children }: { children: React.ReactNode }) {
+	return <NotificationProvider>{children}</NotificationProvider>;
+}
+
+describe("NotificationCenter", () => {
+	beforeEach(() => {
+		vi.useFakeTimers({ shouldAdvanceTime: true });
+		mockedGetNotifications.mockResolvedValue({
+			items: [],
+			total: 0,
+			limit: 20,
+			offset: 0,
+		});
+		mockedGetUnreadCount.mockResolvedValue(0);
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+		vi.clearAllMocks();
+		cleanup();
+	});
+
+	it("renders bell icon", () => {
+		render(<NotificationCenter />, { wrapper });
+		expect(
+			screen.getByRole("button", { name: /notifications/i }),
+		).toBeInTheDocument();
+	});
+
+	it("shows badge when unread count > 0", async () => {
+		mockedGetUnreadCount.mockResolvedValue(3);
+		render(<NotificationCenter />, { wrapper });
+
+		await vi.advanceTimersByTimeAsync(100);
+		expect(screen.getByText("3")).toBeInTheDocument();
+	});
+
+	it("hides badge when unread count is 0", () => {
+		render(<NotificationCenter />, { wrapper });
+		expect(screen.queryByText("0")).not.toBeInTheDocument();
+	});
+
+	it("opens dropdown on bell click", () => {
+		render(<NotificationCenter />, { wrapper });
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+	});
+
+	it("closes dropdown on outside click", () => {
+		render(
+			<div>
+				<div data-testid="outside">Outside</div>
+				<NotificationCenter />
+			</div>,
+			{ wrapper },
+		);
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+		fireEvent.mouseDown(screen.getByTestId("outside"));
+		expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+	});
+
+	it("closes dropdown on escape", () => {
+		render(<NotificationCenter />, { wrapper });
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+		expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+	});
+
+	it("renders empty state when no notifications", () => {
+		render(<NotificationCenter />, { wrapper });
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+		expect(screen.getByText("No notifications")).toBeInTheDocument();
+	});
+
+	it("renders notification items", async () => {
+		mockedGetNotifications.mockResolvedValue({
+			items: [makeNotification("1"), makeNotification("2")],
+			total: 2,
+			limit: 20,
+			offset: 0,
+		});
+
+		render(<NotificationCenter />, { wrapper });
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+
+		await vi.advanceTimersByTimeAsync(100);
+		expect(screen.getByText("Notification 1")).toBeInTheDocument();
+		expect(screen.getByText("Notification 2")).toBeInTheDocument();
+	});
+
+	it("calls markAllRead on footer button click", async () => {
+		mockedGetNotifications.mockResolvedValue({
+			items: [makeNotification("1")],
+			total: 1,
+			limit: 20,
+			offset: 0,
+		});
+
+		render(<NotificationCenter />, { wrapper });
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+
+		await vi.advanceTimersByTimeAsync(100);
+		fireEvent.click(screen.getByRole("button", { name: /mark all as read/i }));
+
+		const { markAllNotificationsRead: mockMarkAll } = await import(
+			"../api/notifications"
+		);
+		expect(vi.mocked(mockMarkAll)).toHaveBeenCalled();
+	});
+
+	it("refreshes list immediately on open", async () => {
+		render(<NotificationCenter />, { wrapper });
+		fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+
+		await vi.advanceTimersByTimeAsync(100);
+		expect(mockedGetNotifications).toHaveBeenCalled();
+	});
+});