npm - @monoes/monobrowse - Versions diffs - 1.0.12 → 1.0.13 - Mend

@monoes/monobrowse 1.0.12 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

package/dist/src/__tests__/profiler-heap.test.d.ts +2 -0
package/dist/src/__tests__/profiler-heap.test.d.ts.map +1 -0
package/dist/src/__tests__/profiler-heap.test.js +154 -0
package/dist/src/__tests__/profiler-heap.test.js.map +1 -0
package/dist/src/__tests__/report-a11y.test.d.ts +2 -0
package/dist/src/__tests__/report-a11y.test.d.ts.map +1 -0
package/dist/src/__tests__/report-a11y.test.js +147 -0
package/dist/src/__tests__/report-a11y.test.js.map +1 -0
package/dist/src/__tests__/report-analyze.test.d.ts +2 -0
package/dist/src/__tests__/report-analyze.test.d.ts.map +1 -0
package/dist/src/__tests__/report-analyze.test.js +157 -0
package/dist/src/__tests__/report-analyze.test.js.map +1 -0
package/dist/src/__tests__/report-budget.test.d.ts +2 -0
package/dist/src/__tests__/report-budget.test.d.ts.map +1 -0
package/dist/src/__tests__/report-budget.test.js +80 -0
package/dist/src/__tests__/report-budget.test.js.map +1 -0
package/dist/src/__tests__/report-diff.test.d.ts +2 -0
package/dist/src/__tests__/report-diff.test.d.ts.map +1 -0
package/dist/src/__tests__/report-diff.test.js +231 -0
package/dist/src/__tests__/report-diff.test.js.map +1 -0
package/dist/src/__tests__/report-evidence.test.d.ts +2 -0
package/dist/src/__tests__/report-evidence.test.d.ts.map +1 -0
package/dist/src/__tests__/report-evidence.test.js +214 -0
package/dist/src/__tests__/report-evidence.test.js.map +1 -0
package/dist/src/__tests__/report-flake.test.d.ts +2 -0
package/dist/src/__tests__/report-flake.test.d.ts.map +1 -0
package/dist/src/__tests__/report-flake.test.js +182 -0
package/dist/src/__tests__/report-flake.test.js.map +1 -0
package/dist/src/__tests__/report-history.test.d.ts +2 -0
package/dist/src/__tests__/report-history.test.d.ts.map +1 -0
package/dist/src/__tests__/report-history.test.js +229 -0
package/dist/src/__tests__/report-history.test.js.map +1 -0
package/dist/src/__tests__/report-output.test.d.ts +2 -0
package/dist/src/__tests__/report-output.test.d.ts.map +1 -0
package/dist/src/__tests__/report-output.test.js +169 -0
package/dist/src/__tests__/report-output.test.js.map +1 -0
package/dist/src/__tests__/report-png.test.d.ts +2 -0
package/dist/src/__tests__/report-png.test.d.ts.map +1 -0
package/dist/src/__tests__/report-png.test.js +84 -0
package/dist/src/__tests__/report-png.test.js.map +1 -0
package/dist/src/__tests__/report-render-extras.test.d.ts +2 -0
package/dist/src/__tests__/report-render-extras.test.d.ts.map +1 -0
package/dist/src/__tests__/report-render-extras.test.js +285 -0
package/dist/src/__tests__/report-render-extras.test.js.map +1 -0
package/dist/src/__tests__/report-render.test.d.ts +2 -0
package/dist/src/__tests__/report-render.test.d.ts.map +1 -0
package/dist/src/__tests__/report-render.test.js +143 -0
package/dist/src/__tests__/report-render.test.js.map +1 -0
package/dist/src/__tests__/report-run.test.d.ts +2 -0
package/dist/src/__tests__/report-run.test.d.ts.map +1 -0
package/dist/src/__tests__/report-run.test.js +234 -0
package/dist/src/__tests__/report-run.test.js.map +1 -0
package/dist/src/browser/index.d.ts +1 -0
package/dist/src/browser/index.d.ts.map +1 -1
package/dist/src/browser/index.js +1 -0
package/dist/src/browser/index.js.map +1 -1
package/dist/src/browser/profiler.d.ts.map +1 -1
package/dist/src/browser/profiler.js +19 -22
package/dist/src/browser/profiler.js.map +1 -1
package/dist/src/cli/commands.d.ts.map +1 -1
package/dist/src/cli/commands.js +254 -0
package/dist/src/cli/commands.js.map +1 -1
package/dist/src/report/a11y.d.ts +52 -0
package/dist/src/report/a11y.d.ts.map +1 -0
package/dist/src/report/a11y.js +231 -0
package/dist/src/report/a11y.js.map +1 -0
package/dist/src/report/analyze.d.ts +20 -0
package/dist/src/report/analyze.d.ts.map +1 -0
package/dist/src/report/analyze.js +136 -0
package/dist/src/report/analyze.js.map +1 -0
package/dist/src/report/budget.d.ts +27 -0
package/dist/src/report/budget.d.ts.map +1 -0
package/dist/src/report/budget.js +143 -0
package/dist/src/report/budget.js.map +1 -0
package/dist/src/report/collect-a11y.d.ts +25 -0
package/dist/src/report/collect-a11y.d.ts.map +1 -0
package/dist/src/report/collect-a11y.js +154 -0
package/dist/src/report/collect-a11y.js.map +1 -0
package/dist/src/report/collect.d.ts +45 -0
package/dist/src/report/collect.d.ts.map +1 -0
package/dist/src/report/collect.js +275 -0
package/dist/src/report/collect.js.map +1 -0
package/dist/src/report/evidence.d.ts +80 -0
package/dist/src/report/evidence.d.ts.map +1 -0
package/dist/src/report/evidence.js +279 -0
package/dist/src/report/evidence.js.map +1 -0
package/dist/src/report/flake.d.ts +88 -0
package/dist/src/report/flake.d.ts.map +1 -0
package/dist/src/report/flake.js +232 -0
package/dist/src/report/flake.js.map +1 -0
package/dist/src/report/history.d.ts +85 -0
package/dist/src/report/history.d.ts.map +1 -0
package/dist/src/report/history.js +176 -0
package/dist/src/report/history.js.map +1 -0
package/dist/src/report/index.d.ts +102 -0
package/dist/src/report/index.d.ts.map +1 -0
package/dist/src/report/index.js +216 -0
package/dist/src/report/index.js.map +1 -0
package/dist/src/report/pixel-diff.d.ts +30 -0
package/dist/src/report/pixel-diff.d.ts.map +1 -0
package/dist/src/report/pixel-diff.js +175 -0
package/dist/src/report/pixel-diff.js.map +1 -0
package/dist/src/report/png.d.ts +28 -0
package/dist/src/report/png.d.ts.map +1 -0
package/dist/src/report/png.js +259 -0
package/dist/src/report/png.js.map +1 -0
package/dist/src/report/render-evidence.d.ts +16 -0
package/dist/src/report/render-evidence.d.ts.map +1 -0
package/dist/src/report/render-evidence.js +174 -0
package/dist/src/report/render-evidence.js.map +1 -0
package/dist/src/report/render-trend.d.ts +16 -0
package/dist/src/report/render-trend.d.ts.map +1 -0
package/dist/src/report/render-trend.js +194 -0
package/dist/src/report/render-trend.js.map +1 -0
package/dist/src/report/render.d.ts +21 -0
package/dist/src/report/render.d.ts.map +1 -0
package/dist/src/report/render.js +286 -0
package/dist/src/report/render.js.map +1 -0
package/dist/src/report/run-diff.d.ts +18 -0
package/dist/src/report/run-diff.d.ts.map +1 -0
package/dist/src/report/run-diff.js +51 -0
package/dist/src/report/run-diff.js.map +1 -0
package/dist/src/report/structure.d.ts +41 -0
package/dist/src/report/structure.d.ts.map +1 -0
package/dist/src/report/structure.js +210 -0
package/dist/src/report/structure.js.map +1 -0
package/dist/src/report/trend.d.ts +26 -0
package/dist/src/report/trend.d.ts.map +1 -0
package/dist/src/report/trend.js +164 -0
package/dist/src/report/trend.js.map +1 -0
package/dist/src/report/types.d.ts +320 -0
package/dist/src/report/types.d.ts.map +1 -0
package/dist/src/report/types.js +11 -0
package/dist/src/report/types.js.map +1 -0
package/dist/src/report/util.d.ts +17 -0
package/dist/src/report/util.d.ts.map +1 -0
package/dist/src/report/util.js +45 -0
package/dist/src/report/util.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +1 -1
package/src/__tests__/profiler-heap.test.ts +191 -0
package/src/__tests__/report-a11y.test.ts +180 -0
package/src/__tests__/report-analyze.test.ts +202 -0
package/src/__tests__/report-budget.test.ts +92 -0
package/src/__tests__/report-diff.test.ts +272 -0
package/src/__tests__/report-evidence.test.ts +276 -0
package/src/__tests__/report-flake.test.ts +214 -0
package/src/__tests__/report-history.test.ts +293 -0
package/src/__tests__/report-output.test.ts +210 -0
package/src/__tests__/report-png.test.ts +95 -0
package/src/__tests__/report-render-extras.test.ts +315 -0
package/src/__tests__/report-render.test.ts +175 -0
package/src/__tests__/report-run.test.ts +264 -0
package/src/browser/index.ts +1 -0
package/src/browser/profiler.ts +28 -21
package/src/cli/commands.ts +272 -0
package/src/report/a11y.ts +242 -0
package/src/report/analyze.ts +181 -0
package/src/report/budget.ts +155 -0
package/src/report/collect-a11y.ts +200 -0
package/src/report/collect.ts +408 -0
package/src/report/evidence.ts +379 -0
package/src/report/flake.ts +303 -0
package/src/report/history.ts +219 -0
package/src/report/index.ts +307 -0
package/src/report/pixel-diff.ts +197 -0
package/src/report/png.ts +290 -0
package/src/report/render-evidence.ts +194 -0
package/src/report/render-trend.ts +225 -0
package/src/report/render.ts +314 -0
package/src/report/run-diff.ts +63 -0
package/src/report/structure.ts +212 -0
package/src/report/trend.ts +189 -0
package/src/report/types.ts +356 -0
package/src/report/util.ts +48 -0

