feat(web-components): enable DSD/SSR support and testing by radium-v · Pull Request #36105 · microsoft/fluentui

radium-v · 2026-05-05T22:53:48Z

Previous Behavior

The @fluentui/web-components package used a custom internal test harness (test/playwright/) with hand-rolled fixture classes, a separate Vite build step, and Node version detection workarounds in scripts/e2e.js. Tests ran exclusively in client-side rendering (CSR) mode — there was no support for server-side rendering (SSR) or Declarative Shadow DOM (DSD) testing. The @fluentui/tokens theme was applied only through the runtime JS setTheme() API, making it unavailable in SSR contexts. The fluent-compound-button component had no tests.

New Behavior

The package now uses @microsoft/fast-test-harness as its Playwright test infrastructure, with support for both CSR and SSR/DSD testing across all components.

Test harness migration: Replaced the internal test/playwright/ harness with @microsoft/fast-test-harness. All spec files import test and expect from the harness package. The e2e.js script is simplified to generate the token stylesheet and forward to playwright test.
SSR/DSD infrastructure: Added test/ssr.html, test/src/entry-client.ts, and test/src/entry-server.ts using createSSRRenderer for WASM-based declarative shadow DOM rendering. Added define-async.ts modules across all components to support DSD hydration via RenderableFASTElement.defineAsync(). Entry client eagerly imports all define-async modules via import.meta.glob.
Token stylesheet generation: Extended scripts/generate-tokens.js to also produce public/fluent-tokens.css — a plain CSS stylesheet with all webLightTheme token values under :root, enabling theme support in SSR fixtures without runtime JS.
New tests: Added a comprehensive test suite for fluent-compound-button covering form submission, focus management, disabled states, and the description slot.
Test improvements: Replaced test.step loops with updateTemplate() for attribute iteration tests in avatar, tablist, and textarea specs. Fixed flaky tests. Every test now explicitly calls fastPage.setTemplate().
Component fixes: Replaced $fastController.isConnected with elementInternals checks in checkbox and toggle-button. Moved slot population to connectedCallback in tree-item and drawer. Cleaned up redundant style properties in dialog-body, drawer, and text. Updated compound-button template to stay in sync with button.
Build additions: Added build:ssr:templates and build:ssr:styles scripts using the fast-test-harness CLI to generate f-template HTML and extracted CSS files into dist/esm/. Added define-async.js and template.html/styles.css to the package exports map.

github-actions · 2026-05-05T23:04:20Z

📊 Bundle size report

✅ No changes found

github-actions · 2026-05-05T23:09:49Z

Pull request demo site: URL

Copilot

Pull request overview

Migrates @fluentui/web-components from its custom Playwright harness to @microsoft/fast-test-harness, adds SSR/DSD-oriented entrypoints and generated assets, and updates the web-components test suite to run under the new infrastructure.

Changes:

Replaced the package-local Playwright harness/config with FAST test-harness/Vite-based setup and SSR client/server entries.
Added define-async.ts hydration entrypoints across many web components plus new tests for previously uncovered components.
Updated many existing specs to the new fixture lifecycle and added generated-token CSS support for SSR fixtures.

Reviewed changes

