chore: add WebUI integration test pipeline for FAST HTML fixtures#7429
Draft
chore: add WebUI integration test pipeline for FAST HTML fixtures#7429
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
janechu
changed the title
janechu
force-pushed
the
users/janechu/create-webui-integration-pipeline
branch
from
91484bb to
3610aac
Compare
Create a GitHub Action workflow and test script that validates @microsoft/webui can build and render the same declarative HTML fixtures used by @microsoft/fast-build. - Add scripts/webui-integration-test.mjs that extracts f-templates, runs webui build --plugin=fast, renders with state, and validates output for all 16 fixture directories - Add .github/workflows/ci-webui-integration.yml triggered on PRs and pushes to main - Add test:webui-integration npm script to fast-html package.json - Add @microsoft/webui as devDependency - Update DESIGN.md and README.md with integration test documentation Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ization - Add permissions: contents: read to ci-webui-integration.yml - Replace regex-based script tag removal with line filtering to avoid incomplete multi-character sanitization warning Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace custom .webui-integration-tmp directory with the already gitignored temp/ directory structure. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The previous lockfile was generated with the darwin-arm64 platform package resolved as a direct dependency rather than optional, causing npm ci to fail on Linux/Windows with EBADPLATFORM. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- 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>
- Create build-fixtures.utilities.js with discoverFixtures() and extractFTemplates() shared by both build scripts - Convert build-fixtures-with-webui.mjs to .js (package uses ESM) - Both scripts now import from the shared utilities module Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace markup validation with actual Playwright test execution: - build-fixtures-with-webui.js now only builds: renders fixtures with webui, writes index.html + main.ts + assets to temp/integrations/webui/ - Add playwright.webui.config.ts that serves the webui output via Vite and runs the same spec files from test/fixtures/ - Split into build:fixtures:webui and test:webui-integration npm scripts - Add Playwright browser install step to CI workflow - Update DESIGN.md and README.md Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Convert <f-when>/<f-repeat> to <if>/<for> in extractFTemplates so webui evaluates conditionals and repeats server-side. Add convertToWebuiSyntax() to shared utilities. Update WEBUI_ISSUES.md with findings on the hydration mismatch this reveals: webui's injected f-template blocks use <if>/<for> syntax while fast-html's client JS expects <f-when>/<f-repeat>. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Moved to the parent ideas folder where it belongs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
janechu
force-pushed
the
users/janechu/create-webui-integration-pipeline
branch
from
2d12c76 to
9a4f7d9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
📖 Description
Add a GitHub Action and integration test script that validates
@microsoft/webuican build and render the same declarative HTML fixture templates used by@microsoft/fast-build.The integration test script (
scripts/webui-integration-test.mjs) iterates over all 16 fixture directories inpackages/fast-html/test/fixtures/, extracts<f-template>components, builds them withwebui build --plugin=fast, renders the compiled protocol with each fixture'sstate.json, and validates the output contains the expected structure (declarative shadow DOM, hydration markers, f-template declarations).Key changes:
packages/fast-html/scripts/webui-integration-test.mjs.github/workflows/ci-webui-integration.ymltest:webui-integrationin@microsoft/fast-html@microsoft/webuias a devDependency📑 Test Plan
All 16 fixture integration tests pass locally:
Run with:
npm run test:webui-integration -w @microsoft/fast-htmlThe CI workflow runs automatically on PRs and pushes to main.
✅ Checklist
General
$ npm run change⏭ Next Steps
fast-buildandwebuirendered HTML to catch semantic differences.ci-validate-pr.ymlworkflow if isolation is no longer needed.