@servicetitan/hammer-token 2.5.1 → 3.0.0

package/src/utils/__tests__/sd-transforms.test.js

@@ -0,0 +1,336 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { registerTransforms } from "../sd-transforms.js";
+
+// ---------------------------------------------------------------------------
+// Helpers — capture registered transforms/preprocessors from mock SD instance
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates a mock StyleDictionary instance that captures registered
+ * transforms, preprocessors, and transform groups.
+ */
+const createMockSD = () => {
+  const transforms = {};
+  const preprocessors = {};
+  const transformGroups = {};
+
+  return {
+    registerTransform: vi.fn(({ name, type, matcher, transform }) => {
+      transforms[name] = { type, matcher, transform };
+    }),
+    registerPreprocessor: vi.fn(({ name, preprocessor }) => {
+      preprocessors[name] = preprocessor;
+    }),
+    registerTransformGroup: vi.fn(({ name, transforms: group }) => {
+      transformGroups[name] = group;
+    }),
+    _transforms: transforms,
+    _preprocessors: preprocessors,
+    _transformGroups: transformGroups,
+  };
+};
+
+let sd;
+beforeEach(() => {
+  sd = createMockSD();
+  registerTransforms(sd);
+});
+
+// ---------------------------------------------------------------------------
+// Registration sanity checks
+// ---------------------------------------------------------------------------
+
+describe("registerTransforms", () => {
+  it("registers dtcg/name transform", () => {
+    expect(sd._transforms["dtcg/name"]).toBeDefined();
+    expect(sd._transforms["dtcg/name"].type).toBe("name");
+  });
+
+  it("registers dtcg/value transform", () => {
+    expect(sd._transforms["dtcg/value"]).toBeDefined();
+    expect(sd._transforms["dtcg/value"].type).toBe("value");
+  });
+
+  it("registers dtcg/cubic-bezier transform", () => {
+    expect(sd._transforms["dtcg/cubic-bezier"]).toBeDefined();
+    expect(sd._transforms["dtcg/cubic-bezier"].type).toBe("value");
+  });
+
+  it("registers dtcg/color-opacity transform", () => {
+    expect(sd._transforms["dtcg/color-opacity"]).toBeDefined();
+    expect(sd._transforms["dtcg/color-opacity"].type).toBe("value");
+  });
+
+  it("registers dtcg/set-token-names preprocessor", () => {
+    expect(sd._preprocessors["dtcg/set-token-names"]).toBeDefined();
+  });
+
+  it("registers dtcg transform group", () => {
+    expect(sd._transformGroups["dtcg"]).toBeDefined();
+    expect(sd._transformGroups["dtcg"]).toContain("dtcg/name");
+    expect(sd._transformGroups["dtcg"]).toContain("dtcg/value");
+    expect(sd._transformGroups["dtcg"]).toContain("dtcg/cubic-bezier");
+    expect(sd._transformGroups["dtcg"]).toContain("dtcg/color-opacity");
+    expect(sd._transformGroups["dtcg"]).toContain("color/css");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dtcg/name transform
+// ---------------------------------------------------------------------------
+
+describe("dtcg/name transform", () => {
+  const nameTransform = () => sd._transforms["dtcg/name"].transform;
+
+  it("joins path segments with hyphens", () => {
+    expect(nameTransform()({ path: ["color", "primary", "500"] })).toBe(
+      "color-primary-500",
+    );
+  });
+
+  it("filters out $schema path segments", () => {
+    expect(nameTransform()({ path: ["$schema", "color", "neutral"] })).toBe(
+      "color-neutral",
+    );
+  });
+
+  it("filters out any $-prefixed segments", () => {
+    expect(nameTransform()({ path: ["$meta", "size", "4"] })).toBe("size-4");
+  });
+
+  it("falls back to token.name when path is absent", () => {
+    expect(nameTransform()({ name: "color-primary" })).toBe("color-primary");
+  });
+
+  it("cleans up token.name by removing $schema and extra hyphens", () => {
+    expect(nameTransform()({ name: "$schema-color--primary" })).toBe(
+      "color-primary",
+    );
+  });
+
+  it("returns 'unknown' when path is empty and no name", () => {
+    expect(nameTransform()({ path: [] })).toBe("unknown");
+  });
+
+  it("returns 'unknown' when all path segments are filtered", () => {
+    expect(nameTransform()({ path: ["$schema", "$meta"] })).toBe("unknown");
+  });
+
+  it("uses original.path when path is absent", () => {
+    expect(nameTransform()({ original: { path: ["size", "4"] } })).toBe(
+      "size-4",
+    );
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dtcg/value transform
+// ---------------------------------------------------------------------------
+
+describe("dtcg/value transform", () => {
+  const valueTransform = () => sd._transforms["dtcg/value"].transform;
+
+  it("returns the $value property for plain values", () => {
+    expect(valueTransform()({ $value: "#ffffff" })).toBe("#ffffff");
+  });
+
+  it("converts dimension objects { value, unit } to a string", () => {
+    expect(valueTransform()({ $value: { value: 16, unit: "px" } })).toBe(
+      "16px",
+    );
+  });
+
+  it("returns the value as-is for arrays (e.g. cubicBezier)", () => {
+    const arr = [0.4, 0, 0.2, 1];
+    expect(valueTransform()({ $value: arr })).toBe(arr);
+  });
+
+  it("returns undefined when $value is absent", () => {
+    expect(valueTransform()({})).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dtcg/cubic-bezier transform + matcher
+// ---------------------------------------------------------------------------
+
+describe("dtcg/cubic-bezier transform", () => {
+  const cubicTransform = () => sd._transforms["dtcg/cubic-bezier"];
+
+  it("matcher returns true for cubicBezier type tokens", () => {
+    expect(cubicTransform().matcher({ $type: "cubicBezier" })).toBe(true);
+  });
+
+  it("matcher returns false for non-cubicBezier type tokens", () => {
+    expect(cubicTransform().matcher({ $type: "color" })).toBe(false);
+    expect(cubicTransform().matcher({})).toBe(false);
+  });
+
+  it("converts array to cubic-bezier() function string", () => {
+    expect(cubicTransform().transform({ $value: [0.4, 0, 0.2, 1] })).toBe(
+      "cubic-bezier(0.4, 0, 0.2, 1)",
+    );
+  });
+
+  it("returns non-array value as-is", () => {
+    const val = "ease-in-out";
+    expect(cubicTransform().transform({ $value: val })).toBe(val);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dtcg/color-opacity transform + matcher
+// ---------------------------------------------------------------------------
+
+describe("dtcg/color-opacity transform", () => {
+  const colorOpacityTransform = () => sd._transforms["dtcg/color-opacity"];
+
+  it("matcher returns true for color type with composite $value", () => {
+    expect(
+      colorOpacityTransform().matcher({
+        $type: "color",
+        $value: { color: "#fff", alpha: 0.5 },
+      }),
+    ).toBe(true);
+  });
+
+  it("matcher returns false for color type with plain $value", () => {
+    expect(
+      colorOpacityTransform().matcher({ $type: "color", $value: "#ffffff" }),
+    ).toBe(false);
+  });
+
+  it("matcher returns false for non-color type", () => {
+    expect(
+      colorOpacityTransform().matcher({
+        $type: "dimension",
+        $value: { color: "#fff", alpha: 0.5 },
+      }),
+    ).toBe(false);
+  });
+
+  it("returns the $value object unchanged", () => {
+    const val = { color: "#ffffff", alpha: 0.08 };
+    expect(colorOpacityTransform().transform({ $value: val })).toBe(val);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dtcg/set-token-names preprocessor
+// ---------------------------------------------------------------------------
+
+describe("dtcg/set-token-names preprocessor", () => {
+  const preprocessor = () => sd._preprocessors["dtcg/set-token-names"];
+
+  it("sets .name on leaf tokens (objects with $value)", () => {
+    const tokens = {
+      color: {
+        primary: {
+          500: { $value: "#ff0000", $type: "color" },
+        },
+      },
+    };
+    const result = preprocessor()(tokens);
+    expect(result.color.primary["500"].name).toBe("color-primary-500");
+  });
+
+  it("handles multiple levels of nesting", () => {
+    const tokens = {
+      size: {
+        4: { $value: "1rem" },
+        8: { $value: "2rem" },
+      },
+    };
+    const result = preprocessor()(tokens);
+    expect(result.size["4"].name).toBe("size-4");
+    expect(result.size["8"].name).toBe("size-8");
+  });
+
+  it("filters out $-prefixed keys from the name", () => {
+    const tokens = {
+      $schema: "some-schema",
+      color: {
+        neutral: { $value: "#ccc" },
+      },
+    };
+    const result = preprocessor()(tokens);
+    expect(result.color.neutral.name).toBe("color-neutral");
+  });
+
+  it("does not modify non-leaf (group) nodes", () => {
+    const tokens = {
+      color: {
+        primary: {
+          500: { $value: "#ff0000" },
+        },
+      },
+    };
+    const result = preprocessor()(tokens);
+    expect(result.color.name).toBeUndefined();
+    expect(result.color.primary.name).toBeUndefined();
+  });
+
+  it("returns the mutated tokens object", () => {
+    const tokens = { a: { $value: "1" } };
+    const result = preprocessor()(tokens);
+    expect(result).toBe(tokens);
+  });
+
+  it("handles empty token tree", () => {
+    const tokens = {};
+    expect(() => preprocessor()(tokens)).not.toThrow();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dtcg/gradient transform + matcher
+// ---------------------------------------------------------------------------
+
+describe("dtcg/gradient transform", () => {
+  const gradientTransform = () => sd._transforms["dtcg/gradient"];
+
+  it("is registered", () => {
+    expect(gradientTransform()).toBeDefined();
+    expect(gradientTransform().type).toBe("value");
+  });
+
+  it("matcher returns true for gradient tokens with object $value", () => {
+    expect(
+      gradientTransform().matcher({
+        $type: "gradient",
+        $value: { type: "linear", angle: 90, stops: [] },
+      }),
+    ).toBe(true);
+  });
+
+  it("matcher returns false for non-gradient type", () => {
+    expect(
+      gradientTransform().matcher({
+        $type: "color",
+        $value: { type: "linear", angle: 90, stops: [] },
+      }),
+    ).toBe(false);
+  });
+
+  it("matcher returns false for gradient type with non-object $value (reference string)", () => {
+    expect(
+      gradientTransform().matcher({
+        $type: "gradient",
+        $value: "{gradient.primary}",
+      }),
+    ).toBe(false);
+  });
+
+  it("transform passes the gradient value object through unchanged", () => {
+    const gradientValue = { type: "linear", angle: 90, stops: [] };
+    const result = gradientTransform().transform({
+      $type: "gradient",
+      $value: gradientValue,
+    });
+    expect(result).toBe(gradientValue);
+  });
+
+  it("dtcg transform group includes dtcg/gradient", () => {
+    expect(sd._transformGroups["dtcg"]).toContain("dtcg/gradient");
+  });
+});