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,80 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { LiveQueryEvent } from "@/lib/types";
+import { FakeEventSource } from "./fakeEventSource";
+import LiveLogPage from "./LiveLogPage";
+
+function frame(ts: number, domain: string, overrides: Partial<LiveQueryEvent> = {}): { data: string } {
+	const payload: LiveQueryEvent = {
+		ts,
+		domain,
+		client_ip: "192.0.2.10",
+		qtype: 1,
+		blocked: false,
+		block_reason: "",
+		response_time_us: 500,
+		cache_hit: true,
+		upstream: "",
+		...overrides,
+	};
+	return { data: JSON.stringify(payload) };
+}
+
+function renderPage() {
+	const sources: FakeEventSource[] = [];
+	const createEventSource = (url: string) => {
+		const es = new FakeEventSource(url);
+		sources.push(es);
+		return es;
+	};
+	render(<LiveLogPage createEventSource={createEventSource} />);
+	return sources;
+}
+
+test("streams rows, flags blocked ones, and freezes the display", () => {
+	const sources = renderPage();
+	expect(screen.getByText("Connecting…")).toBeTruthy();
+
+	act(() => sources[0]!.emit("open"));
+	expect(screen.getByRole("status", { name: "Live" })).toBeTruthy();
+	expect(screen.getByText("Waiting for queries…")).toBeTruthy();
+
+	act(() => {
+		sources[0]!.emit("query", frame(1000, "ok.example"));
+		sources[0]!.emit(
+			"query",
+			frame(1001, "ads.example", { blocked: true, block_reason: "blocklist:stevenblack", qtype: 28 }),
+		);
+	});
+
+	expect(screen.getByText("ok.example")).toBeTruthy();
+	expect(screen.getByText("Blocked")).toBeTruthy();
+	expect(screen.getByText("blocklist:stevenblack")).toBeTruthy();
+	expect(screen.getByText("AAAA")).toBeTruthy();
+	const blockedRow = screen.getByText("ads.example").closest("tr");
+	expect(blockedRow?.className).toContain("bg-red-50");
+
+	const freeze = screen.getByRole("button", { name: "Freeze" });
+	fireEvent.click(freeze);
+	expect(freeze.getAttribute("aria-pressed")).toBe("true");
+
+	act(() => sources[0]!.emit("query", frame(1002, "later.example")));
+	expect(screen.queryByText("later.example")).toBeNull();
+	expect(screen.getByText(/3 in buffer/)).toBeTruthy();
+
+	fireEvent.click(screen.getByRole("button", { name: "Resume" }));
+	expect(screen.getByText("later.example")).toBeTruthy();
+});
+
+test("repeated connection failures show the viewer-cap state with a retry button", () => {
+	const sources = renderPage();
+	act(() => {
+		sources[0]!.emit("error");
+		sources[0]!.emit("error");
+		sources[0]!.emit("error");
+	});
+	expect(screen.getByRole("alert").textContent).toContain("too many live viewers");
+
+	fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+	expect(sources).toHaveLength(2);
+	expect(screen.getByText("Connecting…")).toBeTruthy();
+});