@microsoft/fast-test-harness 0.1.0

package/dist/dts/fixtures/index.d.ts

@@ -0,0 +1,30 @@
+import { toHaveCustomState } from "./assertions.js";
+import { CSRFixture } from "./csr-fixture.js";
+import { SSRFixture } from "./ssr-fixture.js";
+type FixtureOptions = {
+    /**
+     * Additional HTML to insert into the element.
+     */
+    innerHTML: string;
+    /**
+     * Indicates if the test is running in SSR mode.
+     */
+    ssr: boolean;
+    /**
+     * The tag name of the custom element to test.
+     */
+    tagName: string;
+    /**
+     * Additional custom elements to wait for before running the test.
+     */
+    waitFor: string[];
+};
+export type Fixtures = {
+    fastPage: CSRFixture | SSRFixture;
+};
+export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & Fixtures & FixtureOptions, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;
+export declare const expect: import("@playwright/test").Expect<{
+    toHaveCustomState: typeof toHaveCustomState;
+}>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/fixtures/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fixtures/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI9C,KAAK,cAAc,GAAG;IAClB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,GAAG,EAAE,OAAO,CAAC;IAEb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACnB,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,IAAI,yQAmDf,CAAC;AAEH,eAAO,MAAM,MAAM;;EAEjB,CAAC"}

package/dist/dts/fixtures/ssr-fixture.d.ts

@@ -0,0 +1,42 @@
+import type { Page } from "@playwright/test";
+import { CSRFixture, type TemplateOrOptions } from "./csr-fixture.js";
+export declare class SSRFixture extends CSRFixture {
+    private readonly testId?;
+    private readonly testTitle?;
+    /**
+     * Styles buffered before {@link setTemplate} is called.
+     */
+    private pendingStyles;
+    /**
+     * Whether the template has been rendered.
+     */
+    private templateRendered;
+    constructor(page: Page, tagName: string, innerHTML?: string, waitFor?: string[], testId?: string, testTitle?: string);
+    /**
+     * Buffers style tags added before {@link setTemplate} so they can be
+     * included in the generated SSR page. After the template has been
+     * rendered, calls pass through to the page directly.
+     *
+     * @param options - The options for the style tag.
+     * @see {@link Page.addStyleTag}
+     */
+    addStyleTag(options: Parameters<Page["addStyleTag"]>[0]): Promise<void>;
+    /**
+     * Sets up the test fixture by posting the template or configuration
+     * to the SSR generation endpoint.
+     *
+     * This method constructs a request body based on the provided
+     * `templateOrOptions` and the current test context (like `testId`
+     * and `testTitle`). It sends this data to the `/generate-fixture`
+     * endpoint to create a server-side rendered fixture, navigates the
+     * page to the resulting URL, and waits for the page to stabilize.
+     *
+     * @param templateOrOptions - The template configuration.
+     */
+    setTemplate(templateOrOptions?: TemplateOrOptions): Promise<void>;
+    /**
+     * Formats the test title based on the provided test ID.
+     */
+    private formatTestTitle;
+}
+//# sourceMappingURL=ssr-fixture.d.ts.map

package/dist/dts/fixtures/ssr-fixture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-fixture.d.ts","sourceRoot":"","sources":["../../../src/fixtures/ssr-fixture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,qBAAa,UAAW,SAAQ,UAAU;IAgBlC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC;IAhB/B;;OAEG;IACH,OAAO,CAAC,aAAa,CAA4C;IAEjE;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAS;IAEjC,YACI,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,EACf,SAAS,GAAE,MAAW,EACtB,OAAO,GAAE,MAAM,EAAO,EACL,MAAM,CAAC,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,MAAM,EAGtC;IAED;;;;;;;OAOG;IACY,WAAW,CACtB,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAC5C,OAAO,CAAC,IAAI,CAAC,CAMf;IAED;;;;;;;;;;;OAWG;IACY,WAAW,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAoE/E;IAED;;OAEG;IACH,OAAO,CAAC,eAAe;CAqB1B"}

package/dist/dts/fixtures/ssr-fixture.pw.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ssr-fixture.pw.spec.d.ts.map

