nxdns/admin/src/features/activity/LiveActivity.test.tsx

/**
 * Activity in live mode, through the real router.
 *
 * The EventSource is a global here rather than an injected factory: whether the
 * connection exists at all is the thing under test, and that is decided by
 * which subtree the URL mounts, not by a prop a caller could pass.
 */

import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { RouterContextProvider, RouterProvider, createMemoryHistory } from "@tanstack/react-router";
import { AuthProvider } from "@/auth/store";
import { createQueryClient } from "@/lib/queryClient";
import { createAppRouter } from "@/routes";
import type { Client } from "@/lib/types";
import { provenance, queryRow } from "@/features/provenance/provenanceFixture";
import { health } from "@/lib/healthFixture";
import { FakeEventSource } from "./fakeEventSource";
import LiveActivity from "./LiveActivity";
import type { ActivitySearch } from "./search";

const LIVE_ORIGIN: ActivitySearch = {
	mode: "live",
	since: undefined,
	until: undefined,
	domain: undefined,
	client: undefined,
	blocked: undefined,
};

function client(ip: string, name: string, learnedName: string): Client {
	return {
		id: Number(ip.split(".").pop()),
		ip,
		name,
		learned_name: learnedName,
		group_id: 1,
		group: "default",
		hand_edited: name !== "",
		first_seen: 1_700_000_000,
		last_seen: 1_700_000_100,
	};
}

const CLIENTS: Client[] = [
	client("192.0.2.10", "Kitchen Pi", "pi.lan"),
	client("192.0.2.11", "", "laptop.lan"),
	client("192.0.2.12", "", ""),
];

const VERSION = { version: "0.0.0-test", git_commit: "0000000", zig_version: "0.16.0", uptime_seconds: 1 };

let sources: FakeEventSource[];
let fetchMock: ReturnType<typeof vi.fn>;

function json(payload: unknown): Response {
	return new Response(JSON.stringify(payload), { status: 200, headers: { "content-type": "application/json" } });
}

function stubFetch(handler: (url: string) => Response | Promise<Response> = () => json({})) {
	fetchMock = vi.fn((input: RequestInfo | URL) => {
		const url = String(input);
		if (url === "/api/version") return Promise.resolve(json(VERSION));
		if (url === "/api/clients") return Promise.resolve(json({ clients: CLIENTS }));
		// The shell reads health on every route for the Diagnostics nav badge.
		if (url === "/api/health") return Promise.resolve(json(health()));
		return Promise.resolve(handler(url));
	});
	vi.stubGlobal("fetch", fetchMock);
}

beforeEach(() => {
	sources = [];
	vi.stubGlobal(
		"EventSource",
		class {
			constructor(url: string) {
				const source = new FakeEventSource(url);
				sources.push(source);
				return source as unknown as EventSource;
			}
		},
	);
	stubFetch();
});

afterEach(() => {
	vi.unstubAllGlobals();
});

function frame(ts: number, domain: string, sections: Parameters<typeof provenance>[0] = {}): { data: string } {
	return {
		data: JSON.stringify(
			provenance({
				...sections,
				request: { time: ts, domain, ...sections.request },
				route: { kind: "cache", upstream: "", ...sections.route },
			}),
		),
	};
}

function renderPage(path = "/activity?mode=live") {
	const queryClient = createQueryClient();
	const history = createMemoryHistory({ initialEntries: [path] });
	const router = createAppRouter(history, queryClient);
	render(
		<AuthProvider>
			<QueryClientProvider client={queryClient}>
				<RouterProvider router={router} />
			</QueryClientProvider>
		</AuthProvider>,
	);
	return { history };
}

async function openLive(path?: string) {
	const rendered = renderPage(path);
	await screen.findByRole("button", { name: "Freeze" });
	act(() => sources[0]!.emit("open"));
	return rendered;
}

function queryCalls(): string[] {
	return fetchMock.mock.calls
		.map((call) => String(call[0]))
		.filter((url) => url === "/api/queries" || url.startsWith("/api/queries?"));
}

