@multiplatform.one/theme 7.7.6 → 7.10.0

package/src/audit/themeMatrix.spec.ts

@@ -5,6 +5,11 @@ import {
   captureMatrixSnapshot,
   diffGeometry,
   evaluateNoBreakage,
+  evaluateIconContrast,
+  evaluateChartProof,
+  type MatrixChartSample,
+  type MatrixIconSample,
+  type IconUnmeasurableReason,
   evaluateTextContrast,
   type MatrixSnapshot,
   type MatrixTextSample,
@@ -31,9 +36,112 @@ function snapshotFromRecipeInputs(inputs: Partial<SizeRecipeInputs>): MatrixSnap
       rowGap: `${recipe.gap}px`,
     },
   }));
-  return { storyRendered: true, geometry, textSamples: [] };
+  return {
+    storyRendered: true,
+    geometry,
+    textSamples: [],
+    iconSamples: [],
+    chartSamples: [],
+    svgRootCount: 0,
+  };
 }
 
+describe("declared chart proof keeps uncertainty visible", () => {
+  const sample = (overrides: Partial<MatrixChartSample> = {}): MatrixChartSample => ({
+    key: "chart:0",
+    kind: "pie",
+    context: "Revenue",
+    label: "Revenue by region",
+    background: "#111111",
+    backgroundResolved: true,
+    marks: [
+      { key: "slice:0", label: "North", paint: "#bbbbbb", background: "#111111" },
+      { key: "slice:1", label: "South", paint: "#dddddd", background: "#111111" },
+    ],
+    labels: [],
+    separation: { declared: false },
+    datumText: { declared: true, expected: 2, observed: 2, complete: true },
+    ...overrides,
+  });
+
+  it("names adjacent slice contrast and does not accept a boolean gap claim", () => {
+    const result = evaluateChartProof([sample({ separation: { declared: true } })]);
+    expect(result.ok).toBe(false);
+    expect(result.violations.some((item) => item.rule === "adjacent-pair")).toBe(true);
+    expect(result.unverified.some((item) => item.reason === "unverified-separation")).toBe(true);
+  });
+
+  it("requires two measured physical pixels between bars", () => {
+    const separated = sample({
+      kind: "bar",
+      separation: { declared: true, method: "rect-bounds", minimumGapPx: 2 },
+    });
+    expect(evaluateChartProof([separated]).ok).toBe(true);
+    expect(
+      evaluateChartProof([
+        { ...separated, separation: { declared: true, method: "rect-bounds", minimumGapPx: 1.99 } },
+      ]).ok,
+    ).toBe(false);
+  });
+
+  it("does not round a below-floor paint pair green", () => {
+    const result = evaluateChartProof([
+      sample({
+        marks: [{ key: "almost", label: "Almost", paint: "#000000", background: "#595959" }],
+      }),
+    ]);
+    const violation = result.violations.find((item) => item.rule === "mark-backdrop");
+    expect(violation?.ratio).toBeGreaterThan(2.995);
+    expect(violation?.ratio).toBeLessThan(3);
+  });
+
+  it("never treats a rect certificate as proof of pie center separation", () => {
+    expect(
+      evaluateChartProof([
+        sample({ separation: { declared: true, method: "rect-bounds", minimumGapPx: 8 } }),
+      ]).ok,
+    ).toBe(false);
+  });
+
+  it.each(["unknown-kind", "no-marks", "unsupported-paint"] as const)(
+    "keeps %s named and red",
+    (reason) => {
+      const input =
+        reason === "unknown-kind"
+          ? sample({ kind: "radar" })
+          : reason === "no-marks"
+            ? sample({ marks: [] })
+            : sample({
+                marks: [
+                  {
+                    key: "gradient",
+                    label: "North",
+                    background: "#111111",
+                    unmeasurable: "unsupported-paint",
+                  },
+                ],
+              });
+      expect(evaluateChartProof([input]).unverified.some((item) => item.reason === reason)).toBe(
+        true,
+      );
+    },
+  );
+
+  it("requires a root label, readable axis text and a complete datum alternative", () => {
+    const result = evaluateChartProof([
+      sample({
+        label: "",
+        labels: [{ key: "tick", label: "May", paint: "#333333", background: "#111111" }],
+        datumText: { declared: true, expected: 13, observed: 12, complete: false },
+      }),
+    ]);
+    expect(result.violations.map((item) => item.rule)).toEqual(
+      expect.arrayContaining(["missing-label", "axis-text"]),
+    );
+    expect(result.unverified.some((item) => item.reason === "incomplete-datum-text")).toBe(true);
+  });
+});
+
 describe("theme-axis geometry invariance (LC-80 tripwire)", () => {
   it("identical recipe inputs across theme colours keep the diff clean", () => {
     const base = snapshotFromRecipeInputs({});
@@ -87,6 +195,8 @@ describe("theme-axis geometry invariance (LC-80 tripwire)", () => {
   });
 });
 
+const cleanIcons = evaluateIconContrast([]);
+
 describe("preset-axis no-breakage (two assertions, never one)", () => {
   const cleanContrast = { measured: 10, unmeasurable: 0, violations: [] };
 
@@ -99,6 +209,8 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
     expect(diffGeometry(defaultCell, boldCell).identical).toBe(false);
 
     const result = evaluateNoBreakage({
+      icons: cleanIcons,
+      baselineIcons: cleanIcons,
       storyRendered: true,
       offScaleViolations: 0,
       baselineOffScaleViolations: 0,
@@ -110,6 +222,8 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
 
   it("FAILS when a preset cell falls off the knob scales beyond the default cell", () => {
     const result = evaluateNoBreakage({
+      icons: cleanIcons,
+      baselineIcons: cleanIcons,
       storyRendered: true,
       offScaleViolations: 3,
       baselineOffScaleViolations: 1,
@@ -122,6 +236,8 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
 
   it("FAILS when a preset cell loses contrast the default cell had", () => {
     const result = evaluateNoBreakage({
+      icons: cleanIcons,
+      baselineIcons: cleanIcons,
       storyRendered: true,
       offScaleViolations: 0,
       baselineOffScaleViolations: 0,
@@ -147,6 +263,8 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
 
   it("FAILS when the story does not render at all", () => {
     const result = evaluateNoBreakage({
+      icons: cleanIcons,
+      baselineIcons: cleanIcons,
       storyRendered: false,
       offScaleViolations: 0,
       baselineOffScaleViolations: 0,
@@ -156,6 +274,60 @@ describe("preset-axis no-breakage (two assertions, never one)", () => {
     expect(result.ok).toBe(false);
     expect(result.failures[0]).toContain("render");
   });
+
+  it("names a replacement structural failure even when the count stays equal or falls", () => {
+    const input = {
+      storyRendered: true,
+      offScaleViolations: 1,
+      baselineOffScaleViolations: 1,
+      offScaleSignatures: ["new control :: borderRadius: 15px is off-scale"],
+      baselineOffScaleSignatures: ["old control :: borderRadius: 14px is off-scale"],
+      contrast: cleanContrast,
+      baselineContrastViolations: 0,
+    };
+    for (const baselineOffScaleViolations of [1, 2]) {
+      const result = evaluateNoBreakage({ ...input, baselineOffScaleViolations });
+      expect(result.ok).toBe(false);
+      expect(result.failures[0]).toContain("new control");
+      expect(result.failures[0]).not.toContain("old control");
+    }
+    expect(
+      evaluateNoBreakage({ ...input, offScaleSignatures: input.baselineOffScaleSignatures }).ok,
+    ).toBe(true);
+  });
+
+  it("names replacement text failures regardless of count and preserves repeated identities", () => {
+    const old = {
+      key: "old text",
+      text: "Old",
+      color: "#aaaaaa",
+      background: "#ffffff",
+      ratio: 2.32,
+      required: 4.5,
+    };
+    const replacement = { ...old, key: "new text", text: "New" };
+    const input = {
+      storyRendered: true,
+      offScaleViolations: 0,
+      baselineOffScaleViolations: 0,
+      contrast: { ...cleanContrast, violations: [replacement] },
+      baselineContrastViolations: 1,
+      baselineContrast: { ...cleanContrast, violations: [old] },
+    };
+    for (const baseline of [[old], [old, old]]) {
+      const result = evaluateNoBreakage({
+        ...input,
+        baselineContrastViolations: baseline.length,
+        baselineContrast: { ...cleanContrast, violations: baseline },
+      });
+      expect(result.ok).toBe(false);
+      expect(result.failures[0]).toContain("new text");
+    }
+    expect(evaluateNoBreakage({ ...input, contrast: input.baselineContrast }).ok).toBe(true);
+    expect(
+      evaluateNoBreakage({ ...input, contrast: { ...cleanContrast, violations: [old, old] } }).ok,
+    ).toBe(false);
+  });
 });
 
 describe("evaluateTextContrast (the assertion downstream repos call)", () => {
@@ -184,6 +356,14 @@ describe("evaluateTextContrast (the assertion downstream repos call)", () => {
     expect(result.violations[0].required).toBe(4.5);
   });
 
+  it("keeps a just-below-AA text sample in the violations", () => {
+    const result = evaluateTextContrast([sample({ color: "#77767c" })]);
+    expect(result.measured).toBe(1);
+    expect(result.violations).toHaveLength(1);
+    expect(result.violations[0].ratio).toBeGreaterThan(4.495);
+    expect(result.violations[0].ratio).toBeLessThan(4.5);
+  });
+
   it("holds large text (>=24px, or >=18.66px bold) to the 3:1 floor instead", () => {
     // #949494 on white is ~3.5:1 — fails body text, clears large text.
     const failing = evaluateTextContrast([sample({ color: "#949494" })]);
@@ -272,3 +452,114 @@ describe("captureMatrixSnapshot keys survive the theme axis", () => {
     expect(captureMatrixSnapshot().storyRendered).toBe(false);
   });
 });
+
+describe("icon contrast keeps unsupported conveying paint unverified", () => {
+  const sample = (overrides: Partial<MatrixIconSample> = {}): MatrixIconSample => ({
+    key: "button:0/svg:0",
+    context: "Open",
+    status: "conveying",
+    paint: "#ffffff",
+    background: "#111111",
+    backgroundResolved: true,
+    overImage: false,
+    shapeCount: 1,
+    distinctPaints: 1,
+    paintKinds: ["fill"],
+    rect: { x: 0, y: 0, w: 24, h: 24 },
+    ...overrides,
+  });
+
+  it("holds real glyph paint to exactly 3:1 regardless of text rules", () => {
+    expect(evaluateIconContrast([sample()]).ok).toBe(true);
+    const result = evaluateIconContrast([sample({ paint: "#222222" })]);
+    expect(result.ok).toBe(false);
+    expect(result.measured).toBe(1);
+    expect(result.violations[0].required).toBe(3);
+    expect(result.violations[0].context).toBe("Open");
+  });
+
+  it("keeps a just-below-3 icon sample in the violations", () => {
+    const result = evaluateIconContrast([sample({ paint: "#000000", background: "#595959" })]);
+    expect(result.ok).toBe(false);
+    expect(result.measured).toBe(1);
+    expect(result.violations).toHaveLength(1);
+    expect(result.violations[0].ratio).toBeGreaterThan(2.995);
+    expect(result.violations[0].ratio).toBeLessThan(3);
+  });
+
+  it.each<IconUnmeasurableReason>([
+    "unresolved-backdrop",
+    "masked-or-filtered",
+    "use-indirection",
+    "unsupported-paint",
+    "unsupported-compositing",
+    "multicolor",
+    "no-paint",
+  ])("does not pass a candidate with %s", (reason) => {
+    const result = evaluateIconContrast([sample({ unmeasurable: reason })]);
+    expect(result.ok).toBe(false);
+    expect(result.measured).toBe(0);
+    expect(result.candidates).toBe(1);
+    expect(result.unverified).toEqual([{ key: "button:0/svg:0", context: "Open", reason }]);
+  });
+
+  it("accounts for every candidate and exclusion, including invalid color", () => {
+    const result = evaluateIconContrast([
+      sample(),
+      sample({ paint: "not-a-color" }),
+      sample({ status: "disabled-control" }),
+      sample({ status: "decorative-standalone" }),
+      sample({ status: "hidden" }),
+    ]);
+    expect(result.candidates).toBe(result.measured + result.unverified.length);
+    expect(
+      result.candidates +
+        result.excludedDisabled +
+        result.excludedDecorative +
+        result.excludedHidden,
+    ).toBe(5);
+    expect(result.ok).toBe(false);
+    expect(evaluateIconContrast([]).ok).toBe(true);
+  });
+
+  it("names a replacement icon failure even when total findings stay equal", () => {
+    const baselineIcons = evaluateIconContrast([sample({ context: "Old", paint: "#222222" })]);
+    const icons = evaluateIconContrast([sample({ context: "New", paint: "#222222" })]);
+    const result = evaluateNoBreakage({
+      storyRendered: true,
+      offScaleViolations: 0,
+      baselineOffScaleViolations: 0,
+      contrast: { measured: 1, unmeasurable: 0, violations: [] },
+      baselineContrastViolations: 0,
+      icons,
+      baselineIcons,
+    });
+    expect(result.ok).toBe(false);
+    expect(result.failures[0]).toContain("New");
+    expect(result.failures[0]).not.toContain("Old");
+    const sameDebt = evaluateNoBreakage({
+      storyRendered: true,
+      offScaleViolations: 0,
+      baselineOffScaleViolations: 0,
+      contrast: { measured: 1, unmeasurable: 0, violations: [] },
+      baselineContrastViolations: 0,
+      icons: baselineIcons,
+      baselineIcons,
+    });
+    expect(sameDebt.ok).toBe(true); // Attribution only. Absolute icons.ok still fails.
+    expect(baselineIcons.ok).toBe(false);
+  });
+
+  it("preserves legacy text-only calls but rejects an incomplete icon pair", () => {
+    const textOnly = {
+      storyRendered: true,
+      offScaleViolations: 0,
+      baselineOffScaleViolations: 0,
+      contrast: { measured: 1, unmeasurable: 0, violations: [] },
+      baselineContrastViolations: 0,
+    };
+    expect(evaluateNoBreakage(textOnly).ok).toBe(true);
+    expect(evaluateNoBreakage({ ...textOnly, icons: cleanIcons }).ok).toBe(false);
+    expect(evaluateNoBreakage({ ...textOnly, baselineIcons: cleanIcons }).ok).toBe(false);
+  });
+});