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,108 @@
+import { fireEvent, render, screen, within } 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 RESPONSES: Record<string, unknown> = {
+	"/api/rules": {
+		rules: [
+			{
+				id: 1,
+				group_id: 1,
+				group: "Default",
+				pattern: "ads.example.com",
+				kind: "exact",
+				action: "block",
+				created_at: 1700000000,
+			},
+			{
+				id: 2,
+				group_id: 2,
+				group: "Kids",
+				pattern: "*.cdn.example.com",
+				kind: "wildcard",
+				action: "allow",
+				created_at: 1700000100,
+			},
+		],
+	},
+	"/api/groups": {
+		groups: [
+			{ id: 1, name: "Default", safe_search: false },
+			{ id: 2, name: "Kids", safe_search: true },
+		],
+	},
+	"/api/version": { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 },
+};
+
+beforeEach(() => {
+	vi.stubGlobal(
+		"fetch",
+		vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+			const url = String(input);
+			if (url === "/api/rules" && init?.method === "POST") {
+				return new Response(JSON.stringify({ error: "rate limited" }), {
+					status: 429,
+					headers: { "content-type": "application/json", "Retry-After": "5" },
+				});
+			}
+			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 renderRulesRoute() {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/rules"] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+test("renders the rule table and the create form with contract enums", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	const table = within(screen.getByRole("table"));
+	expect(table.getByText("ads.example.com")).toBeTruthy();
+	expect(table.getByText("*.cdn.example.com")).toBeTruthy();
+	expect(table.getByText("block")).toBeTruthy();
+	expect(table.getByText("allow")).toBeTruthy();
+	expect(table.getByText("Kids")).toBeTruthy();
+	expect(screen.getAllByRole("button", { name: "Delete" })).toHaveLength(2);
+
+	const kindSelect = screen.getByLabelText("Kind") as HTMLSelectElement;
+	expect(Array.from(kindSelect.options).map((o) => o.value)).toEqual(["exact", "wildcard"]);
+
+	const actionSelect = screen.getByLabelText("Action") as HTMLSelectElement;
+	expect(Array.from(actionSelect.options).map((o) => o.value)).toEqual(["allow", "block"]);
+
+	const groupSelect = screen.getByLabelText("Group") as HTMLSelectElement;
+	expect(Array.from(groupSelect.options).map((o) => o.textContent)).toEqual(["Default", "Kids"]);
+});
+
+test("rule create shows a countdown when rate limited with Retry-After", async () => {
+	renderRulesRoute();
+	await screen.findByRole("heading", { name: "Rules" });
+
+	fireEvent.change(screen.getByLabelText("Pattern"), { target: { value: "ads.example.net" } });
+	fireEvent.click(screen.getByRole("button", { name: "Create rule" }));
+
+	const alert = await screen.findByRole("alert");
+	expect(alert.textContent).toBe("Rate limited. Try again in 5s.");
+});