netwatch/test/unit/main.test.js

// Unit tests for 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,
    CONFIG,
    greyOutUI,
    hostRowHTML,
    HostState,
    humanDuration,
    latencyClass,
    latencyHex,
    measureLatency,
    tick,
} from "../../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. 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. 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.document = {
    getElementById: () => null,
    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;
}

// 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("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 show.

test("at a 30000ms interval, a check still waiting when its round is given up 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);
});

test("at a 30000ms interval, a check still waiting when the user pauses 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);
});

test("at a 30000ms interval, a check in the first round 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);
});

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] };
}

// What this test wrote to the browser console with console[method].
function consoleLines(method) {
    return console[method].mock.calls.map((call) => call.arguments[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 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");
});

// 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,
    });
});

// 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);
    });
}