test("streams rows, flags blocked ones, and freezes the display", async () => {
	await openLive();
	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", {
				request: { qtype: 28 },
				policy: { action: "block", reason: "blocklist_wildcard" },
				route: { kind: "blocked" },
			}),
		);
	});

	expect(screen.getByText("ok.example")).toBeTruthy();
	expect(screen.getByText("AAAA")).toBeTruthy();
	const blockedRow = screen.getByText("ads.example").closest("tr")!;
	expect(within(blockedRow).getAllByText("Blocked")).toHaveLength(2);
	// StyleX compiles to opaque class names, so the check is structural: a blocked
	// row carries every class a plain row does, plus the ones the flag adds.
	const plainRow = screen.getByText("ok.example").closest("tr")!;
	const blockedClasses = new Set(blockedRow.className.split(" "));
	const plainClasses = plainRow.className.split(" ");
	expect(plainClasses.every((name) => blockedClasses.has(name))).toBe(true);
	expect(blockedClasses.size).toBeGreaterThan(plainClasses.length);

	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("resolves each row's client to its display name, keeping the IP as the tooltip", async () => {
	await openLive();
	act(() => {
		sources[0]!.emit("query", frame(1000, "named.example", { request: { client: "192.0.2.10" } }));
		sources[0]!.emit("query", frame(1001, "learned.example", { request: { client: "192.0.2.11" } }));
		sources[0]!.emit("query", frame(1002, "nameless.example", { request: { client: "192.0.2.12" } }));
		sources[0]!.emit("query", frame(1003, "stranger.example", { request: { client: "192.0.2.99" } }));
	});

	const named = await screen.findByText("Kitchen Pi");
	expect(named.getAttribute("title")).toBe("192.0.2.10");
	expect(screen.queryByText("pi.lan")).toBeNull();

	const learned = screen.getByText("laptop.lan");
	expect(learned.getAttribute("title")).toBe("192.0.2.11");
	expect(within(learned.closest("tr")!).queryByText("learned")).toBeNull();

	expect(screen.getByText("192.0.2.12").getAttribute("title")).toBeNull();
	expect(screen.getByText("192.0.2.99").getAttribute("title")).toBeNull();
});

test("rows stream in as bare IPs while the client list is still loading", async () => {
	let releaseClients: () => void = () => {};
	fetchMock = vi.fn((input: RequestInfo | URL) => {
		const url = String(input);
		if (url === "/api/version") return Promise.resolve(json(VERSION));
		// The shell reads health on every route for the Diagnostics nav badge.
		if (url === "/api/health") return Promise.resolve(json(health()));
		return new Promise<Response>((resolve) => {
			if (url !== "/api/clients") {
				resolve(json({}));
				return;
			}
			releaseClients = () => resolve(json({ clients: CLIENTS }));
		});
	});
	vi.stubGlobal("fetch", fetchMock);

	await openLive();
	act(() => sources[0]!.emit("query", frame(1000, "named.example", { request: { client: "192.0.2.10" } })));

	expect(screen.getByText("192.0.2.10")).toBeTruthy();
	expect(screen.queryByText("Kitchen Pi")).toBeNull();

	releaseClients();
	expect(await screen.findByText("Kitchen Pi")).toBeTruthy();
});

test("repeated connection failures show the viewer-cap state with a retry button", async () => {
	renderPage();
	await screen.findByRole("button", { name: "Freeze" });
	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();
});

test("a recovered row links to its stored detail; a streamed one opens in place instead", async () => {
	stubFetch((url) => {
		if (url.startsWith("/api/queries?")) {
			return json({
				queries: [queryRow(88, { ts: 1001, domain: "recovered.example" })],
				next_before: null,
				coverage: { complete: true, available_since: 0 },
			});
		}
		return json({});
	});

	await openLive();
	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));
	act(() => sources[0]!.emit("error"));
	act(() => sources[0]!.emit("open"));

	const recovered = await screen.findByRole("link", { name: "recovered.example" });
	expect(recovered.getAttribute("href")).toContain("/activity/queries/88");
	// The streamed frame precedes its own insert, so it has no row to link to —
	// but it does carry its own provenance, so it still has a detail.
	expect(screen.queryByRole("link", { name: "streamed.example" })).toBeNull();
	expect(screen.getByRole("button", { name: "streamed.example" })).toBeTruthy();
});

test("a streamed row opens its own provenance, from the keyboard as well as the pointer", async () => {
	await openLive();
	act(() =>
		sources[0]!.emit(
			"query",
			frame(1000, "streamed.example", {
				policy: { action: "block", reason: "blocklist_domain", matched: "streamed.example" },
				route: { kind: "blocked", upstream: "" },
			}),
		),
	);

	const trigger = screen.getByRole("button", { name: "streamed.example" });
	// A real <button> is in the tab order and activates on Enter and Space; the
	// only way to lose that is to opt out of it, which nothing here may do.
	expect(trigger.tagName).toBe("BUTTON");
	expect(trigger.getAttribute("tabindex")).toBeNull();
	act(() => trigger.focus());
	expect(document.activeElement).toBe(trigger);

	fireEvent.click(trigger);
	const heading = screen.getByRole("heading", { level: 1, name: "streamed.example" });
	expect(heading).toBeTruthy();
	const panel = heading.closest("div")!.parentElement!;
	expect(within(panel).getByText("Blocked locally")).toBeTruthy();
	expect(panel.textContent).toContain("the query log may not have written it yet");

	fireEvent.click(screen.getByRole("button", { name: "Close" }));
	expect(screen.queryByRole("heading", { level: 1, name: "streamed.example" })).toBeNull();
});

