48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
import { test, expect } from "bun:test";
|
|
import { readFileSync } from "node:fs";
|
|
import { renderComponent } from "../../test/src/index.ts";
|
|
import { renderDocument } from "../../ssr/src/index.ts";
|
|
import { renderThemeCss, resolveThemeConfig, DEFAULT_THEMES } from "../src/theme.ts";
|
|
import type { DesignSystem } from "../../design-system/src/index.ts";
|
|
import { Window } from "happy-dom";
|
|
|
|
test("legacy Button inherits opted-in tokens after SSR style extraction and mode switching", async () => {
|
|
const system: DesignSystem = {
|
|
schemaVersion: 1,
|
|
id: "square",
|
|
name: "Square",
|
|
version: "1",
|
|
tokens: { radius: { type: "dimension", value: "0", legacy: "radius-sm" } },
|
|
modes: { light: {}, dark: {} },
|
|
defaultMode: "dark",
|
|
};
|
|
const source = readFileSync(new URL("../../ui/components/button.wrn", import.meta.url), "utf8");
|
|
const body = await renderComponent(source, { label: "Save", variant: "outline" });
|
|
const baseline = renderThemeCss(resolveThemeConfig());
|
|
const css = renderThemeCss(
|
|
resolveThemeConfig({ designSystem: { system }, themes: { dark: { "radius-sm": "7px" } } }),
|
|
);
|
|
const extraHead = `<style id="design-theme">${css}</style>`;
|
|
const html = renderDocument({
|
|
meta: {},
|
|
body,
|
|
extraHead,
|
|
htmlAttrs: ' data-theme="dark"',
|
|
styleNonce: "design-test",
|
|
});
|
|
expect(html.indexOf(extraHead)).toBeLessThan(html.indexOf("data-wrnexus-style"));
|
|
expect(html).toContain('nonce="design-test"');
|
|
const window = new Window();
|
|
try {
|
|
window.document.write(html);
|
|
const button = window.document.querySelector("button.wrn-btn")!;
|
|
expect(window.getComputedStyle(button).borderRadius).toBe("7px");
|
|
window.document.documentElement.dataset.theme = "light";
|
|
expect(window.getComputedStyle(button).borderRadius).toBe("0px");
|
|
window.document.querySelector("#design-theme")!.textContent = baseline;
|
|
expect(window.getComputedStyle(button).borderRadius).toBe(DEFAULT_THEMES.light!["radius-sm"]!);
|
|
} finally {
|
|
await window.happyDOM.close();
|
|
}
|
|
});
|