58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { test, expect } from "bun:test";
|
|
import {
|
|
resolveThemeConfig,
|
|
renderThemeCss,
|
|
renderActiveThemeCss,
|
|
DEFAULT_THEMES,
|
|
} from "../src/theme.ts";
|
|
import type { DesignSystem } from "../../design-system/src/index.ts";
|
|
|
|
const system: DesignSystem = {
|
|
schemaVersion: 1,
|
|
id: "square",
|
|
name: "Square",
|
|
version: "1.0.0",
|
|
defaultMode: "dark",
|
|
tokens: {
|
|
radius: { type: "dimension", value: "0", legacy: "radius-sm" },
|
|
primary: { type: "color", value: "#123456", legacy: "color-primary" },
|
|
},
|
|
modes: { light: {}, dark: { primary: { type: "color", value: "#abcdef" } } },
|
|
};
|
|
|
|
test("no opt-in preserves existing defaults and accent behavior", () => {
|
|
const theme = resolveThemeConfig();
|
|
expect(theme.themes.dark?.["radius-sm"]).toBe(DEFAULT_THEMES.dark?.["radius-sm"]);
|
|
expect(theme.defaultAccent).toBe("blue");
|
|
});
|
|
test("opt-in maps existing component variables in SSR and switchable CSS", () => {
|
|
const theme = resolveThemeConfig({ designSystem: { system } });
|
|
expect(theme.default).toBe("dark");
|
|
expect(theme.defaultAccent).toBeUndefined();
|
|
expect(theme.themes.light?.["color-primary"]).toBe("#123456");
|
|
expect(theme.themes.dark?.["color-primary"]).toBe("#abcdef");
|
|
expect(renderActiveThemeCss(theme, "dark")).toContain("--wrn-radius-sm:0;");
|
|
expect(renderActiveThemeCss(theme, "dark")).toContain("--wrn-color-primary:#abcdef;");
|
|
expect(renderThemeCss(theme)).toContain('[data-theme="light"]');
|
|
});
|
|
test("explicit app tokens, default, cookies and accent preferences remain authoritative", () => {
|
|
const theme = resolveThemeConfig(
|
|
{
|
|
designSystem: { system },
|
|
default: "light",
|
|
themes: { dark: { "radius-sm": "8px" } },
|
|
accent: { default: "rose" },
|
|
},
|
|
{ defaults: { path: "/product" } },
|
|
);
|
|
expect(theme.default).toBe("light");
|
|
expect(theme.themes.dark?.["radius-sm"]).toBe("8px");
|
|
expect(theme.defaultAccent).toBe("rose");
|
|
expect(theme.themeCookie?.path).toBe("/product");
|
|
});
|
|
test("invalid imported systems fail before emitting stylesheet content", () => {
|
|
expect(() =>
|
|
resolveThemeConfig({ designSystem: { system: { ...system, schemaVersion: 99 } as never } }),
|
|
).toThrow("WRN-DS-VERSION");
|
|
});
|