fix(vr-tests-react-components): migrate to new StoryWright api to define Steps to resolve VR snapshoting issues by Hotell · Pull Request #33860 · microsoft/fluentui

Hotell · 2025-02-18T14:54:56Z

Previous Behavior

New Behavior

migrates to new StoryWright version
migrates problematic v9 VR Tests to new StoryWright API
enables failing CI if invalid VR Tests are part of PR

NOTE: v9 - vr-tests-react-components (includes charting as well)

Issue	Before	After
`Steps object is undefined (v9)`	545	0 / 𝚫100% improvement
`errors occurred while processing Stories to obtain Steps definitions:`	149	0 / 𝚫100% improvement
`VR tests count (v9)`	2750	2850 / 𝚫4% improvement
`making screenshots pass rate`	70%	100%

Related Issue(s)

Needs feat: implement new parameters api, make cli --help work and notify user on page errors that occured while processing stories for Steps storywright#73
Fixes [Bug]: v9 VR tests silently fail when griffel makeStyles api is used directly for story rendering #33861

github-actions · 2025-02-18T15:06:19Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react` ExtendedPicker	`96.915 kB` `27.908 kB`	`96.915 kB` `27.907 kB`	`-1 B`
`react` FloatingPicker	`242.388 kB` `69.002 kB`	`242.388 kB` `69.003 kB`	`1 B`
`react` Fluent UI React (entire library)	`1.019 MB` `282.96 kB`	`1.019 MB` `282.962 kB`	`2 B`
`react` SelectedItemsList	`232.878 kB` `67.891 kB`	`232.878 kB` `67.893 kB`	`2 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `328 B`
`global-context` createContextSelector	`537 B` `339 B`
`keyboard-key` keyboard-key package	`3.746 kB` `1.928 kB`
`keyboard-keys` Multiple keyCodes	`50 B` `70 B`
`keyboard-keys` Multiple keys	`87 B` `94 B`
`keyboard-keys` Single key	`44 B` `64 B`
`keyboard-keys` Single keyCode	`39 B` `59 B`
`priority-overflow` createOverflowManager	`4.481 kB` `1.864 kB`
`react` ActivityItem	`71.236 kB` `23.357 kB`
`react` Announced	`38.489 kB` `13.296 kB`
`react` Autofill	`15.459 kB` `4.782 kB`
`react` Breadcrumb	`202.318 kB` `60.388 kB`
`react` Button	`195.791 kB` `56.627 kB`
`react` ButtonGrid	`180.722 kB` `54.627 kB`
`react` Calendar	`121.875 kB` `37.024 kB`
`react` Callout	`84.323 kB` `27.64 kB`
`react` Check	`53.204 kB` `17.848 kB`
`react` Checkbox	`59.985 kB` `19.903 kB`
`react` ChoiceGroup	`65.494 kB` `21.489 kB`
`react` ChoiceGroupOption	`58.767 kB` `19.362 kB`
`react` Coachmark	`93.121 kB` `29.414 kB`
`react` Color	`7.789 kB` `3.127 kB`
`react` ColorPicker	`135.292 kB` `42.21 kB`
`react` ComboBox	`252.278 kB` `72.315 kB`
`react` CommandBar	`203.359 kB` `60.141 kB`
`react` ContextualMenu	`155.243 kB` `48.202 kB`
`react` DatePicker	`184.295 kB` `56.15 kB`
`react` DateTimeUtilities	`5.244 kB` `1.849 kB`
`react` DetailsList	`229.909 kB` `65.781 kB`
`react` Dialog	`211.717 kB` `63.165 kB`
`react` Divider	`19.603 kB` `6.845 kB`
`react` DocumentCard	`217.336 kB` `64.44 kB`
`react` DragDrop	`8.343 kB` `2.724 kB`
`react` DraggableZone	`34.303 kB` `11.511 kB`
`react` Dropdown	`234.695 kB` `68.743 kB`
`react` Fabric	`41.745 kB` `14.366 kB`
`react` Facepile	`210.893 kB` `63.167 kB`
`react` FocusTrapZone	`17.023 kB` `5.911 kB`
`react` FocusZone	`55.159 kB` `17.492 kB`
`react` Grid	`180.722 kB` `54.627 kB`
`react` GroupedList	`135.07 kB` `40.7 kB`
`react` GroupedListV2	`122.687 kB` `37.788 kB`
`react` HoverCard	`97.16 kB` `30.787 kB`
`react` Icon	`51.885 kB` `17.272 kB`
`react` Icons	`66.361 kB` `24.397 kB`
`react` Image	`46.904 kB` `15.707 kB`
`react` Keytip	`81.693 kB` `26.766 kB`
`react` KeytipData	`14.032 kB` `4.582 kB`
`react` KeytipLayer	`103.478 kB` `32.006 kB`
`react` Keytips	`106.242 kB` `33.002 kB`
`react` Label	`38.347 kB` `13.257 kB`
`react` Layer	`48.099 kB` `16.367 kB`
`react` Link	`39.682 kB` `13.67 kB`
`react` List	`39.371 kB` `12.463 kB`
`react` MarqueeSelection	`74.517 kB` `22.433 kB`
`react` MessageBar	`190.869 kB` `57.103 kB`
`react` Modal	`93.738 kB` `30.271 kB`
`react` Nav	`188.306 kB` `56.485 kB`
`react` OverflowSet	`33.385 kB` `11.314 kB`
`react` Overlay	`40.902 kB` `14.095 kB`
`react` Panel	`201.808 kB` `60.106 kB`
`react` Persona	`114.948 kB` `36.532 kB`
`react` PersonaCoin	`114.948 kB` `36.532 kB`
`react` PersonaPresence	`58.074 kB` `19.384 kB`
`react` Pickers	`299.085 kB` `83.664 kB`
`react` Pivot	`189.226 kB` `57.267 kB`
`react` Popup	`12.294 kB` `4.195 kB`
`react` Positioning	`22.807 kB` `7.701 kB`
`react` PositioningContainer	`73.827 kB` `23.758 kB`
`react` ProgressIndicator	`39.494 kB` `13.55 kB`
`react` Rating	`82.12 kB` `26.127 kB`
`react` ResizeGroup	`13.338 kB` `4.377 kB`
`react` ResponsiveMode	`8.13 kB` `2.966 kB`
`react` ScrollablePane	`55.557 kB` `17.728 kB`
`react` SearchBox	`189.118 kB` `56.68 kB`
`react` SelectableOption	`724 B` `413 B`
`react` Selection	`42.444 kB` `12.278 kB`
`react` Separator	`35.384 kB` `12.146 kB`
`react` Shimmer	`49.259 kB` `16.268 kB`
`react` ShimmeredDetailsList	`240.691 kB` `68.532 kB`
`react` Slider	`57.651 kB` `19.217 kB`
`react` SpinButton	`192.821 kB` `57.775 kB`
`react` Spinner	`41.775 kB` `14.48 kB`
`react` Stack	`42.074 kB` `14.405 kB`
`react` Sticky	`32.599 kB` `10.504 kB`
`react` Styling	`46.033 kB` `15.135 kB`
`react` SwatchColorPicker	`191.136 kB` `58.151 kB`
`react` TeachingBubble	`206.139 kB` `61.063 kB`
`react` Text	`36.908 kB` `12.822 kB`
`react` TextField	`80.79 kB` `25.315 kB`
`react` Theme	`43.493 kB` `14.173 kB`
`react` ThemeGenerator	`12.392 kB` `4.126 kB`
`react` TimePicker	`242.089 kB` `70.072 kB`
`react` Toggle	`46.225 kB` `15.986 kB`
`react` Tooltip	`87.437 kB` `28.26 kB`
`react` Utilities	`82.931 kB` `25.148 kB`
`react` Viewport	`23.888 kB` `7.656 kB`
`react` WeeklyDayPicker	`102.017 kB` `31.834 kB`
`react` WindowProvider	`1.059 kB` `541 B`
`react-accordion` Accordion (including children components)	`106.976 kB` `32.812 kB`
`react-aria` ARIA - Default	`237 B` `181 B`
`react-avatar` Avatar	`49.329 kB` `15.824 kB`
`react-avatar` AvatarGroup	`20.132 kB` `7.976 kB`
`react-avatar` AvatarGroupItem	`63.473 kB` `20.043 kB`
`react-badge` Badge	`25.98 kB` `8.602 kB`
`react-badge` CounterBadge	`26.759 kB` `8.879 kB`
`react-badge` PresenceBadge	`25.745 kB` `9.463 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.719 kB` `31.752 kB`
`react-button` Button	`37.602 kB` `10.858 kB`
`react-button` CompoundButton	`44.016 kB` `12.162 kB`
`react-button` MenuButton	`42.417 kB` `12.209 kB`
`react-button` SplitButton	`50.482 kB` `13.776 kB`
`react-button` ToggleButton	`53.535 kB` `12.631 kB`
`react-calendar-compat` Calendar Compat	`150.095 kB` `40.026 kB`
`react-card` Card - All	`101.73 kB` `28.745 kB`
`react-card` Card	`94.504 kB` `26.924 kB`
`react-card` CardFooter	`14.381 kB` `5.799 kB`
`react-card` CardHeader	`16.914 kB` `6.677 kB`
`react-card` CardPreview	`14.446 kB` `5.929 kB`
`react-checkbox` Checkbox	`35.144 kB` `12.085 kB`
`react-color-picker-preview` ColorArea	`50.445 kB` `17.675 kB`
`react-color-picker-preview` ColorPicker	`18.581 kB` `7.371 kB`
`react-color-picker-preview` ColorSlider	`42.458 kB` `15.707 kB`
`react-combobox` Combobox (including child components)	`105.562 kB` `34.52 kB`
`react-combobox` Dropdown (including child components)	`106.186 kB` `34.462 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.638 kB` `20.24 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`225.271 kB` `65.211 kB`
`react-components` react-components: FluentProvider & webLightTheme	`44.473 kB` `14.597 kB`
`react-components` react-components: entire library	`1.174 MB` `293.93 kB`
`react-datepicker-compat` DatePicker Compat	`225.971 kB` `64.065 kB`
`react-dialog` Dialog (including children components)	`101.099 kB` `30.381 kB`
`react-divider` Divider	`21.354 kB` `7.963 kB`
`react-field` Field	`23.425 kB` `8.905 kB`
`react-image` Image	`15.386 kB` `6.243 kB`
`react-input` Input	`28.04 kB` `9.451 kB`
`react-jsx-runtime` Classic Pragma	`1.057 kB` `530 B`
`react-jsx-runtime` JSX Dev Runtime	`3.771 kB` `1.643 kB`
`react-jsx-runtime` JSX Runtime	`4.367 kB` `1.874 kB`
`react-label` Label	`14.697 kB` `5.999 kB`
`react-link` Link	`17.625 kB` `7.146 kB`
`react-list` List	`89.19 kB` `26.607 kB`
`react-list` ListItem	`112.691 kB` `33.41 kB`
`react-menu` Menu (including children components)	`155.616 kB` `46.882 kB`
`react-menu` Menu (including selectable components)	`158.598 kB` `47.478 kB`
`react-message-bar` MessageBar (all components)	`24.882 kB` `9.269 kB`
`react-motion` @fluentui/react-motion - createMotionComponent()	`4.506 kB` `1.967 kB`
`react-motion` @fluentui/react-motion - createPresenceComponent()	`5.189 kB` `2.274 kB`
`react-motion` @fluentui/react-motion - PresenceGroup	`1.714 kB` `819 B`
`react-northstar` Accordion	`85.406 kB` `26.542 kB`
`react-northstar` Alert	`87.463 kB` `26.931 kB`
`react-northstar` Animation	`55.343 kB` `17.839 kB`
`react-northstar` Attachment	`86.851 kB` `26.721 kB`
`react-northstar` Avatar	`80.276 kB` `24.64 kB`
`react-northstar` Box	`75.245 kB` `23.819 kB`
`react-northstar` Breadcrumb	`79.92 kB` `24.723 kB`
`react-northstar` Button	`83.161 kB` `25.967 kB`
`react-northstar` Card	`82.705 kB` `25.047 kB`
`react-northstar` Carousel	`105.2 kB` `31.902 kB`
`react-northstar` Chat	`154.119 kB` `46.93 kB`
`react-northstar` Checkbox	`79.808 kB` `25.096 kB`
`react-northstar` Datepicker	`186.672 kB` `57.026 kB`
`react-northstar` Debug	`8.8 kB` `3.595 kB`
`react-northstar` Design	`36.595 kB` `12.073 kB`
`react-northstar` Dialog	`112.07 kB` `33.637 kB`
`react-northstar` Divider	`76.616 kB` `24.141 kB`
`react-northstar` Dropdown	`198.27 kB` `60.275 kB`
`react-northstar` Embed	`81.479 kB` `25.443 kB`
`react-northstar` Flex	`47.728 kB` `15.451 kB`
`react-northstar` Form	`92.537 kB` `28.908 kB`
`react-northstar` Grid	`70.581 kB` `22.289 kB`
`react-northstar` Header	`74.753 kB` `23.477 kB`
`react-northstar` Image	`73.588 kB` `23.34 kB`
`react-northstar` Input	`88.35 kB` `27.801 kB`
`react-northstar` ItemLayout	`78.253 kB` `24.484 kB`
`react-northstar` Label	`77.917 kB` `24.422 kB`
`react-northstar` Layout	`75.404 kB` `23.819 kB`
`react-northstar` List	`88.493 kB` `27.569 kB`
`react-northstar` Loader	`78.617 kB` `24.749 kB`
`react-northstar` Menu	`128.605 kB` `40.751 kB`
`react-northstar` MenuButton	`163.013 kB` `49.642 kB`
`react-northstar` Pill	`83.719 kB` `26.084 kB`
`react-northstar` Popup	`135.32 kB` `42.278 kB`
`react-northstar` Portal	`58.33 kB` `18.854 kB`
`react-northstar` Provider	`93.14 kB` `29.653 kB`
`react-northstar` RadioGroup	`83.286 kB` `26.072 kB`
`react-northstar` Reaction	`77.281 kB` `24.147 kB`
`react-northstar` Segment	`76.206 kB` `23.911 kB`
`react-northstar` Skeleton	`77.762 kB` `24.214 kB`
`react-northstar` Slider	`84.28 kB` `26.775 kB`
`react-northstar` SplitButton	`178.255 kB` `53.474 kB`
`react-northstar` Status	`76.269 kB` `24.065 kB`
`react-northstar` SvgIcon	`36.817 kB` `11.753 kB`
`react-northstar` Table	`80.8 kB` `25.172 kB`
`react-northstar` Text	`74.111 kB` `23.524 kB`
`react-northstar` TextArea	`74.245 kB` `23.507 kB`
`react-northstar` Toolbar	`175.072 kB` `52.868 kB`
`react-northstar` Tooltip	`109.976 kB` `35.257 kB`
`react-northstar` Tree	`87.854 kB` `27.236 kB`
`react-northstar` Video	`75.411 kB` `23.808 kB`
`react-overflow` hooks only	`12.832 kB` `4.828 kB`
`react-persona` Persona	`56.22 kB` `17.704 kB`
`react-popover` Popover	`131.05 kB` `41.016 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-positioning` usePositioning	`28.144 kB` `10.046 kB`
`react-progress` ProgressBar	`17.11 kB` `6.899 kB`
`react-provider` FluentProvider	`24.649 kB` `8.902 kB`
`react-radio` Radio	`32.698 kB` `10.351 kB`
`react-radio` RadioGroup	`15.788 kB` `6.431 kB`
`react-select` Select	`27.758 kB` `10.131 kB`
`react-slider` Slider	`37.994 kB` `12.723 kB`
`react-spinbutton` SpinButton	`34.965 kB` `11.661 kB`
`react-spinner` Spinner	`25.271 kB` `8.547 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`105.112 kB` `30.526 kB`
`react-switch` Switch	`35.345 kB` `11.322 kB`
`react-table` DataGrid	`160.994 kB` `45.684 kB`
`react-table` Table (Primitives only)	`42.692 kB` `13.862 kB`
`react-table` Table as DataGrid	`131.895 kB` `36.579 kB`
`react-table` Table (Selection only)	`70.562 kB` `20.007 kB`
`react-table` Table (Sort only)	`69.205 kB` `19.618 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`185.663 kB` `55.782 kB`
`react-tags` InteractionTag	`15.225 kB` `6.165 kB`
`react-tags` Tag	`29.098 kB` `9.559 kB`
`react-tags` TagGroup	`82.745 kB` `24.532 kB`
`react-teaching-popover` TeachingPopover	`101.357 kB` `30.465 kB`
`react-text` Text - Default	`17.087 kB` `6.731 kB`
`react-text` Text - Wrappers	`20.268 kB` `7.055 kB`
`react-textarea` Textarea	`26.598 kB` `9.761 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`35.835 kB` `7.512 kB`
`react-theme` Teams: Light theme	`19.794 kB` `5.602 kB`
`react-timepicker-compat` TimePicker	`108.551 kB` `36.094 kB`
`react-toast` Toast (including Toaster)	`101.201 kB` `30.45 kB`
`react-tooltip` Tooltip	`57.131 kB` `19.949 kB`
`react-tree` FlatTree	`147.751 kB` `42.374 kB`
`react-tree` PersonaFlatTree	`148.496 kB` `42.517 kB`
`react-tree` PersonaTree	`144.707 kB` `41.371 kB`
`react-tree` Tree	`143.968 kB` `41.245 kB`
`react-utilities` SSRProvider	`180 B` `160 B`

