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,85 @@
+import { fireEvent, render, screen } 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";
+import type { LocalRecord, LocalRecordInput } from "@/lib/types";
+
+let records: LocalRecord[];
+let fetchMock: ReturnType<typeof createFetchMock>;
+
+function json(payload: unknown, status = 200): Response {
+	return new Response(JSON.stringify(payload), { status, headers: { "content-type": "application/json" } });
+}
+
+function createFetchMock() {
+	return vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+		const url = String(input);
+		const method = init?.method ?? "GET";
+		if (url === "/api/local-records" && method === "GET") return json({ local_records: records });
+		if (url === "/api/local-records" && method === "POST") {
+			const body = JSON.parse(String(init?.body)) as LocalRecordInput;
+			const created: LocalRecord = { id: 99, ttl: body.ttl ?? 300, ...body };
+			records = [...records, created];
+			return json(created, 201);
+		}
+		if (url === "/api/forward-zones" && method === "GET") {
+			return json({ forward_zones: [{ id: 7, zone: "lan.home", resolver: "udp://192.168.1.1:53" }] });
+		}
+		return json({ error: "not stubbed" }, 404);
+	});
+}
+
+beforeEach(() => {
+	records = [{ id: 1, name: "nas.lan.home", rtype: "A", value: "192.168.1.10", ttl: 300 }];
+	fetchMock = createFetchMock();
+	vi.stubGlobal("fetch", fetchMock);
+});
+
+afterEach(() => {
+	vi.unstubAllGlobals();
+});
+
+function renderPage() {
+	const queryClient = createQueryClient();
+	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/local-dns"] }), queryClient);
+	render(
+		<AuthProvider>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</AuthProvider>,
+	);
+}
+
+test("renders the records table and switches to the forward zones tab", async () => {
+	renderPage();
+
+	await screen.findByRole("heading", { name: "Local DNS" });
+	await screen.findByText("nas.lan.home");
+	expect(screen.getByText("192.168.1.10")).toBeTruthy();
+
+	fireEvent.click(screen.getByRole("tab", { name: "Forward zones" }));
+	await screen.findByText("lan.home");
+	expect(screen.getByText("udp://192.168.1.1:53")).toBeTruthy();
+});
+
+test("creates a record: POST body per LocalRecordInput, list refreshes", async () => {
+	renderPage();
+	await screen.findByText("nas.lan.home");
+
+	fireEvent.click(screen.getByRole("button", { name: "Add record" }));
+	fireEvent.change(screen.getByLabelText("Name"), { target: { value: "printer.lan.home" } });
+	fireEvent.change(screen.getByLabelText("Type"), { target: { value: "AAAA" } });
+	fireEvent.change(screen.getByLabelText("Value"), { target: { value: "fd00::11" } });
+	fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+	await screen.findByText("printer.lan.home");
+
+	const post = fetchMock.mock.calls.find(
+		([input, init]) => init?.method === "POST" && String(input) === "/api/local-records",
+	);
+	expect(post).toBeTruthy();
+	expect(JSON.parse(String(post?.[1]?.body))).toEqual({ name: "printer.lan.home", rtype: "AAAA", value: "fd00::11" });
+});