@microsoft/fast-test-harness 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +267 -0
  2. package/dist/dts/build/dom-shim.d.ts +10 -0
  3. package/dist/dts/build/dom-shim.d.ts.map +1 -0
  4. package/dist/dts/build/dom-shim.test.d.ts +2 -0
  5. package/dist/dts/build/dom-shim.test.d.ts.map +1 -0
  6. package/dist/dts/build/generate-stylesheets.d.ts +62 -0
  7. package/dist/dts/build/generate-stylesheets.d.ts.map +1 -0
  8. package/dist/dts/build/generate-stylesheets.test.d.ts +2 -0
  9. package/dist/dts/build/generate-stylesheets.test.d.ts.map +1 -0
  10. package/dist/dts/build/generate-templates.d.ts +69 -0
  11. package/dist/dts/build/generate-templates.d.ts.map +1 -0
  12. package/dist/dts/build/generate-templates.test.d.ts +2 -0
  13. package/dist/dts/build/generate-templates.test.d.ts.map +1 -0
  14. package/dist/dts/build/generate-webui-templates.d.ts +54 -0
  15. package/dist/dts/build/generate-webui-templates.d.ts.map +1 -0
  16. package/dist/dts/build/generate-webui-templates.test.d.ts +2 -0
  17. package/dist/dts/build/generate-webui-templates.test.d.ts.map +1 -0
  18. package/dist/dts/fixtures/assertions.d.ts +19 -0
  19. package/dist/dts/fixtures/assertions.d.ts.map +1 -0
  20. package/dist/dts/fixtures/csr-fixture.d.ts +114 -0
  21. package/dist/dts/fixtures/csr-fixture.d.ts.map +1 -0
  22. package/dist/dts/fixtures/csr-fixture.pw.spec.d.ts +2 -0
  23. package/dist/dts/fixtures/csr-fixture.pw.spec.d.ts.map +1 -0
  24. package/dist/dts/fixtures/index.d.ts +30 -0
  25. package/dist/dts/fixtures/index.d.ts.map +1 -0
  26. package/dist/dts/fixtures/ssr-fixture.d.ts +42 -0
  27. package/dist/dts/fixtures/ssr-fixture.d.ts.map +1 -0
  28. package/dist/dts/fixtures/ssr-fixture.pw.spec.d.ts +2 -0
  29. package/dist/dts/fixtures/ssr-fixture.pw.spec.d.ts.map +1 -0
  30. package/dist/dts/index.d.ts +7 -0
  31. package/dist/dts/index.d.ts.map +1 -0
  32. package/dist/dts/ssr/entry-client.d.ts +2 -0
  33. package/dist/dts/ssr/entry-client.d.ts.map +1 -0
  34. package/dist/dts/ssr/render.d.ts +127 -0
  35. package/dist/dts/ssr/render.d.ts.map +1 -0
  36. package/dist/dts/ssr/render.test.d.ts +2 -0
  37. package/dist/dts/ssr/render.test.d.ts.map +1 -0
  38. package/dist/esm/build/dom-shim.js +142 -0
  39. package/dist/esm/build/dom-shim.test.js +202 -0
  40. package/dist/esm/build/generate-stylesheets.js +70 -0
  41. package/dist/esm/build/generate-stylesheets.test.js +74 -0
  42. package/dist/esm/build/generate-templates.js +243 -0
  43. package/dist/esm/build/generate-templates.test.js +231 -0
  44. package/dist/esm/build/generate-webui-templates.js +121 -0
  45. package/dist/esm/build/generate-webui-templates.test.js +179 -0
  46. package/dist/esm/fixtures/assertions.js +49 -0
  47. package/dist/esm/fixtures/csr-fixture.js +153 -0
  48. package/dist/esm/fixtures/csr-fixture.pw.spec.js +137 -0
  49. package/dist/esm/fixtures/index.js +48 -0
  50. package/dist/esm/fixtures/ssr-fixture.js +113 -0
  51. package/dist/esm/fixtures/ssr-fixture.pw.spec.js +189 -0
  52. package/dist/esm/index.js +6 -0
  53. package/dist/esm/ssr/entry-client.js +2 -0
  54. package/dist/esm/ssr/render.js +381 -0
  55. package/dist/esm/ssr/render.test.js +236 -0
  56. package/package.json +88 -0
  57. package/playwright.config.d.ts +4 -0
  58. package/playwright.config.mjs +38 -0
  59. package/public/styles.css +15 -0
  60. package/server.mjs +317 -0
  61. package/start.mjs +244 -0
  62. package/vite.config.d.ts +4 -0
  63. package/vite.config.mjs +35 -0