package/dist/dts/fixtures/ssr-fixture.pw.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-fixture.pw.spec.d.ts","sourceRoot":"","sources":["../../../src/fixtures/ssr-fixture.pw.spec.ts"],"names":[],"mappings":""}

package/dist/dts/index.d.ts

@@ -0,0 +1,7 @@
+export { installDomShim } from "./build/dom-shim.js";
+export { toHaveCustomState } from "./fixtures/assertions.js";
+export { CSRFixture, type FixtureOptions, type InitialTemplateAttributes, type InitialTemplateOptions, type TemplateAttributes, type TemplateOrOptions, type ThemeTokens, } from "./fixtures/csr-fixture.js";
+export { expect, type Fixtures, test } from "./fixtures/index.js";
+export { SSRFixture } from "./fixtures/ssr-fixture.js";
+export { type ComponentRegistration, createSSRRenderer, type RenderResult, type SSRRendererOptions, } from "./ssr/render.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EACH,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,KAAK,QAAQ,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EACH,KAAK,qBAAqB,EAC1B,iBAAiB,EACjB,KAAK,YAAY,EACjB,KAAK,kBAAkB,GAC1B,MAAM,iBAAiB,CAAC"}

package/dist/dts/ssr/entry-client.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=entry-client.d.ts.map

package/dist/dts/ssr/entry-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-client.d.ts","sourceRoot":"","sources":["../../../src/ssr/entry-client.ts"],"names":[],"mappings":""}

package/dist/dts/ssr/render.d.ts

@@ -0,0 +1,127 @@
+/**
+ * SSR rendering powered by `@microsoft/fast-build`'s WASM renderer.
+ *
+ * Provides a high-level `createSSRRenderer()` factory that scans for
+ * component build artifacts (f-templates, stylesheets) and returns a
+ * `render()` function compatible with the test harness server's
+ * `entry-server.ts` contract.
+ *
+ * Supports two layout modes:
+ *
+ * **Multi-component package**: one package contains all
+ * components in subdirectories.
+ * ```ts
+ * const { render } = createSSRRenderer({
+ *     packageName: "@fluentui/web-components",
+ *     tagPrefix: "fluent",
+ * });
+ * ```
+ *
+ * **Per-component packages**: each component is a separate npm package with
+ * flat exports.
+ * ```ts
+ * const { render } = createSSRRenderer({
+ *     tagPrefix: "mai",
+ *     components: [
+ *         { name: "button", packageName: "@mai-ui/button" },
+ *         { name: "checkbox", packageName: "@mai-ui/checkbox" },
+ *     ],
+ * });
+ * ```
+ */
+export interface ComponentRegistration {
+    /**
+     * Component name (e.g., "button"). Combined with `tagPrefix` to
+     * form the tag name.
+     */
+    name: string;
+    /**
+     * The npm package name for this component
+     * (e.g., "@mai-ui/button").
+     */
+    packageName: string;
+}
+export interface SSRRendererOptions {
+    /**
+     * Tag name prefix for custom elements (e.g., "fluent", "mai").
+     */
+    tagPrefix: string;
+    /**
+     * The npm package name used to resolve component build artifacts
+     * when all components live in subdirectories of a single package
+     * (Fluent-style). Mutually exclusive with `components`.
+     */
+    packageName?: string;
+    /**
+     * Explicit list of per-component packages (MAI-style). Each entry
+     * maps a component name to its npm package. Mutually exclusive
+     * with `packageName`.
+     */
+    components?: ComponentRegistration[];
+    /**
+     * Directory containing compiled build artifacts, relative to the
+     * package root. Only used with `packageName`.
+     * @default "dist/esm"
+     */
+    distDir?: string;
+    /**
+     * Stylesheet URL or server-relative path for a global theme
+     * stylesheet to include in every SSR fixture page.
+     *
+     * The value is used directly as the `<link>` tag's `href`.
+     * Callers should provide a fully qualified URL or a
+     * server-relative path.
+     */
+    themeStylesheet?: string;
+}
+export interface RenderResult {
+    /** All f-template definitions concatenated, with styles injected. */
+    template: string;
+    /** The rendered fixture HTML with DSD injected. */
+    fixture: string;
+    /** Preload link tags (empty string when using fast-build). */
+    preloadLinks: string;
+}
+/**
+ * Parse a JavaScript default value string from CEM into a JSON-safe value.
+ * @internal
+ */
+export declare function parseDefaultValue(raw: string): unknown;
+/**
+ * Replace the `{{styles}}` placeholder in an f-template with a
+ * stylesheet `<link>` tag. Falls back to injecting after the opening
+ * `<template>` tag if the placeholder is absent.
+ * @internal
+ */
+export declare function renderTemplate(rawTemplate: string, styles: string): string;
+/**
+ * Build the entry HTML that the WASM renderer processes.
+ * Constructs either a raw HTML fixture or a single custom element
+ * from the query parameters.
+ * @internal
+ */
+export declare function buildEntryHtml(queryObj: Record<string, string>): string;
+/**
+ * Build the state JSON for the WASM renderer from the query
+ * parameters. Includes attribute values and normalised (hyphen-
+ * stripped) variants so bindings like `{{arialabel}}` resolve for
+ * an `aria-label` HTML attribute.
+ * @internal
+ */
+export declare function buildState(queryObj: Record<string, string>): Record<string, unknown>;
+/**
+ * Create an SSR renderer that uses `@microsoft/fast-build`'s WASM
+ * module to render f-templates into declarative shadow DOM on each
+ * request, with full expression evaluation and nested component
+ * support.
+ *
+ * Supports two modes:
+ * - **`packageName`**: Scans a monolithic package's dist directory for
+ *   components in subdirectories (Fluent-style).
+ * - **`components`**: Uses an explicit list of per-component packages
+ *   with flat exports (MAI-style).
+ */
+export declare function createSSRRenderer(options: SSRRendererOptions): {
+    render: (queryObj: Record<string, string>) => RenderResult;
+};
+//# sourceMappingURL=render.d.ts.map

