Testing Charts

This is the real test file of the Lumen project after this phase. The first example below runs a small version of the same checks in the page.

// Tests for the pieces that can be tested without a browser: scales, data shaping, the live-feed rules, retries and CSV.
// Run them with: npm test      (vitest run)
import { describe, expect, it } from "vitest";
import * as d3 from "d3";
import { describeChange, percentChange } from "../src/parts/kpi.js";
import { ageText, withRetry } from "../src/parts/states.js";
import { applyEvent, createFeed, emptiest } from "../src/data/live.js";
import { csvCell, toCsv } from "../src/utils/export.js";

describe("scales", () => {
  const x = d3.scaleLinear().domain([0, 4380]).range([0, 560]);

  it("maps the ends and the middle of the domain", () => {
    expect(x(0)).toBe(0);
    expect(x(2190)).toBe(280);
    expect(x(4380)).toBe(560);
  });

  it("nice() rounds the domain outwards to round numbers", () => {
    expect(x.copy().nice().domain()).toEqual([0, 4500]);
  });

  it("returns the middle of the range when every value is equal", () => {
    expect(d3.scaleLinear().domain([5, 5]).range([0, 100])(5)).toBe(50);
  });

  it("gives undefined, not a number, for missing input", () => {
    expect(x(undefined)).toBeUndefined();
    expect(x(null)).toBeUndefined();
    expect(x(NaN)).toBeUndefined();
  });
});

describe("data shaping", () => {
  it("percentChange refuses to divide by zero", () => {
    expect(percentChange(120, 100)).toBe(20);
    expect(percentChange(5, 0)).toBeNull();
    expect(percentChange(5, null)).toBeNull();
    expect(percentChange(NaN, 4)).toBeNull();
  });

  it("describeChange says it in words", () => {
    expect(describeChange(3451, 3013, "vs Saturday")).toBe("up 14.5% vs Saturday");
    expect(describeChange(90, 100)).toBe("down 10.0%");
    expect(describeChange(100, 100, "vs last week")).toBe("no change vs last week");
    expect(describeChange(100, 0)).toBe("no earlier value to compare with");
  });

  it("ageText never prints a negative age", () => {
    expect(ageText(2)).toBe("just now");
    expect(ageText(185)).toBe("3 minutes ago");
    expect(ageText(-5)).toBe("at an unknown time");
  });

  it("csvCell quotes, escapes and defuses", () => {
    expect(csvCell('Quay, "North"')).toBe('"Quay, ""North"""');
    expect(csvCell("=SUM(A1:A9)")).toBe("'=SUM(A1:A9)");
    expect(csvCell(null)).toBe("");
    expect(csvCell(-3)).toBe("-3");
    expect(csvCell(new Date(Date.UTC(2025, 5, 1, 23, 30)))).toBe("2025-06-01");
  });

  it("toCsv writes a header, Windows line breaks and a byte order mark", () => {
    expect(toCsv([{ a: 1, b: "x" }], [["a", "A"], ["b", "B"]])).toBe("\ufeffA,B\r\n1,x\r\n");
  });
});

describe("the live feed", () => {
  const stations = () => new Map([["S01", { id: "S01", bikes: 10, docks: 20, seq: 0 }], ["S02", { id: "S02", bikes: 2, docks: 10, seq: 0 }]]);

  it("keeps the newest message and ignores late ones", () => {
    const state = stations();
    expect(applyEvent(state, { id: "S01", bikes: 12, seq: 5 })).toBe("applied");
    expect(applyEvent(state, { id: "S01", bikes: 3, seq: 4 })).toBe("late");
    expect(applyEvent(state, { id: "S01", bikes: 3, seq: 5 })).toBe("late");
    expect(state.get("S01").bikes).toBe(12);
  });

  it("clamps counts and rejects bad messages", () => {
    const state = stations();
    applyEvent(state, { id: "S02", bikes: 99, seq: 1 });
    expect(state.get("S02").bikes).toBe(10);
    expect(applyEvent(state, { id: "S99", bikes: 1, seq: 2 })).toBe("unknown");
    expect(applyEvent(state, { id: "S01", bikes: "3", seq: 2 })).toBe("bad");
    expect(applyEvent(state, null)).toBe("bad");
  });

  it("emptiest sorts by share and skips stations without docks", () => {
    const state = stations();
    state.set("S03", { id: "S03", bikes: 0, docks: 0, seq: 0 });
    expect(emptiest(state, 2).map((s) => s.id)).toEqual(["S02", "S01"]);
  });

  it("the same seed gives the same messages", () => {
    const rows = [{ id: "S01", bikes: 10, docks: 20 }, { id: "S02", bikes: 2, docks: 10 }];
    const run = () => {
      const seen = [];
      const feed = createFeed(rows, { seed: 7, every: 1e9 });
      feed.onmessage = (m) => seen.push(m.data);
      for (let i = 0; i < 8; i += 1) feed.send();
      feed.close();
      return seen;
    };
    expect(run()).toEqual(run());
  });
});

describe("retries", () => {
  it("waits 100 then 200 milliseconds, then succeeds", async () => {
    const waits = [];
    const result = await withRetry(async (attempt) => { if (attempt < 3) throw new Error("down"); return "ok"; }, { wait: 100, sleep: async () => {}, onRetry: (n, delay) => waits.push(delay) });
    expect(result).toBe("ok");
    expect(waits).toEqual([100, 200]);
  });

  it("does not retry a 404", async () => {
    let calls = 0;
    const missing = Object.assign(new Error("not found"), { status: 404 });
    await expect(withRetry(async () => { calls += 1; throw missing; }, { sleep: async () => {} })).rejects.toThrow("not found");
    expect(calls).toBe(1);
  });
});

The first run saves rides-line.png; later runs compare against it. Run it on one fixed browser and one operating system, since fonts differ between machines.

// tests/charts.visual.spec.js, with Playwright (npm install -D @playwright/test)
import { test, expect } from "@playwright/test";

test("the rides line looks the same", async ({ page }) => {
  await page.goto("http://localhost:5173/");
  await page.locator("#rides-line svg").waitFor();
  await expect(page.locator("#rides-line")).toHaveScreenshot("rides-line.png", { maxDiffPixelRatio: 0.01 });
});