@servicetitan/hammer-token 2.5.1 → 3.0.0

package/src/utils/__tests__/sd-build-configs.test.js

@@ -0,0 +1,306 @@
+import { describe, it, expect } from "vitest";
+import {
+  isSemanticToken,
+  isComponentToken,
+  createPrimitiveConfig,
+  createThemeConfig,
+  createComponentConfig,
+} from "../sd-build-configs.js";
+
+// We also need to test createPlatform and createCssUtilsFiles indirectly
+// through createPrimitiveConfig / createThemeConfig.
+
+// ---------------------------------------------------------------------------
+// isSemanticToken
+// ---------------------------------------------------------------------------
+
+describe("isSemanticToken", () => {
+  it("returns true when filePath is absent", () => {
+    expect(isSemanticToken({})).toBe(true);
+  });
+
+  it("returns false for primitive tokens", () => {
+    expect(
+      isSemanticToken({ filePath: "src/global/primitive/color.tokens.json" }),
+    ).toBe(false);
+  });
+
+  it("returns false for component tokens", () => {
+    expect(
+      isSemanticToken({
+        filePath: "src/theme/core/component/button.tokens.json",
+      }),
+    ).toBe(false);
+  });
+
+  it("returns true for semantic theme tokens", () => {
+    expect(
+      isSemanticToken({ filePath: "src/theme/core/background.tokens.json" }),
+    ).toBe(true);
+  });
+
+  it("returns true for status tokens (no 'primitive' or '/component/' in path)", () => {
+    expect(
+      isSemanticToken({ filePath: "src/theme/core/status.tokens.json" }),
+    ).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isComponentToken
+// ---------------------------------------------------------------------------
+
+describe("isComponentToken", () => {
+  it("returns true when filePath contains /component/", () => {
+    expect(
+      isComponentToken({
+        filePath: "src/theme/core/component/button.tokens.json",
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when filePath does not contain /component/", () => {
+    expect(
+      isComponentToken({ filePath: "src/theme/core/background.tokens.json" }),
+    ).toBe(false);
+  });
+
+  it("returns falsy when filePath is absent", () => {
+    expect(isComponentToken({})).toBeFalsy();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createPrimitiveConfig
+// ---------------------------------------------------------------------------
+
+describe("createPrimitiveConfig", () => {
+  it("returns a configuration object with source", () => {
+    const config = createPrimitiveConfig();
+    expect(config).toHaveProperty("source");
+    expect(config.source).toContain("src/global/primitive/*.tokens.json");
+  });
+
+  it("includes the dtcg/set-token-names preprocessor", () => {
+    const config = createPrimitiveConfig();
+    expect(config.preprocessors).toContain("dtcg/set-token-names");
+  });
+
+  it("has scss, js, and css platforms", () => {
+    const config = createPrimitiveConfig();
+    expect(config.platforms).toHaveProperty("scss");
+    expect(config.platforms).toHaveProperty("js");
+    expect(config.platforms).toHaveProperty("css");
+  });
+
+  it("scss platform uses dtcg transformGroup", () => {
+    const config = createPrimitiveConfig();
+    expect(config.platforms.scss.transformGroup).toBe("dtcg");
+  });
+
+  it("scss platform outputs to build/web/core/", () => {
+    const config = createPrimitiveConfig();
+    expect(config.platforms.scss.buildPath).toBe("build/web/core/");
+  });
+
+  it("scss platform has primitive.scss and primitive-variables.scss files", () => {
+    const config = createPrimitiveConfig();
+    const destinations = config.platforms.scss.files.map((f) => f.destination);
+    expect(destinations).toContain("primitive.scss");
+    expect(destinations).toContain("primitive-variables.scss");
+  });
+
+  it("css platform has 8 files (2 prefixes × 4 types)", () => {
+    const config = createPrimitiveConfig();
+    expect(config.platforms.css.files).toHaveLength(8);
+  });
+
+  it("css platform files include both prefixed and unprefixed variants", () => {
+    const config = createPrimitiveConfig();
+    const destinations = config.platforms.css.files.map((f) => f.destination);
+    expect(destinations).toContain("utils.css");
+    expect(destinations).toContain("a2-utils.css");
+    expect(destinations).toContain("color.css");
+    expect(destinations).toContain("a2-color.css");
+  });
+
+  it("css platform color filter accepts color-prefixed token names", () => {
+    const config = createPrimitiveConfig();
+    const colorFile = config.platforms.css.files.find(
+      (f) => f.destination === "color.css",
+    );
+    expect(colorFile).toBeDefined();
+    expect(colorFile.filter({ path: ["color", "neutral", "0"] })).toBe(true);
+    expect(colorFile.filter({ path: ["size", "4"] })).toBe(false);
+  });
+
+  it("css platform font filter accepts font-prefixed token names", () => {
+    const config = createPrimitiveConfig();
+    const fontFile = config.platforms.css.files.find(
+      (f) => f.destination === "font.css",
+    );
+    expect(fontFile).toBeDefined();
+    expect(fontFile.filter({ path: ["font", "family", "base"] })).toBe(true);
+    expect(fontFile.filter({ path: ["color", "primary"] })).toBe(false);
+  });
+
+  it("css platform spacing filter accepts size-prefixed token names", () => {
+    const config = createPrimitiveConfig();
+    const spacingFile = config.platforms.css.files.find(
+      (f) => f.destination === "spacing.css",
+    );
+    expect(spacingFile).toBeDefined();
+    expect(spacingFile.filter({ path: ["size", "4"] })).toBe(true);
+    expect(spacingFile.filter({ path: ["color", "primary"] })).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createThemeConfig
+// ---------------------------------------------------------------------------
+
+describe("createThemeConfig", () => {
+  it("has both include and source arrays", () => {
+    const config = createThemeConfig();
+    expect(Array.isArray(config.include)).toBe(true);
+    expect(Array.isArray(config.source)).toBe(true);
+    expect(config.include.length).toBeGreaterThan(0);
+    expect(config.source).toContain("src/theme/**/*.tokens.json");
+  });
+
+  it("includes the dtcg/set-token-names preprocessor", () => {
+    const config = createThemeConfig();
+    expect(config.preprocessors).toContain("dtcg/set-token-names");
+  });
+
+  it("has scss, js, and css platforms", () => {
+    const config = createThemeConfig();
+    expect(config.platforms).toHaveProperty("scss");
+    expect(config.platforms).toHaveProperty("js");
+    expect(config.platforms).toHaveProperty("css");
+  });
+
+  it("scss platform has semantic.scss and semantic-variables.scss with isSemanticToken filter", () => {
+    const config = createThemeConfig();
+    const destinations = config.platforms.scss.files.map((f) => f.destination);
+    expect(destinations).toContain("semantic.scss");
+    expect(destinations).toContain("semantic-variables.scss");
+
+    // Verify filter is applied
+    config.platforms.scss.files.forEach((f) => {
+      expect(f).toHaveProperty("filter");
+    });
+  });
+
+  it("css platform has 10 files (2 prefixes × 5 types including borders)", () => {
+    const config = createThemeConfig();
+    expect(config.platforms.css.files).toHaveLength(10);
+  });
+
+  it("css platform includes border files", () => {
+    const config = createThemeConfig();
+    const destinations = config.platforms.css.files.map((f) => f.destination);
+    expect(destinations).toContain("border.css");
+    expect(destinations).toContain("a2-border.css");
+  });
+
+  it("semantic border filter accepts tokens containing 'border'", () => {
+    const config = createThemeConfig();
+    const borderFile = config.platforms.css.files.find(
+      (f) => f.destination === "border.css",
+    );
+    expect(borderFile).toBeDefined();
+    expect(borderFile.filter({ path: ["border", "color", "default"] })).toBe(
+      true,
+    );
+    expect(
+      borderFile.filter({ path: ["background", "color", "primary"] }),
+    ).toBe(false);
+  });
+
+  it("semantic color filter accepts tokens with color-related names", () => {
+    const config = createThemeConfig();
+    const colorFile = config.platforms.css.files.find(
+      (f) => f.destination === "color.css",
+    );
+    expect(colorFile).toBeDefined();
+    expect(colorFile.filter({ path: ["background", "color", "primary"] })).toBe(
+      true,
+    );
+    expect(colorFile.filter({ path: ["foreground", "color", "default"] })).toBe(
+      true,
+    );
+    expect(colorFile.filter({ path: ["status", "color", "danger"] })).toBe(
+      true,
+    );
+    expect(colorFile.filter({ path: ["typography", "body"] })).toBe(false);
+  });
+
+  it("semantic typography filter accepts tokens with 'typography' in name", () => {
+    const config = createThemeConfig();
+    const fontFile = config.platforms.css.files.find(
+      (f) => f.destination === "font.css",
+    );
+    expect(fontFile).toBeDefined();
+    expect(fontFile.filter({ path: ["typography", "body", "font-size"] })).toBe(
+      true,
+    );
+    expect(fontFile.filter({ path: ["size", "4"] })).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createComponentConfig
+// ---------------------------------------------------------------------------
+
+describe("createComponentConfig", () => {
+  it("has include and source for component tokens", () => {
+    const config = createComponentConfig();
+    expect(config.include).toBeDefined();
+    expect(config.source).toContain("src/theme/core/component/*.tokens.json");
+  });
+
+  it("includes the dtcg/set-token-names preprocessor", () => {
+    const config = createComponentConfig();
+    expect(config.preprocessors).toContain("dtcg/set-token-names");
+  });
+
+  it("has scss and js platforms but NOT css (no CSS utils for components)", () => {
+    const config = createComponentConfig();
+    expect(config.platforms).toHaveProperty("scss");
+    expect(config.platforms).toHaveProperty("js");
+    expect(config.platforms).not.toHaveProperty("css");
+  });
+
+  it("scss platform has component.scss and component-variables.scss with isComponentToken filter", () => {
+    const config = createComponentConfig();
+    const destinations = config.platforms.scss.files.map((f) => f.destination);
+    expect(destinations).toContain("component.scss");
+    expect(destinations).toContain("component-variables.scss");
+
+    config.platforms.scss.files.forEach((f) => {
+      expect(f).toHaveProperty("filter");
+    });
+  });
+
+  it("js platform outputs to component.js", () => {
+    const config = createComponentConfig();
+    const destinations = config.platforms.js.files.map((f) => f.destination);
+    expect(destinations).toContain("component.js");
+  });
+
+  it("component filter in scss files accepts component tokens", () => {
+    const config = createComponentConfig();
+    const scssFile = config.platforms.scss.files.find(
+      (f) => f.destination === "component.scss",
+    );
+    expect(
+      scssFile.filter({
+        filePath: "src/theme/core/component/button.tokens.json",
+      }),
+    ).toBe(true);
+    expect(
+      scssFile.filter({ filePath: "src/theme/core/background.tokens.json" }),
+    ).toBe(false);
+  });
+});