Deploy main 5e572ce to prod (#198)

main's tree, with next merged on 26 October, as one commit onto prod, on sneak's order.

Model: opus-5-5
Co-authored-by: clawbot <clawbot@noreply.example.org>

test/unit/main.test.js

@@ -0,0 +1,937 @@
+// Unit tests for web/src/main.js, run with Node's built-in test runner by the
+// test script in package.json. Importing the module does not start the
+// page.
+
+import { beforeEach, test } from "node:test";
+import assert from "node:assert/strict";
+import {
+    AppState,
+    buildUI,
+    CONFIG,
+    greyOutUI,
+    hostRowHTML,
+    HostState,
+    humanDuration,
+    latencyClass,
+    latencyHex,
+    log,
+    measureLatency,
+    Reporter,
+    tick,
+    updateClocks,
+    updateSummary,
+} from "../../web/src/main.js";
+
+// There is no page here, so the tests stand in for it. The debug log looks
+// for its panel by id and finds none, an element the page creates is a
+// plain object, and no frame the page asks for ever comes. Each element of
+// a host's row that tick or greyOutUI draws into is a plain object, made
+// the first time a test looks it up and kept in elements under its
+// selector until the next test starts. As on a page, writing its text
+// replaces its markup; the status dot greyOutUI looks for in it is not
+// there. Drawing a sparkline does nothing; it looks for the pixel ratio on
+// window and finds none. The commit the page's footer names, which
+// vite.config.js fills in when it builds the page, is blank. In each test,
+// console.error and console.info print nothing and keep what they are
+// given.
+const doNothing = () => {};
+let elements;
+beforeEach((t) => {
+    elements = {};
+    t.mock.method(console, "error", doNothing);
+    t.mock.method(console, "info", doNothing);
+});
+const canvasContext = {
+    clearRect: doNothing,
+    beginPath: doNothing,
+    moveTo: doNothing,
+    lineTo: doNothing,
+    stroke: doNothing,
+    fill: doNothing,
+    fillRect: doNothing,
+    fillText: doNothing,
+    arc: doNothing,
+};
+globalThis.window = {};
+globalThis.requestAnimationFrame = doNothing;
+globalThis.cancelAnimationFrame = doNothing;
+globalThis.__COMMIT_HASH__ = "";
+globalThis.__COMMIT_FULL__ = "";
+globalThis.document = {
+    getElementById: () => null,
+    createElement: () => ({}),
+    querySelector: (selector) =>
+        (elements[selector] ??= {
+            getContext: () => canvasContext,
+            querySelector: () => null,
+            set textContent(text) {
+                this.innerHTML = text;
+            },
+        }),
+};
+
+// What tick last wrote into the latency figure in host's row, or undefined
+// if it has written nothing there.
+function latencyFigure(state, host) {
+    const index = state.allHosts.indexOf(host);
+    return elements[`.latency-value[data-host="${index}"]`]?.innerHTML;
+}
+
+// What was last written into the status text in host's row.
+function statusText(state, host) {
+    const index = state.allHosts.indexOf(host);
+    return elements[`.status-text[data-host="${index}"]`]?.innerHTML;
+}
+
+// What this test wrote to the browser console with console[method].
+function consoleLines(method) {
+    return console[method].mock.calls.map((call) => call.arguments[0]);
+}
+
+// Mocks the clock for test t, so that a check lasting seconds takes no real
+// time, and replaces fetch with targets that each answer after
+// answerAfter(url) milliseconds of that clock, or never when that is
+// Infinity. The target at unreachableUrl, if one is given, does not
+// answer: after that time its fetch fails with the error a browser gives
+// the page for a network error. Both are restored when the test ends.
+function mockTargets(t, answerAfter, unreachableUrl) {
+    t.mock.timers.enable({ apis: ["setTimeout", "Date"] });
+    t.mock.method(performance, "now", () => Date.now());
+    t.mock.method(
+        globalThis,
+        "fetch",
+        (url, { signal }) =>
+            new Promise((resolve, reject) => {
+                const answer =
+                    url === unreachableUrl
+                        ? () => reject(new TypeError("Failed to fetch"))
+                        : resolve;
+                if (answerAfter(url) !== Infinity) {
+                    setTimeout(answer, answerAfter(url));
+                }
+                signal.addEventListener("abort", () => reject(signal.reason));
+            }),
+    );
+}
+
+// The result of check if it has ended, otherwise "still waiting".
+function settled(check) {
+    return Promise.race([
+        check,
+        new Promise((resolve) => setImmediate(resolve, "still waiting")),
+    ]);
+}
+
+for (const interval of [10000, 30000]) {
+    const timeout = interval * 0.8;
+    // Over 3 seconds, which the timeout used to be capped at.
+    const slowAnswer = timeout - 1000;
+
+    test(`at a ${interval}ms interval, an answer after ${slowAnswer}ms is recorded with its real time`, async (t) => {
+        CONFIG.updateInterval = interval;
+        mockTargets(t, () => slowAnswer);
+        const check = measureLatency("https://target.test");
+        t.mock.timers.tick(slowAnswer);
+        assert.deepEqual(await settled(check), {
+            latency: slowAnswer,
+            error: null,
+            reason: null,
+        });
+    });
+
+    test(`at a ${interval}ms interval, a target that never answers is recorded as a timeout after ${timeout}ms`, async (t) => {
+        CONFIG.updateInterval = interval;
+        mockTargets(t, () => Infinity);
+        const check = measureLatency("https://target.test");
+        t.mock.timers.tick(timeout - 1);
+        assert.equal(await settled(check), "still waiting");
+        t.mock.timers.tick(1);
+        assert.deepEqual(await settled(check), {
+            latency: null,
+            error: "timeout",
+            reason: `timed out after ${timeout} ms (limit ${timeout} ms)`,
+        });
+    });
+}
+
+// A browser can run a timer late, on a busy page or in a background tab.
+// Moving the mocked clock on 30000ms at once runs the 24000ms timeout with
+// the clock already at 30000ms.
+test("at a 30000ms interval, a check whose timeout runs late gives how long the request took and the time limit", async (t) => {
+    CONFIG.updateInterval = 30000;
+    mockTargets(t, () => Infinity);
+    const check = measureLatency("https://target.test");
+    t.mock.timers.tick(30000);
+    assert.deepEqual(await settled(check), {
+        latency: null,
+        error: "timeout",
+        reason: "timed out after 30000 ms (limit 24000 ms)",
+    });
+});
+
+test("a check fetches the target's URL as written, with no query string added", async (t) => {
+    mockTargets(t, () => 10);
+    const check = measureLatency("https://fsn1-speed.hetzner.com");
+    t.mock.timers.tick(10);
+    assert.notEqual(await settled(check), "still waiting");
+    assert.equal(
+        fetch.mock.calls[0].arguments[0],
+        "https://fsn1-speed.hetzner.com",
+    );
+});
+
+test("a check sends no Referer header, wherever the page is served from", async (t) => {
+    mockTargets(t, () => 10);
+    const check = measureLatency("https://fsn1-speed.hetzner.com");
+    t.mock.timers.tick(10);
+    assert.notEqual(await settled(check), "still waiting");
+    assert.equal(
+        fetch.mock.calls[0].arguments[1].referrerPolicy,
+        "no-referrer",
+    );
+});
+
+// These targets' home pages answer with a redirect. A check follows it and
+// times the request to the new URL too, often on another host. The Google
+// Cloud Console redirects only requests that do not say they come from
+// another site, such as curl's. Each target is checked at /robots.txt on
+// its own host, which answers without a redirect. An S3 region answers it
+// with 403, and any answer counts as reachable.
+test("a target whose home page redirects is checked at /robots.txt on its own host", () => {
+    const checked = new Map(
+        new AppState([]).wan.map((host) => [host.name, host.url]),
+    );
+    for (const [name, url] of [
+        ["AWS Console", "https://console.aws.amazon.com/robots.txt"],
+        ["Google Cloud Console", "https://console.cloud.google.com/robots.txt"],
+        ["Akamai", "https://www.akamai.com/robots.txt"],
+        ["B2", "https://api.backblazeb2.com/robots.txt"],
+        [
+            "S3 af-south-1 (Cape Town)",
+            "https://s3.af-south-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 eu-west-2 (London)",
+            "https://s3.eu-west-2.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 me-south-1 (Bahrain)",
+            "https://s3.me-south-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 ap-northeast-1 (Tokyo)",
+            "https://s3.ap-northeast-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 ap-southeast-1 (Singapore)",
+            "https://s3.ap-southeast-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 ap-southeast-2 (Sydney)",
+            "https://s3.ap-southeast-2.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 us-west-2 (Oregon)",
+            "https://s3.us-west-2.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 sa-east-1 (São Paulo)",
+            "https://s3.sa-east-1.amazonaws.com/robots.txt",
+        ],
+    ]) {
+        assert.equal(checked.get(name), url);
+    }
+});
+
+// Chrome keeps the connection to an S3 region open after a HEAD check, but
+// closes it after most GET checks. The Hetzner servers do not answer HEAD.
+test("a round checks each S3 region with a HEAD request and every other target with a GET request", async (t) => {
+    const state = new AppState([
+        { name: "Local CPE", url: "http://192.168.100.1" },
+    ]);
+    mockTargets(t, () => 10);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(10);
+    assert.notEqual(await settled(round), "still waiting");
+    const methods = new Map(
+        fetch.mock.calls.map((call) => [
+            call.arguments[0],
+            call.arguments[1].method,
+        ]),
+    );
+    for (const host of state.allHosts) {
+        const method = host.name.startsWith("S3 ") ? "HEAD" : "GET";
+        assert.equal(methods.get(host.url), method, host.name);
+    }
+});
+
+test("at a 30000ms interval, a target answering after 1000ms shows in its row while another target's check is still waiting", async (t) => {
+    CONFIG.updateInterval = 30000;
+    const state = new AppState([
+        { name: "Answering", url: "https://answering.test" },
+    ]);
+    const answering = state.local[0];
+    const waiting = state.wan[0];
+    // No target but the answering one ever answers.
+    mockTargets(t, (url) => (url === answering.url ? 1000 : Infinity));
+    // The third tick: the first is discarded as a whole, and the second ends
+    // by sorting the rows, which rebuilds a page that is not here.
+    state.tickCount = 2;
+
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(1000);
+    assert.equal(await settled(round), "still waiting");
+    assert.match(latencyFigure(state, answering), />1000</);
+    assert.equal(latencyFigure(state, waiting), undefined);
+    assert.equal(state.tickCount, 2);
+
+    // The round ends, once, when the last check times out.
+    t.mock.timers.tick(CONFIG.requestTimeout - 1000);
+    assert.notEqual(await settled(round), "still waiting");
+    assert.equal(state.tickCount, 3);
+});
+
+// In the next three tests, the answering target's check is still waiting
+// when something happens after which its result must not be recorded or
+// show in its row, and the check must write nothing to the console.
+
+test("at a 30000ms interval, a check still waiting when its round is given up is not recorded and does not show in its row", async (t) => {
+    CONFIG.updateInterval = 30000;
+    const state = new AppState([
+        { name: "Answering", url: "https://answering.test" },
+    ]);
+    const answering = state.local[0];
+    mockTargets(t, (url) => (url === answering.url ? 1000 : Infinity));
+    state.tickCount = 2;
+
+    const roundChecks = new AbortController();
+    const round = tick(state, roundChecks.signal);
+    t.mock.timers.tick(500);
+    // As a round started early does to the last round's checks.
+    roundChecks.abort();
+    assert.notEqual(await settled(round), "still waiting");
+    assert.equal(latencyFigure(state, answering), undefined);
+    assert.deepEqual(answering.history, []);
+    assert.equal(answering.status, "pending");
+    assert.deepEqual(consoleLines("error"), []);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+test("at a 30000ms interval, a check still waiting when the user pauses is not recorded and does not show in its row", async (t) => {
+    CONFIG.updateInterval = 30000;
+    const state = new AppState([
+        { name: "Answering", url: "https://answering.test" },
+    ]);
+    const answering = state.local[0];
+    mockTargets(t, (url) => (url === answering.url ? 1000 : Infinity));
+    state.tickCount = 2;
+
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(500);
+    state.paused = true;
+    t.mock.timers.tick(500);
+    assert.equal(await settled(round), "still waiting");
+    assert.equal(latencyFigure(state, answering), undefined);
+    assert.deepEqual(answering.history, []);
+    assert.equal(answering.status, "pending");
+    assert.deepEqual(consoleLines("error"), []);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+test("at a 30000ms interval, a check in the first round is not recorded and does not show in its row", async (t) => {
+    CONFIG.updateInterval = 30000;
+    const state = new AppState([
+        { name: "Answering", url: "https://answering.test" },
+    ]);
+    const answering = state.local[0];
+    mockTargets(t, (url) => (url === answering.url ? 1000 : Infinity));
+
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(1000);
+    assert.equal(await settled(round), "still waiting");
+    assert.equal(latencyFigure(state, answering), undefined);
+    assert.deepEqual(answering.history, []);
+    assert.equal(answering.status, "pending");
+    assert.deepEqual(consoleLines("error"), []);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+test("at a 30000ms interval, after the user pauses and resumes during a round, no row reads paused once its last check ends", async (t) => {
+    CONFIG.updateInterval = 30000;
+    const state = new AppState([
+        { name: "Answering", url: "https://answering.test" },
+    ]);
+    const answering = state.local[0];
+    mockTargets(t, (url) => (url === answering.url ? 1000 : Infinity));
+    state.tickCount = 2;
+
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(1000);
+    assert.equal(await settled(round), "still waiting");
+    // The user pauses, which greys out every row, and resumes, which leaves
+    // the rows as they are, as togglePause does. The answering target's
+    // check has already ended, so only the redraw of every row at the end
+    // of the round can take "paused" out of its row.
+    state.paused = true;
+    greyOutUI(state);
+    state.paused = false;
+    assert.equal(statusText(state, answering), "paused");
+
+    // The round ends when the last check times out.
+    t.mock.timers.tick(CONFIG.requestTimeout - 1000);
+    assert.notEqual(await settled(round), "still waiting");
+    for (const host of state.allHosts) {
+        assert.notEqual(statusText(state, host), "paused", host.name);
+    }
+});
+
+// In the next tests a round checks one target, Target, at a 30000ms
+// interval, so a check times out after 24000ms. The mocked clock starts at
+// 1970-01-01T00:00:00.000Z.
+
+// An app state with Target and no WAN targets, so its rounds check only
+// Target, and whose next round is recorded: it is the third, as the first
+// is discarded and the second ends by sorting the rows, which rebuilds a
+// page that is not here. Returns it and Target.
+function stateWithOneTarget() {
+    CONFIG.updateInterval = 30000;
+    const state = new AppState([
+        { name: "Target", url: "https://target.test" },
+    ]);
+    state.wan = [];
+    state.tickCount = 2;
+    return { state, target: state.local[0] };
+}
+
+test("a check that fails with a network error writes one console line with the target, the time, the error and how long the request took", async (t) => {
+    const { state, target } = stateWithOneTarget();
+    mockTargets(t, () => 23, target.url);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(23);
+    assert.notEqual(await settled(round), "still waiting");
+    assert.deepEqual(consoleLines("error"), [
+        "netwatch: check failed: Target https://target.test at 1970-01-01T00:00:00.023Z: network error (TypeError: Failed to fetch) after 23 ms",
+    ]);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+test("a check that times out writes one console line with the target, the time, how long the request took and the time limit", async (t) => {
+    const { state } = stateWithOneTarget();
+    mockTargets(t, () => Infinity);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(24000);
+    assert.notEqual(await settled(round), "still waiting");
+    assert.deepEqual(consoleLines("error"), [
+        "netwatch: check failed: Target https://target.test at 1970-01-01T00:00:24.000Z: timed out after 24000 ms (limit 24000 ms)",
+    ]);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+// An answer that took longer than CONFIG.maxLatency is recorded as a
+// timeout. The limit is the check's own timeout, so such an answer is one
+// that came in just as the check timed out; here it is lowered to 500ms.
+test("a check answered over the time limit writes one console line with the target, the time, how long the answer took and the limit", async (t) => {
+    const { state } = stateWithOneTarget();
+    t.mock.getter(CONFIG, "maxLatency", () => 500);
+    mockTargets(t, () => 1000);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(1000);
+    assert.notEqual(await settled(round), "still waiting");
+    assert.deepEqual(consoleLines("error"), [
+        "netwatch: check failed: Target https://target.test at 1970-01-01T00:00:01.000Z: answered after 1000 ms, over the 500 ms limit",
+    ]);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+test("a check that answers writes nothing to the console", async (t) => {
+    const { state } = stateWithOneTarget();
+    mockTargets(t, () => 30);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(30);
+    assert.notEqual(await settled(round), "still waiting");
+    assert.deepEqual(consoleLines("error"), []);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+for (const [failed, checks] of [
+    [1, "1 failed check"],
+    [3, "3 failed checks"],
+]) {
+    test(`a check that answers after ${checks} writes one console line saying the target recovered, and the next writes nothing`, async (t) => {
+        const { state, target } = stateWithOneTarget();
+        for (let i = 0; i < failed; i++) {
+            target.pushSample(Date.now(), {
+                latency: null,
+                error: "unreachable",
+            });
+        }
+        mockTargets(t, () => 40);
+        for (let i = 0; i < 2; i++) {
+            const round = tick(state, new AbortController().signal);
+            t.mock.timers.tick(40);
+            assert.notEqual(await settled(round), "still waiting");
+        }
+        assert.deepEqual(consoleLines("info"), [
+            `netwatch: target recovered: Target https://target.test at 1970-01-01T00:00:00.040Z: answered after 40 ms, following ${checks} in a row`,
+        ]);
+        assert.deepEqual(consoleLines("error"), []);
+    });
+}
+
+test("a check that fails in the first round, which is discarded, writes nothing to the console", async (t) => {
+    const { state, target } = stateWithOneTarget();
+    state.tickCount = 0;
+    mockTargets(t, () => 23, target.url);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(23);
+    assert.notEqual(await settled(round), "still waiting");
+    assert.deepEqual(consoleLines("error"), []);
+    assert.deepEqual(consoleLines("info"), []);
+});
+
+// The reports Reporter sent in this test, each as the hosts it sent.
+function reportedHosts() {
+    return fetch.mock.calls.map(
+        (call) => JSON.parse(call.arguments[1].body).hosts,
+    );
+}
+
+// In the next two tests every report is delivered, and only Target has
+// checks to report. target.reset() does to Target what the interval menu
+// does to each target.
+
+// The interval changes after the first report. The second report is sent
+// before Target's first check since then, and the third after it. A fourth
+// would hold no check the first three did not, so it is not sent.
+test("checks recorded before an interval change and not yet reported go in the next report, with the status of the last check, and no check is reported twice", async (t) => {
+    const state = new AppState([
+        { name: "Target", url: "https://target.test" },
+    ]);
+    const target = state.local[0];
+    const reporter = new Reporter(state, "client", CONFIG.reportInterval);
+    t.mock.method(globalThis, "fetch", async () => ({ ok: true }));
+
+    target.pushSample(1000, { latency: 10, error: null });
+    await reporter.flush();
+    target.pushSample(2000, { latency: 20, error: null });
+    target.pushSample(3000, { latency: null, error: "timeout" });
+    target.reset();
+    await reporter.flush();
+    target.pushSample(4000, { latency: 40, error: null });
+    await reporter.flush();
+    await reporter.flush();
+
+    const name = "Target";
+    const url = "https://target.test";
+    assert.deepEqual(reportedHosts(), [
+        [
+            {
+                name,
+                url,
+                status: "online",
+                history: [{ t: 1000, latency: 10, error: null }],
+            },
+        ],
+        [
+            {
+                name,
+                url,
+                status: "error",
+                history: [
+                    { t: 2000, latency: 20, error: null },
+                    { t: 3000, latency: null, error: "timeout" },
+                ],
+            },
+        ],
+        [
+            {
+                name,
+                url,
+                status: "online",
+                history: [{ t: 4000, latency: 40, error: null }],
+            },
+        ],
+    ]);
+    // The page's history starts over.
+    assert.deepEqual(target.history, [
+        { timestamp: 4000, latency: 40, error: null },
+    ]);
+});
+
+// The interval changes twice, after 60 checks each time, before the first
+// report. Of the 120 checks the interval menu cleared, the report has the
+// last 100 (CONFIG.maxHistoryPoints).
+test("of the checks interval changes cleared before they were reported, the next report has the last 100", async (t) => {
+    const state = new AppState([
+        { name: "Target", url: "https://target.test" },
+    ]);
+    const target = state.local[0];
+    const reporter = new Reporter(state, "client", CONFIG.reportInterval);
+    t.mock.method(globalThis, "fetch", async () => ({ ok: true }));
+
+    for (let n = 1; n <= 120; n++) {
+        target.pushSample(n * 1000, { latency: 10, error: null });
+        if (n % 60 === 0) target.reset();
+    }
+    await reporter.flush();
+
+    const sent = reportedHosts()[0][0].history;
+    assert.equal(sent.length, 100);
+    assert.equal(sent[0].t, 21000);
+    assert.equal(sent.at(-1).t, 120000);
+});
+
+// panel stands in for the open debug log panel, and for the element in it
+// that holds its lines, whichever the page looks up by id; the lines are
+// kept in order in lines. Drawing the whole panel, as opening it does,
+// replaces every line with a new one.
+test("with the debug log open, writing more lines than it keeps adds each to the panel and leaves the lines already shown as they are", (t) => {
+    const lines = [];
+    const panel = {
+        classList: { contains: () => false },
+        children: lines,
+        get firstElementChild() {
+            return lines[0];
+        },
+        append: (line) => lines.push(line),
+        removeChild: (line) => lines.splice(lines.indexOf(line), 1),
+        replaceChildren: (...newLines) =>
+            lines.splice(0, lines.length, ...newLines),
+    };
+    t.mock.method(globalThis.document, "getElementById", () => panel);
+    const kept = CONFIG.maxLogEntries;
+
+    for (let i = 1; i <= kept; i++) log.info(`line ${i}`);
+    const shown = [...lines];
+    for (let i = kept + 1; i <= kept + 5; i++) log.info(`line ${i}`);
+
+    assert.deepEqual(
+        lines.map((line) => line.textContent.match(/line \d+$/)?.[0]),
+        Array.from({ length: kept }, (_, i) => `line ${i + 6}`),
+    );
+    // The first five lines shown were dropped, and the rest are the same
+    // lines, not drawn again.
+    shown.slice(5).forEach((line, i) => assert.equal(lines[i], line));
+});
+
+// The page shows &lt; &gt; &quot; &amp; and &#39; in a row's markup as
+// < > " & and '.
+test(`a target whose name and URL hold < > " & and ' shows those characters in its row`, () => {
+    const host = new HostState({
+        name: `<b>"x" & 'y'</b>`,
+        url: `https://x.test/<b>?a="x"&b='y'`,
+    });
+    const row = hostRowHTML(host, 0);
+    assert.doesNotMatch(row, /<b>/);
+    assert.ok(
+        row.includes(
+            ">&lt;b&gt;&quot;x&quot; &amp; &#39;y&#39;&lt;/b&gt;</span>",
+        ),
+    );
+    assert.ok(
+        row.includes(
+            'href="https://x.test/&lt;b&gt;?a=&quot;x&quot;&amp;b=&#39;y&#39;"',
+        ),
+    );
+    assert.ok(
+        row.includes(
+            ">https://x.test/&lt;b&gt;?a=&quot;x&quot;&amp;b=&#39;y&#39;</a>",
+        ),
+    );
+});
+
+for (const [seconds, text] of [
+    [0, "0s"],
+    [1, "1s"],
+    [59, "59s"],
+    [60, "1m"],
+    [61, "1m1s"],
+    [3599, "59m59s"],
+    [3600, "1h"],
+    [3601, "1h1s"],
+    [3660, "1h1m"],
+    [3661, "1h1m1s"],
+]) {
+    test(`humanDuration writes ${seconds} seconds as ${text}`, () => {
+        assert.equal(humanDuration(seconds), text);
+    });
+}
+
+// The colour of a target's latency figure, as a class, and of its sparkline
+// for an answer after latency ms, as the colour coding in README.md gives
+// them. The rows sit either side of each boundary.
+for (const [latency, figure, sparkline] of [
+    [0, "text-green-500", "#22c55e"],
+    [49, "text-green-500", "#22c55e"],
+    [50, "text-lime-500", "#84cc16"],
+    [99, "text-lime-500", "#84cc16"],
+    [100, "text-yellow-500", "#eab308"],
+    [199, "text-yellow-500", "#eab308"],
+    [200, "text-orange-500", "#f97316"],
+    [499, "text-orange-500", "#f97316"],
+    [500, "text-red-500", "#ef4444"],
+]) {
+    test(`an answer after ${latency}ms has a ${figure} figure and a ${sparkline} sparkline`, () => {
+        assert.equal(latencyClass(latency, "online"), figure);
+        assert.equal(latencyHex(latency), sparkline);
+    });
+}
+
+test("a check that timed out or found its target unreachable has a grey figure and sparkline", () => {
+    assert.equal(latencyClass(null, "error"), "text-gray-500");
+    assert.equal(latencyClass(null, "offline"), "text-gray-500");
+    assert.equal(latencyHex(null), "#6b7280");
+});
+
+// buildUI draws the page into #app, here a plain object. Each entry in the
+// footer's color legend is a colored dot and the latencies it stands for,
+// with < and > written as &lt; and &gt;. A latency takes the color of the
+// first entry in CONFIG.latencyColors whose limit it is below, so the
+// legend has, for each of those entries in order, a dot of its color (a
+// bg- class where CONFIG.latencyColors has a text- one) and the latencies
+// below its limit, or, for the last, which has no limit, the latencies
+// from the limit before it up. A gray dot for offline comes after them.
+test("the footer's color legend has each entry in CONFIG.latencyColors, with its color and limit, then offline", (t) => {
+    const app = {};
+    t.mock.method(globalThis.document, "getElementById", () => app);
+    buildUI(new AppState([]));
+
+    const legend = [
+        ...app.innerHTML.matchAll(/(bg-\w+-500) [^"]*"><\/span>(\S+)/g),
+    ].map(([, dot, latencies]) => [dot, latencies]);
+    const colors = CONFIG.latencyColors;
+    const expected = colors.map((color, i) => [
+        color.className.replace("text-", "bg-"),
+        color.below === Infinity
+            ? `&gt;=${colors[i - 1].below}ms`
+            : `&lt;${color.below}ms`,
+    ]);
+    assert.deepEqual(legend, [...expected, ["bg-gray-500", "offline"]]);
+});
+
+// A target whose checks, in turn, answered after each of latencies ms, or,
+// for null, found it unreachable.
+function hostAfter(latencies) {
+    const host = new HostState({ name: "Target", url: "https://target.test" });
+    for (const latency of latencies) {
+        host.pushSample(
+            Date.now(),
+            latency === null
+                ? { latency: null, error: "unreachable" }
+                : { latency, error: null },
+        );
+    }
+    return host;
+}
+
+for (const { history, latencies, statistics } of [
+    {
+        history: "no checks",
+        latencies: [],
+        statistics: { min: null, max: null, average: null, median: null },
+    },
+    {
+        history: "only unreachable checks",
+        latencies: [null, null, null],
+        statistics: { min: null, max: null, average: null, median: null },
+    },
+    {
+        history: "three answers and an unreachable check",
+        latencies: [30, null, 10, 20],
+        statistics: { min: 10, max: 30, average: 20, median: 20 },
+    },
+    {
+        // The median of an even number of answers is the mean of the
+        // middle two. It and the average, 23.75, are rounded.
+        history: "four answers",
+        latencies: [10, 40, 20, 25],
+        statistics: { min: 10, max: 40, average: 24, median: 23 },
+    },
+    {
+        // Sorted as text rather than as numbers, these answers would put
+        // 100 in the middle. The average, 39.67, is rounded.
+        history: "answers with different numbers of digits",
+        latencies: [100, 9, 10],
+        statistics: { min: 9, max: 100, average: 40, median: 10 },
+    },
+]) {
+    test(`a target's min, max, average and median latency over ${history}`, () => {
+        const { min, max, avg, med } = hostAfter(latencies).historyStats();
+        assert.deepEqual({ min, max, average: avg, median: med }, statistics);
+    });
+}
+
+// The summary's figures come from each WAN target's last check, by the same
+// rules as a target's own: here four answered, one was found unreachable
+// and the rest have not been checked yet. The median, 22.5, and the
+// average, 21.25, are rounded.
+test("the summary's min, max, median and average latency over the WAN targets' last checks", () => {
+    const state = new AppState([]);
+    [30, 10, null, 25, 20].forEach((latency, i) =>
+        state.wan[i].pushSample(
+            Date.now(),
+            latency === null
+                ? { latency: null, error: "unreachable" }
+                : { latency, error: null },
+        ),
+    );
+    assert.deepEqual(state.wanStats(), {
+        reachable: 4,
+        total: state.wan.length,
+        min: 10,
+        max: 30,
+        med: 23,
+        avg: 21,
+    });
+});
+
+// In the next two tests each element of the summary that updateSummary
+// writes into is a plain object, made the first time it is looked up and
+// kept in elements under "#" and its id.
+
+// The interval menu resets each target and counts the rounds from 0 again,
+// then updates the summary, before any check since the change is recorded.
+test("after an interval change, the summary's Reachable slot reads --/-- in white, as at page load", (t) => {
+    t.mock.method(
+        globalThis.document,
+        "getElementById",
+        (id) => (elements[`#${id}`] ??= {}),
+    );
+    const state = new AppState([]);
+    for (const host of state.wan) {
+        host.pushSample(Date.now(), { latency: 30, error: null });
+    }
+    state.tickCount = 5;
+
+    for (const host of state.allHosts) host.reset();
+    state.tickCount = 0;
+    updateSummary(state);
+
+    assert.equal(elements["#summary-reachable"].textContent, "--/--");
+    assert.equal(elements["#summary-reachable"].className, "text-white");
+});
+
+test("once every WAN target's check has failed, the summary's Reachable slot reads 0 of them, in red", (t) => {
+    t.mock.method(
+        globalThis.document,
+        "getElementById",
+        (id) => (elements[`#${id}`] ??= {}),
+    );
+    const state = new AppState([]);
+    for (const host of state.wan) {
+        host.pushSample(Date.now(), { latency: null, error: "timeout" });
+    }
+
+    updateSummary(state);
+
+    assert.equal(
+        elements["#summary-reachable"].textContent,
+        `0/${state.wan.length}`,
+    );
+    assert.equal(elements["#summary-reachable"].className, "text-red-400");
+});
+
+// In the next two tests each of the header's clocks is a plain object, made
+// the first time updateClocks looks it up and kept in elements under "#" and
+// its id.
+
+// The mocked clock reads 1970-01-01T00:00:00.000Z.
+test("the header's clocks show the local time with its time zone's name, and the UTC time", (t) => {
+    t.mock.method(
+        globalThis.document,
+        "getElementById",
+        (id) => (elements[`#${id}`] ??= {}),
+    );
+    t.mock.timers.enable({ apis: ["Date"] });
+
+    updateClocks();
+
+    assert.match(
+        elements["#clock-local"].textContent,
+        /^Local: \d{4}-\d\d-\d\d \d\d:\d\d:\d\d \S/,
+    );
+    assert.equal(
+        elements["#clock-utc"].textContent,
+        "UTC: 1970-01-01 00:00:00 UTC",
+    );
+});
+
+// Here Intl.DateTimeFormat is as in Chrome before 95, Firefox before 91 or
+// Safari before 15.4: it throws a RangeError when asked for the time zone's
+// "shortGeneric" name.
+test("in a browser that cannot name the time zone, updating the clocks throws nothing and leaves them blank", (t) => {
+    t.mock.method(
+        globalThis.document,
+        "getElementById",
+        (id) => (elements[`#${id}`] ??= {}),
+    );
+    const DateTimeFormat = Intl.DateTimeFormat;
+    t.mock.method(Intl, "DateTimeFormat", function (locales, options) {
+        if (options?.timeZoneName === "shortGeneric") {
+            throw new RangeError(
+                "Value shortGeneric out of range for Intl.DateTimeFormat options property timeZoneName",
+            );
+        }
+        return new DateTimeFormat(locales, options);
+    });
+
+    updateClocks();
+
+    assert.equal(elements["#clock-local"].textContent, "");
+    assert.equal(elements["#clock-utc"].textContent, "");
+});
+
+// An app state in which, of the WAN targets, the first timedOut timed out,
+// the next unreachable were found unreachable, the next answered answered
+// after latency ms, and the rest have not been checked yet.
+function stateAfter({ timedOut, unreachable, answered, latency }) {
+    const state = new AppState([]);
+    const results = [
+        ...Array(timedOut).fill({ latency: null, error: "timeout" }),
+        ...Array(unreachable).fill({ latency: null, error: "unreachable" }),
+        ...Array(answered).fill({ latency, error: null }),
+    ];
+    results.forEach((result, i) => state.wan[i].pushSample(Date.now(), result));
+    return state;
+}
+
+// For each number the health is decided by, the rows put it one under, at
+// and one over its threshold.
+for (const { timedOut, unreachable = 0, answered, latency, health } of [
+    // Offline: more than 10 timed out and at most 4 answered.
+    { timedOut: 9, answered: 4, latency: 30, health: "degraded" },
+    { timedOut: 10, answered: 4, latency: 30, health: "degraded" },
+    { timedOut: 11, answered: 4, latency: 30, health: "offline" },
+    { timedOut: 11, answered: 3, latency: 30, health: "offline" },
+    { timedOut: 11, answered: 5, latency: 30, health: "degraded" },
+    // Otherwise degraded: more than 4 timed out.
+    { timedOut: 3, answered: 10, latency: 30, health: "healthy" },
+    { timedOut: 4, answered: 10, latency: 30, health: "healthy" },
+    { timedOut: 5, answered: 10, latency: 30, health: "degraded" },
+    // Otherwise slow: more than 3 answered after more than 1000ms.
+    { timedOut: 0, answered: 4, latency: 999, health: "healthy" },
+    { timedOut: 0, answered: 4, latency: 1000, health: "healthy" },
+    { timedOut: 0, answered: 4, latency: 1001, health: "slow" },
+    { timedOut: 0, answered: 2, latency: 1001, health: "healthy" },
+    { timedOut: 0, answered: 3, latency: 1001, health: "healthy" },
+    // A target found unreachable counts as one that timed out.
+    {
+        timedOut: 5,
+        unreachable: 6,
+        answered: 4,
+        latency: 30,
+        health: "offline",
+    },
+    {
+        timedOut: 0,
+        unreachable: 5,
+        answered: 10,
+        latency: 30,
+        health: "degraded",
+    },
+]) {
+    test(`with ${timedOut} WAN targets timed out, ${unreachable} found unreachable and ${answered} answering after ${latency}ms, the health is ${health}`, () => {
+        const state = stateAfter({ timedOut, unreachable, answered, latency });
+        assert.equal(state.healthStatus(), health);
+    });
+}

test/viewport/README.md

@@ -1,112 +1,146 @@
-# Responsive-layout harness
+# The viewport test
 
-Automated verification of the responsive layout that landed in #5. Run it with:
+`make frontend-viewport-test` checks the page's layout at several window widths
+in a real browser:
 
 ```bash
 make frontend-viewport-test
 ```
 
-It builds `dist/`, serves it from the same digest-pinned `nginx` image and the
-same `nginx.conf` the shipping container uses, drives a digest-pinned headless
-Chrome against it over CDP, and asserts on computed layout at every viewport
-width derived from the app's own CSS. Screenshots land in `tmp/viewport/`
-alongside a `results.json`; they are artifacts for a human to look at when
-something fails, not the evidence. The assertions are the evidence.
+First it runs the unit tests. Then it builds the page into `dist/`. It serves
+`dist/` with the nginx image and the `configs/nginx.conf` that the Docker image
+ships. Before the browser starts, it fetches `/` and `/no-such-page`, which
+nginx answers with the page. Both must carry `Cache-Control: no-cache` and a
+`Content-Security-Policy` header. Then it starts a headless Chrome in a
+container and opens the page in it at each width. For each width it measures the
+layout inside the page and checks the measurements in Node. The checks decide
+pass or fail. Screenshots and a `results.json` land in `tmp/viewport/`, for a
+person to look at when a check fails.
 
-The target is deliberately outside `make check`: it needs Docker and takes
-minutes, and `make test` has to stay under 20 seconds.
+The test is not part of `make check`: it takes minutes, and `make test` has to
+finish in under 60 seconds.
 
-## How the widths are chosen
+## The widths
 
-Not from a list of phone models. `viewports.js` parses the `@media` conditions
-out of `src/styles.css` and scans `src/main.js` and `index.html` for Tailwind
-responsive prefixes, then tests every breakpoint it finds at one pixel below it,
-exactly on it, and one pixel above it. A generic 375px "phone" test sails
-straight past an off-by-one at a media query boundary; `max-width: 768px`
-matches _at_ 768, and the sweep pins down which side of that line each layout is
-on.
+The breakpoints are read from the page's own files. `viewports.js` reads the
+`min-width` and `max-width` conditions out of the `@media` blocks in
+`web/src/styles.css`. It also looks in `web/src/main.js` and `web/index.html`
+for Tailwind's responsive class prefixes, such as `md:`, and takes their
+breakpoints. Each breakpoint is tested at one pixel below it, exactly on it, and
+one pixel above it. Today the CSS has one breakpoint, `max-width: 768px`, and no
+responsive prefix is used.
 
-Nothing hardcodes 768. Add a second media block or start using `md:` classes and
-the new breakpoint is covered without this directory being touched. The app is
-desktop-first today (all narrow rules live in `max-width` blocks); a
-`min-width`-only, mobile-first set is handled as its inverse, and a set that
-mixes the two makes the run fail loudly rather than test the right widths with
-the wrong expectation. Four further viewports are fixed anchors, each with a
-stated reason: a 320px floor, a 1280px desktop baseline, and two phone-landscape
-sizes straddling the breakpoint for the rotation case.
+A `max-width: 768px` block matches at 768 pixels. Testing both sides of each
+breakpoint catches a layout that switches one pixel too early or too late. A
+second media block, or a first `md:` class, is covered without a change to this
+directory.
 
-## What it asserts
+The page is desktop-first: the wide layout is the default, and every narrow rule
+is in a `max-width` block. So a width is expected to show the narrow layout when
+one of those blocks matches it. A page with only `min-width` blocks would be
+read the other way round. A page that mixes the two kinds fails the run with a
+message, because the right expectation for each width can no longer be read from
+the breakpoints alone.
 
-- **app-rendered** — enough host rows exist and enough of them show a numeric
-  latency. This one exists so the rest cannot pass vacuously against a blank
-  page.
-- **no-horizontal-overflow** — `documentElement.scrollWidth` fits the layout
-  viewport, with the widest offending element named.
-- **nothing-past-viewport-edge** — no visible element's box extends past the
-  viewport edge.
-- **no-clipped-text** — nothing hides text behind `overflow: hidden`. Deliberate
-  ellipsis truncation (Tailwind's `truncate`, used on host names and URLs) is
-  excluded: it is a design choice, not breakage.
-- **tap-targets-44px** — every interactive control is at least 44x44 CSS px on
-  touch viewports, _and_ each selector in the control list matched at least the
-  number of visible elements it declares. The second half is what stops the
-  check passing vacuously: with size alone, a renamed class would take its
-  controls out of the measured set and the check would report "all 0 controls
-  are at least 44x44" and pass. See below.
-- **host-rows-stacked / host-rows-side-by-side** — the rows genuinely reflow.
-  Computed `flex-direction` _and_ the actual geometry are checked, and in the
-  narrow layout the info block and the sparkline must each occupy essentially
-  the full row width. A row that merely shrank its 420px column would fail.
-- **probing-still-runs / gateway-detection-still-runs** — narrow viewports keep
-  probing and keep detecting the gateway. The mobile early-return path proposed
-  in #8 was rejected; this is what would catch it coming back.
+Four more widths are fixed, each for a stated reason:
 
-### The tap-target threshold
+- 320 by 568 pixels: the narrowest width still in common use
+- 667 by 375 pixels: a phone in landscape, inside the narrow layout
+- 844 by 390 pixels: a large phone in landscape, in the wide layout but still a
+  touch device
+- 1280 by 800 pixels: a desktop window
 
-44x44 CSS px. That is the figure in Apple's Human Interface Guidelines and in
-WCAG 2.2 SC 2.5.5 "Target Size (Enhanced)". WCAG 2.2 SC 2.5.8 (level AA) sets a
-lower 24x24 floor, but that floor comes with a spacing exception these controls
-do not qualify for — the pin buttons sit directly against the host name they
-belong to.
+Every width but 1280 by 800 is tested as a touch device.
 
-## Determinism
+## The checks
 
-The browser container runs on an `--internal` docker network and has no route to
-the internet, so the app's latency probes cannot reach anything real. The
-harness answers them itself from a fixed delay table, with a deterministic
-fraction failed outright, so the rows render a realistic spread of one-, two-
-and three-digit latencies plus some unreachable rows. That spread is what the
-layout has to survive; 24 identical `---` placeholders would not exercise it.
+A failed check does not stop the others.
 
-## What this cannot verify
+- `app-rendered`: at least 10 WAN host rows exist, and at least 5 rows show a
+  number as their latency. Without this, the other checks could pass against a
+  blank page.
+- `no-horizontal-overflow`: the document is no wider than the window. On a
+  failure, the widest content is named.
+- `nothing-past-viewport-edge`: no visible element extends past the window's
+  edge.
+- `no-clipped-text`: no element hides its text behind `overflow: hidden` or
+  `overflow: clip`. Text cut with an ellipsis is allowed: that cut is a design
+  choice, not a defect. Tailwind's `truncate` cuts host names and URLs that way.
+- `tap-targets-44px`, on touch widths: each measured control is at least 44 by
+  44 CSS pixels. The controls are `#pause-btn`, `#interval-select`,
+  `#debug-toggle` and the `.pin-btn` in each WAN host row. The check also
+  demands that each selector matches enough visible elements: one of each single
+  control, and one pin button per WAN host row. A renamed class would otherwise
+  take its controls out of the measured set, and the check would pass on
+  nothing.
+- `host-rows-stacked` or `host-rows-side-by-side`: each host row shows the
+  layout expected at that width. In the narrow layout, the row's
+  `flex-direction` is `column`, the graph sits below the host's details, and
+  each takes at least 90% of the row's width. In the wide layout, the direction
+  is `row` and the graph sits to the right of the details. A row that only
+  shrank its fixed 420-pixel column fails.
+- `probing-still-runs`: the page sent at least one check to a target at this
+  width. The narrow layout must not skip the checks.
+- `gateway-detection-still-runs`: the `Local Gateway` row is present at this
+  width, so the gateway was looked for and found. The narrow layout must not
+  skip that search.
 
-Real limits, so nobody re-parks this issue as needing hardware:
+### The tap-target size
 
-- **Non-Chromium engines.** This is Chrome. iOS Safari is WebKit and cannot be
-  emulated by it; Safari-specific bugs (viewport units under a collapsing URL
-  bar, `-webkit-fill-available`, form control metrics) will not show up here.
-- **Real touch input.** `hasTouch` emulation changes what the page is told, not
-  how a finger behaves. Gesture handling, scroll momentum, double-tap zoom and
-  hover-state fallbacks on touch are out of scope.
-- **Physical pixel density and rendering.** `deviceScaleFactor` is set, but
-  subpixel antialiasing, OLED colour rendering and actual legibility at a given
-  physical size are not measurable here.
-- **Fonts.** The container has DejaVu, not the platform's own UI monospace. Text
-  metrics are therefore close to, but not identical to, a real device — a layout
-  that fits here by a few pixels might not there.
-- **On-device performance.** Canvas sparkline redraw cost, battery, and
-  behaviour on a slow radio are not measured.
-- **Browser chrome.** The address bar, safe-area insets and notch cutouts are
-  not simulated.
+44 by 44 CSS pixels is the figure in Apple's Human Interface Guidelines and in
+WCAG 2.2 success criterion 2.5.5, "Target Size (Enhanced)". WCAG 2.2 criterion
+2.5.8 sets a lower minimum of 24 by 24 pixels, with an exception that depends on
+the space around a control. The pin buttons sit against the host name they
+belong to, so the test keeps 44.
 
-Everything else this issue was actually about — does the layout reflow, does
-anything overflow, is content clipped, are the controls big enough — is a
-function of viewport width and CSS, and is covered above.
+## The browser's network
 
-## Relation to the unit test framework (#21)
+The browser container runs on an internal Docker network with no route to the
+internet, so the page's checks reach no real host. The test answers them itself
+from a fixed table of delays: 2, 45, 123, 456 and 780 milliseconds. Which delay
+a target gets depends on its URL, and about one target in seven fails outright.
+So the rows show one-, two- and three-digit latencies and some unreachable rows,
+and the layout is tested against that spread. The request to
+`http://192.168.1.1` is answered after 5 milliseconds, so the `Local Gateway`
+row appears.
 
-Complementary layers, not two stacks. `vitest` (#21) will exercise module-level
-logic in-process with no browser. This harness exercises rendered layout in a
-real engine and is the only thing here that can see a media query. Neither
-replaces the other; assertions about computed styles and element geometry belong
-here, assertions about functions belong in `vitest`.
+At each width, the test sets the interval to 1 second and waits until at least 5
+rows show a latency before it measures. The page discards its first round, so
+this reaches a filled page without waiting out two rounds at 3 seconds.
+
+## What the test cannot check
+
+- Other browser engines. The test runs Chrome. Safari uses WebKit, and bugs that
+  only WebKit has do not show up here.
+- Real touch input. Touch emulation changes what the page is told, not how a
+  finger behaves. Gestures, scroll momentum, double-tap zoom and hover states on
+  touch are not tested.
+- Physical pixels. The device pixel ratio is set, but antialiasing, colour
+  rendering and legibility at a given physical size are not measured.
+- Fonts. The container has DejaVu, not a phone's own monospace font. Text is
+  about as wide as on a real device, but not exactly. A layout that fits here by
+  a few pixels might not fit there.
+- Performance. The cost of redrawing the graphs, battery use and behaviour on a
+  slow connection are not measured.
+- The browser's own frame. The address bar, safe-area insets and notch cutouts
+  are not simulated.
+
+## The files
+
+- `viewports.js` derives the widths from the sources.
+- `facts.js` is run inside the page and measures the layout. It only measures;
+  it decides nothing.
+- `checks.js` turns the measurements into the pass or fail of each check, with
+  the numbers that decided it.
+- `harness.js` connects to the browser, runs each width, writes the screenshots
+  and `results.json`, and prints the results. `script/frontend-viewport-test`
+  starts it; every input it needs arrives in the environment.
+
+## Relation to the unit tests
+
+The unit tests in `test/unit/` call the functions that `web/src/main.js`
+exports, with no browser. `make test` runs them with Node's built-in test
+runner. This test runs the built page in a real browser engine and is the only
+test here that can see a media query. Neither replaces the other. Checks on
+computed styles and element geometry belong here; checks on functions belong in
+`test/unit/`.

test/viewport/checks.js

@@ -15,7 +15,8 @@ export const MIN_TAP_TARGET_PX = 44;
 
 // The controls named in the definition of done, plus the pause button.
 // Each carries the smallest number of *visible* instances the page has to
-// contain for the tap-target oracle to be measuring anything at all.
+// contain, worked out from the facts gathered from that page, for the
+// tap-target oracle to be measuring every control it should.
 //
 // Without those floors the check is inert: `undersized` is empty both when
 // every control is large enough and when the selectors have gone stale and
@@ -24,13 +25,12 @@ export const MIN_TAP_TARGET_PX = 44;
 // for all three singleton controls vanishing at once — so the floor is per
 // selector, and one stale selector out of four fails the check.
 export const INTERACTIVE_CONTROLS = [
-    { selector: "#pause-btn", minCount: 1 },
-    { selector: "#interval-select", minCount: 1 },
-    // One per pinnable host row. `app-rendered` already requires at least
-    // 10 host rows, so a count below that means the pin buttons stopped
-    // being rendered per row rather than that there were fewer hosts.
-    { selector: ".pin-btn", minCount: 10 },
-    { selector: "#debug-toggle", minCount: 1 },
+    { selector: "#pause-btn", minCount: () => 1 },
+    { selector: "#interval-select", minCount: () => 1 },
+    // One per WAN host row, so pin buttons missing from even one row fail
+    // the check rather than only a drop below some fixed number.
+    { selector: ".pin-btn", minCount: (facts) => facts.wanRowCount },
+    { selector: "#debug-toggle", minCount: () => 1 },
 ];
 
 export const INTERACTIVE_SELECTORS = INTERACTIVE_CONTROLS.map(
@@ -105,8 +105,8 @@ export function evaluateChecks(facts, viewport, probes) {
     // never rendered. Everything below is only meaningful if this holds.
     check(
         "app-rendered",
-        facts.rowCount >= 10 && facts.numericLatencies >= 5,
-        `${facts.rowCount} host rows, ${facts.numericLatencies} showing a numeric latency`,
+        facts.wanRowCount >= 10 && facts.numericLatencies >= 5,
+        `${facts.wanRowCount} WAN host rows, ${facts.numericLatencies} showing a numeric latency`,
     );
 
     const viewportWidth = Math.min(facts.innerWidth, facts.documentClientWidth);
@@ -162,7 +162,8 @@ export function evaluateChecks(facts, viewport, probes) {
             seen.set(target.selector, (seen.get(target.selector) ?? 0) + 1);
         }
         const missing = INTERACTIVE_CONTROLS.filter(
-            (control) => (seen.get(control.selector) ?? 0) < control.minCount,
+            (control) =>
+                (seen.get(control.selector) ?? 0) < control.minCount(facts),
         );
 
         const undersized = facts.tapTargets.filter(
@@ -184,11 +185,11 @@ export function evaluateChecks(facts, viewport, probes) {
         const detail = [];
         if (missing.length > 0) {
             detail.push(
-                "oracle is not measuring the page: " +
+                "oracle is not measuring every control: " +
                     summarise(
                         missing,
                         (c) =>
-                            `${c.selector} matched ${seen.get(c.selector) ?? 0} visible element(s), expected at least ${c.minCount}`,
+                            `${c.selector} matched ${seen.get(c.selector) ?? 0} visible element(s), expected at least ${c.minCount(facts)}`,
                         4,
                     ),
             );

test/viewport/facts.js

@@ -173,7 +173,9 @@ export function collectLayoutFacts(options) {
         clipped,
         tapTargets,
         rows,
-        rowCount: document.querySelectorAll(".host-row").length,
+        // WAN host rows only: each has a pin button, and the tap-target
+        // check expects one per row. The local host rows have none.
+        wanRowCount: document.querySelectorAll("#wan-hosts .host-row").length,
         numericLatencies: Array.from(
             document.querySelectorAll(".latency-value"),
         ).filter((el) => /\d/.test(el.textContent)).length,

test/viewport/harness.js

@@ -16,6 +16,10 @@ import { collectLayoutFacts } from "./facts.js";
 import { evaluateChecks, INTERACTIVE_SELECTORS } from "./checks.js";
 import { deriveViewports } from "./viewports.js";
 
+// page.waitForFunction and page.evaluate run the functions given them in
+// the page, where these are defined.
+/* global document, requestAnimationFrame */
+
 function required(name) {
     const value = process.env[name];
     if (!value) {
@@ -47,7 +51,8 @@ const PROBE_DELAYS_MS = [2, 45, 123, 456, 780];
 // offline row rendering is exercised too.
 const UNREACHABLE_MODULUS = 7;
 // The gateway candidate that "answers", so gateway detection succeeds and
-// the Local Gateway row renders. Matches GATEWAY_CANDIDATES in src/main.js.
+// the Local Gateway row renders. Matches GATEWAY_CANDIDATES in
+// web/src/main.js.
 const RESPONSIVE_GATEWAY = "http://192.168.1.1";
 
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -62,7 +67,6 @@ function stableHash(text) {
 
 async function connectBrowser() {
     const deadline = Date.now() + BROWSER_TIMEOUT_MS;
-    let lastError;
     for (;;) {
         try {
             const response = await fetch(`${CDP_URL}/json/version`);
@@ -77,9 +81,10 @@ async function connectBrowser() {
             });
             return { browser, version: info.Browser };
         } catch (error) {
-            lastError = error;
             if (Date.now() > deadline) {
-                throw new Error(`browser never came up: ${lastError}`);
+                throw new Error(`browser never came up: ${error}`, {
+                    cause: error,
+                });
             }
             await sleep(250);
         }

test/viewport/viewports.js

@@ -161,26 +161,27 @@ const ANCHOR_VIEWPORTS = [
 export function deriveViewports(root) {
     const conditions = [
         ...mediaConditionsFromCss(
-            readFileSync(join(root, "src/styles.css"), "utf8"),
-            "src/styles.css",
+            readFileSync(join(root, "web/src/styles.css"), "utf8"),
+            "web/src/styles.css",
         ),
         ...mediaConditionsFromMarkup([
             {
-                path: "src/main.js",
-                text: readFileSync(join(root, "src/main.js"), "utf8"),
+                path: "web/src/main.js",
+                text: readFileSync(join(root, "web/src/main.js"), "utf8"),
             },
             {
-                path: "index.html",
-                text: readFileSync(join(root, "index.html"), "utf8"),
+                path: "web/index.html",
+                text: readFileSync(join(root, "web/index.html"), "utf8"),
             },
         ]),
     ];
 
     if (conditions.length === 0) {
         throw new Error(
-            "no responsive breakpoints found in src/styles.css, src/main.js or " +
-                "index.html — either the responsive layout was deleted or this " +
-                "derivation has stopped matching the sources",
+            "no responsive breakpoints found in web/src/styles.css, " +
+                "web/src/main.js or web/index.html — either the responsive " +
+                "layout was deleted or this derivation has stopped matching " +
+                "the sources",
         );
     }