@microsoft/fast-test-harness 0.1.0 → 0.2.0

package/dist/esm/build/generate-webui-templates.test.js

@@ -1,179 +0,0 @@
-import assert from "node:assert/strict";
-import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { test } from "node:test";
-import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
-test.describe("generateWebuiTemplates", () => {
-    let tempDir;
-    test.beforeEach(async () => {
-        tempDir = await mkdtemp(join(tmpdir(), "fast-webui-templ-"));
-    });
-    test.afterEach(async () => {
-        await rm(tempDir, { recursive: true, force: true });
-    });
-    test("should generate a webui template without f-template wrapper", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "badge.template.js"), `export const template = {
-                html: "<template><slot></slot></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
-        const html = await readFile(join(distDir, "badge.template-webui.html"), "utf8");
-        assert.ok(html.includes('<template shadowrootmode="open">'));
-        assert.ok(html.includes("<slot></slot>"));
-        assert.ok(!html.includes("<f-template"), "should not have f-template wrapper");
-        assert.ok(!html.includes("{{styles}}"), "should not have styles marker");
-    });
-    test("should write to outDir when specified", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "card.template.js"), `export const template = {
-                html: "<template><div>card</div></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({
-            cwd: tempDir,
-            outDir: "out",
-            tagPrefix: "fast",
-        });
-        const html = await readFile(join(tempDir, "out", "card.template-webui.html"), "utf8");
-        assert.ok(html.includes('<template shadowrootmode="open">'));
-    });
-    test("should skip modules without a template export", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "empty.template.js"), `export const styles = ":host {}";`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
-        try {
-            await readFile(join(distDir, "empty.template-webui.html"), "utf8");
-            assert.fail("Should not have created an HTML file");
-        }
-        catch (err) {
-            assert.strictEqual(err.code, "ENOENT");
-        }
-    });
-    test("should apply a format function", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "text.template.js"), `export const template = {
-                html: "<template><span>text</span></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({
-            cwd: tempDir,
-            tagPrefix: "fast",
-            format: html => `<!-- webui-formatted -->\n${html}`,
-        });
-        const html = await readFile(join(distDir, "text.template-webui.html"), "utf8");
-        assert.ok(html.startsWith("<!-- webui-formatted -->"));
-    });
-    test("should add shadowrootdelegatesfocus from definition-async", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "input.template.js"), `export const template = {
-                html: "<template><input /></template>",
-                factories: {}
-            };`);
-        await writeFile(join(distDir, "input.definition-async.js"), `export const definition = {
-                name: "fast-input",
-                shadowOptions: { delegatesFocus: true },
-            };`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
-        const html = await readFile(join(distDir, "input.template-webui.html"), "utf8");
-        assert.ok(html.includes("shadowrootdelegatesfocus"), `should include delegatesFocus, got: ${html}`);
-    });
-    test("should not add shadowrootdelegatesfocus when absent", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "div.template.js"), `export const template = {
-                html: "<template><div>hello</div></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
-        const html = await readFile(join(distDir, "div.template-webui.html"), "utf8");
-        assert.ok(!html.includes("shadowrootdelegatesfocus"));
-    });
-    test("should strip the {{styles}} marker from output", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        // The template contains nested content that would produce a styles marker
-        // during f-template generation (convertTemplate injects it).
-        await writeFile(join(distDir, "label.template.js"), `export const template = {
-                html: "<template><label>Name</label></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
-        const html = await readFile(join(distDir, "label.template-webui.html"), "utf8");
-        assert.ok(!html.includes("{{styles}}"), `should not contain styles marker: ${html}`);
-        assert.ok(!html.includes("{%styles%}"), `should not contain alt styles marker: ${html}`);
-    });
-    test("should handle modules with a default export", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "icon.template.js"), `const template = {
-                html: "<template><svg></svg></template>",
-                factories: {}
-            };
-            export default template;`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "fast" });
-        const html = await readFile(join(distDir, "icon.template-webui.html"), "utf8");
-        assert.ok(html.includes('<template shadowrootmode="open">'));
-        assert.ok(html.includes("<svg></svg>"));
-    });
-    test("should handle multiple template modules in one pass", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "button.template.js"), `export const template = {
-                html: "<template><button><slot></slot></button></template>",
-                factories: {}
-            };`);
-        await writeFile(join(distDir, "badge.template.js"), `export const template = {
-                html: "<template><span><slot></slot></span></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({ cwd: tempDir, tagPrefix: "mai" });
-        const buttonHtml = await readFile(join(distDir, "button.template-webui.html"), "utf8");
-        const badgeHtml = await readFile(join(distDir, "badge.template-webui.html"), "utf8");
-        assert.ok(buttonHtml.includes("<button>"));
-        assert.ok(badgeHtml.includes("<span>"));
-    });
-    test("should gracefully handle a format function that throws", async () => {
-        const distDir = join(tempDir, "dist");
-        await mkdir(distDir, { recursive: true });
-        await writeFile(join(distDir, "broken.template.js"), `export const template = {
-                html: "<template><div>ok</div></template>",
-                factories: {}
-            };`);
-        // Should not throw — just warn and skip formatting.
-        await generateWebuiTemplates({
-            cwd: tempDir,
-            tagPrefix: "fast",
-            format: () => {
-                throw new Error("format boom");
-            },
-        });
-        const html = await readFile(join(distDir, "broken.template-webui.html"), "utf8");
-        // The file should still be written (unformatted).
-        assert.ok(html.includes("<div>ok</div>"));
-    });
-    test("should use a custom glob pattern", async () => {
-        const distDir = join(tempDir, "dist");
-        const sub = join(distDir, "components");
-        await mkdir(sub, { recursive: true });
-        // Use the standard .template.js suffix so basename extraction works
-        await writeFile(join(sub, "alert.template.js"), `export const template = {
-                html: "<template><div role='alert'></div></template>",
-                factories: {}
-            };`);
-        await generateWebuiTemplates({
-            cwd: tempDir,
-            tagPrefix: "fast",
-            pattern: "components/*.template.js",
-        });
-        const html = await readFile(join(sub, "alert.template-webui.html"), "utf8");
-        assert.ok(html.includes("role="), `got: ${html}`);
-        assert.ok(html.includes("alert"), `got: ${html}`);
-    });
-});