package/dist/dts/ssr/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/ssr/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAOH,MAAM,WAAW,qBAAqB;IAClC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAErC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IACzB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;CACxB;AA4CD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CA6BtD;AA0FD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAa1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAwCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAsBpF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG;IAC5D,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,YAAY,CAAC;CAC9D,CA4IA"}

package/dist/dts/ssr/render.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=render.test.d.ts.map

package/dist/dts/ssr/render.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.test.d.ts","sourceRoot":"","sources":["../../../src/ssr/render.test.ts"],"names":[],"mappings":""}

package/dist/esm/build/dom-shim.js

@@ -0,0 +1,142 @@
+/**
+ * Minimal DOM shim for running FAST Element's `css` and `html` tagged
+ * templates in Node.js. Provides just enough of the DOM API to resolve
+ * `ElementStyles.toString()` and compile `html` templates.
+ *
+ * This module is idempotent — if `globalThis.window` is already defined,
+ * no shims are applied.
+ */
+class ShimNode extends EventTarget {
+}
+class ShimElement extends ShimNode {
+}
+class ShimHTMLElement extends ShimElement {
+    constructor() {
+        super(...arguments);
+        this._shadowRoot = null;
+    }
+    static { this.elementAttributes = new WeakMap(); }
+    get attributes() {
+        return Array.from(ShimHTMLElement.elementAttributes.get(this) ?? []).map(([name, value]) => ({ name, value }));
+    }
+    get shadowRoot() {
+        return this._shadowRoot;
+    }
+    setAttribute(name, value) {
+        let attrs = ShimHTMLElement.elementAttributes.get(this);
+        if (!attrs) {
+            attrs = new Map();
+            ShimHTMLElement.elementAttributes.set(this, attrs);
+        }
+        attrs.set(name, value);
+    }
+    removeAttribute(name) {
+        ShimHTMLElement.elementAttributes.get(this)?.delete(name);
+    }
+    hasAttribute(name) {
+        return ShimHTMLElement.elementAttributes.get(this)?.has(name) ?? false;
+    }
+    getAttribute(name) {
+        const v = ShimHTMLElement.elementAttributes.get(this)?.get(name);
+        return v === undefined ? null : v;
+    }
+    attachShadow(init) {
+        const sr = { host: this };
+        if (init?.mode === "open") {
+            this._shadowRoot = sr;
+        }
+        return sr;
+    }
+    get classList() {
+        return {
+            add() { },
+            remove() { },
+            contains() {
+                return false;
+            },
+            toggle() { },
+        };
+    }
+    get part() {
+        return this.classList;
+    }
+}
+class ShimCSSStyleSheet {
+    constructor() {
+        this.cssRules = [];
+    }
+    replace() { }
+    insertRule(rule, index = 0) {
+        this.cssRules.splice(index, 0, { selectorText: rule.split("{")[0] });
+        return index;
+    }
+}
+class ShimCustomElementRegistry {
+    constructor() {
+        this.__definitions = new Map();
+    }
+    define(name, ctor) {
+        this.__definitions.set(name, {
+            ctor,
+            observedAttributes: ctor.observedAttributes ?? [],
+        });
+    }
+    get(name) {
+        return this.__definitions.get(name)?.ctor;
+    }
+    whenDefined() {
+        return Promise.resolve();
+    }
+}
+class ShimDocument extends ShimNode {
+    constructor() {
+        super(...arguments);
+        this.adoptedStyleSheets = [];
+    }
+    createTreeWalker() {
+        return {};
+    }
+    createTextNode() {
+        return {};
+    }
+    createElement() {
+        return new ShimHTMLElement();
+    }
+}
+class ShimMutationObserver {
+    observe() { }
+    disconnect() { }
+}
+class ShimMediaQueryList {
+    constructor() {
+        this.matches = false;
+    }
+    addEventListener() { }
+    removeEventListener() { }
+}
+export function installDomShim() {
+    if (globalThis.window !== undefined) {
+        return;
+    }
+    globalThis.Node = ShimNode;
+    globalThis.Element = ShimElement;
+    globalThis.HTMLElement = ShimHTMLElement;
+    globalThis.Document = ShimDocument;
+    globalThis.CustomEvent = class extends Event {
+        constructor(type, init) {
+            super(type, init);
+            this.detail = init?.detail ?? null;
+        }
+    };
+    globalThis.CSSStyleSheet = ShimCSSStyleSheet;
+    globalThis.ShadowRoot = class {
+    };
+    globalThis.CustomElementRegistry = ShimCustomElementRegistry;
+    globalThis.MutationObserver = ShimMutationObserver;
+    globalThis.MediaQueryList = ShimMediaQueryList;
+    globalThis.matchMedia = () => new ShimMediaQueryList();
+    globalThis.document = new ShimDocument();
+    globalThis.customElements = new ShimCustomElementRegistry();
+    globalThis.window = globalThis;
+    globalThis.CSS ??= { supports: () => true };
+}

