milestone 9: react spa admin ui, frontend ci and embedded dist

2026-08-02 13:04:09 +02:00
parent 5253c47303
commit 617cc966a2
82 changed files with 11833 additions and 17 deletions
@@ -0,0 +1,177 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { AuthProvider } from "@/auth/store";
+import { createQueryClient } from "@/lib/queryClient";
+import { createAppRouter } from "@/routes";
+
+const BLOCKLISTS = {
+	blocklists: [
+		{
+			id: 1,
+			url: "https://example.com/hosts.txt",
+			name: "StevenBlack",
+			enabled: true,
+			is_suggested: true,
+			last_updated: 1700000000,
+			domain_count: 1000,
+			wildcard_count: 10,
+			skipped_regex_count: 3,
+			checksum: "abc",
+		},
+		{
+			id: 2,
+			url: "https://example.org/list.txt",
+			name: "Custom",
+			enabled: false,
+			is_suggested: false,
+			last_updated: null,
+			domain_count: 0,
+			wildcard_count: 0,
+			skipped_regex_count: 0,
+			checksum: null,
+		},
+	],
+};
+
+const RESPONSES: Record<string, unknown> = {
+	"/api/blocklists": BLOCKLISTS,
+	"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+};
+
+let resolveUpdate: ((response: Response) => void) | null;
+
+beforeEach(() => {
+	resolveUpdate = null;
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+			const url = String(input);
+			if (url === "/api/blocklists/update" && init?.method === "POST") {
+				return new Promise<Response>((resolve) => {
+					resolveUpdate = resolve;
+				});
+			}
+			const payload = RESPONSES[url];
+			if (payload === undefined) return new Response(JSON.stringify({ error: "not stubbed" }), { status: 404 });
+			return new Response(JSON.stringify(payload), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			});
+		}),
+	);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function renderBlocklistsRoute() {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/blocklists"] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+test("renders the source table and the status empty state", async () => {
+	renderBlocklistsRoute();
+	await screen.findByRole("heading", { name: "Blocklists" });
+
+	expect(screen.getByText("StevenBlack")).toBeTruthy();
+	expect(screen.getByText("https://example.com/hosts.txt")).toBeTruthy();
+	expect(screen.getByText("Suggested")).toBeTruthy();
+	expect(screen.getByText("1000")).toBeTruthy();
+	expect(screen.getByText("10")).toBeTruthy();
+	expect(screen.getByText("3")).toBeTruthy();
+	expect(screen.getByText("never")).toBeTruthy();
+
+	const enabledToggle = screen.getByLabelText("StevenBlack enabled") as HTMLInputElement;
+	expect(enabledToggle.checked).toBe(true);
+	const disabledToggle = screen.getByLabelText("Custom enabled") as HTMLInputElement;
+	expect(disabledToggle.checked).toBe(false);
+
+	expect(screen.getByText(/run .Update now. to fetch status/)).toBeTruthy();
+	expect(screen.getByRole("heading", { name: "Add source" })).toBeTruthy();
+});
+
+test("update now disables the button, then replaces the status section from the 202 snapshot", async () => {
+	renderBlocklistsRoute();
+	await screen.findByRole("heading", { name: "Blocklists" });
+
+	const button = screen.getByRole("button", { name: "Update now" }) as HTMLButtonElement;
+	fireEvent.click(button);
+
+	const pending = (await screen.findByRole("button", { name: "Updating…" })) as HTMLButtonElement;
+	expect(pending.disabled).toBe(true);
+	expect(resolveUpdate).not.toBeNull();
+
+	const snapshot = {
+		sources: [
+			{
+				id: 1,
+				state: "loaded",
+				loaded: true,
+				last_attempt: 1700000100,
+				last_success: 1700000100,
+				url: "https://example.com/hosts.txt",
+				last_error: "",
+				domains: 1200,
+				wildcards: 12,
+				skipped_regex: 4,
+			},
+			{
+				id: 2,
+				state: "fetch_failed",
+				loaded: false,
+				last_attempt: 1700000100,
+				last_success: 0,
+				url: "https://example.org/list.txt",
+				last_error: "connect timed out",
+				domains: 0,
+				wildcards: 0,
+				skipped_regex: 0,
+			},
+		],
+	};
+	resolveUpdate!(
+		new Response(JSON.stringify(snapshot), { status: 202, headers: { "content-type": "application/json" } }),
+	);
+
+	await screen.findByText("loaded");
+	expect(screen.getByText("fetch_failed")).toBeTruthy();
+	expect(screen.getByText("connect timed out")).toBeTruthy();
+	expect(screen.getByText("1200")).toBeTruthy();
+	expect(screen.getByText("12")).toBeTruthy();
+	expect(screen.getByText("4")).toBeTruthy();
+	expect(screen.queryByText(/run .Update now. to fetch status/)).toBeNull();
+	expect(screen.getByText(/Update completed/)).toBeTruthy();
+
+	await waitFor(() => {
+		const idle = screen.getByRole("button", { name: "Update now" }) as HTMLButtonElement;
+		expect(idle.disabled).toBe(false);
+	});
+});
+
+test("update now shows a countdown when rate limited with Retry-After", async () => {
+	renderBlocklistsRoute();
+	await screen.findByRole("heading", { name: "Blocklists" });
+
+	fireEvent.click(screen.getByRole("button", { name: "Update now" }));
+	await screen.findByRole("button", { name: "Updating…" });
+	expect(resolveUpdate).not.toBeNull();
+
+	resolveUpdate!(
+		new Response(JSON.stringify({ error: "rate limited" }), {
+			status: 429,
+			headers: { "content-type": "application/json", "Retry-After": "7" },
+		}),
+	);
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("Rate limited. Try again in 7s.");
+});