package/dist/esm/fixtures/csr-fixture.pw.spec.js

@@ -1,137 +0,0 @@
-import { expect, test } from "@microsoft/fast-test-harness";
-test.describe("CSR: setTemplate", () => {
-    test.use({ tagName: "test-widget" });
-    test("should render the element with default options", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).toHaveCount(1);
-    });
-    test("should render with innerHTML", async ({ fastPage }) => {
-        await fastPage.setTemplate({ innerHTML: "<span>child</span>" });
-        await expect(fastPage.element).toHaveCount(1);
-        await expect(fastPage.element).toContainText("child");
-    });
-    test("should render with attributes", async ({ fastPage }) => {
-        await fastPage.setTemplate({
-            attributes: { label: "Hello", size: "large" },
-        });
-        await expect(fastPage.element).toHaveAttribute("label", "Hello");
-        await expect(fastPage.element).toHaveAttribute("size", "large");
-    });
-    test("should render with boolean attribute", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { disabled: true } });
-        await expect(fastPage.element).toHaveAttribute("disabled");
-    });
-    test("should render with a raw HTML string", async ({ fastPage }) => {
-        await fastPage.setTemplate(`<test-widget label="raw">raw content</test-widget>`);
-        await expect(fastPage.element).toHaveAttribute("label", "raw");
-        await expect(fastPage.element).toContainText("raw content");
-    });
-    test("should replace the previous template on subsequent calls", async ({ fastPage, }) => {
-        await fastPage.setTemplate({ attributes: { label: "first" } });
-        await expect(fastPage.element).toHaveAttribute("label", "first");
-        await fastPage.setTemplate({ attributes: { label: "second" } });
-        await expect(fastPage.element).toHaveAttribute("label", "second");
-        await expect(fastPage.element).toHaveCount(1);
-    });
-});
-test.describe("CSR: updateTemplate", () => {
-    test.use({ tagName: "test-widget" });
-    test("should update attributes on an existing element", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { label: "before" } });
-        await expect(fastPage.element).toHaveAttribute("label", "before");
-        await fastPage.updateTemplate("test-widget", {
-            attributes: { label: "after" },
-        });
-        await expect(fastPage.element).toHaveAttribute("label", "after");
-    });
-    test("should remove an attribute when set to false", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { disabled: true } });
-        await expect(fastPage.element).toHaveAttribute("disabled");
-        await fastPage.updateTemplate("test-widget", {
-            attributes: { disabled: false },
-        });
-        await expect(fastPage.element).not.toHaveAttribute("disabled");
-    });
-    test("should update innerHTML", async ({ fastPage }) => {
-        await fastPage.setTemplate({ innerHTML: "original" });
-        await fastPage.updateTemplate("test-widget", {
-            innerHTML: "updated",
-        });
-        await expect(fastPage.element).toContainText("updated");
-    });
-    test("should accept a Locator", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { label: "loc" } });
-        await fastPage.updateTemplate(fastPage.element, {
-            attributes: { label: "via-locator" },
-        });
-        await expect(fastPage.element).toHaveAttribute("label", "via-locator");
-    });
-});
-test.describe("CSR: applyTokens", () => {
-    test.use({ tagName: "test-widget" });
-    test("should set CSS custom properties on the body", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await fastPage.applyTokens({
-            "color-primary": "#0078d4",
-            "spacing-m": "8px",
-        });
-        const value = await fastPage.page.evaluate(() => document.body.style.getPropertyValue("--color-primary"));
-        expect(value).toBe("#0078d4");
-    });
-});
-test.describe("CSR: waitForCustomElement", () => {
-    test.use({ tagName: "test-widget" });
-    test("should resolve for a registered element", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await fastPage.waitForCustomElement("test-widget");
-    });
-});
-test.describe("CSR: toHaveCustomState", () => {
-    test.use({ tagName: "test-widget" });
-    test("should pass when element has the custom state", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { disabled: true } });
-        await expect(fastPage.element).toHaveCustomState("disabled");
-    });
-    test("should fail (negated) when element does not have the state", async ({ fastPage, }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).not.toHaveCustomState("disabled");
-    });
-});
-test.describe("CSR: element locator", () => {
-    test.use({ tagName: "test-widget" });
-    test("should locate the element by tag name", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).toHaveCount(1);
-    });
-});
-test.describe("CSR: addStyleTag", () => {
-    test.use({ tagName: "test-widget" });
-    test("should add a style tag with content", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await fastPage.addStyleTag({
-            content: "test-widget { border: 1px solid red; }",
-        });
-        const hasBorder = await fastPage.page.evaluate(() => {
-            const styles = document.querySelectorAll("style");
-            return Array.from(styles).some(s => s.textContent?.includes("border: 1px solid red"));
-        });
-        expect(hasBorder).toBe(true);
-    });
-});
-test.describe("CSR: multiple elements", () => {
-    test.use({ tagName: "test-widget" });
-    test("should handle templates with multiple instances", async ({ fastPage }) => {
-        await fastPage.setTemplate(`
-            <test-widget label="first">one</test-widget>
-            <test-widget label="second">two</test-widget>
-        `);
-        await expect(fastPage.element).toHaveCount(2);
-    });
-});
-test.describe("CSR: waitFor", () => {
-    test.use({ tagName: "test-widget", waitFor: ["test-widget"] });
-    test("should wait for additional elements specified in waitFor", async ({ fastPage, }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).toHaveCount(1);
-    });
-});

