Ekklesia/packages/design-tokens/tests/registry.test.ts

// @vitest-environment happy-dom
import { describe, expect, it } from "vitest";
import {
  DESIGN_TOKEN_CATEGORIES,
  DESIGN_TOKEN_STYLE_ATTRIBUTE,
  DESIGN_TOKEN_VARIABLE_PREFIX,
  designToken,
  ekklesiaDesignTokens,
  ekklesiaDesignTokenStylesheet,
  installEkklesiaDesignTokens,
} from "../src/index.js";

describe("the Ekklesia design token registry", () => {
  it("is enumerable and deterministic", () => {
    const first = ekklesiaDesignTokens.list();
    const second = ekklesiaDesignTokens.list();

    expect(first).toBe(second);
    expect(Object.isFrozen(first)).toBe(true);
    expect(first.length).toBeGreaterThan(0);
    expect(first.map((token) => token.name)).toEqual(second.map((token) => token.name));
    expect(ekklesiaDesignTokenStylesheet()).toBe(ekklesiaDesignTokenStylesheet());
  });

  it("declares a unique name and CSS variable for every token", () => {
    const names = ekklesiaDesignTokens.list().map((token) => token.name);
    const variables = ekklesiaDesignTokens.list().map((token) => token.cssVariable);

    expect(new Set(names).size).toBe(names.length);
    expect(new Set(variables).size).toBe(variables.length);
    expect(variables.every((variable) => variable.startsWith(DESIGN_TOKEN_VARIABLE_PREFIX))).toBe(
      true,
    );
  });

  it("gives every token a human-readable label, description, and derived category", () => {
    for (const token of ekklesiaDesignTokens.list()) {
      expect(token.label.trim().length).toBeGreaterThan(0);
      expect(token.description.trim().length).toBeGreaterThan(0);
      expect(DESIGN_TOKEN_CATEGORIES).toContain(token.category);
      expect(token.name.startsWith(`${token.category}.`)).toBe(true);
    }
  });

  it("covers the semantic families the platform promises", () => {
    const names = new Set(ekklesiaDesignTokens.list().map((token) => token.name));

    for (const required of [
      "background.page",
      "background.canvas",
      "background.surface",
      "background.raised",
      "background.overlay",
      "background.inset",
      "text.primary",
      "text.secondary",
      "text.muted",
      "text.inverse",
      "text.success",
      "text.warning",
      "text.danger",
      "accent.base",
      "accent.hover",
      "accent.active",
      "accent.focus",
      "border.base",
      "border.divider",
      "state.hover-background",
      "state.pressed-background",
      "state.selected-background",
      "state.disabled-opacity",
      "state.focus-visible-width",
      "typography.family-sans",
      "typography.size-md",
      "typography.weight-bold",
      "typography.line-height-normal",
      "typography.size-heading-1",
      "spacing.md",
      "radius.md",
      "shadow.md",
      "control.height-md",
    ]) {
      expect(names).toContain(required);
    }
  });

  it("pairs every status colour with a non-colour symbol", () => {
    for (const status of ["success", "warning", "danger", "info"]) {
      expect(ekklesiaDesignTokens.has(`status.${status}-background`)).toBe(true);
      expect(ekklesiaDesignTokens.has(`status.${status}-border`)).toBe(true);
      const symbol = ekklesiaDesignTokens.get(`status.${status}-symbol`);
      expect(symbol?.value.length).toBeGreaterThan(0);
    }
  });

  it("hands component code a var() reference rather than a raw colour", () => {
    expect(designToken("text.primary")).toBe("var(--ekklesia-text-primary)");
    expect(ekklesiaDesignTokens.variable("text.primary")).toBe("--ekklesia-text-primary");
  });

  it("emits a stylesheet declaring every token once in its base rule, and again only where it varies", () => {
    const stylesheet = ekklesiaDesignTokenStylesheet();
    const base = stylesheet.slice(0, stylesheet.indexOf("}"));

    for (const token of ekklesiaDesignTokens.list()) {
      expect(base.split(`${token.cssVariable}:`).length, token.name).toBe(2);
      // Once more in each of the two dark rules (system and explicit), and in each of the two
      // reduced-motion rules, and nowhere else (ADR 0060).
      const expected =
        1 + (token.dark === undefined ? 0 : 2) + (token.reduced === undefined ? 0 : 2);
      expect(stylesheet.split(`${token.cssVariable}:`).length - 1, token.name).toBe(expected);
    }
  });

  it("installs the default theme at a document root exactly once and removes what it added", () => {
    const remove = installEkklesiaDesignTokens(document);
    const installedAgain = installEkklesiaDesignTokens(document);

    expect(document.querySelectorAll(`style[${DESIGN_TOKEN_STYLE_ATTRIBUTE}]`).length).toBe(1);
    expect(
      document
        .querySelector(`style[${DESIGN_TOKEN_STYLE_ATTRIBUTE}]`)
        ?.textContent?.includes("--ekklesia-background-page"),
    ).toBe(true);

    installedAgain();
    expect(document.querySelectorAll(`style[${DESIGN_TOKEN_STYLE_ATTRIBUTE}]`).length).toBe(1);

    remove();
    remove();
    expect(document.querySelectorAll(`style[${DESIGN_TOKEN_STYLE_ATTRIBUTE}]`).length).toBe(0);
  });

  it("installs host-scoped values into an isolated shadow root", () => {
    const host = document.createElement("div");
    document.body.appendChild(host);
    const shadow = host.attachShadow({ mode: "open" });

    installEkklesiaDesignTokens(shadow, { scope: "host" });

    const style = shadow.querySelector(`style[${DESIGN_TOKEN_STYLE_ATTRIBUTE}]`);
    expect(style?.textContent?.startsWith(":host {")).toBe(true);
    host.remove();
  });
});