refactor: auto-discover fixtures and rename webui script

- Both build-fixtures.js and build-fixtures-with-webui.mjs now
  auto-discover fixture directories by scanning for entry.html,
  templates.html, and state.json instead of using a hardcoded array.
- Renamed webui-integration-test.mjs to build-fixtures-with-webui.mjs
  for consistency with build-fixtures.js.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: janechu

packages/fast-html/DESIGN.md

@@ -433,7 +433,7 @@ For fixtures that use SSR-style pre-rendered HTML, `scripts/build-fixtures.js` i
 
 ### WebUI Integration Tests
 
-A separate integration test suite (`scripts/webui-integration-test.mjs`) validates that `@microsoft/webui` can build and render the same fixture templates that `@microsoft/fast-build` processes. For each fixture, the script:
+A separate integration test suite (`scripts/build-fixtures-with-webui.mjs`) validates that `@microsoft/webui` can build and render the same fixture templates that `@microsoft/fast-build` processes. For each fixture, the script:
 
 1. Extracts `<f-template>` elements from `templates.html` into individual component HTML files (webui uses filename-based component discovery).
 2. Builds the fixture using `webui build --plugin=fast`.

packages/fast-html/package.json

@@ -36,7 +36,7 @@
     "test-server": "npx vite test/ --clearScreen false",
     "test:playwright": "playwright test",
     "test:rules": "sg test --skip-snapshot-tests",
-    "test:webui-integration": "node scripts/webui-integration-test.mjs",
+    "test:webui-integration": "node scripts/build-fixtures-with-webui.mjs",
     "test": "npm run test:playwright && npm run test:rules",
     "test:ui": "concurrently -k -n fast-element,fast-html,playwright \"npm run dev --workspace=@microsoft/fast-element\" \"npm:watch\" \"npx playwright test --ui\"",
     "watch": "npm run build:tsc -- -w --preserveWatchOutput"

…-html/scripts/webui-integration-test.mjs …ml/scripts/build-fixtures-with-webui.mjspackages/fast-html/scripts/webui-integration-test.mjs renamed to packages/fast-html/scripts/build-fixtures-with-webui.mjs packages/fast-html/scripts/webui-integration-test.mjs renamed to packages/fast-html/scripts/build-fixtures-with-webui.mjs

@@ -13,7 +13,14 @@
  *   4. Validates the rendered HTML for expected structure and content.
  */
 
-import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import {
+    existsSync,
+    mkdirSync,
+    readdirSync,
+    readFileSync,
+    rmSync,
+    writeFileSync,
+} from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { build, render } from "@microsoft/webui";
@@ -22,25 +29,19 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const fixturesDir = resolve(__dirname, "../test/fixtures");
 
-// Fixtures to test — mirrors the list in build-fixtures.js
-const fixtures = [
-    "attribute",
-    "binding",
-    "deep-merge",
-    "event",
-    "ref",
-    "slotted",
-    "when",
-    "repeat",
-    "repeat-event",
-    "children",
-    "host-bindings",
-    "lifecycle-callbacks",
-    "dot-syntax",
-    "nested-elements",
-    "performance-metrics",
-    "observer-map",
-];
+// Auto-discover fixture directories that contain the required files.
+const fixtures = readdirSync(fixturesDir, { withFileTypes: true })
+    .filter(entry => {
+        if (!entry.isDirectory()) return false;
+        const dir = join(fixturesDir, entry.name);
+        return (
+            existsSync(join(dir, "entry.html")) &&
+            existsSync(join(dir, "templates.html")) &&
+            existsSync(join(dir, "state.json"))
+        );
+    })
+    .map(entry => entry.name)
+    .sort();
 
 /**
  * Extract <f-template name="X"> elements from an HTML string.

packages/fast-html/scripts/build-fixtures.js

@@ -1,32 +1,27 @@
 #!/usr/bin/env node
 import { execFileSync } from "node:child_process";
-import { readFileSync, writeFileSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
-// Builds test fixtures using @microsoft/fast-build. Add fixture names here
-// incrementally as each one is verified to work with the fast-build CLI.
-const fixtures = [
-    "attribute",
-    "binding",
-    "deep-merge",
-    "event",
-    "ref",
-    "slotted",
-    "when",
-    "repeat",
-    "repeat-event",
-    "children",
-    "host-bindings",
-    "lifecycle-callbacks",
-    "dot-syntax",
-    "nested-elements",
-    "performance-metrics",
-    "observer-map",
-];
-
 const __dirname = dirname(fileURLToPath(import.meta.url));
+const fixturesDir = resolve(__dirname, "../test/fixtures");
+
+// Auto-discover fixture directories that contain the required files.
+const fixtures = readdirSync(fixturesDir, { withFileTypes: true })
+    .filter(entry => {
+        if (!entry.isDirectory()) return false;
+        const dir = join(fixturesDir, entry.name);
+        return (
+            existsSync(join(dir, "entry.html")) &&
+            existsSync(join(dir, "templates.html")) &&
+            existsSync(join(dir, "state.json"))
+        );
+    })
+    .map(entry => entry.name)
+    .sort();
+
 const require = createRequire(import.meta.url);
 const fastBin = require.resolve("@microsoft/fast-build/bin/fast.js");