package/dist/esm/fixtures/ssr-fixture.pw.spec.js

@@ -1,189 +0,0 @@
-import { expect, test } from "@microsoft/fast-test-harness";
-test.describe("SSR: setTemplate", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should navigate to the SSR fixture page", async ({ fastPage, page }) => {
-        await fastPage.setTemplate();
-        const url = new URL(page.url());
-        expect(url.pathname).toMatch(/^\/ssr-.*\.html$/);
-        expect(url.pathname).toContain("should_navigate_to_the_ssr_fixture_page");
-    });
-    test("should render the element with default options", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).toHaveCount(1);
-    });
-    test("should render with innerHTML", async ({ fastPage }) => {
-        await fastPage.setTemplate({ innerHTML: "<span>child</span>" });
-        await expect(fastPage.element).toHaveCount(1);
-        await expect(fastPage.element).toContainText("child");
-    });
-    test("should render with attributes", async ({ fastPage }) => {
-        await fastPage.setTemplate({
-            attributes: { label: "Hello", size: "large" },
-        });
-        await expect(fastPage.element).toHaveAttribute("label", "Hello");
-        await expect(fastPage.element).toHaveAttribute("size", "large");
-    });
-    test("should render with boolean attribute", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { disabled: true } });
-        await expect(fastPage.element).toHaveAttribute("disabled");
-    });
-    test("should render with a raw HTML string", async ({ fastPage }) => {
-        await fastPage.setTemplate(`<test-widget label="raw">raw content</test-widget>`);
-        await expect(fastPage.element).toHaveAttribute("label", "raw");
-        await expect(fastPage.element).toContainText("raw content");
-    });
-    test("should replace the previous template on subsequent calls", async ({ fastPage, }) => {
-        await fastPage.setTemplate({ attributes: { label: "first" } });
-        await expect(fastPage.element).toHaveAttribute("label", "first");
-        await fastPage.setTemplate({ attributes: { label: "second" } });
-        await expect(fastPage.element).toHaveAttribute("label", "second");
-        await expect(fastPage.element).toHaveCount(1);
-    });
-});
-test.describe("SSR: updateTemplate", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should update attributes on an existing element", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { label: "before" } });
-        await expect(fastPage.element).toHaveAttribute("label", "before");
-        await fastPage.updateTemplate("test-widget", {
-            attributes: { label: "after" },
-        });
-        await expect(fastPage.element).toHaveAttribute("label", "after");
-    });
-    test("should remove an attribute when set to false", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { disabled: true } });
-        await expect(fastPage.element).toHaveAttribute("disabled");
-        await fastPage.updateTemplate("test-widget", {
-            attributes: { disabled: false },
-        });
-        await expect(fastPage.element).not.toHaveAttribute("disabled");
-    });
-    test("should update innerHTML", async ({ fastPage }) => {
-        await fastPage.setTemplate({ innerHTML: "original" });
-        await fastPage.updateTemplate("test-widget", {
-            innerHTML: "updated",
-        });
-        await expect(fastPage.element).toContainText("updated");
-    });
-    test("should accept a Locator", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { label: "loc" } });
-        await fastPage.updateTemplate(fastPage.element, {
-            attributes: { label: "via-locator" },
-        });
-        await expect(fastPage.element).toHaveAttribute("label", "via-locator");
-    });
-});
-test.describe("SSR: applyTokens", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should set CSS custom properties on the body", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await fastPage.applyTokens({
-            "color-primary": "#0078d4",
-            "spacing-m": "8px",
-        });
-        const value = await fastPage.page.evaluate(() => document.body.style.getPropertyValue("--color-primary"));
-        expect(value).toBe("#0078d4");
-    });
-});
-test.describe("SSR: waitForCustomElement", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should resolve for a registered element", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await fastPage.waitForCustomElement("test-widget");
-    });
-});
-test.describe("SSR: toHaveCustomState", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should pass when element has the custom state", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { disabled: true } });
-        await expect(fastPage.element).toHaveCustomState("disabled");
-    });
-    test("should fail (negated) when element does not have the state", async ({ fastPage, }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).not.toHaveCustomState("disabled");
-    });
-});
-test.describe("SSR: element locator", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should locate the element by tag name", async ({ fastPage }) => {
-        await fastPage.setTemplate();
-        await expect(fastPage.element).toHaveCount(1);
-    });
-});
-test.describe("SSR: declarative shadow DOM", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should have a shadow root after SSR render", async ({ fastPage }) => {
-        await fastPage.setTemplate({ attributes: { label: "DSD" } });
-        const hasShadow = await fastPage.element.evaluate(el => el.shadowRoot !== null);
-        expect(hasShadow).toBe(true);
-    });
-});
-test.describe("SSR: template placeholder replacement", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should replace the fixture placeholder with rendered component HTML", async ({ fastPage, page, }) => {
-        await fastPage.setTemplate({ attributes: { label: "test" } });
-        const bodyHtml = await page.locator("body").innerHTML();
-        expect(bodyHtml).not.toContain("<!--fixture-->");
-        expect(bodyHtml).toContain("<test-widget");
-    });
-    test("should replace the title placeholder with the test title", async ({ fastPage, page, }) => {
-        await fastPage.setTemplate();
-        const title = await page.title();
-        expect(title).not.toBe("<!--fixturetitle-->");
-        expect(title.length).toBeGreaterThan(0);
-    });
-    test("should replace the templates placeholder with template content", async ({ fastPage, page, }) => {
-        await fastPage.setTemplate();
-        const bodyHtml = await page.locator("body").innerHTML();
-        expect(bodyHtml).not.toContain("<!--templates-->");
-    });
-    test("should replace the stylespreload placeholder with preload links", async ({ fastPage, page, }) => {
-        await fastPage.setTemplate();
-        const headHtml = await page.locator("head").innerHTML();
-        expect(headHtml).not.toContain("<!--stylespreload-->");
-        expect(headHtml).toContain("/test-theme.css");
-    });
-    test("should not contain any unreplaced placeholder comments", async ({ fastPage, page, }) => {
-        await fastPage.setTemplate();
-        const fullHtml = await page.content();
-        expect(fullHtml).not.toContain("<!--fixture-->");
-        expect(fullHtml).not.toContain("<!--fixturetitle-->");
-        expect(fullHtml).not.toContain("<!--templates-->");
-        expect(fullHtml).not.toContain("<!--stylespreload-->");
-    });
-});
-test.describe("SSR: addStyleTag buffering", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should include buffered styles in the SSR page", async ({ fastPage, page }) => {
-        await fastPage.addStyleTag({
-            content: "test-widget { outline: 3px solid blue; }",
-        });
-        await fastPage.setTemplate();
-        const hasStyle = await page.evaluate(() => {
-            const styles = document.querySelectorAll("style");
-            return Array.from(styles).some(s => s.textContent?.includes("outline: 3px solid blue"));
-        });
-        expect(hasStyle).toBe(true);
-    });
-    test("should pass through addStyleTag calls after setTemplate", async ({ fastPage, page, }) => {
-        await fastPage.setTemplate();
-        await fastPage.addStyleTag({
-            content: "test-widget { margin: 99px; }",
-        });
-        const hasStyle = await page.evaluate(() => {
-            const styles = document.querySelectorAll("style");
-            return Array.from(styles).some(s => s.textContent?.includes("margin: 99px"));
-        });
-        expect(hasStyle).toBe(true);
-    });
-});
-test.describe("SSR: multiple elements", () => {
-    test.use({ tagName: "test-widget", ssr: true });
-    test("should handle templates with multiple instances", async ({ fastPage }) => {
-        await fastPage.setTemplate(`
-            <test-widget label="first">one</test-widget>
-            <test-widget label="second">two</test-widget>
-        `);
-        await expect(fastPage.element).toHaveCount(2);
-    });
-});