@fibery/ui-kit 2.1.1 → 3.0.0

package/src/palettes/diff-colors.test.ts

@@ -0,0 +1,416 @@
+// oxlint-disable typescript/ban-ts-comment
+// @ts-ignore node out of frontend scope
+import {mkdtempSync, writeFileSync} from "node:fs";
+// @ts-ignore node out of frontend scope
+import {tmpdir} from "node:os";
+// @ts-ignore node out of frontend scope
+import {join} from "node:path";
+
+import {
+  computeColorReport,
+  extractColorOrThrow,
+  extractLcLabel,
+  findTestAnchor,
+  readSnapshotBaseline,
+  swatch,
+  withColorDiff,
+} from "./diff-colors";
+
+// oxlint-disable-next-line no-control-regex
+const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
+
+describe("extractColorOrThrow", () => {
+  test("hex 6", () => {
+    expect(extractColorOrThrow("#abcdef")).toMatchInlineSnapshot(`"#abcdef"`);
+  });
+
+  test("hex 8 (with alpha)", () => {
+    expect(extractColorOrThrow("#abcdef80")).toMatchInlineSnapshot(`"#abcdef80"`);
+  });
+
+  test("hex case-insensitive", () => {
+    expect(extractColorOrThrow("#ABCDEF")).toMatchInlineSnapshot(`"#ABCDEF"`);
+  });
+
+  test("hex embedded in larger string", () => {
+    expect(extractColorOrThrow("border: 1px solid #ff0000")).toMatchInlineSnapshot(`"#ff0000"`);
+  });
+
+  test("rgb() converts to hex", () => {
+    expect(extractColorOrThrow("rgb(255, 0, 0)")).toMatchInlineSnapshot(`"#FF0000"`);
+  });
+
+  test("rgba() converts to hex with alpha", () => {
+    expect(extractColorOrThrow("rgba(0, 0, 0, 0.5)")).toMatchInlineSnapshot(`"#00000080"`);
+  });
+
+  test("oklch() converts to hex", () => {
+    expect(extractColorOrThrow("oklch(0.63 0.26 29)")).toMatchInlineSnapshot(`"#FF0001"`);
+  });
+
+  test("non-color string returns null", () => {
+    expect(extractColorOrThrow("hello world")).toMatchInlineSnapshot(`null`);
+  });
+
+  test("invalid color shape returns null", () => {
+    expect(extractColorOrThrow("rgb(not-a-color)")).toMatchInlineSnapshot(`null`);
+  });
+});
+
+describe("extractLcLabel", () => {
+  test("single bgLc=N; prefix", () => {
+    expect(extractLcLabel("bgLc=6;         #3F3B3A   | hsl(  12   4%  24%) | oklch(0.36 0.01  34 )"))
+      .toMatchInlineSnapshot(`
+      {
+        "bgLc": "6",
+      }
+    `);
+  });
+
+  test("multiple key=value; prefixes", () => {
+    expect(extractLcLabel("bgLc=6; apca=42; #3F3B3A | oklch(0.36 0.01 34)")).toMatchInlineSnapshot(`
+      {
+        "apca": "42",
+        "bgLc": "6",
+      }
+    `);
+  });
+
+  test("non-numeric values still parsed", () => {
+    expect(extractLcLabel("mode=dark; tone=warm; #abcdef")).toMatchInlineSnapshot(`
+      {
+        "mode": "dark",
+        "tone": "warm",
+      }
+    `);
+  });
+
+  test("no key=value prefix returns empty record", () => {
+    expect(extractLcLabel("#abcdef")).toEqual({});
+  });
+
+  test("missing semicolon stops parsing", () => {
+    expect(extractLcLabel("bgLc=6 #3F3B3A")).toEqual({});
+  });
+});
+
+describe("swatch", () => {
+  // Avoid toMatchInlineSnapshot here — pretty-format strips ESC (\x1b) when
+  // re-serializing to the source file, so the diff is visually invisible.
+  test("renders ANSI 24-bit background escape", () => {
+    expect(swatch("#ff0000")).toBe("\x1b[48;2;255;0;0m  \x1b[0m");
+  });
+
+  test("ignores alpha byte (uses first 6 hex chars)", () => {
+    expect(swatch("#0000ff80")).toBe("\x1b[48;2;0;0;255m  \x1b[0m");
+  });
+});
+
+describe("computeColorReport", () => {
+  test("identical defs → no changes", () => {
+    expect(computeColorReport({a: "#ff0000"}, {a: "#ff0000"})).toMatchInlineSnapshot(`[]`);
+  });
+
+  test("string value diff produces a single row at path", () => {
+    const report = computeColorReport({a: "#ff0000"}, {a: "#00ff00"});
+    expect(report.length).toBe(1);
+    expect((report[0] as {path: string}).path).toBe("a");
+  });
+
+  test("key=value; prefixes produce 'X->Y' columns when changed", () => {
+    const report = computeColorReport(
+      {a: "bgLc=6; apca=42; #3F3B3A | oklch(0.36 0.01 34)"},
+      {a: "bgLc=2; apca=42; #2D2D2D | oklch(0.3 0 none)"}
+    );
+    expect(report.length).toBe(1);
+    const row = report[0] as Record<string, {[k: symbol]: () => string}>;
+    const read = (col: object) =>
+      Object.getOwnPropertySymbols(col)
+        .map((s) => (col as Record<symbol, () => string>)[s]())
+        .join("");
+    expect(read(row.bgLc)).toBe("2→6");
+    expect(read(row.apca)).toBe("42");
+  });
+
+  test("'none' values are skipped", () => {
+    const consoleErr = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(computeColorReport({a: "none"}, {a: "#ff0000"})).toEqual([]);
+    expect(computeColorReport({a: "#ff0000"}, {a: "none"})).toEqual([]);
+    consoleErr.mockRestore();
+  });
+
+  test("non-color strings are skipped", () => {
+    const consoleErr = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(computeColorReport({a: "0.5"}, {a: "0.7"})).toEqual([]);
+    consoleErr.mockRestore();
+  });
+
+  test("type mismatch (string vs array) skips key", () => {
+    const consoleErr = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(computeColorReport({a: "#ff0000"}, {a: ["#ff0000", "#00ff00"]})).toEqual([]);
+    consoleErr.mockRestore();
+  });
+
+  test("missing key (one side undefined) is skipped", () => {
+    const consoleErr = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(computeColorReport({a: "#ff0000"}, {b: "#ff0000"})).toEqual([]);
+    consoleErr.mockRestore();
+  });
+
+  test("flat array (non-pair) uses [i] suffix", () => {
+    const report = computeColorReport({a: ["#ff0000", "#00ff00", "#0000ff"]}, {a: ["#ff0000", "#aa00aa", "#0000ff"]});
+    expect(report.map((r) => (r as {path: string}).path)).toMatchInlineSnapshot(`
+      [
+        "a[1]",
+      ]
+    `);
+  });
+
+  test("object value uses .key suffix per field (e.g. {fg, bg})", () => {
+    const report = computeColorReport({a: {bg: "#ff0000", fg: "#00ff00"}}, {a: {bg: "#aa0000", fg: "#00ff00"}});
+    expect(report.map((r) => (r as {path: string}).path)).toMatchInlineSnapshot(`
+      [
+        "a.bg",
+      ]
+    `);
+  });
+
+  test("pair array uses .light/.dark suffix and groups light-first then dark", () => {
+    const report = computeColorReport(
+      {a: ["#ff0000", "#000000"], b: ["#00ff00", "#111111"]},
+      {a: ["#aa0000", "#222222"], b: ["#00aa00", "#333333"]}
+    );
+    expect(report.map((r) => (r as {path: string}).path)).toMatchInlineSnapshot(`
+      [
+        "a.light",
+        "b.light",
+        "a.dark",
+        "b.dark",
+      ]
+    `);
+  });
+
+  test("non-pair array of [light,dark] tuples uses [i].light/.dark suffix", () => {
+    // length 3 → not a pair at the top level → top index becomes [i]; each
+    // inner tuple is then recognised as a [light,dark] pair.
+    const report = computeColorReport(
+      {
+        a: [
+          ["#ff0000", "#000000"],
+          ["#00ff00", "#111111"],
+          ["#0000ff", "#222222"],
+        ],
+      },
+      {
+        a: [
+          ["#aa0000", "#aaaaaa"],
+          ["#00aa00", "#bbbbbb"],
+          ["#0000aa", "#cccccc"],
+        ],
+      }
+    );
+    expect(report.map((r) => (r as {path: string}).path)).toMatchInlineSnapshot(`
+      [
+        "a[0].light",
+        "a[1].light",
+        "a[2].light",
+        "a[0].dark",
+        "a[1].dark",
+        "a[2].dark",
+      ]
+    `);
+  });
+
+  test("top-level pair of [light,dark] tuples nests .light/.dark twice", () => {
+    // length 2 → outer is treated as a pair → paths nest .light/.dark twice.
+    const report = computeColorReport(
+      {
+        a: [
+          ["#ff0000", "#000000"],
+          ["#00ff00", "#111111"],
+        ],
+      },
+      {
+        a: [
+          ["#aa0000", "#222222"],
+          ["#00aa00", "#333333"],
+        ],
+      }
+    );
+    expect(report.map((r) => (r as {path: string}).path)).toMatchInlineSnapshot(`
+      [
+        "a.light.light",
+        "a.dark.light",
+        "a.light.dark",
+        "a.dark.dark",
+      ]
+    `);
+  });
+});
+
+describe("findTestAnchor", () => {
+  test("top-level test", () => {
+    const src = `test("foo", () => { expect(1).toBe(1); });\n`;
+    expect(findTestAnchor(src, "foo")).toBe(0);
+  });
+
+  test("describe > test (vitest separator)", () => {
+    const src = `describe("group", () => { test("inner", () => {}); });`;
+    const pos = findTestAnchor(src, "group > inner");
+    expect(pos).toBe(src.indexOf(`test("inner"`));
+  });
+
+  test("nested describes (vitest separator)", () => {
+    const src = `describe("a", () => { describe("b", () => { test("inner", () => {}); }); });`;
+    const pos = findTestAnchor(src, "a > b > inner");
+    expect(pos).toBe(src.indexOf(`test("inner"`));
+  });
+
+  test("jest space separator falls back when no ' > '", () => {
+    const src = `describe("group", () => { test("inner", () => {}); });`;
+    const pos = findTestAnchor(src, "group inner");
+    expect(pos).toBe(src.indexOf(`test("inner"`));
+  });
+
+  test("missing test returns -1", () => {
+    expect(findTestAnchor(`test("foo", () => {});`, "missing")).toBe(-1);
+  });
+});
+
+describe("readSnapshotBaseline", () => {
+  const dir = mkdtempSync(join(tmpdir(), "diff-colors-"));
+
+  function write(name: string, content: string) {
+    const path = join(dir, name);
+    writeFileSync(path, content);
+    return path;
+  }
+
+  test("empty toMatchInlineSnapshot() returns null", () => {
+    const path = write("empty.ts", `test("foo", () => {\n  expect(x).toMatchInlineSnapshot();\n});\n`);
+    expect(readSnapshotBaseline(path, "foo")).toBeNull();
+  });
+
+  test("empty toMatchInlineSnapshot( ) with whitespace returns null", () => {
+    const path = write("empty-ws.ts", `test("foo", () => {\n  expect(x).toMatchInlineSnapshot(  );\n});\n`);
+    expect(readSnapshotBaseline(path, "foo")).toBeNull();
+  });
+
+  test("single-line snapshot returns null (no diffable baseline)", () => {
+    const path = write("single.ts", `test("foo", () => {\n  expect(x).toMatchInlineSnapshot(\`{}\`);\n});\n`);
+    expect(readSnapshotBaseline(path, "foo")).toBeNull();
+  });
+
+  test("multi-line snapshot is parsed as JSON ColorDefs", () => {
+    const path = write(
+      "multi.ts",
+      [
+        `test("foo", () => {`,
+        `  expect(x).toMatchInlineSnapshot(\`\n    {\n      "a": "#ff0000",\n      "b": "#00ff00",\n    }\n  \`);`,
+        `});`,
+        ``,
+      ].join("\n")
+    );
+    expect(readSnapshotBaseline(path, "foo")).toMatchInlineSnapshot(`
+      {
+        "a": "#ff0000",
+        "b": "#00ff00",
+      }
+    `);
+  });
+
+  test("describe > test anchor resolves correctly", () => {
+    const path = write(
+      "nested.ts",
+      [
+        `describe("group", () => {`,
+        `  test("foo", () => {`,
+        `    expect(x).toMatchInlineSnapshot(\`\n      {\n        "a": "#abcdef",\n      }\n    \`);`,
+        `  });`,
+        `});`,
+        ``,
+      ].join("\n")
+    );
+    expect(readSnapshotBaseline(path, "group > foo")).toMatchInlineSnapshot(`
+      {
+        "a": "#abcdef",
+      }
+    `);
+  });
+
+  test("missing test name throws", () => {
+    const path = write("missing.ts", `test("foo", () => {});\n`);
+    expect(() => readSnapshotBaseline(path, "missing")).toThrow(/no anchor/);
+  });
+
+  test("test anchor without toMatchInlineSnapshot throws", () => {
+    const path = write("no-snap.ts", `test("foo", () => { expect(1).toBe(1); });\n`);
+    expect(() => readSnapshotBaseline(path, "foo")).toThrow(/no toMatchInlineSnapshot/);
+  });
+
+  test("when current test is empty but a later test has multi-line, picks the empty one", () => {
+    const path = write(
+      "ordering.ts",
+      [
+        `test("first", () => {`,
+        `  expect(x).toMatchInlineSnapshot();`,
+        `});`,
+        `test("second", () => {`,
+        `  expect(x).toMatchInlineSnapshot(\`\n    {\n      "a": "#ff0000",\n    }\n  \`);`,
+        `});`,
+        ``,
+      ].join("\n")
+    );
+    expect(readSnapshotBaseline(path, "first")).toBeNull();
+  });
+});
+
+describe("withColorDiff", () => {
+  test("returns input unchanged when baseline is empty (smoke)", () => {
+    const out = withColorDiff({foo: "#ff0000"});
+    expect(out).toEqual({foo: "#ff0000"});
+    // Empty baseline → no diff computed.
+    expect(out).toMatchInlineSnapshot(`
+      {
+        "foo": "#ff0000",
+      }
+    `);
+  });
+
+  test("logs nothing when baseline matches actual", () => {
+    const consoleTable = vi.spyOn(console, "table").mockImplementation(() => {});
+    const actual = withColorDiff({a: "#ff0000", b: "#00ff00"});
+    expect(consoleTable).not.toHaveBeenCalled();
+    consoleTable.mockRestore();
+    // The pinned snapshot below doubles as the baseline withColorDiff reads.
+    expect(actual).toMatchInlineSnapshot(`
+      {
+        "a": "#ff0000",
+        "b": "#00ff00",
+      }
+    `);
+  });
+
+  test("calls console.table with diff rows when baseline differs", () => {
+    let captured: object[] | null = null;
+    const consoleTable = vi.spyOn(console, "table").mockImplementation((arg) => {
+      captured = arg as object[];
+    });
+    withColorDiff({a: "#00ff00"});
+    consoleTable.mockRestore();
+
+    expect(captured).not.toBeNull();
+    const paths = (captured as unknown as Array<{path: string}>).map((r) => r.path);
+    expect(paths).toEqual(["a"]);
+    // Baseline differs from actual ("#ff0000" vs "#00ff00") so diff fires.
+    expect({a: "#ff0000"}).toMatchInlineSnapshot(`
+      {
+        "a": "#ff0000",
+      }
+    `);
+  });
+
+  test("strips ANSI escapes when capturing diff output (helper sanity)", () => {
+    expect(stripAnsi("\x1b[31mred\x1b[0m")).toBe("red");
+  });
+});