package/README.md ADDED
@@ -0,0 +1,267 @@
1
+ # FAST Test Harness
2
+
3
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
+
5
+ The `fast-test-harness` package is a Playwright testing harness for FAST Element web components with CSR and SSR support.
6
+
7
+ ## Installation
8
+
9
+ To install `fast-test-harness` using `npm`:
10
+
11
+ ```shell
12
+ npm install --save-dev @microsoft/fast-test-harness
13
+ ```
14
+
15
+ ## Writing tests
16
+
17
+ Import `test` and `expect` from the harness. Configure the component tag name with `test.use()`, then call `fastPage.setTemplate()` in each test to render it.
18
+
19
+ ```ts
20
+ import { expect, test } from "@microsoft/fast-test-harness";
21
+
22
+ test.describe("Button", () => {
23
+ test.use({ tagName: "my-button", innerHTML: "Click me" });
24
+
25
+ test("should render", async ({ fastPage }) => {
26
+ await fastPage.setTemplate();
27
+ await expect(fastPage.element).toBeVisible();
28
+ });
29
+
30
+ test("should accept attributes", async ({ fastPage }) => {
31
+ await fastPage.setTemplate({
32
+ attributes: { appearance: "primary", disabled: true },
33
+ });
34
+ await expect(fastPage.element).toHaveAttribute("appearance", "primary");
35
+ });
36
+
37
+ test("should work inside a form", async ({ fastPage }) => {
38
+ await fastPage.setTemplate(`
39
+ <form>
40
+ <my-button type="submit">Submit</my-button>
41
+ </form>
42
+ `);
43
+ await expect(fastPage.element).toBeVisible();
44
+ });
45
+ });
46
+ ```
47
+
48
+ Use `updateTemplate()` to modify attributes or innerHTML after the initial render without navigating away from the page:
49
+
50
+ ```ts
51
+ await fastPage.setTemplate();
52
+ await fastPage.updateTemplate(fastPage.element, { attributes: { disabled: true } });
53
+ ```
54
+
55
+ The `toHaveCustomState` assertion checks `ElementInternals` custom states:
56
+
57
+ ```ts
58
+ await expect(element).toHaveCustomState("checked");
59
+ ```
60
+
61
+ ## Fixture options
62
+
63
+ | Option | Type | Default | Description |
64
+ |--------|------|---------|-------------|
65
+ | `tagName` | `string` | `""` | Custom element tag name |
66
+ | `innerHTML` | `string` | `""` | Default inner HTML |
67
+ | `waitFor` | `string[]` | `[]` | Additional elements to wait for before testing |
68
+ | `ssr` | `boolean` | `false` | Use SSR mode (or set `PLAYWRIGHT_TEST_SSR=true`) |
69
+
70
+ ## Test directory setup
71
+
72
+ The harness serves a Vite dev server from a `test/` directory in your project. CSR and SSR modes use different entry points from the same directory.
73
+
74
+ ```
75
+ test/
76
+ ├── index.html # CSR: loads main.ts
77
+ ├── ssr.html # SSR: template with comment placeholders
78
+ ├── vite.config.ts # Vite config (shared by both modes)
79
+ └── src/
80
+ ├── main.ts # CSR: registers components, applies theme
81
+ ├── entry-client.ts # SSR: registers components for hydration
82
+ └── entry-server.ts # SSR: exports render() for fixture generation
83
+ ```
84
+
85
+ ### CSR files
86
+
87
+ **`index.html`** loads a script that registers your components:
88
+
89
+ ```html
90
+ <!doctype html>
91
+ <html lang="en">
92
+ <head><meta charset="UTF-8" /></head>
93
+ <body>
94
+ <script type="module" src="/src/main.ts"></script>
95
+ </body>
96
+ </html>
97
+ ```
98
+
99
+ **`main.ts`** registers components and applies global config. The body starts empty; `setTemplate()` injects HTML per test.
100
+
101
+ ```ts
102
+ import "./define-all.js";
103
+ import { setTheme } from "./theme.js";
104
+ setTheme(lightTheme);
105
+ ```
106
+
107
+ ### SSR files
108
+
109
+ **`ssr.html`** contains comment placeholders the server fills in per request:
110
+
111
+ ```html
112
+ <!doctype html>
113
+ <html lang="en">
114
+ <head>
115
+ <title><!--fixturetitle--></title>
116
+ <!--stylespreload-->
117
+ </head>
118
+ <body>
119
+ <!--fixture-->
120
+ <!--templates-->
121
+ <script type="module" src="/src/entry-client.ts"></script>
122
+ </body>
123
+ </html>
124
+ ```
125
+
126
+ **`entry-client.ts`** imports the harness SSR entry (which defines the `<f-template>` element) and registers components for DSD hydration using `defineAsync`:
127
+
128
+ ```ts
129
+ import "@microsoft/fast-test-harness/ssr/entry-client.js";
130
+
131
+ import { RenderableFASTElement } from "@microsoft/fast-html";
132
+ import { MyButton, definition } from "../../src/button/index.js";
133
+
134
+ RenderableFASTElement(MyButton).defineAsync({
135
+ name: definition.name,
136
+ templateOptions: "defer-and-hydrate",
137
+ });
138
+ ```
139
+
140
+ **`entry-server.ts`** exports a `render()` function that the server calls for each `setTemplate()` request. It returns three strings that get injected into `ssr.html`:
141
+
142
+ ```ts
143
+ export function render(queryObj: Record<string, string>): {
144
+ template: string; // <f-template> HTML → <!--templates-->
145
+ fixture: string; // rendered element HTML → <!--fixture-->
146
+ preloadLinks: string; // <link> tags → <!--stylespreload-->
147
+ };
148
+ ```
149
+
150
+ Use `createSSRRenderer` from the harness to build the `render()` function. It scans for component build artifacts (f-templates, stylesheets) and uses the `@microsoft/fast-build` WASM renderer to produce declarative shadow DOM on each request.
151
+
152
+ **Multi-component package** (all components in one package):
153
+
154
+ ```ts
155
+ import { createSSRRenderer } from "@microsoft/fast-test-harness/ssr/render.js";
156
+
157
+ const { render } = createSSRRenderer({
158
+ packageName: "@my-scope/web-components",
159
+ tagPrefix: "my",
160
+ });
161
+
162
+ export { render };
163
+ ```
164
+
165
+ **Per-component packages** (each component is a separate npm package):
166
+
167
+ ```ts
168
+ import { createSSRRenderer } from "@microsoft/fast-test-harness/ssr/render.js";
169
+
170
+ const { render } = createSSRRenderer({
171
+ tagPrefix: "my",
172
+ components: [
173
+ { name: "button", packageName: "@my-scope/button" },
174
+ { name: "checkbox", packageName: "@my-scope/checkbox" },
175
+ ],
176
+ });
177
+
178
+ export { render };
179
+ ```
180
+
181
+ ## Server
182
+
183
+ The package includes a Node.js HTTP server with Vite middleware that handles both CSR page serving and SSR fixture generation. Run it directly or let Playwright manage it via `webServer`:
184
+
185
+ ```ts
186
+ // playwright.config.ts
187
+ export default defineConfig({
188
+ webServer: {
189
+ command: "fast-test-harness",
190
+ port: 3278,
191
+ reuseExistingServer: true,
192
+ },
193
+ });
194
+ ```
195
+
196
+ For custom setup, import `startServer`:
197
+
198
+ ```ts
199
+ import { startServer } from "@microsoft/fast-test-harness/server.mjs";
200
+ await startServer(process.cwd(), "./test", "./test/vite.config.ts", {
201
+ port: 4000,
202
+ debug: true,
203
+ });
204
+ ```
205
+
206
+ | Parameter | Default | Description |
207
+ | --------- | ------- | ----------- |
208
+ | `cwd` | `process.cwd()` | Static file serving root |
209
+ | `root` | `<cwd>/test` | Vite root (contains `index.html`, `ssr.html`) |
210
+ | `configFile` | Vite auto-discovery | Vite config path |
211
+ | `options.port` | `3278` | Server port |
212
+ | `options.base` | `/` | Base URL path |
213
+ | `options.debug` | `false` | Write SSR fixtures to `temp/` for inspection |
214
+
215
+ ### CLI flags
216
+
217
+ ```
218
+ fast-test-harness [command] [options]
219
+
220
+ Commands:
221
+ serve Start the test harness dev server (default)
222
+ generate-templates Generate <f-template> HTML files from compiled templates
223
+ generate-stylesheets Generate CSS files from compiled ElementStyles
224
+ generate-webui-templates Generate WebUI-compatible DSD templates
225
+
226
+ Serve options:
227
+ -p, --port <number> Server port (default: 3278)
228
+ -b, --base <path> Base URL path (default: /)
229
+ -r, --root <path> Vite root directory (default: <cwd>/test)
230
+ -c, --config <path> Vite config file path (default: Vite auto-discovery)
231
+ -d, --debug Write SSR fixtures to temp/ for inspection
232
+ -v, --version Show version number
233
+ -h, --help Show help message
234
+ ```
235
+
236
+ CLI flags take precedence over environment variables.
237
+
238
+ | Environment variable | Default | Description |
239
+ | -------------------- | ------- | ----------- |
240
+ | `PORT` | `3278` | Server port (overridden by `--port`) |
241
+ | `BASE` | `/` | Base URL path (overridden by `--base`) |
242
+ | `FAST_DEBUG` | — | Set `"true"` to enable debug mode (overridden by `--debug`) |
243
+ | `PLAYWRIGHT_TEST_SSR` | — | Set `"true"` for SSR mode |
244
+
245
+ ## SSR renderer
246
+
247
+ **`createSSRRenderer(options)`** scans for component build artifacts and returns a `{ render }` object compatible with the server's `entry-server.ts` contract. It uses the `@microsoft/fast-build` WASM module to render f-templates into declarative shadow DOM.
248
+
249
+ | Option | Type | Description |
250
+ |--------|------|-------------|
251
+ | `tagPrefix` | `string` | Tag name prefix for custom elements (e.g., `"fluent"`, `"mai"`) |
252
+ | `packageName` | `string?` | Monolithic package name — scans subdirectories for component artifacts. Mutually exclusive with `components`. |
253
+ | `components` | `ComponentRegistration[]?` | Explicit list of per-component packages. Mutually exclusive with `packageName`. |
254
+ | `distDir` | `string?` | Artifact directory relative to the package root (default: `"dist/esm"`). Only used with `packageName`. |
255
+ | `themeStylesheet` | `string?` | URL or package specifier for a global theme stylesheet. |
256
+
257
+ ## Exports
258
+
259
+ | Specifier | Contents |
260
+ |-----------|----------|
261
+ | `@microsoft/fast-test-harness` | `test`, `expect`, `CSRFixture`, `SSRFixture`, `createSSRRenderer`, build utilities |
262
+ | `@microsoft/fast-test-harness/server.mjs` | `startServer` |
263
+ | `@microsoft/fast-test-harness/ssr/render.js` | `createSSRRenderer`, `ComponentRegistration`, `RenderResult`, `SSRRendererOptions` |
264
+ | `@microsoft/fast-test-harness/build/*.js` | `installDomShim`, `generateStylesheets`, `generateFTemplates`, `generateWebuiTemplates` |
265
+ | `@microsoft/fast-test-harness/playwright.config.mjs` | Shared Playwright configuration |
266
+ | `@microsoft/fast-test-harness/vite.config.mjs` | Shared Vite configuration |
267
+ | `@microsoft/fast-test-harness/public/*` | Static assets (base CSS) |
package/dist/dts/build/dom-shim.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Minimal DOM shim for running FAST Element's `css` and `html` tagged
3
+ * templates in Node.js. Provides just enough of the DOM API to resolve
4
+ * `ElementStyles.toString()` and compile `html` templates.
5
+ *
6
+ * This module is idempotent — if `globalThis.window` is already defined,
7
+ * no shims are applied.
8
+ */
9
+ export declare function installDomShim(): void;
10
+ //# sourceMappingURL=dom-shim.d.ts.map
package/dist/dts/build/dom-shim.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dom-shim.d.ts","sourceRoot":"","sources":["../../../src/build/dom-shim.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA0HH,wBAAgB,cAAc,IAAI,IAAI,CA2BrC"}
package/dist/dts/build/dom-shim.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=dom-shim.test.d.ts.map
package/dist/dts/build/dom-shim.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dom-shim.test.d.ts","sourceRoot":"","sources":["../../../src/build/dom-shim.test.ts"],"names":[],"mappings":""}
package/dist/dts/build/generate-stylesheets.d.ts ADDED
@@ -0,0 +1,62 @@
1
+ /**
2
+ * Style extraction — converts compiled FAST ElementStyles JS modules
3
+ * into plain CSS files.
4
+ *
5
+ * Usage as a module:
6
+ * ```ts
7
+ * import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
8
+ *
9
+ * await generateStylesheets({ cwd: process.cwd() });
10
+ * ```
11
+ *
12
+ * Usage as a Lage worker:
13
+ * ```ts
14
+ * import { generateStylesheets } from "@microsoft/fast-test-harness/build/generate-stylesheets.js";
15
+ *
16
+ * export default async function init({ target }) {
17
+ * await generateStylesheets({ cwd: target.cwd });
18
+ * }
19
+ * ```
20
+ */
21
+ export interface GenerateStylesheetsOptions {
22
+ /**
23
+ * Root directory of the package. Defaults to `process.cwd()`.
24
+ */
25
+ cwd?: string;
26
+ /**
27
+ * Directory containing compiled JS style modules, relative to `cwd`.
28
+ * @default "dist"
29
+ */
30
+ distDir?: string;
31
+ /**
32
+ * Glob pattern for style modules, relative to `distDir`.
33
+ * @default `**​/*.styles.js`
34
+ */
35
+ pattern?: string;
36
+ /**
37
+ * Output directory for generated CSS files, relative to `cwd`.
38
+ * When set, output files are written here instead of next to the
39
+ * source JS modules.
40
+ * @default distDir
41
+ */
42
+ outDir?: string;
43
+ /**
44
+ * Optional formatter function applied to extracted CSS before writing.
45
+ * Receives the CSS string and output file path, returns formatted CSS.
46
+ *
47
+ * Example with Prettier:
48
+ * ```ts
49
+ * import prettier from "prettier";
50
+ *
51
+ * await generateStylesheets({
52
+ * format: async (css, filePath) => {
53
+ * const options = await prettier.resolveConfig(filePath);
54
+ * return prettier.format(css, { ...options, filepath: filePath });
55
+ * },
56
+ * });
57
+ * ```
58
+ */
59
+ format?: (css: string, filePath: string) => string | Promise<string>;
60
+ }
61
+ export declare function generateStylesheets(options?: GenerateStylesheetsOptions): Promise<void>;
62
+ //# sourceMappingURL=generate-stylesheets.d.ts.map
package/dist/dts/build/generate-stylesheets.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate-stylesheets.d.ts","sourceRoot":"","sources":["../../../src/build/generate-stylesheets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAQH,MAAM,WAAW,0BAA0B;IACvC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACxE;AAiBD,wBAAsB,mBAAmB,CACrC,OAAO,GAAE,0BAA+B,GACzC,OAAO,CAAC,IAAI,CAAC,CAuDf"}
package/dist/dts/build/generate-stylesheets.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=generate-stylesheets.test.d.ts.map
package/dist/dts/build/generate-stylesheets.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate-stylesheets.test.d.ts","sourceRoot":"","sources":["../../../src/build/generate-stylesheets.test.ts"],"names":[],"mappings":""}
package/dist/dts/build/generate-templates.d.ts ADDED
@@ -0,0 +1,69 @@
1
+ /**
2
+ * F-template generation — converts compiled FAST Element ViewTemplate
3
+ * JS modules into declarative `<f-template>` HTML files.
4
+ *
5
+ * This reverse-engineers FAST Element's internal binding marker format
6
+ * back into human-readable f-template syntax (`f-ref`, `f-slotted`,
7
+ * `@event`, `?bool`, `:prop`, `{{expr}}`).
8
+ *
9
+ * Usage as a module:
10
+ * ```ts
11
+ * import { generateFTemplates } from "@microsoft/fast-test-harness/build/generate-templates.js";
12
+ *
13
+ * await generateFTemplates({ cwd: process.cwd(), tagPrefix: "fluent" });
14
+ * ```
15
+ */
16
+ export interface GenerateFTemplatesOptions {
17
+ /**
18
+ * Root directory of the package. Defaults to `process.cwd()`.
19
+ */
20
+ cwd?: string;
21
+ /**
22
+ * Directory containing compiled JS template modules, relative to `cwd`.
23
+ * @default "dist"
24
+ */
25
+ distDir?: string;
26
+ /**
27
+ * Glob pattern for template modules, relative to `distDir`.
28
+ * @default `**​/*.template.js`
29
+ */
30
+ pattern?: string;
31
+ /**
32
+ * Output directory for generated HTML files, relative to `cwd`.
33
+ * When set, output files are written here instead of next to the
34
+ * source JS modules.
35
+ * @default distDir
36
+ */
37
+ outDir?: string;
38
+ /**
39
+ * Tag name prefix for generated component names.
40
+ * Combined with the component directory name: `${tagPrefix}-${componentName}`.
41
+ * @default "fast"
42
+ */
43
+ tagPrefix?: string;
44
+ /**
45
+ * Optional formatter function applied to generated HTML before writing.
46
+ */
47
+ format?: (html: string, filePath: string) => string | Promise<string>;
48
+ }
49
+ export interface ViewTemplate {
50
+ html: string | HTMLTemplateElement;
51
+ factories: Record<string, Factory>;
52
+ }
53
+ interface Factory {
54
+ constructor: {
55
+ name: string;
56
+ };
57
+ options?: any;
58
+ dataBinding?: {
59
+ evaluate: (...args: any[]) => any;
60
+ };
61
+ }
62
+ /**
63
+ * Convert a ViewTemplate's html string and factories into an
64
+ * f-template HTML string.
65
+ */
66
+ export declare function convertTemplate(viewTemplate: ViewTemplate, componentName: string): string | null;
67
+ export declare function generateFTemplates(options?: GenerateFTemplatesOptions): Promise<void>;
68
+ export {};
69
+ //# sourceMappingURL=generate-templates.d.ts.map
package/dist/dts/build/generate-templates.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate-templates.d.ts","sourceRoot":"","sources":["../../../src/build/generate-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AA8BH,MAAM,WAAW,yBAAyB;IACtC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACzE;AAED,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,UAAU,OAAO;IACb,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,WAAW,CAAC,EAAE;QACV,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;KACrC,CAAC;CACL;AAmFD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,MAAM,GACtB,MAAM,GAAG,IAAI,CA4Hf;AAED,wBAAsB,kBAAkB,CACpC,OAAO,GAAE,yBAA8B,GACxC,OAAO,CAAC,IAAI,CAAC,CAkEf"}
package/dist/dts/build/generate-templates.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=generate-templates.test.d.ts.map
package/dist/dts/build/generate-templates.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate-templates.test.d.ts","sourceRoot":"","sources":["../../../src/build/generate-templates.test.ts"],"names":[],"mappings":""}
package/dist/dts/build/generate-webui-templates.d.ts ADDED
@@ -0,0 +1,54 @@
1
+ /**
2
+ * WebUI template generation — converts compiled FAST Element ViewTemplate
3
+ * JS modules into declarative shadow DOM `<template>` HTML files suitable
4
+ * for WebUI consumers.
5
+ *
6
+ * Webui templates preserve all bindings from the f-template but use a
7
+ * different wrapper:
8
+ * - `<template shadowrootmode="open">` instead of `<f-template name="...">`
9
+ * - No `{{styles}}` placeholder (styles are linked externally)
10
+ * - Shadow options (e.g. `shadowrootdelegatesfocus`) propagated from the
11
+ * companion `*.definition-async.js` module
12
+ *
13
+ * Usage as a module:
14
+ * ```ts
15
+ * import { generateWebuiTemplates } from "@microsoft/fast-test-harness/build/generate-webui-templates.js";
16
+ *
17
+ * await generateWebuiTemplates({ cwd: process.cwd(), tagPrefix: "mai" });
18
+ * ```
19
+ */
20
+ export interface GenerateWebuiTemplatesOptions {
21
+ /**
22
+ * Root directory of the package. Defaults to `process.cwd()`.
23
+ */
24
+ cwd?: string;
25
+ /**
26
+ * Directory containing compiled JS template modules, relative to `cwd`.
27
+ * @default "dist"
28
+ */
29
+ distDir?: string;
30
+ /**
31
+ * Glob pattern for template modules, relative to `distDir`.
32
+ * @default "**\/*.template.js"
33
+ */
34
+ pattern?: string;
35
+ /**
36
+ * Output directory for generated HTML files, relative to `cwd`.
37
+ * When set, output files are written here instead of next to the
38
+ * source JS modules.
39
+ * @default distDir
40
+ */
41
+ outDir?: string;
42
+ /**
43
+ * Tag name prefix for generated component names.
44
+ * Combined with the component directory name: `${tagPrefix}-${componentName}`.
45
+ * @default "fast"
46
+ */
47
+ tagPrefix?: string;
48
+ /**
49
+ * Optional formatter function applied to generated HTML before writing.
50
+ */
51
+ format?: (html: string, filePath: string) => string | Promise<string>;
52
+ }
53
+ export declare function generateWebuiTemplates(options?: GenerateWebuiTemplatesOptions): Promise<void>;
54
+ //# sourceMappingURL=generate-webui-templates.d.ts.map
package/dist/dts/build/generate-webui-templates.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate-webui-templates.d.ts","sourceRoot":"","sources":["../../../src/build/generate-webui-templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAgBH,MAAM,WAAW,6BAA6B;IAC1C;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACzE;AAuED,wBAAsB,sBAAsB,CACxC,OAAO,GAAE,6BAAkC,GAC5C,OAAO,CAAC,IAAI,CAAC,CAmEf"}
package/dist/dts/build/generate-webui-templates.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=generate-webui-templates.test.d.ts.map
package/dist/dts/build/generate-webui-templates.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate-webui-templates.test.d.ts","sourceRoot":"","sources":["../../../src/build/generate-webui-templates.test.ts"],"names":[],"mappings":""}
package/dist/dts/fixtures/assertions.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { type ExpectMatcherState, type Locator } from "@playwright/test";
2
+ /**
3
+ * Evaluate whether an element has the given state on its `elementInternals`
4
+ * property using the `:state()` pseudo-class.
5
+ *
6
+ * @param locator - The Playwright locator for the element.
7
+ * @param state - The name of the state.
8
+ * @param options - Optional timeout configuration.
9
+ */
10
+ export declare function toHaveCustomState(this: ExpectMatcherState, locator: Locator, state: string, options?: {
11
+ timeout?: number;
12
+ }): Promise<{
13
+ name: string;
14
+ message: () => string;
15
+ pass: boolean;
16
+ expected: boolean;
17
+ actual: any;
18
+ }>;
19
+ //# sourceMappingURL=assertions.d.ts.map
package/dist/dts/fixtures/assertions.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"assertions.d.ts","sourceRoot":"","sources":["../../../src/fixtures/assertions.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,kBAAkB,EACvB,KAAK,OAAO,EACf,MAAM,kBAAkB,CAAC;AAE1B;;;;;;;GAOG;AACH,wBAAsB,iBAAiB,CACnC,IAAI,EAAE,kBAAkB,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE;;;;;;GAkDjC"}
package/dist/dts/fixtures/csr-fixture.d.ts ADDED
@@ -0,0 +1,114 @@
1
+ import type { Locator, Page } from "@playwright/test";
2
+ export type ThemeTokens = Record<string, string | number | boolean>;
3
+ export type InitialTemplateAttributes = Record<string, string | true>;
4
+ export type TemplateAttributes = Record<string, string | boolean>;
5
+ /**
6
+ * The options for configuring the fixture's template.
7
+ */
8
+ export type InitialTemplateOptions = {
9
+ attributes?: InitialTemplateAttributes;
10
+ innerHTML?: string;
11
+ };
12
+ export type FixtureOptions = Omit<InitialTemplateOptions, "attributes"> & {
13
+ attributes?: TemplateAttributes;
14
+ };
15
+ /**
16
+ * The template configuration, which can be a raw HTML string or fixture
17
+ * options.
18
+ */
19
+ export type TemplateOrOptions = InitialTemplateOptions | string;
20
+ /**
21
+ * A fixture for testing FAST components with Playwright.
22
+ */
23
+ export declare class CSRFixture {
24
+ readonly page: Page;
25
+ /**
26
+ * The Playwright locator for the custom element.
27
+ */
28
+ readonly element: Locator;
29
+ /**
30
+ * The tag name of the custom element.
31
+ */
32
+ protected readonly tagName: string;
33
+ /**
34
+ * The inner HTML of the custom element.
35
+ */
36
+ protected readonly innerHTML: string;
37
+ /**
38
+ * Additional custom elements to wait for before running the test.
39
+ */
40
+ protected readonly waitFor: string[];
41
+ /**
42
+ * Creates an instance of the CSRFixture.
43
+ *
44
+ * @param page - The Playwright page object.
45
+ * @param tagName - The tag name of the custom element.
46
+ * @param innerHTML - The inner HTML of the custom element.
47
+ * @param waitFor - Additional custom elements to wait for.
48
+ */
49
+ constructor(page: Page, tagName: string, innerHTML: string, waitFor?: string[]);
50
+ /**
51
+ * Adds a style tag to the page.
52
+ *
53
+ * @param options - The options for the style tag.
54
+ * @see {@link Page.addStyleTag}
55
+ */
56
+ addStyleTag(options: Parameters<Page["addStyleTag"]>[0]): Promise<void>;
57
+ /**
58
+ * Navigates to the specified URL.
59
+ *
60
+ * @param url - The URL to navigate to. Defaults to "/".
61
+ */
62
+ goto(url?: string): Promise<void>;
63
+ /**
64
+ * Applies a set of design tokens as CSS custom properties on the body.
65
+ *
66
+ * @param tokens - A record mapping token names to values. Each key will
67
+ * be prefixed with `--` and set as a CSS custom property.
68
+ */
69
+ applyTokens(tokens: ThemeTokens): Promise<void>;
70
+ /**
71
+ * Generates the default template for the fixture.
72
+ */
73
+ private defaultTemplate;
74
+ /**
75
+ * Sets the template for the fixture's page.
76
+ *
77
+ * When `templateOrOptions` is an object, the method merges specific
78
+ * template options with values configured via the Playwright `test.use`
79
+ * configuration for the current test suite.
80
+ *
81
+ * If `templateOrOptions` is a string, it is treated as the complete HTML
82
+ * body for the fixture.
83
+ *
84
+ * If `templateOrOptions` is not provided, the method uses the default
85
+ * template based on the fixture's `tagName` and `innerHTML` properties.
86
+ *
87
+ * @param templateOrOptions - The template configuration.
88
+ */
89
+ setTemplate(templateOrOptions?: TemplateOrOptions): Promise<void>;
90
+ /**
91
+ * Waits for the fixture to reach a stable state.
92
+ *
93
+ * This includes waiting for the custom element and any additional
94
+ * specified elements to be defined and for the body to become stable.
95
+ */
96
+ protected waitForStability(): Promise<void>;
97
+ /**
98
+ * Updates the content of the fixture by modifying the specified
99
+ * element's attributes and/or inner HTML.
100
+ *
101
+ * @param locator - The locator or selector for the element to update.
102
+ * @param options - The options for updating the element.
103
+ */
104
+ updateTemplate(locator: string | Locator, options: FixtureOptions): Promise<void>;
105
+ /**
106
+ * Waits for the specified custom elements to be defined in the
107
+ * browser's CustomElementRegistry.
108
+ *
109
+ * @param tagName - The primary tag name to wait for.
110
+ * @param tagNames - Additional tag names to wait for.
111
+ */
112
+ waitForCustomElement(tagName?: string, ...tagNames: string[]): Promise<void>;
113
+ }
114
+ //# sourceMappingURL=csr-fixture.d.ts.map
package/dist/dts/fixtures/csr-fixture.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"csr-fixture.d.ts","sourceRoot":"","sources":["../../../src/fixtures/csr-fixture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAEpE,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,YAAY,CAAC,GAAG;IACtE,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GAAG,MAAM,CAAC;AAEhE;;GAEG;AACH,qBAAa,UAAU;aA8BC,IAAI,EAAE,IAAI;IA7B9B;;OAEG;IACH,SAAgB,OAAO,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAErC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAErC;;;;;;;OAOG;IACH,YACoB,IAAI,EAAE,IAAI,EAC1B,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,MAAM,EAAO,EAMzB;IAED;;;;;OAKG;IACG,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAE5E;IAED;;;;OAIG;IACG,IAAI,CAAC,GAAG,GAAE,MAAY,iBAE3B;IAED;;;;;OAKG;IACG,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CASpD;IAED;;OAEG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;;;;;;;;;;OAcG;IACG,WAAW,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAmBtE;IAED;;;;;OAKG;IACH,UAAgB,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,CAqBhD;IAED;;;;;;OAMG;IACG,cAAc,CAChB,OAAO,EAAE,MAAM,GAAG,OAAO,EACzB,OAAO,EAAE,cAAc,GACxB,OAAO,CAAC,IAAI,CAAC,CAuBf;IAED;;;;;;OAMG;IACG,oBAAoB,CACtB,OAAO,GAAE,MAAqB,EAC9B,GAAG,QAAQ,EAAE,MAAM,EAAE,GACtB,OAAO,CAAC,IAAI,CAAC,CAUf;CACJ"}
package/dist/dts/fixtures/csr-fixture.pw.spec.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=csr-fixture.pw.spec.d.ts.map
package/dist/dts/fixtures/csr-fixture.pw.spec.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"csr-fixture.pw.spec.d.ts","sourceRoot":"","sources":["../../../src/fixtures/csr-fixture.pw.spec.ts"],"names":[],"mappings":""}