package/dist/esm/build/dom-shim.test.js

@@ -0,0 +1,202 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+// Each test needs a clean globalThis, so we tear down the shim between tests.
+function teardownShim() {
+    for (const key of [
+        "Node",
+        "Element",
+        "HTMLElement",
+        "Document",
+        "CustomEvent",
+        "CSSStyleSheet",
+        "ShadowRoot",
+        "CustomElementRegistry",
+        "MutationObserver",
+        "MediaQueryList",
+        "matchMedia",
+        "document",
+        "customElements",
+        "window",
+        "CSS",
+    ]) {
+        delete globalThis[key];
+    }
+}
+test.describe("installDomShim", () => {
+    test.beforeEach(() => {
+        teardownShim();
+    });
+    async function loadShim() {
+        // Dynamic import so each test gets a fresh evaluation context
+        // after globalThis is cleaned.
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    }
+    test("should assign globals on first call", async () => {
+        await loadShim();
+        assert.ok(globalThis.window !== undefined);
+        assert.ok(globalThis.document !== undefined);
+        assert.ok(globalThis.customElements !== undefined);
+        assert.ok(globalThis.Node !== undefined);
+        assert.ok(globalThis.Element !== undefined);
+        assert.ok(globalThis.HTMLElement !== undefined);
+        assert.ok(globalThis.CSSStyleSheet !== undefined);
+        assert.ok(globalThis.MutationObserver !== undefined);
+        assert.ok(globalThis.matchMedia !== undefined);
+    });
+    test("should be idempotent when window is already defined", async () => {
+        const sentinel = { __sentinel: true };
+        globalThis.window = sentinel;
+        await loadShim();
+        assert.strictEqual(globalThis.window, sentinel);
+        assert.strictEqual(globalThis.document, undefined);
+    });
+    test("should set window to globalThis", async () => {
+        await loadShim();
+        assert.strictEqual(globalThis.window, globalThis);
+    });
+    test("should provide CSS.supports that returns true", async () => {
+        await loadShim();
+        assert.strictEqual(globalThis.CSS.supports("display", "flex"), true);
+    });
+    test("should not overwrite an existing CSS global", async () => {
+        const existing = { supports: () => false };
+        globalThis.CSS = existing;
+        await loadShim();
+        assert.strictEqual(globalThis.CSS, existing);
+    });
+});
+test.describe("ShimHTMLElement", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    });
+    test("should support setAttribute / getAttribute / hasAttribute", () => {
+        const el = new globalThis.HTMLElement();
+        assert.strictEqual(el.hasAttribute("id"), false);
+        assert.strictEqual(el.getAttribute("id"), null);
+        el.setAttribute("id", "test");
+        assert.strictEqual(el.hasAttribute("id"), true);
+        assert.strictEqual(el.getAttribute("id"), "test");
+    });
+    test("should support removeAttribute", () => {
+        const el = new globalThis.HTMLElement();
+        el.setAttribute("class", "foo");
+        assert.strictEqual(el.hasAttribute("class"), true);
+        el.removeAttribute("class");
+        assert.strictEqual(el.hasAttribute("class"), false);
+        assert.strictEqual(el.getAttribute("class"), null);
+    });
+    test("should return attributes as an array of {name, value}", () => {
+        const el = new globalThis.HTMLElement();
+        el.setAttribute("role", "button");
+        el.setAttribute("aria-label", "Close");
+        const attrs = el.attributes;
+        assert.strictEqual(attrs.length, 2);
+        assert.deepStrictEqual(attrs.map((a) => a.name).sort(), [
+            "aria-label",
+            "role",
+        ]);
+    });
+    test("should support attachShadow with open mode", () => {
+        const el = new globalThis.HTMLElement();
+        const sr = el.attachShadow({ mode: "open" });
+        assert.ok(sr);
+        assert.strictEqual(sr.host, el);
+        assert.strictEqual(el.shadowRoot, sr);
+    });
+    test("should not expose shadowRoot for closed mode", () => {
+        const el = new globalThis.HTMLElement();
+        el.attachShadow({ mode: "closed" });
+        assert.strictEqual(el.shadowRoot, null);
+    });
+    test("should provide a classList stub", () => {
+        const el = new globalThis.HTMLElement();
+        const cl = el.classList;
+        assert.strictEqual(cl.contains("foo"), false);
+        // Should not throw
+        cl.add("foo");
+        cl.remove("foo");
+        cl.toggle("foo");
+    });
+});
+test.describe("ShimCSSStyleSheet", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    });
+    test("should support insertRule", () => {
+        const sheet = new globalThis.CSSStyleSheet();
+        const idx = sheet.insertRule(".foo { color: red }", 0);
+        assert.strictEqual(idx, 0);
+        assert.strictEqual(sheet.cssRules.length, 1);
+        assert.strictEqual(sheet.cssRules[0].selectorText, ".foo ");
+    });
+});
+test.describe("ShimCustomElementRegistry", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    });
+    test("should support define and get", () => {
+        class MyEl {
+        }
+        globalThis.customElements.define("my-el", MyEl);
+        assert.strictEqual(globalThis.customElements.get("my-el"), MyEl);
+    });
+    test("should return undefined for unknown elements", () => {
+        assert.strictEqual(globalThis.customElements.get("unknown-el"), undefined);
+    });
+    test("should resolve whenDefined immediately", async () => {
+        const result = await globalThis.customElements.whenDefined("any-el");
+        assert.strictEqual(result, undefined);
+    });
+});
+test.describe("ShimDocument", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    });
+    test("should create elements via createElement", () => {
+        const el = globalThis.document.createElement("div");
+        assert.ok(el);
+        assert.strictEqual(typeof el.setAttribute, "function");
+    });
+    test("should support adoptedStyleSheets", () => {
+        assert.ok(Array.isArray(globalThis.document.adoptedStyleSheets));
+    });
+});
+test.describe("ShimCustomEvent", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    });
+    test("should carry detail", () => {
+        const evt = new globalThis.CustomEvent("test", { detail: 42 });
+        assert.strictEqual(evt.detail, 42);
+        assert.strictEqual(evt.type, "test");
+    });
+    test("should default detail to null", () => {
+        const evt = new globalThis.CustomEvent("test");
+        assert.strictEqual(evt.detail, null);
+    });
+});
+test.describe("matchMedia", () => {
+    test.beforeEach(async () => {
+        teardownShim();
+        const { installDomShim } = await import("@microsoft/fast-test-harness/build/dom-shim.js");
+        installDomShim();
+    });
+    test("should return a MediaQueryList with matches = false", () => {
+        const mql = globalThis.matchMedia("(prefers-color-scheme: dark)");
+        assert.strictEqual(mql.matches, false);
+        // Should not throw
+        mql.addEventListener("change", () => { });
+        mql.removeEventListener("change", () => { });
+    });
+});