Copilot reviewed 118 out of 120 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
yarn.lock	Locks new FAST SSR/test-harness dependencies
packages/web-components/test/vite.config.ts	Configures Vite test harness public assets
packages/web-components/test/ssr.html	Adds SSR HTML shell
packages/web-components/test/src/vite-env.d.ts	Adds Vite client typings
packages/web-components/test/src/main.ts	Switches CSR bootstrapping to glob-based registration
packages/web-components/test/src/entry-server.ts	Adds SSR renderer entry
packages/web-components/test/src/entry-client.ts	Adds hydration client entry
packages/web-components/test/playwright/index.ts	Removes old local Playwright harness
packages/web-components/test/playwright/fast-fixture.ts	Removes old custom fixture implementation
packages/web-components/test/playwright/assertions.ts	Removes old custom assertions
packages/web-components/test/index.html	Updates CSR harness HTML
packages/web-components/test/harness/vite.config.ts	Removes legacy harness config
packages/web-components/src/tree/tree.spec.ts	Migrates test import
packages/web-components/src/tree/define-async.ts	Adds async define entry
packages/web-components/src/tree-item/tree-item.template.ts	Removes slot binding from template root
packages/web-components/src/tree-item/tree-item.spec.ts	Migrates test import
packages/web-components/src/tree-item/tree-item.base.ts	Moves slot assignment to connectedCallback
packages/web-components/src/tree-item/define-async.ts	Adds async define entry
packages/web-components/src/tooltip/tooltip.spec.ts	Migrates tests and explicit setup
packages/web-components/src/tooltip/define-async.ts	Adds async define entry
packages/web-components/src/toggle-button/toggle-button.ts	Uses `elementInternals` guard
packages/web-components/src/toggle-button/toggle-button.spec.ts	Migrates tests and explicit setup
packages/web-components/src/toggle-button/define-async.ts	Adds async define entry
packages/web-components/src/theme/set-theme.spec.ts	Migrates test import
packages/web-components/src/textarea/textarea.spec.ts	Updates fixture usage and stability
packages/web-components/src/text/text.styles.ts	Removes duplicate style rule
packages/web-components/src/text/text.spec.ts	Migrates tests and default content
packages/web-components/src/text/define-async.ts	Adds async define entry
packages/web-components/src/text-input/text-input.spec.ts	Migrates tests and explicit setup
packages/web-components/src/text-input/define-async.ts	Adds async define entry
packages/web-components/src/tablist/tablist.spec.ts	Migrates tests and setup flow
packages/web-components/src/tablist/define-async.ts	Adds async define entry
packages/web-components/src/tab/tab.spec.ts	Migrates test import
packages/web-components/src/tab/define-async.ts	Adds async define entry
packages/web-components/src/switch/switch.spec.ts	Migrates tests and explicit setup
packages/web-components/src/switch/define-async.ts	Adds async define entry
packages/web-components/src/spinner/spinner.spec.ts	Switches repeated setup to updates
packages/web-components/src/spinner/define-async.ts	Adds async define entry
packages/web-components/src/slider/slider.spec.ts	Migrates tests and explicit setup
packages/web-components/src/slider/define-async.ts	Adds async define entry
packages/web-components/src/rating-display/rating-display.spec.ts	Migrates tests and explicit setup
packages/web-components/src/rating-display/define-async.ts	Adds async define entry
packages/web-components/src/radio/radio.spec.ts	Migrates test import
packages/web-components/src/radio/define-async.ts	Adds async define entry
packages/web-components/src/radio-group/radio-group.spec.ts	Migrates test import
packages/web-components/src/radio-group/define-async.ts	Adds async define entry
packages/web-components/src/progress-bar/progress-bar.spec.ts	Migrates tests and explicit setup
packages/web-components/src/progress-bar/define-async.ts	Adds async define entry
packages/web-components/src/option/option.spec.ts	Migrates test import
packages/web-components/src/option/define-async.ts	Adds async define entry
packages/web-components/src/message-bar/message-bar.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/message-bar/define-async.ts	Adds async define entry
packages/web-components/src/menu/menu.spec.ts	Migrates tests and focus/contextmenu handling
packages/web-components/src/menu/define-async.ts	Adds async define entry
packages/web-components/src/menu-list/menu-list.template.ts	Removes slot binding from template root
packages/web-components/src/menu-list/menu-list.spec.ts	Migrates tests and explicit setup
packages/web-components/src/menu-list/menu-list.base.ts	Moves submenu slot assignment to connectedCallback
packages/web-components/src/menu-list/define-async.ts	Adds async define entry
packages/web-components/src/menu-item/menu-item.spec.ts	Adds new menu-item tests
packages/web-components/src/menu-item/define-async.ts	Adds async define entry
packages/web-components/src/menu-button/menu-button.styles.ts	Adds local style re-export
packages/web-components/src/menu-button/menu-button.spec.ts	Adds new menu-button test coverage
packages/web-components/src/menu-button/menu-button.definition.ts	Switches to local style module
packages/web-components/src/menu-button/index.ts	Reorders/extends exports
packages/web-components/src/menu-button/define-async.ts	Adds async define entry
packages/web-components/src/listbox/listbox.spec.ts	Migrates test import
packages/web-components/src/listbox/define-async.ts	Adds async define entry
packages/web-components/src/link/link.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/link/define-async.ts	Adds async define entry
packages/web-components/src/label/label.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/label/define-async.ts	Adds async define entry
packages/web-components/src/image/image.spec.ts	Migrates tests and fixture asset path
packages/web-components/src/image/define-async.ts	Adds async define entry
packages/web-components/src/field/field.spec.ts	Migrates test import
packages/web-components/src/field/define-async.ts	Adds async define entry with focus delegation
packages/web-components/src/dropdown/dropdown.spec.ts	Migrates tests and stabilizes form interactions
packages/web-components/src/dropdown/define-async.ts	Adds async define entry
packages/web-components/src/drawer/drawer.styles.ts	Removes redundant max-width
packages/web-components/src/drawer/drawer.spec.ts	Migrates tests and explicit nested body setup
packages/web-components/src/drawer/define-async.ts	Adds async define entry
packages/web-components/src/drawer-body/drawer-body.spec.ts	Adds new drawer-body tests
packages/web-components/src/drawer-body/define-async.ts	Adds async define entry
packages/web-components/src/divider/divider.spec.ts	Migrates tests and adds slot-content case
packages/web-components/src/divider/define-async.ts	Adds async define entry
packages/web-components/src/dialog/dialog.spec.ts	Migrates tests and explicit setup
packages/web-components/src/dialog/define-async.ts	Adds async define entry
packages/web-components/src/dialog-body/dialog-body.styles.ts	Fixes stylesheet block structure
packages/web-components/src/dialog-body/dialog-body.spec.ts	Adds new dialog-body tests
packages/web-components/src/dialog-body/define-async.ts	Adds async define entry
packages/web-components/src/counter-badge/define-async.ts	Adds async define entry
packages/web-components/src/counter-badge/counter-badge.spec.ts	Migrates tests and updateTemplate usage
packages/web-components/src/compound-button/define-async.ts	Adds async define entry
packages/web-components/src/compound-button/compound-button.template.ts	Aligns template root with button
packages/web-components/src/compound-button/compound-button.spec.ts	Adds broad compound-button coverage
packages/web-components/src/checkbox/define-async.ts	Adds async define entry
packages/web-components/src/checkbox/checkbox.spec.ts	Migrates tests and setup details
packages/web-components/src/checkbox/checkbox.base.ts	Uses `elementInternals` guard
packages/web-components/src/button/define-async.ts	Adds async define entry
packages/web-components/src/button/button.spec.ts	Migrates tests and SSR autofocus skip
packages/web-components/src/badge/define-async.ts	Adds async define entry
packages/web-components/src/badge/badge.spec.ts	Refactors repeated attribute tests
packages/web-components/src/avatar/define-async.ts	Adds async define entry
packages/web-components/src/avatar/avatar.spec.ts	Migrates tests and splits step-based cases
packages/web-components/src/anchor-button/define-async.ts	Adds async define entry
packages/web-components/src/anchor-button/anchor-button.spec.ts	Adjusts navigation assertions for harness
packages/web-components/src/accordion/define-async.ts	Adds async define entry
packages/web-components/src/accordion/accordion.spec.ts	Migrates tests and avoids dependent WC in one case
packages/web-components/src/accordion-item/define-async.ts	Adds async define entry
packages/web-components/src/accordion-item/accordion-item.spec.ts	Updates waitFor dependency
packages/web-components/scripts/generate-tokens.js	Generates TS tokens and CSS token stylesheet
packages/web-components/scripts/e2e.js	Removes legacy e2e wrapper
packages/web-components/rollup.config.js	Sets rollup context
packages/web-components/playwright.config.ts	Switches to FAST test-harness Playwright config
packages/web-components/package.json	Adds SSR build steps/exports and updates scripts
packages/web-components/.gitignore	Ignores generated token CSS
packages/charts/chart-web-components/package.json	Removes unused FAST dependency
package.json	Adds root FAST SSR/test-harness deps
change/@fluentui-web-components-9e4886ef-09cc-426e-a4bf-b570d204e14b.json	Adds web-components change file
change/@fluentui-chart-web-components-8ab5a04f-bd00-487d-a7d5-0cd8b395e1bb.json	Adds chart package housekeeping change file
apps/vr-tests-web-components/package.json	Removes unused FAST dependency