test("the detail takes focus when a row opens it and hands it back when it closes", async () => {
	await openLive();
	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));

	const trigger = screen.getByRole("button", { name: "streamed.example" });
	expect(trigger.getAttribute("aria-expanded")).toBe("false");
	expect(trigger.getAttribute("aria-controls")).toBeNull();

	// A native button activates on Enter and Space; jsdom does not synthesize
	// the click those keys fire, so the click is the activation.
	act(() => trigger.focus());
	fireEvent.click(trigger);

	const panel = screen.getByRole("group", { name: "Streamed query" });
	expect(trigger.getAttribute("aria-expanded")).toBe("true");
	expect(trigger.getAttribute("aria-controls")).toBe(panel.id);
	// The panel is inserted above the table, behind the trigger in tab order, so
	// the only thing that keeps a forward tab inside it is focus moving in.
	expect(panel.compareDocumentPosition(trigger) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
	expect(document.activeElement).toBe(panel);
	expect(panel.contains(screen.getByRole("button", { name: "Close" }))).toBe(true);

	fireEvent.click(screen.getByRole("button", { name: "Close" }));
	expect(screen.queryByRole("group", { name: "Streamed query" })).toBeNull();
	expect(document.activeElement).toBe(trigger);
	expect(trigger.getAttribute("aria-expanded")).toBe("false");
	expect(trigger.getAttribute("aria-controls")).toBeNull();
});

test("opening a second row moves the expanded state and the focus with it", async () => {
	await openLive();
	act(() => {
		sources[0]!.emit("query", frame(1000, "first.example"));
		sources[0]!.emit("query", frame(1001, "second.example"));
	});

	const first = screen.getByRole("button", { name: "first.example" });
	const second = screen.getByRole("button", { name: "second.example" });
	fireEvent.click(first);
	fireEvent.click(second);

	const panel = screen.getByRole("group", { name: "Streamed query" });
	expect(within(panel).getByRole("heading", { level: 1, name: "second.example" })).toBeTruthy();
	expect(document.activeElement).toBe(panel);
	expect(first.getAttribute("aria-expanded")).toBe("false");
	expect(second.getAttribute("aria-expanded")).toBe("true");

	fireEvent.click(screen.getByRole("button", { name: "Close" }));
	expect(document.activeElement).toBe(second);
});

/**
 * The one render that bypasses the route, because the ring capacity is a
 * parameter of the component and the route deliberately never passes it:
 * evicting a row at the real 500 means pushing 500 frames through React state,
 * which proves nothing the fifth frame does not. The real route tree still
 * backs the links inside the detail.
 */
function renderLiveWithCapacity(capacity: number) {
	const queryClient = createQueryClient();
	const router = createAppRouter(createMemoryHistory({ initialEntries: ["/activity?mode=live"] }), queryClient);
	render(
		<AuthProvider>
			<QueryClientProvider client={queryClient}>
				<RouterContextProvider router={router}>
					<LiveActivity origin={LIVE_ORIGIN} capacity={capacity} />
				</RouterContextProvider>
			</QueryClientProvider>
		</AuthProvider>,
	);
}

