Files
WRNexusJS/packages/ui/test/ui.test.ts
T

90 lines
3.3 KiB
TypeScript

import { expect, test } from "bun:test";
import { readFileSync } from "node:fs";
import { join } from "node:path";
import { compileWireFile } from "../../compiler/src/index.ts";
import { uiComponentNames, uiComponentsDir, uiCss } from "../src/index.ts";
test("bundled UI assets are discoverable and readable", () => {
expect(uiComponentNames()).toContain("Button");
expect(uiComponentNames()).toContain("FAQAccordion");
expect(uiComponentNames()).toContain("AnnouncementBar");
expect(uiComponentNames()).toContain("BackToTop");
expect(readFileSync(join(uiComponentsDir(), "Button.wrn"), "utf8")).toContain("component Button");
expect(uiCss()).toContain("--wire-");
});
test("generated component reference documents every bundled component and its props", () => {
const reference = JSON.parse(
readFileSync(join(uiComponentsDir(), "..", "component-reference.json"), "utf8"),
) as { count: number; components: Array<{ name: string; props: Array<{ name: string }> }> };
expect(reference.count).toBe(uiComponentNames().length);
expect(reference.count).toBeGreaterThanOrEqual(891);
expect(reference.components.map((component) => component.name)).toEqual(
expect.arrayContaining(uiComponentNames()),
);
expect(reference.components.find((component) => component.name === "Button")?.props).toEqual(
expect.arrayContaining([expect.objectContaining({ name: "label" })]),
);
});
test("PDF minimum-release and essential build-first components are bundled", () => {
const required = [
"Typography",
"Form",
"FormLabel",
"FormHelpText",
"FormError",
"LoadingButton",
"Combobox",
"MultiSelect",
"TimePicker",
"DateTimePicker",
"RecurringSchedulePicker",
"QuietHoursPicker",
"ConfirmationDialog",
"DataTable",
"FilterBar",
"MegaMenu",
"DesktopNavigation",
"ProductsMegaMenu",
"MobileNavigation",
"MarketingPageShell",
"ProductPageShell",
"LegalPageShell",
"ProductCard",
"MetricGrid",
"FAQ",
"PricingComparisonTable",
"SDKTabs",
"LegalTableOfContents",
"CookiePreferencesDialog",
];
expect(uiComponentNames()).toEqual(expect.arrayContaining(required));
});
test("component-system CSS includes responsive, theme-token, focus, and reduced-motion rules", () => {
const css = uiCss();
expect(css).toContain("@media (max-width: 768px)");
expect(css).toContain("@media (max-width: 480px)");
expect(css).toContain("@media (prefers-reduced-motion: reduce)");
expect(css).toContain(":focus-visible");
expect(css).toContain("var(--wire-color-surface)");
expect(css).toContain("min-height: 44px");
expect(css).toContain("--wire-motion-base");
expect(css).toContain("--wire-ease-emphasized");
expect(css).toContain("@keyframes wire-component-enter");
expect(css).toContain("@keyframes wire-dialog-enter");
expect(css).toContain("@media (hover: hover) and (pointer: fine)");
expect(css).toContain("--color-violet-600: var(--wire-color-primary)");
expect(css).toContain("--color-blue-600: var(--wire-color-info)");
expect(css).toContain("--color-red-600: var(--wire-color-danger)");
});
test("every bundled UI component compiles", () => {
for (const name of uiComponentNames()) {
const path = join(uiComponentsDir(), `${name}.wrn`);
expect(() => compileWireFile(readFileSync(path, "utf8"), path)).not.toThrow();
}
});