Copilot

Pull request overview

Copilot reviewed 118 out of 120 changed files in this pull request and generated 7 comments.

…s run in DSD mode

…in DSD mode

…heck in setValidity and setPressedState methods

…body, drawer, and text styles

…unning tests

…, and adjust TypeScript config

microsoft-github-policy-service Bot added the Area: Build System label May 5, 2026

radium-v changed the title ~~feat(web-components):~~ feat(web-components): enable DSD/SSR support and testing May 5, 2026

radium-v requested a review from Copilot May 5, 2026 23:23

Copilot started reviewing on behalf of radium-v May 5, 2026 23:24 View session

Copilot AI reviewed May 5, 2026

View reviewed changes

Comment thread packages/web-components/package.json Outdated

Comment thread packages/web-components/src/image/image.spec.ts Outdated

Comment thread packages/web-components/package.json

marchbox added the web-components label May 6, 2026

github-project-automation Bot added this to @fluentui Web Components May 6, 2026

github-actions Bot reviewed May 6, 2026

View reviewed changes

Comment thread apps/vr-tests-web-components/package.json

radium-v force-pushed the users/radium-v/wc-fast-test-harness branch from 165fb07 to 902e9be Compare May 6, 2026 17:05

radium-v requested a review from Copilot May 6, 2026 17:39

