Jyotisha/frontend/tests/personal-report-theme-contract.test.ts

import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

import { cssDeclarations } from "./css-contract-test-support.ts";

const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");

const luminance = (hex: string) => {
  const channel = (value: number) => {
    const c = value / 255;
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
};
const contrast = (a: string, b: string) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
};

function blockTokens(opener: string): Map<string, string> {
  const start = globalStyles.indexOf(opener);
  assert.notEqual(start, -1, `missing block: ${opener}`);
  const end = globalStyles.indexOf("\n}", start);
  const body = globalStyles.slice(start, end);
  return new Map([...body.matchAll(/--([\w-]+)\s*:\s*([^;]+);/g)]
    .map((hit) => [hit[1], hit[2].trim()]));
}

test("the report palette is declared on :root, never on the reader element", () => {
  // A custom property declared on .personal-report-reader wins over :root no
  // matter what a media query says. Keeping it local made the dark override
  // dead: the paper stayed light while --color-ink went light with the theme,
  // which is white text on white paper.
  const reader = globalStyles.slice(globalStyles.indexOf(".personal-report-reader {"));
  const readerBody = reader.slice(0, reader.indexOf("\n}"));
  assert.doesNotMatch(readerBody, /--report-(paper|rule|accent)\s*:/);
  for (const token of ["report-paper", "report-rule", "report-accent"]) {
    assert.ok(blockTokens(":root {\n  color-scheme: light;").has(token), `--${token} must live on :root`);
  }
});

test("report ink clears AA on report paper in both themes", () => {
  const light = blockTokens(":root {\n  color-scheme: light;");
  const dark = blockTokens(':root[data-theme="dark"] {');
  for (const [name, palette] of [["light", light], ["dark", dark]] as const) {
    const paper = palette.get("report-paper")!;
    assert.match(paper, /^#[0-9a-f]{6}$/i);
    for (const ink of ["color-ink", "color-ink-strong", "color-ink-secondary", "color-ink-tertiary", "report-accent"]) {
      const value = palette.get(ink)!;
      const ratio = contrast(value, paper);
      assert.ok(
        ratio >= 4.5,
        `${name}: --${ink} (${value}) on --report-paper (${paper}) is ${ratio.toFixed(2)}:1`,
      );
    }
  }
});

test("print pins the palette back to light so paper is always paper", () => {
  // Printing while the screen is dark forced white backgrounds but left every
  // ink light, which comes out of the printer blank.
  const print = globalStyles.slice(globalStyles.indexOf("@media print {"));
  assert.match(print, /:root \{\s*\n\s*color-scheme: light;/);
  const printRoot = blockTokens("@media print {\n  /* Paper is always paper");
  for (const token of ["color-ink", "color-ink-strong", "report-paper", "report-accent"]) {
    assert.ok(printRoot.has(token), `@media print must reset --${token}`);
  }
  assert.equal(printRoot.get("color-ink"), "#1d1d1f");
  assert.equal(printRoot.get("report-paper"), "#fbfaf7");
  assert.equal(printRoot.get("report-rule"), "#d8d6cf");
});

test("report titles use the product serif display stack at weight 400", () => {
  const centreTitle = cssDeclarations(".report-center-hero h1");
  const coverTitle = cssDeclarations(".personal-report-cover h1");
  const sectionTitle = cssDeclarations(".personal-report-section-heading h2");
  for (const [name, body] of [["centre", centreTitle], ["cover", coverTitle], ["section", sectionTitle]] as const) {
    assert.match(body, /font-family:\s*var\(--font-display\)/, `${name} title must use --font-display`);
    assert.match(body, /font-weight:\s*400/, `${name} title must stay weight 400`);
  }
});

test("report chrome and appendix disclosure keep 44px targets", () => {
  assert.match(cssDeclarations(".personal-report-back"), /min-height:\s*44px/);
  assert.match(cssDeclarations(".personal-report-disclosure"), /min-height:\s*44px/);
  assert.match(cssDeclarations(".report-center-back"), /min-height:\s*44px/);
});