nxdns/admin/src/features/overview/overviewWindow.test.tsx

/**
 * The hook over the single `/api/overview` request.
 *
 * The five-endpoint build reconciled five window identities here — the retry per
 * mismatch episode, the terminal "different window" error, the orphaned stale
 * completion. One request cannot disagree with itself, so those behaviours have
 * no subject left and are gone rather than ported. What survived the collapse is
 * pinned below: the three states, and the one rule a single request still does
 * not settle — that the body of the scope the reader just left, period or
 * device, must never render under the new scope's label.
 */

import { render, screen, waitFor } from "@testing-library/react";
import { QueryClientProvider } from "@tanstack/react-query";
import { createQueryClient } from "@/lib/queryClient";
import type { Period } from "@/lib/types";
import { useOverviewWindow } from "./overviewWindow";

const SINCE = Date.UTC(2026, 0, 1, 0, 0) / 1000;
const UNTIL = Date.UTC(2026, 0, 2, 0, 0) / 1000;

let failing: boolean;
let calls: number;

function body(period: Period): unknown {
	return {
		period,
		since: SINCE,
		until: UNTIL,
		bucket_seconds: 1800,
		totals: { queries: 10, blocked: 2, clients: 1, avg_response_time_us: 1000 },
		buckets: [],
		clients: [],
		other: [],
		types: [],
		routes: [],
		coverage: { complete: true, available_since: SINCE },
	};
}

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

beforeEach(() => {
	failing = false;
	calls = 0;
	vi.stubGlobal(
		"fetch",
		vi.fn(async (input: RequestInfo | URL) => {
			const url = String(input);
			if (!url.startsWith("/api/overview")) return json({ error: "not stubbed" }, 404);
			calls += 1;
			if (failing) return json({ error: "endpoint unavailable" }, 400);
			const period = (new URLSearchParams(url.split("?")[1]).get("period") ?? "24h") as Period;
			return json(body(period));
		}),
	);
});

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

/** The last retry the hook handed out, so a test can spend it. */
let lastRetry: () => void;

function Probe({ period, client }: { period: Period; client?: string }) {
	const panel = useOverviewWindow(period, client);
	if (panel.status === "error") lastRetry = panel.retry;
	const detail =
		panel.status === "ready"
			? `${panel.data.period}@${panel.data.until}`
			: panel.status === "error"
				? (panel.error as Error).message
				: "";
	return <p>{`${panel.status}:${detail}`}</p>;
}

function renderProbe(period: Period = "24h", scope?: string) {
	const client = createQueryClient();
	const view = render(
		<QueryClientProvider client={client}>
			<Probe period={period} client={scope} />
		</QueryClientProvider>,
	);
	return {
		rerenderWith: (next: Period, nextScope?: string) =>
			view.rerender(
				<QueryClientProvider client={client}>
					<Probe period={next} client={nextScope} />
				</QueryClientProvider>,
			),
	};
}

function line(): string {
	return screen.getByRole("paragraph").textContent ?? "";
}

test("the page is loading until the body for the selected period arrives", async () => {
	renderProbe();
	expect(line()).toBe("loading:");
	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));
});

test("a failed request is one error for the whole page, with a retry that refetches", async () => {
	failing = true;
	renderProbe();

	await waitFor(() => expect(line()).toBe("error:endpoint unavailable"));
	const spent = calls;

	failing = false;
	lastRetry();
	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));
	expect(calls).toBeGreaterThan(spent);
});

test("a previous period's body never renders under the new period's label", async () => {
	const { rerenderWith } = renderProbe("24h");
	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));

	rerenderWith("1h");
	// The 24h body is a complete answer and still the wrong one to draw under
	// "1h", so the page waits for its own.
	expect(line()).toBe("loading:");
	await waitFor(() => expect(line()).toBe(`ready:1h@${UNTIL}`));
});

test("rescoping to a device under the same period waits for that device's body", async () => {
	const { rerenderWith } = renderProbe("24h");
	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));

	rerenderWith("24h", "192.0.2.30");
	// Same period, so the household body would pass a period check; it is
	// still the wrong scope to draw under the device's name.
	expect(line()).toBe("loading:");
	await waitFor(() => expect(line()).toBe(`ready:24h@${UNTIL}`));
});