package/src/__tests__/report-output.test.ts ADDED Viewed

@@ -0,0 +1,210 @@
+/**
+ * Everything around the two files the command leaves behind: where they go,
+ * what the JSON carries, plus the two pure helpers from the collectors
+ * (request classification and locator upgrading) that a stub client can
+ * exercise without launching Chrome.
+ */
+import { mkdtemp, readFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { describe, expect, it, vi } from 'vitest';
+import type { CdpClient } from '../browser/cdp.js';
+import { buildReport } from '../report/analyze.js';
+import { DEFAULT_BUDGET } from '../report/budget.js';
+import { toRequestEntries } from '../report/collect.js';
+import { upgradeLocators } from '../report/collect-a11y.js';
+import { resolveOutPath, toJsonReport, writeReportFiles } from '../report/index.js';
+import type { A11yFinding, AxNode, CaptureData, Report } from '../report/types.js';
+function capture(partial: Partial<CaptureData> = {}): CaptureData {
+  return {
+    url: 'https://shop.test/checkout',
+    finalUrl: 'https://shop.test/checkout',
+    title: 'Checkout',
+    capturedAt: '2026-09-21T10:00:00.000Z',
+    durationMs: 3200,
+    console: [],
+    pageErrors: [],
+    requests: [],
+    vitals: { lcp: 100, cls: 0, inp: 10 },
+    a11y: [],
+    screenshots: [],
+    notes: [],
+    ...partial,
+  };
+}
+const report = (partial: Partial<CaptureData> = {}): Report =>
+  buildReport(capture(partial), DEFAULT_BUDGET);
+describe('resolveOutPath', () => {
+  const when = '2026-09-21T10:00:00.000Z';
+  it('derives a dated, host-and-path filename when --out is omitted', async () => {
+    const path = await resolveOutPath(undefined, 'https://shop.test/checkout', when, '/work');
+    expect(path).toBe('/work/monobrowse-report-shop.test-checkout-20260921T100000Z.html');
+  });
+  it('uses an explicit .html path as given', async () => {
+    expect(await resolveOutPath('/tmp/out.html', 'https://a.test/', when, '/work')).toBe(
+      '/tmp/out.html',
+    );
+  });
+  it('resolves a relative path against the working directory', async () => {
+    expect(await resolveOutPath('reports/run.html', 'https://a.test/', when, '/work')).toBe(
+      '/work/reports/run.html',
+    );
+  });
+  it('adds .html to a path that has no extension and is not a directory', async () => {
+    expect(await resolveOutPath('/tmp/run', 'https://a.test/', when, '/work')).toBe(
+      '/tmp/run.html',
+    );
+  });
+  it('treats a trailing-separator path as a directory to drop the report into', async () => {
+    const path = await resolveOutPath('reports/', 'https://a.test/', when, '/work');
+    expect(path).toBe('/work/reports/monobrowse-report-a.test-20260921T100000Z.html');
+  });
+  it('treats an existing directory as a directory', async () => {
+    const dir = await mkdtemp(join(tmpdir(), 'monobrowse-out-'));
+    const path = await resolveOutPath(dir, 'https://a.test/', when, '/work');
+    expect(path).toBe(join(dir, 'monobrowse-report-a.test-20260921T100000Z.html'));
+  });
+});
+describe('writeReportFiles', () => {
+  it('writes the HTML and a sibling JSON carrying the verdict and failures', async () => {
+    const dir = await mkdtemp(join(tmpdir(), 'monobrowse-write-'));
+    const r = report({ pageErrors: [{ text: 'boom', timestamp: 0 }] });
+    const paths = await writeReportFiles(r, join(dir, 'run.html'));
+    expect(paths.jsonPath).toBe(join(dir, 'run.json'));
+    const html = await readFile(paths.htmlPath, 'utf8');
+    expect(html).toContain('<!doctype html>');
+    const json = JSON.parse(await readFile(paths.jsonPath, 'utf8'));
+    expect(json.verdict).toBe('fail');
+    expect(json.failures[0]).toMatchObject({ budget: 'maxPageErrors', actual: '1' });
+  });
+  it('creates the output directory if it does not exist yet', async () => {
+    const dir = await mkdtemp(join(tmpdir(), 'monobrowse-write-'));
+    const paths = await writeReportFiles(report(), join(dir, 'nested', 'deep', 'run.html'));
+    await expect(readFile(paths.htmlPath, 'utf8')).resolves.toContain('PASS');
+  });
+});
+describe('toJsonReport', () => {
+  it('drops base64 image payloads but keeps the screenshot metadata', () => {
+    const json = toJsonReport(
+      report({
+        screenshots: [
+          {
+            label: 'page',
+            width: 1280,
+            height: 900,
+            dataUrl: 'data:image/png;base64,AAAA',
+            path: '/tmp/page.png',
+          },
+        ],
+      }),
+    );
+    const shots = json.screenshots as Array<Record<string, unknown>>;
+    expect(shots[0]).toEqual({ label: 'page', width: 1280, height: 900, path: '/tmp/page.png' });
+    expect(JSON.stringify(json)).not.toContain('base64');
+  });
+});
+describe('toRequestEntries', () => {
+  const base = { id: '1', url: 'https://a.test/x', method: 'GET', startTime: 100 };
+  it('marks a 4xx/5xx response as failed', () => {
+    const [entry] = toRequestEntries([{ ...base, status: 503, endTime: 400 }], new Map());
+    expect(entry.failed).toBe(true);
+    expect(entry.durationMs).toBe(300);
+  });
+  it('leaves a 3xx and a 2xx alone', () => {
+    const entries = toRequestEntries(
+      [
+        { ...base, status: 200 },
+        { ...base, id: '2', status: 302 },
+      ],
+      new Map(),
+    );
+    expect(entries.map((e) => e.failed)).toEqual([false, false]);
+  });
+  it('marks a transport failure as failed and carries its errorText', () => {
+    const failures = new Map([['1', { errorText: 'net::ERR_CONNECTION_REFUSED' }]]);
+    const [entry] = toRequestEntries([base], failures);
+    expect(entry).toMatchObject({ failed: true, errorText: 'net::ERR_CONNECTION_REFUSED' });
+  });
+  it('does not count a request the page itself cancelled', () => {
+    const failures = new Map([['1', { errorText: 'net::ERR_ABORTED', canceled: true }]]);
+    expect(toRequestEntries([base], failures)[0].failed).toBe(false);
+  });
+  it('still counts a blocked request even though CDP also marks it cancelled', () => {
+    const failures = new Map([['1', { canceled: true, blockedReason: 'csp' }]]);
+    const [entry] = toRequestEntries([base], failures);
+    expect(entry).toMatchObject({ failed: true, errorText: 'blocked: csp' });
+  });
+  it('does not treat a still-in-flight request as a failure', () => {
+    expect(toRequestEntries([base], new Map())[0].failed).toBe(false);
+  });
+});
+describe('upgradeLocators', () => {
+  const finding = (locator: string): A11yFinding => ({
+    rule: 'unlabelled-control',
+    impact: 'error',
+    role: 'button',
+    name: null,
+    locator,
+    detail: 'no name',
+  });
+  function stubClient(selector: string | null) {
+    return {
+      send: vi.fn(async (method: string) => {
+        if (method === 'DOM.resolveNode') return { object: { objectId: 'obj-1' } };
+        if (method === 'Runtime.callFunctionOn') return { result: { value: selector } };
+        return {};
+      }),
+    } as unknown as CdpClient;
+  }
+  const nodes: AxNode[] = [{ nodeId: '7', backendDOMNodeId: 42 }];
+  it('replaces the ax-node placeholder with a resolved CSS selector', async () => {
+    const out = await upgradeLocators(stubClient('#submit'), 'sid', [finding('ax-node:7')], nodes);
+    expect(out[0].locator).toBe('#submit');
+  });
+  it('keeps the placeholder when the DOM cannot resolve the node', async () => {
+    const out = await upgradeLocators(stubClient(null), 'sid', [finding('ax-node:7')], nodes);
+    expect(out[0].locator).toBe('ax-node:7');
+  });
+  it('leaves DOM-derived locators untouched and costs no round-trip', async () => {
+    const client = stubClient('#other');
+    const out = await upgradeLocators(client, 'sid', [finding('#already-known')], nodes);
+    expect(out[0].locator).toBe('#already-known');
+    expect(client.send).not.toHaveBeenCalled();
+  });
+  it('resolves each backend node once, however many findings point at it', async () => {
+    const client = stubClient('#submit');
+    await upgradeLocators(client, 'sid', [finding('ax-node:7'), finding('ax-node:7')], nodes);
+    const resolves = (client.send as ReturnType<typeof vi.fn>).mock.calls.filter(
+      (c) => c[0] === 'DOM.resolveNode',
+    );
+    expect(resolves).toHaveLength(1);
+  });
+});

package/src/__tests__/report-png.test.ts ADDED Viewed

@@ -0,0 +1,95 @@
+/**
+ * The PNG codec underpins the pixel diff, so it is tested against images it
+ * did not produce as well as its own round trip — an encoder and decoder that
+ * are wrong in the same direction would agree with each other perfectly.
+ *
+ * `assets/mascot.png` and `assets/logo.png` are ordinary 8-bit RGBA PNGs
+ * checked into this repo by other tooling; decoding them exercises the real
+ * filter mix (Sub/Up/Average/Paeth) that a synthetic image never produces.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { crc32, decodePng, encodePng, pngFromDataUrl, pngToDataUrl } from '../report/png.js';
+const ASSETS = join(import.meta.dirname, '..', '..', '..', '..', '..', 'assets');
+function solid(width: number, height: number, rgba: [number, number, number, number]) {
+  const data = new Uint8Array(width * height * 4);
+  for (let i = 0; i < width * height; i++) data.set(rgba, i * 4);
+  return { width, height, data };
+}
+describe('crc32', () => {
+  it('matches the known CRC-32 of "123456789"', () => {
+    expect(crc32(new TextEncoder().encode('123456789'))).toBe(0xcbf43926);
+  });
+});
+describe('decodePng', () => {
+  it('decodes a real 8-bit RGBA PNG at its stated dimensions', () => {
+    const img = decodePng(readFileSync(join(ASSETS, 'mascot.png')));
+    expect({ width: img.width, height: img.height }).toEqual({ width: 650, height: 618 });
+    expect(img.data.length).toBe(650 * 618 * 4);
+  });
+  it('decodes a second real PNG, exercising a different filter mix', () => {
+    const img = decodePng(readFileSync(join(ASSETS, 'logo.png')));
+    expect(img.data.length).toBe(img.width * img.height * 4);
+    // A logo is not uniform: if unfiltering were broken every row would be
+    // identical or the image would be a single flat colour.
+    const unique = new Set<string>();
+    for (let i = 0; i < img.data.length; i += 4) {
+      unique.add(`${img.data[i]},${img.data[i + 1]},${img.data[i + 2]},${img.data[i + 3]}`);
+      if (unique.size > 5) break;
+    }
+    expect(unique.size).toBeGreaterThan(5);
+  });
+  it('rejects a file that is not a PNG', () => {
+    expect(() => decodePng(new TextEncoder().encode('GIF89a not a png'))).toThrow(/bad signature/);
+  });
+  it('rejects an interlaced PNG by name rather than decoding it wrongly', () => {
+    const png = encodePng(solid(2, 2, [1, 2, 3, 4]));
+    png[8 + 8 + 12] = 1; // IHDR interlace byte
+    expect(() => decodePng(png)).toThrow(/interlaced/);
+  });
+});
+describe('encodePng', () => {
+  it('round-trips an image byte-for-byte', () => {
+    const img = decodePng(readFileSync(join(ASSETS, 'mascot.png')));
+    const again = decodePng(encodePng(img));
+    expect(again.width).toBe(img.width);
+    expect(again.height).toBe(img.height);
+    expect(Buffer.from(again.data).equals(Buffer.from(img.data))).toBe(true);
+  });
+  it('writes the PNG signature and an IEND chunk', () => {
+    const png = encodePng(solid(3, 2, [10, 20, 30, 255]));
+    expect([...png.subarray(0, 8)]).toEqual([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    expect(png.subarray(png.length - 8, png.length - 4).toString('ascii')).toBe('IEND');
+  });
+  it('refuses a pixel buffer whose length disagrees with the dimensions', () => {
+    expect(() => encodePng({ width: 4, height: 4, data: new Uint8Array(8) })).toThrow(
+      /expected 64 bytes/,
+    );
+  });
+});
+describe('data URLs', () => {
+  it('round-trips through a data: URL', () => {
+    const png = encodePng(solid(2, 2, [7, 8, 9, 255]));
+    const url = pngToDataUrl(png);
+    expect(url.startsWith('data:image/png;base64,')).toBe(true);
+    expect(Buffer.from(pngFromDataUrl(url)).equals(png)).toBe(true);
+  });
+  it('accepts a bare base64 payload, which is what CDP actually returns', () => {
+    const png = encodePng(solid(1, 1, [1, 1, 1, 255]));
+    const bare = Buffer.from(png).toString('base64');
+    expect(Buffer.from(pngFromDataUrl(bare)).equals(png)).toBe(true);
+  });
+});

package/src/__tests__/report-render-extras.test.ts ADDED Viewed

@@ -0,0 +1,315 @@
+/**
+ * The Wave 2 report sections: trend (RIG-13), run diff (RIG-10), evidence
+ * timeline (RIG-11) and flake analysis (RIG-14).
+ *
+ * The report is a single self-contained file that gets mailed around and fed
+ * to the document pipeline, so two properties matter beyond "the section is
+ * there": everything interpolated is escaped, and the JSON sibling carries
+ * the measurements without the megabytes of base64.
+ */
+import { describe, expect, it } from 'vitest';
+import { buildReport } from '../report/analyze.js';
+import { DEFAULT_BUDGET } from '../report/budget.js';
+import { analyzeFlake } from '../report/flake.js';
+import { toHistoryRun } from '../report/history.js';
+import { toJsonReport } from '../report/index.js';
+import { encodePng, pngToDataUrl } from '../report/png.js';
+import { renderHtml } from '../report/render.js';
+import { buildTrend } from '../report/trend.js';
+import type { CaptureData, Evidence, Report, RunDiff } from '../report/types.js';
+function capture(partial: Partial<CaptureData> = {}): CaptureData {
+  return {
+    url: 'https://shop.test/checkout',
+    finalUrl: 'https://shop.test/checkout',
+    title: 'Checkout',
+    capturedAt: '2026-09-21T10:00:00.000Z',
+    durationMs: 1500,
+    console: [],
+    pageErrors: [],
+    requests: [],
+    vitals: { lcp: 2400, cls: 0.02, inp: 60 },
+    a11y: [],
+    screenshots: [],
+    notes: [],
+    ...partial,
+  };
+}
+const report = (partial: Partial<CaptureData> = {}): Report =>
+  buildReport(capture(partial), DEFAULT_BUDGET);
+function tinyPngDataUrl(shade: number) {
+  const data = new Uint8Array(4 * 4 * 4);
+  for (let i = 0; i < 16; i++) data.set([shade, shade, shade, 255], i * 4);
+  return pngToDataUrl(encodePng({ width: 4, height: 4, data }));
+}
+describe('trend section', () => {
+  it('says so plainly on a first run instead of drawing an empty chart', () => {
+    const r = report();
+    r.trend = buildTrend(r, []);
+    const html = renderHtml(r);
+    expect(html).toContain('First recorded run for this URL');
+  });
+  it('leads with the creep headline and draws a sparkline', () => {
+    const history = Array.from({ length: 5 }, (_, i) =>
+      toHistoryRun(
+        report({ capturedAt: `2026-09-1${i}T10:00:00.000Z`, vitals: { lcp: 2000 } }),
+        `id${i}`,
+      ),
+    );
+    const r = report({ vitals: { lcp: 2400 } });
+    r.trend = buildTrend(r, history);
+    const html = renderHtml(r);
+    expect(html).toContain('Trend — this run against the previous 5');
+    expect(html).toContain('LCP has crept up 400ms');
+    expect(html).toContain('<svg class="spark"');
+    expect(html).toContain('verdictstrip');
+    // Lower-is-better is stated, or a positive delta reads as good news.
+    expect(html).toContain('lower-is-better');
+  });
+  it('omits a metric no run ever measured', () => {
+    const history = [toHistoryRun(report({ vitals: { lcp: 2000 } }), 'id0')];
+    const r = report({ vitals: { lcp: 2400 } });
+    r.trend = buildTrend(r, history);
+    const html = renderHtml(r);
+    // Scoped to the trend table: the Wave 1 vitals table lists every metric
+    // whether or not it was measured, which is correct for that section.
+    const section = html.slice(html.indexOf('<h2>Trend'), html.indexOf('<h2>Errors'));
+    expect(section).toContain('<b>LCP</b>');
+    expect(section).not.toContain('<b>TTFB</b>');
+  });
+});
+describe('diff section', () => {
+  const diff: RunDiff = {
+    previousRunId: '20260920T100000Z-abcdabcd',
+    previousCapturedAt: '2026-09-20T10:00:00.000Z',
+    notes: [],
+    structure: {
+      gained: [{ path: '/main[1]/button[1]', role: 'button', name: 'Cancel', depth: 1 }],
+      lost: [{ path: '/main[1]/link[1]', role: 'link', name: 'Back', depth: 1 }],
+      renamed: [{ path: '/main[1]/button[2]', role: 'button', from: 'Pay now', to: 'Place order' }],
+      moved: [],
+      unchanged: 42,
+      changed: 3,
+    },
+    pixels: {
+      comparable: true,
+      changedPixels: 1234,
+      totalPixels: 100_000,
+      changedPercent: 1.234,
+      previousSize: { width: 400, height: 250 },
+      currentSize: { width: 400, height: 300 },
+      sizeChanged: true,
+      diffDataUrl: tinyPngDataUrl(120),
+      scale: 2,
+    },
+  };
+  it('lists what was gained, lost and renamed', () => {
+    const r = report();
+    r.diff = diff;
+    const html = renderHtml(r);
+    expect(html).toContain('Changes since the previous run');
+    expect(html).toContain('2026-09-20T10:00:00.000Z');
+    expect(html).toContain('Cancel');
+    expect(html).toContain('Back');
+    expect(html).toContain('Place order');
+    expect(html).toContain('42</b> unchanged');
+  });
+  it('reports the changed percentage, the size change and the highlight image', () => {
+    const r = report();
+    r.diff = diff;
+    const html = renderHtml(r);
+    expect(html).toContain('1.23%</b> of pixels changed');
+    expect(html).toContain('400×250');
+    expect(html).toContain('400×300');
+    expect(html).toContain('src="data:image/png;base64,');
+    expect(html).toContain('1/2 scale');
+  });
+  it('says the tree is identical rather than showing an empty table', () => {
+    const r = report();
+    r.diff = {
+      ...diff,
+      structure: { gained: [], lost: [], renamed: [], moved: [], unchanged: 40, changed: 0 },
+      pixels: undefined,
+    };
+    expect(renderHtml(r)).toContain('identical to the previous run');
+  });
+  it('escapes an accessible name that contains markup', () => {
+    const r = report();
+    r.diff = {
+      ...diff,
+      structure: {
+        gained: [
+          {
+            path: '/main[1]/button[1]',
+            role: 'button',
+            name: '<img src=x onerror="alert(1)">',
+            depth: 1,
+          },
+        ],
+        lost: [],
+        renamed: [],
+        moved: [],
+        unchanged: 0,
+        changed: 1,
+      },
+    };
+    const html = renderHtml(r);
+    expect(html).not.toContain('<img src=x');
+    expect(html).toContain('&lt;img src=x onerror=&quot;alert(1)&quot;&gt;');
+  });
+});
+describe('evidence section', () => {
+  const evidence: Evidence = {
+    reason: 'budget-failure',
+    focusOffsetMs: 1200,
+    frames: [
+      { offsetMs: 1100, dataUrl: 'data:image/jpeg;base64,AAAA', bytes: 4 },
+      { offsetMs: 1200, dataUrl: 'data:image/jpeg;base64,BBBB', bytes: 4 },
+    ],
+    timeline: [
+      { offsetMs: 1100, kind: 'frame', label: 'frame', severity: 'info', frameIndex: 0 },
+      {
+        offsetMs: 1200,
+        kind: 'console',
+        label: 'console.error',
+        detail: 'Cannot read properties of undefined',
+        severity: 'error',
+      },
+      { offsetMs: 1200, kind: 'marker', label: 'first failure', severity: 'error' },
+    ],
+    droppedFrames: 18,
+    totalBytes: 8,
+    notes: ['18 recorded frame(s) not attached — the report keeps the 2 nearest the failure.'],
+  };
+  it('renders a filmstrip and a time-ordered timeline', () => {
+    const r = report();
+    r.evidence = evidence;
+    const html = renderHtml(r);
+    expect(html).toContain('<h2>Evidence</h2>');
+    expect(html).toContain('filmstrip');
+    expect(html).toContain('data:image/jpeg;base64,BBBB');
+    expect(html).toContain('Cannot read properties of undefined');
+    expect(html).toContain('first failure');
+    expect(html).toContain('+1.20s');
+  });
+  it('marks the frame nearest the failure', () => {
+    const r = report();
+    r.evidence = evidence;
+    const html = renderHtml(r);
+    expect(html).toContain('at failure');
+    expect(html).toContain('<figure class="focus">');
+  });
+  it('says why it recorded and surfaces its own bounds', () => {
+    const r = report();
+    r.evidence = evidence;
+    const html = renderHtml(r);
+    expect(html).toContain('breached its budget');
+    expect(html).toContain('not attached');
+  });
+  it('is absent entirely when nothing was recorded', () => {
+    expect(renderHtml(report())).not.toContain('<h2>Evidence</h2>');
+  });
+});
+describe('flake section', () => {
+  const err = (text: string) => ({ type: 'error', text, timestamp: 0 });
+  it('shows a FLAKY banner and the per-check rates', () => {
+    const flake = analyzeFlake([report(), report({ console: [err('boom')] }), report()]);
+    const html = renderHtml(report(), { flake });
+    expect(html).toContain('Repeatability — 3 runs');
+    expect(html).toContain('>FLAKY<');
+    expect(html).toContain('2 of 3 passed');
+    expect(html).toContain('Confidence: high.');
+  });
+  it('states what a clean window does not prove', () => {
+    const flake = analyzeFlake([report(), report()]);
+    const html = renderHtml(report(), { flake });
+    expect(html).toContain('>PASS<');
+    expect(html).toContain('95% confidence');
+  });
+  it('lists an intermittent error with the runs it appeared in', () => {
+    const flake = analyzeFlake([report(), report({ console: [err('flaky fetch')] }), report()]);
+    const html = renderHtml(report(), { flake });
+    expect(html).toContain('flaky fetch');
+    expect(html).toContain('1 of 3');
+  });
+  it('is absent for an ordinary single run', () => {
+    expect(renderHtml(report())).not.toContain('Repeatability');
+  });
+});
+describe('toJsonReport', () => {
+  it('keeps the pixel measurements but drops the highlight image', () => {
+    const r = report();
+    r.diff = {
+      previousRunId: 'x',
+      previousCapturedAt: '2026-09-20T10:00:00.000Z',
+      notes: [],
+      pixels: {
+        comparable: true,
+        changedPixels: 10,
+        totalPixels: 100,
+        changedPercent: 10,
+        previousSize: { width: 4, height: 4 },
+        currentSize: { width: 4, height: 4 },
+        sizeChanged: false,
+        diffDataUrl: tinyPngDataUrl(10),
+      },
+    };
+    const json = toJsonReport(r) as { diff: { pixels: Record<string, unknown> } };
+    expect(json.diff.pixels.changedPercent).toBe(10);
+    expect(json.diff.pixels.diffDataUrl).toBeUndefined();
+  });
+  it('keeps frame offsets but drops the frame images', () => {
+    const r = report();
+    r.evidence = {
+      reason: 'requested',
+      focusOffsetMs: null,
+      frames: [{ offsetMs: 500, dataUrl: 'data:image/jpeg;base64,AAAA', bytes: 4 }],
+      timeline: [],
+      droppedFrames: 0,
+      totalBytes: 4,
+      notes: [],
+    };
+    const json = toJsonReport(r) as { evidence: { frames: Array<Record<string, unknown>> } };
+    expect(json.evidence.frames).toEqual([{ offsetMs: 500, bytes: 4 }]);
+  });
+  it('never serializes the raw recording buffer', () => {
+    const r = report();
+    r.recording = {
+      startedAtMs: 1,
+      frames: [{ offsetMs: 0, data: 'x', bytes: 1 }],
+      droppedFrames: 0,
+      requested: true,
+    };
+    expect(JSON.stringify(toJsonReport(r))).not.toContain('"recording"');
+  });
+  it('carries the trend through unchanged', () => {
+    const r = report();
+    r.trend = buildTrend(r, []);
+    const json = toJsonReport(r) as { trend: { runs: number } };
+    expect(json.trend.runs).toBe(0);
+  });
+});