140 lines
4.9 KiB
TypeScript
140 lines
4.9 KiB
TypeScript
// @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 registered token exactly once", () => {
|
|
const stylesheet = ekklesiaDesignTokenStylesheet();
|
|
|
|
for (const token of ekklesiaDesignTokens.list()) {
|
|
expect(stylesheet.split(`${token.cssVariable}:`).length).toBe(2);
|
|
}
|
|
});
|
|
|
|
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();
|
|
});
|
|
});
|