71 lines
3.1 KiB
TypeScript
71 lines
3.1 KiB
TypeScript
import { expect, test } from "bun:test";
|
|
import {
|
|
CORE_DESIGN_SYSTEMS,
|
|
validateDesignSystem,
|
|
compileDesignSystem,
|
|
} from "@wrnexus/design-system";
|
|
import { STUDIO_PRESETS } from "../src/presets.ts";
|
|
import { studioHtml } from "../src/shell.ts";
|
|
import { StudioSession } from "../src/session.ts";
|
|
|
|
test("fourteen distinct Studio presets validate and compile both modes without changing core presets", () => {
|
|
expect(Object.keys(STUDIO_PRESETS)).toHaveLength(14);
|
|
expect(Object.keys(CORE_DESIGN_SYSTEMS)).toEqual(["square", "soft", "angular"]);
|
|
const signatures = new Set<string>();
|
|
for (const [id, system] of Object.entries(STUDIO_PRESETS)) {
|
|
expect(system.id).toBe(id);
|
|
expect(validateDesignSystem(system)).toEqual([]);
|
|
expect(studioHtml).toContain(`<option value="${id}">${system.name}</option>`);
|
|
signatures.add(JSON.stringify([system.tokens, system.modes]));
|
|
for (const mode of ["light", "dark"])
|
|
expect(() => compileDesignSystem(system, { mode })).not.toThrow();
|
|
}
|
|
expect(signatures.size).toBe(14);
|
|
});
|
|
|
|
test("choosing a new preset stays undoable and never mutates the catalog", () => {
|
|
const session = new StudioSession(STUDIO_PRESETS.square);
|
|
const original = JSON.stringify(STUDIO_PRESETS.swiss);
|
|
session.replace(STUDIO_PRESETS.swiss!, "Selected Swiss");
|
|
session.edit(JSON.stringify({ ...session.valid, name: "My Swiss" }));
|
|
expect(JSON.stringify(STUDIO_PRESETS.swiss)).toBe(original);
|
|
session.undo();
|
|
session.undo();
|
|
expect(session.valid.id).toBe("square");
|
|
});
|
|
|
|
test("revised directions stay distinct and Editorial status tokens remain monochrome", () => {
|
|
const organic = ["soft", "forest", "ember"].map((id) => STUDIO_PRESETS[id]!);
|
|
expect(new Set(organic.map((s) => s.modes!.light!["color.bg"]!.value)).size).toBe(3);
|
|
expect(new Set(organic.map((s) => s.tokens["shape.control"]!.value)).size).toBe(3);
|
|
for (const tokens of [
|
|
STUDIO_PRESETS.editorial!.tokens,
|
|
...Object.values(STUDIO_PRESETS.editorial!.modes!),
|
|
]) {
|
|
for (const name of ["success", "warning", "danger", "info"]) {
|
|
const color = String(tokens[`color.${name}`]!.value);
|
|
expect(color).toMatch(/^#([0-9a-f]{2})\1\1$/i);
|
|
}
|
|
}
|
|
});
|
|
|
|
test("Charcoal / Pink defaults to dark and carries its fonts, geometry and accessible primary contrast", () => {
|
|
const preset = STUDIO_PRESETS.charcoal!;
|
|
expect(preset.defaultMode).toBe("dark");
|
|
expect(preset.googleFonts).toEqual(["Poppins"]);
|
|
expect(preset.modes!.dark!["color.bg"]!.value).toBe("#19181E");
|
|
expect(preset.modes!.dark!["color.primary"]!.value).toBe("#FA3D87");
|
|
expect(preset.modes!.dark!["color.primary-contrast"]!.value).toBe("#000000");
|
|
expect(preset.tokens["shape.control"]!.value).toBe("4px");
|
|
const session = new StudioSession(STUDIO_PRESETS.square);
|
|
session.replace(preset, "Selected Charcoal / Pink");
|
|
const css = compileDesignSystem(session.valid).css;
|
|
expect(css.startsWith('@import url("https://fonts.googleapis.com/css2?family=Poppins')).toBe(
|
|
true,
|
|
);
|
|
expect(css).toContain("font-size:14px");
|
|
expect(css).toContain("letter-spacing:-0.3px");
|
|
session.undo();
|
|
expect(session.valid.id).toBe("square");
|
|
});
|