test("an open streamed detail survives the row being evicted from the ring buffer", () => {
	renderLiveWithCapacity(5);
	act(() => sources[0]!.emit("open"));
	act(() => sources[0]!.emit("query", frame(1000, "evicted.example")));
	fireEvent.click(screen.getByRole("button", { name: "evicted.example" }));
	expect(screen.getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();

	// One ringful more: the ring keeps the newest 5, so the selected row is gone
	// from the table. The detail is a snapshot, not a lookup into the ring.
	act(() => {
		for (let index = 0; index < 5; index += 1) {
			sources[0]!.emit("query", frame(2000 + index, `filler${index}.example`));
		}
	});
	expect(screen.getAllByRole("row")).toHaveLength(6);
	expect(screen.queryByRole("button", { name: "evicted.example" })).toBeNull();
	expect(screen.getByRole("heading", { level: 1, name: "evicted.example" })).toBeTruthy();
});

test("the route renders the live ring at its production capacity", async () => {
	await openLive();
	act(() => sources[0]!.emit("query", frame(1000, "pinned.example")));

	expect(screen.getByText(/last 500 kept/)).toBeTruthy();
	fireEvent.click(screen.getByRole("button", { name: "Freeze" }));
	expect(screen.getByText(/newest 500 kept/)).toBeTruthy();
});

test("an open streamed detail survives Freeze and Resume", async () => {
	await openLive();
	act(() => sources[0]!.emit("query", frame(1000, "held.example")));
	fireEvent.click(screen.getByRole("button", { name: "held.example" }));

	fireEvent.click(screen.getByRole("button", { name: "Freeze" }));
	expect(screen.getByRole("heading", { level: 1, name: "held.example" })).toBeTruthy();
	fireEvent.click(screen.getByRole("button", { name: "Resume" }));
	expect(screen.getByRole("heading", { level: 1, name: "held.example" })).toBeTruthy();
});

test("the filter row stays visible, keeps its values, and is out of the tab order", async () => {
	await openLive("/activity?mode=live&domain=ads&client=192.0.2.10&blocked=true");

	const domain = screen.getByLabelText("Domain contains") as HTMLInputElement;
	expect(domain.value).toBe("ads");
	expect(domain.disabled).toBe(true);
	expect((screen.getByLabelText("Client (exact)") as HTMLInputElement).disabled).toBe(true);
	expect((screen.getByLabelText("Since") as HTMLInputElement).disabled).toBe(true);
	expect((screen.getByLabelText("Until") as HTMLInputElement).disabled).toBe(true);

	const form = domain.closest("form")!;
	const controls = [...form.querySelectorAll("input, button, select, textarea, a[href], [tabindex]")];
	expect(controls.length).toBeGreaterThan(0);
	for (const control of controls) {
		// A disabled form control is skipped by the browser's tab order, and RAC
		// pins its own trigger out of it as well. Nothing in the row may
		// reintroduce itself with a reachable tabindex.
		expect(control.hasAttribute("disabled")).toBe(true);
		const tabindex = control.getAttribute("tabindex");
		expect(tabindex === null || tabindex === "-1").toBe(true);
	}
});

test("live mode asks for no query pages, whatever filters the url retained", async () => {
	await openLive("/activity?mode=live&domain=ads&client=192.0.2.10&blocked=true&since=1700000000&bogus=1");
	act(() => sources[0]!.emit("query", frame(1000, "streamed.example")));

	expect(queryCalls()).toEqual([]);
});

test("leaving live closes the stream, and coming back opens exactly one fresh one", async () => {
	await openLive("/activity?mode=live&domain=ads");

	fireEvent.click(screen.getByRole("button", { name: "History" }));
	await screen.findByRole("button", { name: "Apply filters" });
	expect(sources).toHaveLength(1);
	expect(sources[0]!.closed).toBe(true);
	// The filters came along, which is the point of switching rather than
	// navigating: the reader keeps the question they were asking.
	expect((screen.getByLabelText("Domain contains") as HTMLInputElement).value).toBe("ads");
	expect((screen.getByLabelText("Domain contains") as HTMLInputElement).disabled).toBe(false);

	fireEvent.click(screen.getByRole("button", { name: "Live" }));
	await screen.findByRole("button", { name: "Freeze" });
	expect(sources).toHaveLength(2);
	expect(sources[1]!.closed).toBe(false);
});

/**
 * The related-actions region of a query detail. Scoped on purpose: the sidebar
 * carries a Pause of its own, and this is the one that answers "this query was
 * blocked and should not have been".
 */
function related(): HTMLElement {
	return screen.getByRole("region", { name: "Related" });
}

test("a streamed blocked row carries the same Pause action as the persisted detail", async () => {
	await openLive();
	act(() =>
		sources[0]!.emit(
			"query",
			frame(1000, "streamed.example", {
				policy: { action: "block", reason: "blocklist_domain", matched: "streamed.example" },
				route: { kind: "blocked", upstream: "" },
			}),
		),
	);
	fireEvent.click(screen.getByRole("button", { name: "streamed.example" }));

	await waitFor(() => expect(within(related()).getByRole("button", { name: "Pause" })).toBeTruthy());
});

test("a streamed row that was allowed offers nothing to pause", async () => {
	await openLive();
	act(() => sources[0]!.emit("query", frame(1001, "allowed.example", { policy: { action: "allow" } })));
	fireEvent.click(screen.getByRole("button", { name: "allowed.example" }));

	await screen.findByRole("heading", { level: 1, name: "allowed.example" });
	expect(within(related()).queryByRole("button", { name: "Pause" })).toBeNull();
});