@microsoft/fast-test-harness 0.1.0 → 0.3.0

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);
-    });
-});

package/dist/esm/ssr/render.test.js

@@ -1,236 +0,0 @@
-import assert from "node:assert/strict";
-import { test } from "node:test";
-import { buildEntryHtml, buildState, createSSRRenderer, parseDefaultValue, renderTemplate, } from "@microsoft/fast-test-harness/ssr/render.js";
-test.describe("parseDefaultValue", () => {
-    test("should return empty string for empty input", () => {
-        assert.strictEqual(parseDefaultValue(""), "");
-    });
-    test("should return empty string for 'undefined'", () => {
-        assert.strictEqual(parseDefaultValue("undefined"), "");
-    });
-    test("should return empty string for 'null'", () => {
-        assert.strictEqual(parseDefaultValue("null"), "");
-    });
-    test("should return true for 'true'", () => {
-        assert.strictEqual(parseDefaultValue("true"), true);
-    });
-    test("should return false for 'false'", () => {
-        assert.strictEqual(parseDefaultValue("false"), false);
-    });
-    test("should strip single quotes from strings", () => {
-        assert.strictEqual(parseDefaultValue("'img'"), "img");
-    });
-    test("should strip double quotes from strings", () => {
-        assert.strictEqual(parseDefaultValue('"hello"'), "hello");
-    });
-    test("should parse integers", () => {
-        assert.strictEqual(parseDefaultValue("42"), 42);
-    });
-    test("should parse floats", () => {
-        assert.strictEqual(parseDefaultValue("3.14"), 3.14);
-    });
-    test("should parse zero", () => {
-        assert.strictEqual(parseDefaultValue("0"), 0);
-    });
-    test("should parse JSON arrays", () => {
-        assert.deepStrictEqual(parseDefaultValue("[1,2,3]"), [1, 2, 3]);
-    });
-    test("should parse JSON objects", () => {
-        assert.deepStrictEqual(parseDefaultValue('{"a":1}'), { a: 1 });
-    });
-    test("should return empty string for unparseable values", () => {
-        assert.strictEqual(parseDefaultValue("some random text"), "");
-    });
-    test("should trim whitespace", () => {
-        assert.strictEqual(parseDefaultValue("  true  "), true);
-    });
-});
-test.describe("renderTemplate", () => {
-    test("should replace {{styles}} with a link tag", () => {
-        const result = renderTemplate("<template>{{styles}}<div>hi</div></template>", "/styles.css");
-        assert.ok(result.includes('<link rel="stylesheet" href="/styles.css">'));
-        assert.ok(!result.includes("{{styles}}"));
-    });
-    test("should inject link after <template> if {{styles}} is absent", () => {
-        const result = renderTemplate("<template><div>hi</div></template>", "/styles.css");
-        assert.ok(result.includes('<link rel="stylesheet" href="/styles.css">'));
-        assert.ok(result.indexOf("<link") > result.indexOf("<template>"));
-    });
-    test("should remove {{styles}} marker when styles URL is empty", () => {
-        const input = "<template>{{styles}}<div>hi</div></template>";
-        const result = renderTemplate(input, "");
-        assert.strictEqual(result, "<template><div>hi</div></template>");
-        assert.ok(!result.includes('<link rel="stylesheet"'));
-    });
-});
-test.describe("buildEntryHtml", () => {
-    test("should return raw html when 'html' key is present", () => {
-        const result = buildEntryHtml({ html: "<div>raw</div>" });
-        assert.strictEqual(result, "<div>raw</div>");
-    });
-    test("should build a custom element tag from tagName", () => {
-        const result = buildEntryHtml({ tagName: "my-el" });
-        assert.strictEqual(result, "<my-el></my-el>");
-    });
-    test("should include innerHTML", () => {
-        const result = buildEntryHtml({
-            tagName: "my-el",
-            innerHTML: "content",
-        });
-        assert.strictEqual(result, "<my-el>content</my-el>");
-    });
-    test("should serialize attributes", () => {
-        const result = buildEntryHtml({
-            tagName: "my-el",
-            attributes: JSON.stringify({ role: "button", size: "large" }),
-        });
-        assert.ok(result.includes('role="button"'));
-        assert.ok(result.includes('size="large"'));
-    });
-    test("should handle boolean true attributes", () => {
-        const result = buildEntryHtml({
-            tagName: "my-el",
-            attributes: JSON.stringify({ disabled: true }),
-        });
-        assert.ok(result.includes("disabled"));
-        assert.ok(!result.includes('disabled="'));
-    });
-    test("should return empty string when no tagName or html", () => {
-        assert.strictEqual(buildEntryHtml({}), "");
-    });
-    test("should handle invalid JSON in attributes gracefully", () => {
-        const result = buildEntryHtml({
-            tagName: "my-el",
-            attributes: "not-json",
-        });
-        assert.strictEqual(result, "<my-el></my-el>");
-    });
-    test("should omit attributes with false, null, or undefined values", () => {
-        const result = buildEntryHtml({
-            tagName: "my-el",
-            attributes: JSON.stringify({ disabled: false, hidden: null, role: "button" }),
-        });
-        assert.ok(!result.includes("disabled"), `should not include disabled: ${result}`);
-        assert.ok(!result.includes("hidden"), `should not include hidden: ${result}`);
-        assert.ok(result.includes('role="button"'), `should include role: ${result}`);
-    });
-    test("should escape special characters in attribute values", () => {
-        const result = buildEntryHtml({
-            tagName: "my-el",
-            attributes: JSON.stringify({ title: 'a&b<c>"d' }),
-        });
-        assert.ok(result.includes("a&amp;b&lt;c&gt;&quot;d"), `got: ${result}`);
-    });
-});
-test.describe("buildState", () => {
-    test("should extract attributes into state", () => {
-        const state = buildState({
-            attributes: JSON.stringify({ size: "large", active: true }),
-        });
-        assert.strictEqual(state.size, "large");
-        assert.strictEqual(state.active, true);
-    });
-    test("should add hyphen-stripped variants", () => {
-        const state = buildState({
-            attributes: JSON.stringify({ "aria-label": "Close" }),
-        });
-        assert.strictEqual(state["aria-label"], "Close");
-        assert.strictEqual(state["arialabel"], "Close");
-    });
-    test("should return empty state for missing attributes", () => {
-        const state = buildState({});
-        assert.deepStrictEqual(state, {});
-    });
-    test("should handle invalid JSON gracefully", () => {
-        const state = buildState({ attributes: "broken" });
-        assert.deepStrictEqual(state, {});
-    });
-});
-test.describe("createSSRRenderer", () => {
-    test("should return a render function when @microsoft/fast-build is installed", () => {
-        const renderer = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        assert.ok(typeof renderer.render === "function");
-    });
-    test("should return a RenderResult from render()", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        const result = render({ tagName: "test-widget", innerHTML: "hello" });
-        assert.ok("template" in result, "result should have template");
-        assert.ok("fixture" in result, "result should have fixture");
-        assert.ok("preloadLinks" in result, "result should have preloadLinks");
-    });
-    test("should render a custom element tag in the fixture", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        const result = render({ tagName: "test-widget", innerHTML: "content" });
-        assert.ok(result.fixture.includes("<test-widget"), `fixture should include element, got: ${result.fixture}`);
-        assert.ok(result.fixture.includes("content"), `fixture should include innerHTML, got: ${result.fixture}`);
-    });
-    test("should include attributes in the rendered fixture", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        const result = render({
-            tagName: "test-widget",
-            attributes: JSON.stringify({ label: "Test", disabled: true }),
-        });
-        assert.ok(result.fixture.includes("label="), `fixture should include label attr, got: ${result.fixture}`);
-        assert.ok(result.fixture.includes("disabled"), `fixture should include disabled attr, got: ${result.fixture}`);
-    });
-    test("should include theme stylesheet in preloadLinks", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-            themeStylesheet: "/theme.css",
-        });
-        const result = render({ tagName: "test-widget" });
-        assert.ok(result.preloadLinks.includes("/theme.css"), `preloadLinks should include theme URL, got: ${result.preloadLinks}`);
-    });
-    test("should return empty preloadLinks without a theme", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        const result = render({ tagName: "test-widget" });
-        assert.strictEqual(result.preloadLinks, "");
-    });
-    test("should handle raw HTML via the html key", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        const result = render({
-            html: "<test-widget>raw html</test-widget>",
-        });
-        assert.ok(result.fixture.includes("raw html"), `fixture should contain raw html content, got: ${result.fixture}`);
-    });
-    test("should return empty fixture for empty query", () => {
-        const { render } = createSSRRenderer({
-            tagPrefix: "test",
-            components: [{ name: "widget", packageName: "@microsoft/fast-test-harness" }],
-        });
-        const result = render({});
-        assert.strictEqual(result.fixture, "");
-    });
-    test("should work with monolithic packageName mode", () => {
-        // The test harness itself doesn't have component subdirectories,
-        // so the template map will be empty — but the factory should not throw.
-        const { render } = createSSRRenderer({
-            tagPrefix: "fast",
-            packageName: "@microsoft/fast-test-harness",
-            distDir: "dist/esm",
-        });
-        assert.ok(typeof render === "function");
-        const result = render({ tagName: "fast-widget", innerHTML: "hello" });
-        // Without matching templates the WASM renderer should still produce output.
-        assert.ok("fixture" in result);
-    });
-});