Copilot started reviewing on behalf of radium-v May 6, 2026 17:52 View session

radium-v force-pushed the users/radium-v/wc-fast-test-harness branch from 241521b to e1c9a1d Compare May 6, 2026 19:12

radium-v requested review from Copilot and removed request for Copilot May 6, 2026 20:18

Copilot started reviewing on behalf of radium-v May 6, 2026 20:19 View session

Copilot AI reviewed May 6, 2026

View reviewed changes

radium-v added 12 commits May 6, 2026 22:23

chore: update fast-element and add new dependencies in package.json

ea6d3f1

replace test harness with fast-test-harness

5075a09

set up test harness for DSD testing via fast-test-harness

826dd9e

update test imports to use fast-test-harness

2154b37

add accordion and accordion-item define-async modules and ensure test…

2596b7d

…s run in DSD mode

add anchor-button and link define-async modules and ensure tests run …

5363eca

…in DSD mode

add avatar define-async module and ensure tests run in DSD mode

17c248e

add badge define-async module and ensure tests run in DSD mode

08581a7

add define-async modules

5b354f7

move tree-item slot assignment to connectedCallback

f7a1236

refactor: replace $fastController.isConnected with elementInternals c…

41d553d

…heck in setValidity and setPressedState methods

update compound-button template to be in sync with button template

862c038

radium-v added 12 commits May 6, 2026 22:23

fix entry-server stylesheet

12cdb0e

move slot population to connectedcallback

5331fe9

refactor: clean up styles by removing redundant properties in dialog-…

be867ed

…body, drawer, and text styles

fix flaky tests and clean up

68aac51

fix rebase

8599c8b

change files

1eac8a7

export define-async modules

310efd6

update image source path in tests

f6a0cea

restore e2e script and ensure tokens stylesheet is generated before r…

32cdb68

…unning tests

call fastPage.setTemplate() in every test

82befe0

typo

8d3fd9c

Add common initialization for CSR and SSR tests, update entry modules…

f1d2da5

…, and adjust TypeScript config

radium-v force-pushed the users/radium-v/wc-fast-test-harness branch from e1c9a1d to f1d2da5 Compare May 7, 2026 05:24

remove unused const

6863ce7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web-components): enable DSD/SSR support and testing#36105

feat(web-components): enable DSD/SSR support and testing#36105
radium-v wants to merge 25 commits intomicrosoft:masterfrom
radium-v:users/radium-v/wc-fast-test-harness

radium-v commented May 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

radium-v commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Uh oh!

github-actions Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions Bot commented May 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

radium-v commented May 5, 2026 •

edited

Loading

github-actions Bot commented May 5, 2026 •

edited

Loading