@monoes/monobrowse 1.0.12 → 1.0.14

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

@@ -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);
+  });
+});

package/src/__tests__/report-render.test.ts

@@ -0,0 +1,175 @@
+/**
+ * The renderer's contract is that the HTML is SELF-CONTAINED: it must render
+ * identically on a machine with no network, because monomind's document
+ * pipeline ingests it as an ordinary document and because an archived report
+ * has to still work years later. These tests enforce that mechanically.
+ */
+import { describe, expect, it } from 'vitest';
+import { buildReport } from '../report/analyze.js';
+import { DEFAULT_BUDGET, parseBudget } from '../report/budget.js';
+import { escapeHtml, renderHtml } from '../report/render.js';
+import type { CaptureData, Report } from '../report/types.js';
+
+const PNG =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';
+
+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: {},
+    a11y: [],
+    screenshots: [],
+    notes: [],
+    ...partial,
+  };
+}
+
+function report(partial: Partial<CaptureData> = {}, budget = DEFAULT_BUDGET): Report {
+  return buildReport(capture(partial), budget);
+}
+
+/** Anything that would make the browser go to the network to render the page. */
+function externalReferences(html: string): string[] {
+  const patterns = [
+    /<script[^>]+\ssrc\s*=/gi,
+    /<link\b/gi,
+    /@import/gi,
+    /url\(\s*['"]?https?:/gi,
+    /\s(?:src|href|poster|action|data)\s*=\s*["']https?:/gi,
+    /\s(?:src|href)\s*=\s*["']\/\//gi,
+  ];
+  return patterns.flatMap((p) => html.match(p) ?? []);
+}
+
+describe('renderHtml — self-containment', () => {
+  it('references no external resource of any kind', () => {
+    const html = renderHtml(
+      report({
+        screenshots: [{ label: 'page', width: 1280, height: 3000, dataUrl: PNG }],
+        requests: [{ url: 'https://cdn.test/app.js', method: 'GET', status: 404, failed: true }],
+        console: [{ type: 'error', text: 'boom', url: 'https://cdn.test/app.js', timestamp: 0 }],
+      }),
+    );
+    expect(externalReferences(html)).toEqual([]);
+  });
+
+  it('inlines its CSS in a style element and inlines screenshots as data URIs', () => {
+    const html = renderHtml(
+      report({ screenshots: [{ label: 'page', width: 800, height: 600, dataUrl: PNG }] }),
+    );
+    expect(html).toContain('<style>');
+    expect(html).toContain('src="data:image/png;base64,');
+  });
+
+  it('themes for both light and dark without JavaScript', () => {
+    const html = renderHtml(report());
+    expect(html).toContain('@media (prefers-color-scheme: dark)');
+    expect(html).not.toMatch(/<script(?![^>]*type="application\/json")/i);
+  });
+});
+
+describe('renderHtml — content', () => {
+  it('leads with a PASS verdict for a clean page', () => {
+    const html = renderHtml(report({ vitals: { lcp: 800, cls: 0.01, inp: 20 } }));
+    const verdictAt = html.indexOf('PASS');
+    expect(verdictAt).toBeGreaterThan(-1);
+    expect(verdictAt).toBeLessThan(html.indexOf('Failed requests'));
+    expect(html).toContain('All budgets met.');
+  });
+
+  it('orders the sections verdict, errors, failed requests, vitals, a11y, screenshots', () => {
+    const html = renderHtml(report());
+    const order = [
+      'PASS',
+      'Errors',
+      'Failed requests',
+      'Web vitals',
+      'Accessibility',
+      'Screenshots',
+    ];
+    const positions = order.map((s) => html.indexOf(s));
+    expect(positions.every((p) => p > -1)).toBe(true);
+    expect([...positions].sort((a, b) => a - b)).toEqual(positions);
+  });
+
+  it('shows each budget failure with its expected and actual values', () => {
+    const html = renderHtml(
+      report({ vitals: { lcp: 4100, cls: 0, inp: 0 } }, parseBudget({ lcp: 2500 })),
+    );
+    expect(html).toContain('FAIL');
+    expect(html).toContain('LCP (Largest Contentful Paint)');
+    expect(html).toContain('&lt;= 2500ms');
+    expect(html).toContain('4100ms');
+  });
+
+  it('lists failed requests and omits the successful ones', () => {
+    const html = renderHtml(
+      report({
+        requests: [
+          { url: 'https://shop.test/api/cart', method: 'POST', status: 500, failed: true },
+          { url: 'https://shop.test/ok', method: 'GET', status: 200, failed: false },
+        ],
+      }),
+    );
+    expect(html).toContain('https://shop.test/api/cart');
+    expect(html).not.toContain('https://shop.test/ok');
+  });
+
+  it('says a metric was not measured rather than showing a fake zero', () => {
+    const html = renderHtml(report({ vitals: { cls: 0.05 } }));
+    expect(html).toContain('not measured');
+  });
+
+  it('renders a11y findings with role, name state and locator', () => {
+    const html = renderHtml(
+      report({
+        a11y: [
+          {
+            rule: 'unlabelled-control',
+            impact: 'error',
+            role: 'button',
+            name: null,
+            locator: 'form > button:nth-of-type(2)',
+            detail: 'button has no accessible name',
+          },
+        ],
+      }),
+    );
+    expect(html).toContain('unlabelled-control');
+    expect(html).toContain('form &gt; button:nth-of-type(2)');
+    expect(html).toContain('(no accessible name)');
+  });
+
+  it('states plainly that contrast was not evaluated', () => {
+    expect(renderHtml(report())).toMatch(/[Cc]olour contrast is not evaluated/);
+  });
+
+  it('surfaces degraded-run notes', () => {
+    const html = renderHtml(report({ notes: ['Page never went network-idle within 20000ms'] }));
+    expect(html).toContain('Run notes');
+    expect(html).toContain('never went network-idle');
+  });
+});
+
+describe('escapeHtml', () => {
+  it('neutralizes markup from page-controlled strings', () => {
+    expect(escapeHtml('<img src=x onerror="alert(1)">')).toBe(
+      '&lt;img src=x onerror=&quot;alert(1)&quot;&gt;',
+    );
+  });
+
+  it('keeps an injected error message from breaking out of the document', () => {
+    const html = renderHtml(
+      report({ pageErrors: [{ text: '</table><script>alert(1)</script>', timestamp: 0 }] }),
+    );
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).toContain('&lt;script&gt;');
+  });
+});