_{🤖 This report was generated against 365204e3b2f4f4d8f9534ce1598ac937a10beb04}

github-actions · 2025-02-18T15:12:01Z

Pull request demo site: URL

…ine Steps to resolve VR snapshoting issues

…stories

fabricteam · 2025-02-27T15:44:36Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2025-02-27T16:00:50Z

🕵 fluentuiv8 No visual regressions between this PR and main

…getStoryVariant

…ine Steps to resolve VR snapshoting issues (microsoft#33860)

github-actions Bot added this to the February Project Cycle Q1 2025 milestone Feb 18, 2025

github-actions Bot added the NX: core label Feb 18, 2025

Hotell changed the title ~~Vrt/mirate problematic tests to new parameters api~~ fix(vr-tests-react-components): migrate to new StoryWright api to define Steps to resolve VR snapshoting issues Feb 18, 2025

Hotell added Fluent UI react-components (v9) Area: Storywright labels Feb 18, 2025

fabricteam reviewed Feb 18, 2025

View reviewed changes

Comment thread apps/vr-tests-react-components/.storybook/main.js

fabricteam reviewed Feb 18, 2025

View reviewed changes

Comment thread apps/vr-tests-react-components/.storybook/main.js

Hotell force-pushed the vrt/mirate-problematic-tests-to-new-parameters-api branch from 8eeaeea to ca3f5ac Compare February 18, 2025 16:06

Hotell added the Status: Blocked Resolution blocked by another issue label Feb 18, 2025

Hotell force-pushed the vrt/mirate-problematic-tests-to-new-parameters-api branch from 5c15be6 to de5ffad Compare February 20, 2025 10:07

github-actions Bot removed the NX: core label Feb 20, 2025

Hotell added 4 commits February 27, 2025 16:27

fix(vr-tests-react-components): migrate to new StoryWright api to def…

aca3543

…ine Steps to resolve VR snapshoting issues

chore(vr-tests-react-components): fail CI if we have invalid VR test …

7123adb

…stories

feat(vr-tests-rc): support both CSF2 and CSF3 for story variant creation

522c1f5

chore: migrate to storywrigt storybook7.12 that ships required features

15438b9

Hotell force-pushed the vrt/mirate-problematic-tests-to-new-parameters-api branch from 4a90a20 to 15438b9 Compare February 27, 2025 15:31

fix(vr-tests-react-components): add proper type return annotation to …

94202ca

…getStoryVariant

Hotell commented Feb 27, 2025

View reviewed changes

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

Hotell commented Feb 27, 2025

View reviewed changes

Comment thread apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx

Hotell commented Feb 27, 2025

View reviewed changes

Comment thread apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx

Hotell marked this pull request as ready for review February 28, 2025 09:48

Hotell requested review from a team as code owners February 28, 2025 09:48

AtishayMsft approved these changes Feb 28, 2025

View reviewed changes

tudorpopams requested a review from dmytrokirpa March 11, 2025 13:07

Hotell removed the Status: Blocked Resolution blocked by another issue label Mar 12, 2025

dmytrokirpa approved these changes Mar 12, 2025

View reviewed changes

Hotell merged commit 5a69119 into microsoft:master Mar 19, 2025

Hotell deleted the vrt/mirate-problematic-tests-to-new-parameters-api branch March 19, 2025 10:35

mainframev pushed a commit to mainframev/fluentui that referenced this pull request Jun 9, 2025

fix(vr-tests-react-components): migrate to new StoryWright api to def…

77c08a2

…ine Steps to resolve VR snapshoting issues (microsoft#33860)

tudorpopams pushed a commit to tudorpopams/fluentui that referenced this pull request Apr 14, 2026

fix(vr-tests-react-components): migrate to new StoryWright api to def…

53df32b

…ine Steps to resolve VR snapshoting issues (microsoft#33860)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(vr-tests-react-components): migrate to new StoryWright api to define Steps to resolve VR snapshoting issues - #33860

fix(vr-tests-react-components): migrate to new StoryWright api to define Steps to resolve VR snapshoting issues#33860
Hotell merged 5 commits into
microsoft:masterfrom
Hotell:vrt/mirate-problematic-tests-to-new-parameters-api

Hotell commented Feb 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

github-actions Bot commented Feb 18, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Feb 18, 2025

Uh oh!

Uh oh!

fabricteam commented Feb 27, 2025 •

edited

Loading

Uh oh!

fabricteam commented Feb 27, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Hotell commented Feb 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

Uh oh!

github-actions Bot commented Feb 18, 2025 • 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 Feb 18, 2025

Uh oh!

Uh oh!

fabricteam commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 FluentUIV0 No visual regressions between this PR and main

Uh oh!

fabricteam commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Hotell commented Feb 18, 2025 •

edited

Loading

github-actions Bot commented Feb 18, 2025 •

edited

Loading

fabricteam commented Feb 27, 2025 •

edited

Loading

fabricteam commented Feb 27, 2025 •

edited

Loading