WRNexusJS/packages/design-system/test/recipes.test.ts

import { test, expect } from "bun:test";
import {
  CORE_DESIGN_SYSTEMS,
  compileDesignSystem,
  validateDesignSystem,
  resolveDesignSystem,
  type DesignSystem,
} from "../src/index.ts";

const sample = (): DesignSystem => ({
  schemaVersion: 1,
  id: "recipe",
  name: "Recipe",
  version: "1",
  tokens: { radius: { type: "dimension", value: "3px" } },
  recipes: {
    Button: { contractVersion: 1, base: { control: { borderRadius: { ref: "radius" } } } },
  },
});
test("three presets compile deterministically in both modes", () => {
  for (const system of Object.values(CORE_DESIGN_SYSTEMS)) {
    expect(validateDesignSystem(system)).toEqual([]);
    for (const mode of ["light", "dark"])
      expect(compileDesignSystem(system, { mode }).recipeCss).toBe(
        compileDesignSystem(structuredClone(system), { mode }).recipeCss,
      );
  }
});

test("switch track stays a pill when control corners change", () => {
  for (const original of Object.values(CORE_DESIGN_SYSTEMS)) {
    const system = structuredClone(original);
    system.tokens["shape.control"]!.value = "0";
    for (const mode of ["light", "dark"]) {
      const css = compileDesignSystem(system, { mode }).recipeCss;
      expect(css).toMatch(/\[data-wrn-owner="Switch"\][^{]*\{[^}]*border-radius:999px/);
    }
  }
});
test("contracts reject unknown components, parts, axes, states, versions and executable style values", () => {
  for (const recipes of [
    { Unknown: { contractVersion: 1 } },
    { Button: { contractVersion: 2 } },
    { Button: { contractVersion: 1, base: { missing: { color: "#fff" } } } },
    { Button: { contractVersion: 1, base: { control: { position: "fixed" } } } },
    { Button: { contractVersion: 1, base: { control: { color: "red;}body{display:none" } } } },
    {
      Button: {
        contractVersion: 1,
        variants: [{ when: { variant: "invented" }, parts: { control: { color: "#fff" } } }],
      },
    },
    {
      Button: {
        contractVersion: 1,
        states: [{ state: "checked", parts: { control: { color: "#fff" } } }],
      },
    },
    { Modal: { contractVersion: 1, base: { panel: { rotate: "2deg" } } } },
  ])
    expect(validateDesignSystem({ ...sample(), recipes })[0]?.code).toBe("WRN-DS-RECIPE");
});
test("recipe token references are checked against property types and missing tokens", () => {
  const system = sample();
  system.recipes!.Button!.base!.control!.borderRadius = { ref: "missing" };
  expect(validateDesignSystem(system)[0]?.code).toBe("WRN-DS-REFERENCE-MISSING");
  system.tokens.radius = { type: "color", value: "#fff" };
  system.recipes!.Button!.base!.control!.borderRadius = { ref: "radius" };
  expect(validateDesignSystem(system)[0]?.code).toBe("WRN-DS-REFERENCE-TYPE");
});
test("inheritance merges base properties and preserves ordered compound/state rules", () => {
  const parent = sample();
  parent.id = "parent";
  const child: DesignSystem = {
    ...sample(),
    extends: ["parent"],
    recipes: {
      Button: {
        contractVersion: 1,
        base: { control: { fontWeight: 700 } },
        variants: [
          { when: { variant: "outline", size: "sm" }, parts: { control: { borderWidth: "2px" } } },
        ],
        states: [{ state: "disabled", parts: { control: { opacity: 0.5 } } }],
      },
    },
  };
  const resolved = resolveDesignSystem(child, { registry: { parent } });
  expect(resolved.recipes.Button?.base?.control).toEqual({
    borderRadius: { ref: "radius" },
    fontWeight: 700,
  });
  const css = compileDesignSystem(child, { registry: { parent } }).recipeCss;
  expect(css.indexOf("font-weight:700")).toBeLessThan(css.indexOf("border-width:2px"));
  expect(css.indexOf("border-width:2px")).toBeLessThan(css.indexOf("opacity:0.5"));
  expect(css).not.toContain("!important");
});

test("mode-dependent recipe values retain mode rules while identical values are deduplicated", () => {
  const system = sample();
  system.modes = {
    light: { radius: { type: "dimension", value: "3px" } },
    dark: { radius: { type: "dimension", value: "9px" } },
  };
  system.defaultMode = "light";
  const css = compileDesignSystem(system).recipeCss;
  expect(css).toContain('[data-theme="dark"]');
  expect(css).toContain("9px");
  expect(css).not.toContain('[data-theme="light"]');
});

test("joined component parts keep their authored geometry instead of receiving independent rounding", () => {
  for (const system of Object.values(CORE_DESIGN_SYSTEMS)) {
    for (const [name, parts] of Object.entries({
      StatsBar: ["item", "content"],
      AuthSplitLayout: ["content"],
      Collapse: ["trigger", "panel", "content"],
      InputNumber: ["button", "input", "content"],
      LayoutSplitter: ["handle"],
    })) {
      for (const part of parts) {
        expect(system.recipes![name]!.base?.[part]?.borderRadius).toBeUndefined();
        expect(system.recipes![name]!.base?.[part]?.boxShadow).toBeUndefined();
      }
    }
  }
});