package/dist/esm/build/generate-stylesheets.js

@@ -0,0 +1,70 @@
+/**
+ * Style extraction — converts compiled FAST ElementStyles JS modules
+ * into plain CSS files.
+ *
+ * Usage as a module:
+ * ```ts
+ * import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
+ *
+ * await generateStylesheets({ cwd: process.cwd() });
+ * ```
+ *
+ * Usage as a Lage worker:
+ * ```ts
+ * import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
+ *
+ * export default async function init({ target }) {
+ *     await generateStylesheets({ cwd: target.cwd });
+ * }
+ * ```
+ */
+import { glob, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { styleText } from "node:util";
+import { installDomShim } from "./dom-shim.js";
+function flattenStyles(style) {
+    if (typeof style === "string") {
+        return [style];
+    }
+    if (Array.isArray(style.styles)) {
+        return style.styles.flatMap(flattenStyles);
+    }
+    return [style.toString?.() ?? ""];
+}
+export async function generateStylesheets(options = {}) {
+    installDomShim();
+    const cwd = options.cwd ?? process.cwd();
+    const distDir = path.resolve(cwd, options.distDir ?? "dist");
+    const outDir = options.outDir ? path.resolve(cwd, options.outDir) : null;
+    const pattern = options.pattern ?? "**/*.styles.js";
+    for await (const jsFile of glob(pattern, { cwd: distDir })) {
+        const jsFilePath = path.resolve(distDir, jsFile);
+        const baseName = path.basename(jsFile, ".js") + ".css";
+        const cssFilePath = outDir
+            ? path.resolve(outDir, baseName)
+            : path.resolve(path.dirname(jsFilePath), baseName);
+        try {
+            const mod = await import(pathToFileURL(jsFilePath).href);
+            const stylesheet = mod.styles ?? mod.default;
+            if (!stylesheet?.styles) {
+                continue;
+            }
+            let css = stylesheet.styles.flatMap(flattenStyles).join("\n");
+            if (options.format) {
+                try {
+                    css = await options.format(css, cssFilePath);
+                }
+                catch (formatError) {
+                    console.warn(styleText(["yellow", "bold"], "⚠"), `Format failed for ${path.relative(cwd, cssFilePath)}:`, formatError.message);
+                }
+            }
+            await mkdir(path.dirname(cssFilePath), { recursive: true });
+            await writeFile(cssFilePath, css, "utf8");
+            console.log(styleText(["green", "bold"], "✔"), "Style:", styleText("dim", path.relative(cwd, jsFilePath)), "→", styleText("bold", path.relative(cwd, cssFilePath)));
+        }
+        catch (error) {
+            console.error(styleText(["red", "bold"], "✘"), `Failed: ${path.relative(cwd, jsFilePath)}`, error.message);
+        }
+    }
+}