From 9debb82aac495535113fb9f3322dadaf1d1b9106 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Thu, 23 Oct 2025 10:34:01 +0200 Subject: [PATCH 1/4] refactor: migrate VR tests StoryWright steps from decorators to params API --- apps/vr-tests-react-components/package.json | 2 +- .../stories/Accordion/Accordion.stories.tsx | 14 ++- .../AccordionFocusInteractions.stories.tsx | 31 ++--- .../src/stories/Avatar.stories.tsx | 9 +- .../AvatarGroup/AvatarGroup.stories.tsx | 16 +-- .../AvatarGroupOverflow.stories.tsx | 16 +-- .../stories/Breadcrumb/Breadcrumb.stories.tsx | 5 +- .../src/stories/CalendarCompat.stories.tsx | 13 +- .../CalendarCompat/CalendarCompat.stories.tsx | 6 +- .../src/stories/CalendarCompat/utils.tsx | 10 +- .../src/stories/Card/CardDisabled.stories.tsx | 26 ++-- .../stories/Card/CardInteractive.stories.tsx | 30 ++--- .../stories/Card/CardSelectable.stories.tsx | 34 ++--- .../src/stories/Charts/DonutChart.stories.tsx | 13 +- .../Charts/HorizontalBarChart.stories.tsx | 37 +++--- .../src/stories/Charts/Legend.stories.tsx | 46 +++---- .../src/stories/Charts/LineChart.stories.tsx | 39 +++--- .../stories/Charts/SparklineChart.stories.tsx | 13 +- .../Charts/VerticalBarChart.stories.tsx | 13 +- .../src/stories/Checkbox/Checkbox.stories.tsx | 13 +- .../Checkbox/CheckboxInteractions.stories.tsx | 31 +++-- .../ColorPicker/ColorPicker.stories.tsx | 6 +- .../src/stories/Combobox/Combobox.stories.tsx | 33 +++-- .../ComboboxOptionInteractions.stories.tsx | 31 +++-- .../DataGridSubtleMultiSelect.stories.tsx | 26 ++-- .../DataGridSubtleSingleSelect.stories.tsx | 26 ++-- .../DatePickerCompat.stories.tsx | 31 ++--- .../DatePickerCompatRange.stories.tsx | 16 +-- .../DatePickerCompatScenarios.stories.tsx | 13 +- .../src/stories/Divider/Divider.stories.tsx | 13 +- .../Divider/DividerVertical.stories.tsx | 15 +-- .../src/stories/Dropdown/Dropdown.stories.tsx | 33 +++-- .../DropdownOptionInteractions.stories.tsx | 31 +++-- .../src/stories/Field.stories.tsx | 10 +- .../src/stories/Image/Image.stories.tsx | 10 +- .../src/stories/InfoLabel.stories.tsx | 18 +-- .../src/stories/Input/Input.stories.tsx | 11 +- .../Input/InputInteractions.stories.tsx | 31 +++-- .../src/stories/Label.stories.tsx | 6 +- .../src/stories/Link/AnchorLink.stories.tsx | 5 +- .../Link/AnchorLinkDisabled.stories.tsx | 4 +- .../src/stories/Link/ButtonLink.stories.tsx | 5 +- .../Link/ButtonLinkDisabled.stories.tsx | 4 +- .../src/stories/Link/SpanLink.stories.tsx | 5 +- .../stories/MakeStyles/MakeStyles.stories.tsx | 6 +- .../MakeStyles/MakeStylesPseudo.stories.tsx | 30 ++--- .../src/stories/Menu/Menu.stories.tsx | 11 +- .../Menu/MenuIconSlottedContent.stories.tsx | 11 +- .../stories/Menu/MenuItemLinks.stories.tsx | 13 +- .../stories/Menu/MenuLongContent.stories.tsx | 1 - .../Menu/MenuMultilineItems.stories.tsx | 11 +- .../Menu/MenuSecondaryContent.stories.tsx | 11 +- .../stories/Menu/MenuSelection.stories.tsx | 11 +- .../Menu/MenuSelectionGroups.stories.tsx | 11 +- .../stories/Menu/MenuSplitItem.stories.tsx | 9 +- .../src/stories/Menu/NestedMenu.stories.tsx | 8 +- ...NestedMenuSmallViewportFlipped.stories.tsx | 13 +- ...NestedMenuSmallViewportStacked.stories.tsx | 13 +- .../stories/Menu/NestedSubmenus.stories.tsx | 9 +- .../ScrollableMenuSmallViewport.stories.tsx | 4 +- ...SubmenuIndicatorSlottedContent.stories.tsx | 16 ++- .../stories/MessageBar/MessageBar.stories.tsx | 5 +- .../src/stories/Persona.stories.tsx | 7 +- .../src/stories/Popover/Popover.stories.tsx | 15 +-- .../Popover/PopoverPositioning.stories.tsx | 17 ++- .../src/stories/Portal.stories.tsx | 5 +- .../Positioning/Positioning.stories.tsx | 118 ++++++++---------- .../PositioningScrollJumps.stories.tsx | 37 +++--- .../PresenceBadgeInverted.stories.tsx | 11 +- .../src/stories/Radio/Radio.stories.tsx | 19 +-- .../Radio/RadioInteractions.stories.tsx | 36 +++--- .../src/stories/Rating/Rating.stories.tsx | 11 +- .../Rating/RatingInteractions.stories.tsx | 32 ++--- .../src/stories/RatingDisplay.stories.tsx | 18 +-- .../stories/SearchBox/SearchBox.stories.tsx | 31 +++-- .../SearchBoxClearsValue.stories.tsx | 35 +++--- .../src/stories/Select/Select.stories.tsx | 11 +- .../Select/SelectInteractions.stories.tsx | 31 +++-- .../ShadowDOM/ShadowDOMDefault.stories.tsx | 16 ++- .../ShadowDOM/ShadowDOMPortal.stories.tsx | 45 ++++--- .../SwatchPicker/SwatchPicker.stories.tsx | 5 +- .../src/stories/Switch.stories.tsx | 39 +++--- .../Table/TableCellActions.stories.tsx | 10 +- .../Table/TableFlexCellActions.stories.tsx | 10 +- .../Table/TableFlexHeaders.stories.tsx | 25 ++-- .../TableFlexSubtleSelection.stories.tsx | 9 +- .../stories/Table/TableHeaders.stories.tsx | 25 ++-- .../Table/TableSubtleSelection.stories.tsx | 24 ++-- .../src/stories/Tabs.stories.tsx | 29 +++-- .../Tag/InteractionTagAppearances.stories.tsx | 5 +- .../src/stories/Tag/Tag.stories.tsx | 5 +- .../stories/Tag/TagAppearances.stories.tsx | 5 +- .../src/stories/Tag/TagGroup.stories.tsx | 4 +- .../src/stories/Text.stories.tsx | 7 +- .../src/stories/Textarea/Textarea.stories.tsx | 11 +- .../Textarea/TextareaInteractions.stories.tsx | 31 +++-- .../src/stories/TimePicker.stories.tsx | 6 +- .../src/stories/Toast/Toast.stories.tsx | 13 +- .../src/utilities/index.ts | 1 - .../src/utilities/withStoryWrightSteps.tsx | 20 --- apps/vr-tests-web-components/package.json | 2 +- .../stories/accordion/accordion.stories.tsx | 11 +- .../src/stories/avatar/avatar.stories.tsx | 11 +- .../src/stories/badge/badge.stories.tsx | 11 +- .../src/stories/button/button.stories.tsx | 11 +- .../checkbox-indeterminate.stories.tsx | 29 ++--- .../src/stories/checkbox/checkbox.stories.tsx | 11 +- .../src/stories/divider/divider.stories.tsx | 11 +- .../src/stories/label/label.stories.tsx | 11 +- .../src/stories/link/link.stories.tsx | 11 +- .../stories/menu-list/menu-list.stories.tsx | 33 ++--- .../progress-bar/progress-bar.stories.tsx | 11 +- .../radio-group/radio-group.stories.tsx | 29 ++--- .../src/stories/radio/radio.stories.tsx | 11 +- .../src/stories/slider/slider.stories.tsx | 33 +++-- .../src/stories/switch/switch.stories.tsx | 25 ++-- .../stories/tabs/tabs-interactive.stories.tsx | 53 +++++--- .../src/stories/tabs/tabs.stories.tsx | 11 +- .../stories/text-input/text-input.stories.tsx | 11 +- .../src/stories/text/text.stories.tsx | 11 +- .../src/utilities/WCThemeDecorator.tsx | 1 + apps/vr-tests/package.json | 2 +- .../src/stories/ActivityItem.stories.tsx | 13 +- .../stories/Breadcrumb/Breadcrumb.stories.tsx | 20 ++- .../BreadcrumbInteractions.stories.tsx | 15 +-- .../stories/Button/ActionButton.stories.tsx | 15 +-- .../src/stories/Button/Button.stories.tsx | 15 +-- .../Button/ButtonSpecialScenarios.stories.tsx | 13 +- .../stories/Button/CommandButton.stories.tsx | 19 ++- .../stories/Button/CompoundButton.stories.tsx | 18 +-- .../src/stories/Button/IconButton.stories.tsx | 18 +-- .../src/stories/Button/SpinButton.stories.tsx | 23 ++-- .../Button/SpinButtonLabelOnTop.stories.tsx | 16 ++- .../Button/SpinButtonWithLabel.stories.tsx | 21 ++-- .../stories/Button/SplitButton.stories.tsx | 23 ++-- .../src/stories/Calendar/Calendar.stories.tsx | 21 ++-- .../CalendarNoMonthOption.stories.tsx | 16 ++- .../src/stories/Checkbox/Checkbox.stories.tsx | 16 ++- .../CheckboxIndeterminate.stories.tsx | 18 +-- .../src/stories/ChoiceGroup.stories.tsx | 18 +-- .../src/stories/Coachmark.stories.tsx | 18 +-- .../src/stories/ColorPicker.stories.tsx | 16 ++- .../vr-tests/src/stories/ComboBox.stories.tsx | 23 ++-- .../src/stories/CommandBar.stories.tsx | 18 +-- .../ContextualMenu.stories.tsx | 18 +-- .../ContextualMenuSubmenus.stories.tsx | 18 +-- .../stories/DatePicker/DatePicker.stories.tsx | 23 ++-- .../DatePicker/DatePickerDisabled.stories.tsx | 18 +-- .../DatePickerNoMonthOption.stories.tsx | 18 +-- .../src/stories/DetailsHeader.stories.tsx | 18 +-- .../src/stories/DetailsList.stories.tsx | 18 +-- apps/vr-tests/src/stories/Dialog.stories.tsx | 11 +- .../DocumentCard/DocumentCard.stories.tsx | 11 +- .../DocumentCardCompact.stories.tsx | 11 +- .../src/stories/Dropdown/Dropdown.stories.tsx | 18 +-- .../Dropdown/DropdownDisabled.stories.tsx | 18 +-- .../vr-tests/src/stories/Facepile.stories.tsx | 11 +- .../src/stories/FocusTrapZone.stories.tsx | 15 +-- .../src/stories/FolderCover.stories.tsx | 15 ++- apps/vr-tests/src/stories/Fonts.stories.tsx | 11 +- .../src/stories/GroupedList.stories.tsx | 18 +-- .../src/stories/HoverCard.stories.tsx | 22 ++-- apps/vr-tests/src/stories/Icon.stories.tsx | 11 +- apps/vr-tests/src/stories/Image.stories.tsx | 11 +- apps/vr-tests/src/stories/Keytip.stories.tsx | 10 +- apps/vr-tests/src/stories/Label.stories.tsx | 11 +- apps/vr-tests/src/stories/Layer.stories.tsx | 11 +- apps/vr-tests/src/stories/Link.stories.tsx | 18 +-- apps/vr-tests/src/stories/List.stories.tsx | 11 +- .../src/stories/MediaTile.stories.tsx | 17 +-- .../src/stories/MessageBar.stories.tsx | 11 +- apps/vr-tests/src/stories/Modal.stories.tsx | 11 +- apps/vr-tests/src/stories/Nav.stories.tsx | 18 +-- .../OverflowSet/OverflowSet.stories.tsx | 18 +-- .../OverflowSetVertical.stories.tsx | 11 +- apps/vr-tests/src/stories/Overlay.stories.tsx | 16 ++- .../src/stories/Panel/Panel.stories.tsx | 13 +- .../Panel/SearchBoxAndRightPanel.stories.tsx | 18 +-- .../PeoplePicker/PeoplePicker.stories.tsx | 18 +-- .../PeoplePickerNormalWithText.stories.tsx | 18 +-- apps/vr-tests/src/stories/Persona.stories.tsx | 11 +- apps/vr-tests/src/stories/Pivot.stories.tsx | 16 +-- .../src/stories/PivotOverflow.stories.tsx | 13 +- .../src/stories/ProgressIndicator.stories.tsx | 11 +- apps/vr-tests/src/stories/Rating.stories.tsx | 18 +-- .../src/stories/ResizeGroup.stories.tsx | 18 +-- .../ScrollablePane.DetailsList.stories.tsx | 18 +-- ...ollablePane.GroupedDetailsList.stories.tsx | 15 +-- .../ScrollablePane/ScrollablePane.stories.tsx | 15 +-- .../src/stories/SearchBox.stories.tsx | 18 +-- .../src/stories/Separator.stories.tsx | 11 +- apps/vr-tests/src/stories/Shimmer.stories.tsx | 9 +- apps/vr-tests/src/stories/Signals.stories.tsx | 11 +- apps/vr-tests/src/stories/Slider.stories.tsx | 15 +-- apps/vr-tests/src/stories/Spinner.stories.tsx | 11 +- apps/vr-tests/src/stories/Stack.stories.tsx | 21 ++-- .../src/stories/Sticky.Breadcrumb.stories.tsx | 19 +-- .../src/stories/Suggestions.stories.tsx | 15 +-- .../src/stories/SwatchColorPicker.stories.tsx | 18 +-- apps/vr-tests/src/stories/TagItem.stories.tsx | 18 +-- .../stories/TagPicker/TagPicker.stories.tsx | 18 +-- .../TagPicker/TagPickerVariations.stories.tsx | 16 ++- .../src/stories/TeachingBubble.stories.tsx | 16 ++- apps/vr-tests/src/stories/Text.stories.tsx | 16 ++- .../src/stories/TextField.stories.tsx | 23 ++-- .../ThemeProvider/ThemeProvider.stories.tsx | 16 ++- .../ThemeProviderCustomizer.stories.tsx | 13 +- .../ThemeProviderLoadTheme.stories.tsx | 16 +-- apps/vr-tests/src/stories/Tile.stories.tsx | 14 ++- .../src/stories/TilesList.stories.tsx | 22 ++-- apps/vr-tests/src/stories/Toggle.stories.tsx | 16 ++- .../src/stories/Tooltip/Tooltip.stories.tsx | 16 ++- .../Tooltip/TooltipMultiple.stories.tsx | 18 +-- .../react-charting/AreaChart.stories.tsx | 47 ++++--- .../react-charting/DonutChart.stories.tsx | 13 +- .../react-charting/GaugeChart.stories.tsx | 13 +- .../react-charting/HeatMapChart.stories.tsx | 13 +- .../HorizontalBarChart.stories.tsx | 37 +++--- .../stories/react-charting/Legend.stories.tsx | 33 ++--- .../react-charting/LineChart.stories.tsx | 39 +++--- .../MultiStackBarChart.stories.tsx | 13 +- .../react-charting/Piechart.stories.tsx | 13 +- .../react-charting/SankeyChart.stories.tsx | 13 +- .../react-charting/SparklineChart.stories.tsx | 15 ++- .../StackedBarChart.stories.tsx | 13 +- .../react-charting/TreeChart.stories.tsx | 13 +- .../VerticalBarChart.stories.tsx | 13 +- .../src/stories/z_Callout.stories.tsx | 10 +- .../src/utilities/StoryWrightDecorator.tsx | 15 --- apps/vr-tests/src/utilities/index.ts | 1 - package.json | 2 +- yarn.lock | 8 +- 232 files changed, 1982 insertions(+), 1922 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/utilities/withStoryWrightSteps.tsx delete mode 100644 apps/vr-tests/src/utilities/StoryWrightDecorator.tsx diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 165eab5427670a..66db81cea50819 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -11,7 +11,7 @@ "start": "storybook dev", "test": "just-scripts test", "type-check": "tsc -p . --noEmit --baseUrl .", - "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --bailOnStoriesError" + "test-vr": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true --stepsApi parameters" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx index 3f7cae7148a438..063e6a83e65ae7 100644 --- a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; import { CircleRegular } from '@fluentui/react-icons'; import type { Meta } from '@storybook/react'; @@ -10,13 +11,14 @@ export default { decorators: [ story => ( - -
- {story()} -
- +
+ {story()} +
), ], + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Size = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx index 7189562e5e7dd3..ff0a52feb8e7f1 100644 --- a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx @@ -1,29 +1,30 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; import type { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; export default { title: 'Accordion Converged', - decorators: [ story => ( - -
- {story()} -
- +
+ {story()} +
), ], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .focus('#opened-btn') + .snapshot('focus opened', { cropTo: '.testWrapper' }) + .focus('#closed-btn') + .snapshot('focus closed', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const VisibilityFocus = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index f626e35b0a348d..b152ae6b3d795a 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react'; import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; import { tokens } from '@fluentui/react-theme'; import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; @@ -197,10 +198,10 @@ export default { ), - story => ( - {story()} - ), ], + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => ( diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx index f63cf540523ada..0954cbb06dc6e0 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover } from '@fluentui/react-avatar'; import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../../utilities'; @@ -11,15 +12,16 @@ export default { component: AvatarGroup, decorators: [ story => ( - -
-
- {story()} -
+
+
+ {story()}
- +
), ], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => ; diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx index 7c1781887b992f..c46b88a538adc7 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; import { names } from './utils'; @@ -11,15 +12,16 @@ export default { component: AvatarGroup, decorators: [ story => ( - -
-
- {story()} -
+
+
+ {story()}
- +
), ], + parameters: { + storyWright: { steps: new Steps().click('#show-overflow').snapshot('popoverContentOpen').end() }, + } satisfies StoryParameters, } satisfies Meta; export const OverflowContent = () => { diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx index dc56f5b8b1be1f..0b34ef7dd0b681 100644 --- a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx @@ -2,11 +2,12 @@ import * as React from 'react'; import { Breadcrumb } from '@fluentui/react-breadcrumb'; import { SampleBreadcrumbButtons, steps } from './utils'; import type { Meta } from '@storybook/react'; -import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Breadcrumb Converged', - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const Appearance = () => ( diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx index c1cce76fcf639b..4d3dd28b900dc6 100644 --- a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat'; import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons'; import type { CalendarProps } from '@fluentui/react-calendar-compat'; @@ -15,12 +16,10 @@ const Calendar = (props: CalendarProps) => { export default { title: 'Calendar Compat', component: CalendarBase, - decorators: [ - TestWrapperDecorator, - story => ( - {story()} - ), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat/CalendarCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat/CalendarCompat.stories.tsx index 7ab1316fcaf506..1956951cbdf774 100644 --- a/apps/vr-tests-react-components/src/stories/CalendarCompat/CalendarCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/CalendarCompat/CalendarCompat.stories.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Calendar } from '@fluentui/react-calendar-compat'; import { SampleCalendarCompatMultiDayView } from './utils'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; export default { title: 'CalendarCompat', - decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })], + parameters: { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters, } satisfies Meta; export const CalendarCompatMultiDayView = () => ; diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat/utils.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat/utils.tsx index 79445eb4ad5655..9205ccef055b86 100644 --- a/apps/vr-tests-react-components/src/stories/CalendarCompat/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/CalendarCompat/utils.tsx @@ -2,5 +2,13 @@ import * as React from 'react'; import { Calendar } from '@fluentui/react-calendar-compat'; export const SampleCalendarCompatMultiDayView = ({ daysToSelectInDayView }: { daysToSelectInDayView: number }) => { - return ; + return ( + + ); }; diff --git a/apps/vr-tests-react-components/src/stories/Card/CardDisabled.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardDisabled.stories.tsx index d1f3e4702d0c89..689ab3a3b1e23d 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardDisabled.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardDisabled.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Card } from '@fluentui/react-card'; import { SampleCardContent } from './utils'; import type { Meta } from '@storybook/react'; @@ -10,19 +11,20 @@ export default { decorators: [ story => ( - -
- {story()} -
- +
+ {story()} +
), ], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover('[role="group"]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceDisabledFilled = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx index 4e7e40b1652ea2..0a47cb48ab788e 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Card } from '@fluentui/react-card'; import { action } from '@storybook/addon-actions'; import { SampleCardContent } from './utils'; @@ -11,21 +12,22 @@ export default { decorators: [ story => ( - -
- {story()} -
- +
+ {story()} +
), ], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover('[role="group"]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('[role="group"]') + .snapshot('click', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceInteractiveFilled = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx index 3969779d991dea..fd3e53e190b8e8 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Card } from '@fluentui/react-card'; import { SampleCardContent } from './utils'; import type { Meta } from '@storybook/react'; @@ -10,23 +11,24 @@ export default { decorators: [ story => ( - -
- {story()} -
- +
+ {story()} +
), ], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .hover('[role="group"]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('[role="group"]') + .snapshot('click', { cropTo: '.testWrapper' }) + .mouseUp('[role="group"]') + .snapshot('selected', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceSelectableFilled = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx index 2f48334f77efe8..95724ca50c21fb 100644 --- a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx @@ -1,19 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities'; -import { Steps, StoryWright } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { ChartProps, ChartDataPoint, DonutChart } from '@fluentui/react-charts'; export default { title: 'Charts/DonutChart', - decorators: [ - (story, context) => TestWrapperDecorator(story, context), - (story, context) => { - const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); - return {story(context)}; + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(), }, - ], + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => { diff --git a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx index c5c9006d5a17b8..a09b92a778af2a 100644 --- a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx @@ -1,29 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities'; -import { Steps, StoryWright } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { ChartProps, HorizontalBarChart, HorizontalBarChartVariant } from '@fluentui/react-charts'; export default { title: 'Charts/HorizontalBarChart', - decorators: [ - (story, context) => TestWrapperDecorator(story, context), - (story, context) => { - const steps = - context.name.includes('Basic') && !context.name.includes('RTL') - ? new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .executeScript( - // eslint-disable-next-line @fluentui/max-len - `document.querySelectorAll('g[id^="_HorizontalLine"]')[2].children[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true, cancelable: true }));`, - ) - .snapshot('hover', { cropTo: '.testWrapper' }) - .end() - : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); - return {story(context)}; + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(), }, - ], + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => { @@ -134,9 +123,23 @@ export const Basic = () => { ); }; +Basic.parameters = { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .executeScript( + `document.querySelectorAll('g[id^="_HorizontalLine"]')[2].children[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true, cancelable: true }));`, + ) + .snapshot('hover', { cropTo: '.testWrapper' }) + .end(), + } satisfies StoryParameters, +}; + export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); export const BasicRTL = getStoryVariant(Basic, RTL); +// Disable custom StoryWright steps for the story +BasicRTL.parameters.storyWright = undefined; export const WithBenchmark = () => { const hideRatio: boolean[] = [true, false]; diff --git a/apps/vr-tests-react-components/src/stories/Charts/Legend.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/Legend.stories.tsx index bd5f4314d68bb6..4aeb8a25fa8065 100644 --- a/apps/vr-tests-react-components/src/stories/Charts/Legend.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Charts/Legend.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities'; -import { Steps, StoryWright } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { Legend, Legends } from '@fluentui/react-charts'; const overflowText = 'Overflow Items'; @@ -9,28 +9,12 @@ const overflowText = 'Overflow Items'; export default { title: 'Charts/Legend', - decorators: [ - (story, context) => TestWrapperDecorator(story, context), - (story, context) => { - const steps = context.name.includes('Overflow') - ? new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .executeScript( - `document.evaluate( - "//button[contains(text(), 'Overflow Items')]", - document, - null, - XPathResult.FIRST_ORDERED_NODE_TYPE, - null - ).singleNodeValue - .click()`, - ) - .snapshot('expanded', { cropTo: '.testWrapper' }) - .end() - : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); - return {story()}; + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(), }, - ], + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => { @@ -296,6 +280,24 @@ export const Overflow = () => {
); }; +Overflow.parameters = { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .executeScript( + `document.evaluate( + "//button[contains(text(), 'Overflow Items')]", + document, + null, + XPathResult.FIRST_ORDERED_NODE_TYPE, + null + ).singleNodeValue + .click()`, + ) + .snapshot('expanded', { cropTo: '.testWrapper' }) + .end(), + }, +} satisfies StoryParameters; export const OverflowDarkMode = getStoryVariant(Overflow, DARK_MODE); diff --git a/apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx index 063bbb45b4569b..2260268e0d4eaf 100644 --- a/apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Charts/LineChart.stories.tsx @@ -1,31 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities'; import { LineChartPoints, LineChart, ChartProps, DataVizPalette, CustomizedCalloutData } from '@fluentui/react-charts'; export default { title: 'Charts/LineChart', - decorators: [ - TestWrapperDecorator, - (story, context) => { - const steps = - context.name.startsWith('Basic') && !context.name.includes('RTL') - ? new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - // Selector to select a point on the line, to capture the callout - .executeScript( - // eslint-disable-next-line @fluentui/max-len - `document.querySelectorAll('line[id^="line"]')[3].dispatchEvent(new MouseEvent('mouseover',{bubbles: true,cancelable: true}))`, - ) - .snapshot('hover', { cropTo: '.testWrapper' }) - .end() - : new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); - - return {story()}; + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(), }, - ], + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => { @@ -159,7 +146,21 @@ export const Basic = () => { ); }; +Basic.parameters = { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + // Selector to select a point on the line, to capture the callout + .executeScript( + `document.querySelectorAll('line[id^="line"]')[3].dispatchEvent(new MouseEvent('mouseover',{bubbles: true,cancelable: true}))`, + ) + .snapshot('hover', { cropTo: '.testWrapper' }) + .end(), + }, +} satisfies StoryParameters; + export const BasicRTL = getStoryVariant(Basic, RTL); +BasicRTL.parameters.storyWright = undefined; export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); diff --git a/apps/vr-tests-react-components/src/stories/Charts/SparklineChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/SparklineChart.stories.tsx index 652955a1703e0a..a710f5dbf2136e 100644 --- a/apps/vr-tests-react-components/src/stories/Charts/SparklineChart.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Charts/SparklineChart.stories.tsx @@ -1,19 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities'; -import { Steps, StoryWright } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { ChartProps, Sparkline } from '@fluentui/react-charts'; export default { title: 'Charts/SparkLineChart', - decorators: [ - (story, context) => TestWrapperDecorator(story, context), - (story, context) => { - const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); - return {story(context)}; + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(), }, - ], + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => { diff --git a/apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx index 86d556a96a4d4e..58f0874f930acd 100644 --- a/apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Charts/VerticalBarChart.stories.tsx @@ -1,19 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities'; -import { Steps, StoryWright } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { LineChartLineOptions, VerticalBarChartDataPoint, VerticalBarChart } from '@fluentui/react-charts'; export default { title: 'Charts/VerticalBarChart', - decorators: [ - (story, context) => TestWrapperDecorator(story, context), - (story, context) => { - const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); - return {story(context)}; + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(), }, - ], + } satisfies StoryParameters, } satisfies Meta; export const BasicSecondaryYAxis = () => { diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx index 1c20a1b0fb867a..81ba5ab2d86d29 100644 --- a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import type { Meta } from '@storybook/react'; import { Checkbox } from '@fluentui/react-checkbox'; import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -7,12 +8,10 @@ import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../util export default { title: 'Checkbox Converged', component: Checkbox, - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - {story()} - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const DisabledChecked = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx index 07c4a70f1c56ea..d6f58da3f6719a 100644 --- a/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import type { Meta } from '@storybook/react'; import { Checkbox } from '@fluentui/react-checkbox'; import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -7,22 +8,18 @@ import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../util export default { title: 'Checkbox Converged', component: Checkbox, - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - - {story()} - - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('rest', { cropTo: '.testWrapper' }) + .hover('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('input') + .snapshot('active', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Unchecked = () => ; diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx index c41fb066ea3784..14983598815b51 100644 --- a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { ColorPicker, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker'; import { SampleColorPicker } from './utils'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; export default { title: 'ColorPicker Converged', - decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })], + parameters: { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters, } satisfies Meta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx index 1bedebf4a84933..845a372e18d85a 100644 --- a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import type { Meta } from '@storybook/react'; import { Combobox, Option } from '@fluentui/react-combobox'; import { TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -7,23 +8,19 @@ import { TestWrapperDecoratorFixedWidth } from '../../utilities'; export default { title: 'Combobox Converged', component: Combobox, - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - - {story()} - - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .focus('input') + .wait(250) // let focus border animation finish + .snapshot('focused', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceOutlineDefault = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx index 87fceb24910242..1d851ed7f08146 100644 --- a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import type { Meta } from '@storybook/react'; import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox'; import { TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -7,22 +8,18 @@ import { TestWrapperDecoratorFixedWidth } from '../../utilities'; export default { title: 'Combobox Converged', component: Combobox, - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - - {story()} - - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .keys('input', 'ArrowDown') + .snapshot('active option', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Open = () => ( diff --git a/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleMultiSelect.stories.tsx b/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleMultiSelect.stories.tsx index 6b559d76d12515..87c379e4460121 100644 --- a/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleMultiSelect.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleMultiSelect.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { DataGrid, DataGridBody, @@ -9,24 +9,21 @@ import { DataGridHeaderCell, DataGridRow, } from '@fluentui/react-table'; -import { withStoryWrightSteps } from '../../utilities'; import { columns, items, type Item } from './utils'; export default { title: 'DataGridConverged - subtle multi select', - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .hover('.fui-DataGridHeader > .fui-DataGridRow') - .snapshot('hover header row') - .hover('.fui-DataGridBody > .fui-DataGridRow') - .snapshot('hover row') - .end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps() + .hover('.fui-DataGridHeader > .fui-DataGridRow') + .snapshot('hover header row') + .hover('.fui-DataGridBody > .fui-DataGridRow') + .snapshot('hover row') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => { @@ -37,7 +34,6 @@ export const Default = () => { sortable selectionMode="multiselect" subtleSelection - // eslint-disable-next-line react/jsx-no-bind getRowId={(item: Item) => item.file.label} focusMode="composite" style={{ minWidth: '550px' }} diff --git a/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleSingleSelect.stories.tsx b/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleSingleSelect.stories.tsx index 896d4dbff9ada0..3e01496b8504ba 100644 --- a/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleSingleSelect.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleSingleSelect.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { DataGrid, DataGridBody, @@ -9,24 +9,21 @@ import { DataGridHeaderCell, DataGridRow, } from '@fluentui/react-table'; -import { withStoryWrightSteps } from '../../utilities'; import { columns, items, type Item } from './utils'; export default { title: 'DataGridConverged - subtle single select', - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .hover('.fui-DataGridHeader > .fui-DataGridRow') - .snapshot('hover header row') - .hover('.fui-DataGridBody > .fui-DataGridRow') - .snapshot('hover row') - .end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps() + .hover('.fui-DataGridHeader > .fui-DataGridRow') + .snapshot('hover header row') + .hover('.fui-DataGridBody > .fui-DataGridRow') + .snapshot('hover row') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => { @@ -37,7 +34,6 @@ export const Default = () => { sortable selectionMode="single" subtleSelection - // eslint-disable-next-line react/jsx-no-bind getRowId={(item: Item) => item.file.label} focusMode="composite" style={{ minWidth: '550px' }} diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx index b6b4ea50467bac..b592bcde7f2af4 100644 --- a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx @@ -1,30 +1,23 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { DatePicker } from '@fluentui/react-datepicker-compat'; import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities'; export default { title: 'DatePicker Compat', component: DatePicker, - decorators: [ - TestWrapperDecorator, - story => ( - -
-
- {story()} -
-
- - ), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('rest', { cropTo: '.testWrapper' }) + .click('.datepicker-input') + .snapshot('opened', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx index cdce9168bb1bf8..80577f6605357d 100644 --- a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatRange.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat'; import type { DatePickerProps } from '@fluentui/react-datepicker-compat'; import { DateRangeType } from '@fluentui/react-calendar-compat'; @@ -23,15 +24,16 @@ export default { component: DatePicker, decorators: [ story => ( - -
-
- {story()} -
+
+
+ {story()}
- +
), ], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const DateRangeDay = () => ; diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx index bc9da357c25c26..a9da45952f4208 100644 --- a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatScenarios.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat'; import type { DatePickerProps } from '@fluentui/react-datepicker-compat'; import { Field } from '@fluentui/react-field'; @@ -20,12 +21,10 @@ const DatePicker = (props: DatePickerProps & { renderRelativeElement?: boolean } export default { title: 'DatePicker Compat', component: DatePicker, - decorators: [ - TestWrapperDecorator, - story => ( - {story()} - ), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Required = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx index f8ce3c25d2a33a..9d19eea147a2d2 100644 --- a/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx @@ -1,18 +1,17 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Divider } from '@fluentui/react-divider'; import { getStoryVariant, TestWrapperDecoratorFixedWidth, RTL, HIGH_CONTRAST, DARK_MODE } from '../../utilities'; export default { title: 'Divider Converged - Horizontal', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - {story()} - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const WithoutContent = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx index baae79971b8769..c734aa1deb5ce9 100644 --- a/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx @@ -1,21 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Divider } from '@fluentui/react-divider'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { TestWrapperDecorator } from '../../utilities'; export default { title: 'Divider Converged - Vertical', - decorators: [ - TestWrapperDecorator, - story => ( -
- {story()} -
- ), - ], + decorators: [TestWrapperDecorator, story =>
{story()}
], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const CenterAligned = () => Today; diff --git a/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx b/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx index 44c797c8f6d214..57c6b48ed3abd6 100644 --- a/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx @@ -1,29 +1,26 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Dropdown, Option } from '@fluentui/react-combobox'; import { TestWrapperDecoratorFixedWidth } from '../../utilities'; export default { title: 'Dropdown Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - - {story()} - - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('[role=combobox]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .focus('[role=combobox]') + .wait(250) // let focus border animation finish + .snapshot('focused', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceOutlineDefault = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx index ec6493b8a35a7f..95aab285e31440 100644 --- a/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx @@ -1,29 +1,26 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Dropdown, Option, OptionGroup } from '@fluentui/react-combobox'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { TestWrapperDecoratorFixedWidth } from '../../utilities'; export default { title: 'Dropdown Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => ( - - {story()} - - ), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('[role=combobox]') + .snapshot('hover', { cropTo: '.testWrapper' }) + .keys('input', 'ArrowDown') + .snapshot('active option', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Open = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx index 1dcd828e8317b3..f8317463034334 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -14,7 +14,7 @@ import { Textarea } from '@fluentui/react-textarea'; import type { Meta, Decorator } from '@storybook/react'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../utilities'; +import type { StoryParameters } from 'storywright'; const TestWrapperDecoratorFixedWidth400: Decorator = story => (
@@ -26,10 +26,10 @@ const TestWrapperDecoratorFixedWidth400: Decorator = story => ( export default { title: 'Field', - decorators: [ - TestWrapperDecoratorFixedWidth400, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth400], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Base = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx index b1fdd6cc8135ee..ff379e56cb0a7a 100644 --- a/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Image } from '@fluentui/react-image'; import type { Meta } from '@storybook/react'; @@ -7,10 +8,9 @@ const imageUrl = 'https://fabricweb.azureedge.net/fabric-website/assets/images/a export default { title: 'Image Converged', - - decorators: [ - (story: () => React.ReactNode) => {story()}, - ], + parameters: { + storyWright: { steps: new Steps().snapshot('normal').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx index 0658dcf9257cd7..9d0734ba24e5e5 100644 --- a/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/InfoLabel.stories.tsx @@ -1,24 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { InfoLabel } from '@fluentui/react-infolabel'; -import { - DARK_MODE, - getStoryVariant, - HIGH_CONTRAST, - RTL, - TestWrapperDecoratorFixedWidth, - withStoryWrightSteps, -} from '../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecoratorFixedWidth } from '../utilities'; export default { title: 'InfoLabel', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => This is an info label; diff --git a/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx b/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx index f655de82f480bd..02ed39e7f97919 100644 --- a/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx @@ -1,18 +1,19 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Input } from '@fluentui/react-input'; import { SearchRegular, DismissRegular } from '@fluentui/react-icons'; import { FluentProvider } from '@fluentui/react-provider'; -import { getStoryVariant, withStoryWrightSteps, TestWrapperDecoratorFixedWidth, RTL } from '../../utilities'; +import { getStoryVariant, TestWrapperDecoratorFixedWidth, RTL } from '../../utilities'; export default { title: 'Input Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const SizeSmall = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx index 9c77857ee58eda..dcc5d8e223888b 100644 --- a/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx @@ -3,26 +3,25 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Input } from '@fluentui/react-input'; -import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities'; +import { TestWrapperDecoratorFixedWidth } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Input Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('input') - .snapshot('hover', { cropTo: '.testWrapper' }) - .click('input') - .wait(250) // let focus border animation finish - .snapshot('focused', { cropTo: '.testWrapper' }) - .end(), - }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .click('input') + .wait(250) + .snapshot('focused', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceOutlineDefault = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Label.stories.tsx b/apps/vr-tests-react-components/src/stories/Label.stories.tsx index 1315aa7d099255..e5432fdb19c511 100644 --- a/apps/vr-tests-react-components/src/stories/Label.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Label.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { Label } from '@fluentui/react-label'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../utilities'; export default { title: 'Label Converged', - decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })], + parameters: { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters, } satisfies Meta; export const Root = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx index 089ccc239d2590..82bb6a566432ec 100644 --- a/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx @@ -3,13 +3,14 @@ import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; import { InvertedBackground, steps } from './utils'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const AnchorLink = (props: LinkProps & { as?: 'a' }) => ; export default { title: 'Link Converged - Rendered as anchor', - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const StandAlone = () => Stand-alone link; diff --git a/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx index 5c29701cd24fff..96c871f0c77cc3 100644 --- a/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/AnchorLinkDisabled.stories.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { disabledUnfocusableSteps } from './utils'; const AnchorLink = (props: LinkProps & { as?: 'a' }) => ; export default { title: 'Link Converged - Rendered as anchor', - decorators: [story => withStoryWrightSteps({ story, steps: disabledUnfocusableSteps })], + parameters: { storyWright: { steps: disabledUnfocusableSteps } } satisfies StoryParameters, } satisfies Meta; export const StandAloneDisabled = () => Stand-alone disabled link; diff --git a/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx index 2d995c5982dbb7..19ea19098ab67e 100644 --- a/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx @@ -4,13 +4,14 @@ import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; import { InvertedBackground, steps } from './utils'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const ButtonLink = (props: LinkProps) => ; export default { title: 'Link Converged - Rendered as button', - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const StandAlone = () => Stand-alone link; diff --git a/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx index d17aac128b9d84..e04356a7323bb3 100644 --- a/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/ButtonLinkDisabled.stories.tsx @@ -4,13 +4,13 @@ import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; import { disabledUnfocusableSteps } from './utils'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const ButtonLink = (props: LinkProps) => ; export default { title: 'Link Converged - Rendered as button', - decorators: [story => withStoryWrightSteps({ story, steps: disabledUnfocusableSteps })], + parameters: { storyWright: { steps: disabledUnfocusableSteps } } satisfies StoryParameters, } satisfies Meta; export const StandAloneDisabled = () => Stand-alone disabled link; diff --git a/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx b/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx index efd447d800d4ca..1e1ca6bd270d36 100644 --- a/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx @@ -3,13 +3,14 @@ import type { Meta } from '@storybook/react'; import { Link, LinkProps } from '@fluentui/react-link'; import { InvertedBackground, steps } from './utils'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const SpanLink = (props: LinkProps & { as?: 'span' }) => ; export default { title: 'Link Converged - Rendered as span', - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const StandAlone = () => Stand-alone link; diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx index 65ff7f9591bbf6..2f884666034b9a 100644 --- a/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx @@ -4,7 +4,7 @@ import { tokens, webLightTheme } from '@fluentui/react-theme'; import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const useStyles = makeStyles({ box: { @@ -60,8 +60,10 @@ export default { {storyFn(context)}
), - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }), ], + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta<'div'>; export const RtlTwoComponentsInASingleProvider = () => ( diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx index d10590f100d050..9e8135c0b59360 100644 --- a/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx @@ -2,7 +2,7 @@ import { shorthands, makeStyles } from '@griffel/react'; import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const useFocusStylesA = makeStyles({ root: { @@ -58,21 +58,21 @@ export default { {storyFn(context)}
), - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('normal', { cropTo: '.testWrapper' }) - .focus('#boxA') - .snapshot('boxA, focus', { cropTo: '.testWrapper' }) - .hover('#boxA') - .snapshot('boxA, focus+hover', { cropTo: '.testWrapper' }) - .focus('#boxB') - .hover('#boxB') - .snapshot('boxB, focus+hover', { cropTo: '.testWrapper' }) - .end(), - }), ], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('normal', { cropTo: '.testWrapper' }) + .focus('#boxA') + .snapshot('boxA, focus', { cropTo: '.testWrapper' }) + .hover('#boxA') + .snapshot('boxA, focus+hover', { cropTo: '.testWrapper' }) + .focus('#boxB') + .hover('#boxB') + .snapshot('boxB, focus+hover', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta<'div'>; export const InsertionIsOrdered = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx index 143410b25fafc1..07f2d070e125f1 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/Menu.stories.tsx @@ -3,15 +3,14 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu'; import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - basic', - - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }), - ], + parameters: { + storyWright: { steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx index ee34bf080e627f..93104fc4152c22 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx @@ -3,15 +3,14 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - icon slotted content', - - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }), - ], + parameters: { + storyWright: { steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx index 675d3693622215..970555bba4de09 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx @@ -4,18 +4,13 @@ import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemLink } from '@fluentui/react-menu'; import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - MenuItemLinks', - - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitemlink').end(), - }), - ], + parameters: { + storyWright: { steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitemlink').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx index 9c7f62f2f03751..e425cd1f3d9823 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuDivider } from '@fluentui/react-menu'; import { CutRegular, ClipboardPasteRegular } from '@fluentui/react-icons'; - import { getStoryVariant, RTL } from '../../utilities'; export default { diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuMultilineItems.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuMultilineItems.stories.tsx index 470efdec3b3858..0236e5b9cce1cf 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuMultilineItems.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuMultilineItems.stories.tsx @@ -15,15 +15,14 @@ import { MenuItemCheckbox, } from '@fluentui/react-menu'; import { EditFilled, EditRegular, bundleIcon } from '@fluentui/react-icons'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Multiline items', - - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }), - ], + parameters: { + storyWright: { steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }, + } satisfies StoryParameters, } satisfies Meta; const EditIcon = bundleIcon(EditFilled, EditRegular); diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx index 82c1281351f129..0f45f7cc40563e 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx @@ -4,15 +4,14 @@ import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu'; import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - secondary content', - - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }), - ], + parameters: { + storyWright: { steps: new Steps().hover('[role="menuitem"]').snapshot('hover menuitem').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx index c4da62d2907f35..011199d1c3b0c8 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx @@ -1,18 +1,17 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox, MenuItemSwitch } from '@fluentui/react-menu'; import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; export default { title: 'Menu Converged - selection', - - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end() }), - ], + parameters: { + storyWright: { steps: new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Checkbox = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx index 6932580ca353c8..f9533af278a382 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx @@ -14,15 +14,14 @@ import { } from '@fluentui/react-menu'; import { CutRegular, EditRegular, ClipboardPasteRegular } from '@fluentui/react-icons'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - selection groups', - - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end() }), - ], + parameters: { + storyWright: { steps: new Steps().click('[role="menuitemcheckbox"]').snapshot('selected').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx index 97511cfa10bd60..772285d968f8a7 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx @@ -3,14 +3,15 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, MenuSplitGroup } from '@fluentui/react-menu'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - split item', - decorators: [ - story => withStoryWrightSteps({ story, steps: new Steps().click('#nestedTrigger').snapshot('submenu open').end() }), - ], + parameters: { + storyWright: { steps: new Steps().click('#nestedTrigger').snapshot('submenu open').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx index e03491fcf0c5c9..ba33779df947bc 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx @@ -3,15 +3,15 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu nested within a MenuTrigger', - decorators: [ + parameters: { // https://github.com/microsoft/fluentui/issues/19782 - story => withStoryWrightSteps({ story, steps: new Steps().click('#nestedTrigger').snapshot('submenu open').end() }), - ], + storyWright: { steps: new Steps().click('#nestedTrigger').snapshot('submenu open').end() }, + } satisfies StoryParameters, } satisfies Meta; const ContextMenuArea = React.forwardRef((props, ref) => { diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx index e287765801d85f..e137b7ba9a4bd4 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportFlipped.stories.tsx @@ -5,7 +5,7 @@ import { makeStyles, shorthands } from '@griffel/react'; import { PositioningImperativeRef } from '@fluentui/react-positioning'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const useStyles = makeStyles({ container: { @@ -72,14 +72,9 @@ const Example = () => { export default { title: 'Menu', - - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end(), - }), - ], + parameters: { + storyWright: { steps: new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end() }, + } satisfies StoryParameters, } satisfies Meta; export const NestedSubmenusSmallViewportFlipped = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx index 0629b00a93a436..9c764bb2e73167 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/NestedMenuSmallViewportStacked.stories.tsx @@ -5,7 +5,7 @@ import { makeStyles, shorthands } from '@griffel/react'; import { PositioningImperativeRef } from '@fluentui/react-positioning'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const useStyles = makeStyles({ container: { @@ -71,14 +71,9 @@ const Example = () => { export default { title: 'Menu', - - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end(), - }), - ], + parameters: { + storyWright: { steps: new Steps().snapshot('default').hover('#nested').snapshot('nested menu').end() }, + } satisfies StoryParameters, } satisfies Meta; export const NestedSubmenusSmallViewportStacked = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx index 113795f9edb178..1cda7d88ab4baa 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx @@ -3,15 +3,16 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Menu Converged - nested submenus', - decorators: [ + parameters: { // https://github.com/microsoft/fluentui/issues/19782 - story => withStoryWrightSteps({ story, steps: new Steps().click('#nestedTrigger').snapshot('all open').end() }), - ], + storyWright: { steps: new Steps().click('#nestedTrigger').snapshot('all open').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx index 48cc2bd300ce96..8d09dd60d424b1 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/ScrollableMenuSmallViewport.stories.tsx @@ -5,7 +5,7 @@ import { makeStyles, shorthands } from '@griffel/react'; import { PositioningProps } from '@fluentui/react-positioning'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const useStyles = makeStyles({ wrapper: { display: 'flex' }, @@ -81,7 +81,7 @@ const Example = () => { export default { title: 'Menu', - decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })], + parameters: { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters, } satisfies Meta; export const ScrollableMenuSmallViewport = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx index 3f58eacbfafafc..e2956f373435ee 100644 --- a/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx @@ -2,19 +2,17 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-menu'; -import { getStoryVariant, RTL, withStoryWrightSteps } from '../../utilities'; +import { getStoryVariant, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; // this places text in the submenuIndicator slot to verify alignment when not using v9 icons export default { title: 'Menu Converged - submenuIndicator slotted content', - - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps().click('#nestedTrigger1').click('#nestedTrigger2').snapshot('submenus open').end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps().click('#nestedTrigger1').click('#nestedTrigger2').snapshot('submenus open').end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx index 37171428d14ece..50c03ef8679cd2 100644 --- a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx @@ -11,14 +11,15 @@ import { Steps } from 'storywright'; import { Button } from '@fluentui/react-button'; import { Link } from '@fluentui/react-link'; import { DismissRegular } from '@fluentui/react-icons'; -import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(); export default { title: 'MessageBar', component: MessageBar, - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success']; diff --git a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx index 97da531c959930..c5615c31be2cbb 100644 --- a/apps/vr-tests-react-components/src/stories/Persona.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Persona.stories.tsx @@ -3,7 +3,8 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Persona } from '@fluentui/react-persona'; import type { PersonaProps } from '@fluentui/react-persona'; -import { getStoryVariant, withStoryWrightSteps, RTL, HIGH_CONTRAST, DARK_MODE } from '../utilities'; +import { getStoryVariant, RTL, HIGH_CONTRAST, DARK_MODE } from '../utilities'; +import type { StoryParameters } from 'storywright'; const sizes: PersonaProps['size'][] = ['extra-small', 'small', 'medium', 'large', 'extra-large', 'huge']; const textPositions: PersonaProps['textPosition'][] = ['before', 'below', 'after']; @@ -18,8 +19,10 @@ export default { {story()}
), - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }), ], + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Basic = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx index 4b7859711fb697..f5b0c5a017f736 100644 --- a/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx @@ -3,18 +3,15 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover'; -import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities'; +import { TestWrapperDecoratorFixedWidth } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Popover Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => - withStoryWrightSteps({ - story, - steps: new Steps().click('#show-popover').snapshot('PopoverSurface focused').end(), - }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().click('#show-popover').snapshot('PopoverSurface focused').end() }, + } satisfies StoryParameters, } satisfies Meta; export const AvoidScrolling = () => { diff --git a/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx index 993e2150ff85ca..2939e00f96c06a 100644 --- a/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx @@ -3,7 +3,8 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Popover, PopoverSurface } from '@fluentui/react-popover'; import { tokens } from '@fluentui/react-theme'; -import { getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps, TestWrapperDecorator } from '../../utilities'; +import { getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecorator } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const PopoverPositioning: React.FC = () => { const positions = [ @@ -50,14 +51,12 @@ const PopoverPositioning: React.FC = () => { export default { title: 'Popover Converged', - decorators: [ - TestWrapperDecorator, - story => - withStoryWrightSteps({ - story, - steps: new Steps().click('#show-popovers').snapshot('positioned popovers', { cropTo: '.testWrapper' }).end(), - }), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps().click('#show-popovers').snapshot('positioned popovers', { cropTo: '.testWrapper' }).end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Positioning = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Portal.stories.tsx b/apps/vr-tests-react-components/src/stories/Portal.stories.tsx index 8545b69afd67a7..4f7e94eca7f036 100644 --- a/apps/vr-tests-react-components/src/stories/Portal.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Portal.stories.tsx @@ -4,14 +4,15 @@ import { tokens } from '@fluentui/react-theme'; import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover'; import { makeStyles, shorthands } from '@griffel/react'; import type { Meta } from '@storybook/react'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; const steps = new Steps().click('#popoverTrigger').snapshot('should have green border').end(); export default { title: 'Portal', component: Portal, - decorators: [story => {story()}], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; const useStyles = makeStyles({ diff --git a/apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx index 39dfe1da905128..f16eb595530dc0 100644 --- a/apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Positioning/Positioning.stories.tsx @@ -11,7 +11,8 @@ import { } from '@fluentui/react-positioning'; import { useMergedRefs, useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Box, positions, useStyles } from './utils'; import { getStoryVariant, RTL } from '../../utilities'; @@ -1161,34 +1162,31 @@ AutoSizeOverflowPaddingShorthand.storyName = 'auto size overflow padding shortha export const _ConfigurationProvider = () => ; _ConfigurationProvider.storyName = 'configuration provider'; -export const AutoSizeWithAsyncContent = () => ( - ; +AutoSizeWithAsyncContent.storyName = 'auto size with async content'; +AutoSizeWithAsyncContent.parameters = { + storyWright: { + steps: new Steps() .click('#load-content') .wait('#full-content') .snapshot('floating element is within the boundary') - .end()} - > - - -); -AutoSizeWithAsyncContent.storyName = 'auto size with async content'; + .end(), + }, +} satisfies StoryParameters; -export const AutoSizeWithAsyncContentResetStylesOnUpdatePosition = () => ( - ; +AutoSizeWithAsyncContentResetStylesOnUpdatePosition.storyName = + 'auto size with async content reset styles on updatePosition'; +AutoSizeWithAsyncContentResetStylesOnUpdatePosition.parameters = { + storyWright: { + steps: new Steps() .click('#load-content') .wait('#full-content') .wait(250) // let updatePosition finish .snapshot('floating element width fills boundary and overflows 10px because of overflow:clip') - .end()} - > - - -); - -AutoSizeWithAsyncContentResetStylesOnUpdatePosition.storyName = - 'auto size with async content reset styles on updatePosition'; + .end(), + }, +} satisfies StoryParameters; export const _DisableTether = () => ; _DisableTether.storyName = 'disable tether'; @@ -1210,20 +1208,19 @@ TargetProperty.storyName = 'target property'; export const _ImperativeTarget = () => ; _ImperativeTarget.storyName = 'imperative target'; -export const _VisibilityModifiers = () => ( - ; +_VisibilityModifiers.storyName = 'visibility modifiers'; +_VisibilityModifiers.parameters = { + storyWright: { + steps: new Steps() .snapshot('has "[data-popper-is-intersecting]" when the popover intersects boundaries') .executeScript('document.querySelector("#scrollable-area").scrollTop = 80') .snapshot(`has "[data-popper-escaped]" when the popper escapes the reference element's boundary`) .executeScript('document.querySelector("#scrollable-area").scrollTop = 150') .snapshot('has "[data-popper-reference-hidden]" when the reference is hidden') - .end()} - > - - -); -_VisibilityModifiers.storyName = 'visibility modifiers'; + .end(), + }, +} satisfies StoryParameters; export const _Arrow = () => ; _Arrow.storyName = 'arrow'; @@ -1243,55 +1240,50 @@ DisableCssTransformWithPositionFixed.storyName = 'disable CSS transform with pos export const DisableCssTransformWithPositionFixedRTL = getStoryVariant(DisableCssTransformWithPositionFixed, RTL); -export const MultipleScrollParents = () => ( - - - -); +export const MultipleScrollParents = () => ; MultipleScrollParents.storyName = 'Multiple scroll parents'; +MultipleScrollParents.parameters = { + storyWright: { steps: new Steps().click('#scroll').snapshot('container attached to target').end() }, +} satisfies StoryParameters; export const _MatchTargetSize = () => ; _MatchTargetSize.storyName = 'Match target size'; -export const PositioningEnd = () => ( - - - -); +export const PositioningEnd = () => ; PositioningEnd.storyName = 'Positioning end'; +PositioningEnd.parameters = { + storyWright: { steps: new Steps().click('#target').snapshot('updated 2 times').end() }, +} satisfies StoryParameters; -export const _TargetDisplayNone = () => ( - - - -); +export const _TargetDisplayNone = () => ; _TargetDisplayNone.storyName = 'Target display none'; +_TargetDisplayNone.parameters = { + storyWright: { steps: new Steps().click('#target').snapshot('target display: none').end() }, +} satisfies StoryParameters; export const _ShiftToCoverTargetWithAutoSize = () => ; _ShiftToCoverTargetWithAutoSize.storyName = 'shiftToCoverTarget with autoSize'; -export const _ShiftToCoverTargetAsyncContent = () => ( - ; +_ShiftToCoverTargetAsyncContent.storyName = 'shiftToCoverTarget with autoSize and async content'; +_ShiftToCoverTargetAsyncContent.parameters = { + storyWright: { + steps: new Steps() .click('#load-content') .wait('#full-content') .snapshot('floating element is within the boundary') - .end()} - > - - -); -_ShiftToCoverTargetAsyncContent.storyName = 'shiftToCoverTarget with autoSize and async content'; + .end(), + }, +} satisfies StoryParameters; -export const _ShiftToCoverTargetHorizontal = () => ( - ; +_ShiftToCoverTargetHorizontal.storyName = 'shiftToCoverTarget with autoSize and async content - horizontal'; +_ShiftToCoverTargetHorizontal.parameters = { + storyWright: { + steps: new Steps() .click('#load-content') .wait('#full-content') .snapshot('floating element is within the boundary') - .end()} - > - - -); -_ShiftToCoverTargetHorizontal.storyName = 'shiftToCoverTarget with autoSize and async content - horizontal'; + .end(), + }, +} satisfies StoryParameters; diff --git a/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx b/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx index 9299a6fc6e2034..770c8392693f02 100644 --- a/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { usePositioning } from '@fluentui/react-positioning'; import { createContext, useContextSelector } from '@fluentui/react-context-selector'; import * as ReactDOM from 'react-dom'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { Box } from './utils'; @@ -290,30 +291,28 @@ export default { title: 'Positioning (no decorator)', }; -export const ScrollJumpUsage = () => ( - ; +ScrollJumpUsage.storyName = 'scroll jumps'; +ScrollJumpUsage.parameters = { + storyWright: { + steps: new Steps() .focus('#target') .click('#target') .wait('#test-completed') .snapshot('positions without scroll jump') - .end()} - > - - -); -ScrollJumpUsage.storyName = 'scroll jumps'; + .end(), + }, +} satisfies StoryParameters; -export const ScrollJumpsWithContextUsage = () => ( - ; +ScrollJumpsWithContextUsage.storyName = 'scroll jumps (with context usage)'; +ScrollJumpsWithContextUsage.parameters = { + storyWright: { + steps: new Steps() .focus('#target') .click('#target') .wait('#test-completed') .snapshot('positions without scroll jump') - .end()} - > - - -); -ScrollJumpsWithContextUsage.storyName = 'scroll jumps (with context usage)'; + .end(), + }, +} satisfies StoryParameters; diff --git a/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx index 33d340d87510fb..95a339f46e5404 100644 --- a/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx @@ -3,17 +3,18 @@ import type { Meta } from '@storybook/react'; import { PresenceBadge } from '@fluentui/react-badge'; import { tokens } from '@fluentui/react-theme'; import { Steps } from 'storywright'; -import { getStoryVariant, withStoryWrightSteps, TestWrapperDecorator, HIGH_CONTRAST, DARK_MODE } from '../../utilities'; +import { getStoryVariant, TestWrapperDecorator, HIGH_CONTRAST, DARK_MODE } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const statuses = ['available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'unknown'] as const; const sizes = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as const; export default { title: 'PresenceBadge Converged - inverted background', - decorators: [ - TestWrapperDecorator, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx index 4713c90e3d1b56..88dfef7f2a4ab7 100644 --- a/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx @@ -1,25 +1,18 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { AirplaneFilled } from '@fluentui/react-icons'; import { Radio, RadioGroup } from '@fluentui/react-radio'; -import { - DARK_MODE, - getStoryVariant, - HIGH_CONTRAST, - RTL, - TestWrapperDecoratorFixedWidth, - withStoryWrightSteps, -} from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities'; export default { title: 'Radio Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const DisabledChecked = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx index 2d1c0b7f386aa0..d9a6b1fb278eec 100644 --- a/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx @@ -1,34 +1,26 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { AirplaneFilled } from '@fluentui/react-icons'; import { Radio } from '@fluentui/react-radio'; -import { - DARK_MODE, - getStoryVariant, - HIGH_CONTRAST, - TestWrapperDecoratorFixedWidth, - withStoryWrightSteps, -} from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecoratorFixedWidth } from '../../utilities'; export default { title: 'Radio Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('rest', { cropTo: '.testWrapper' }) - .hover('input') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('input') - .snapshot('active', { cropTo: '.testWrapper' }) - .end(), - }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('rest', { cropTo: '.testWrapper' }) + .hover('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('input') + .snapshot('active', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Unchecked = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx b/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx index e6679a392ca0ba..bb1700b0b67964 100644 --- a/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx @@ -4,14 +4,15 @@ import { Steps } from 'storywright'; import { CircleRegular, CircleFilled, SquareRegular, SquareFilled } from '@fluentui/react-icons'; import { Rating } from '@fluentui/react-rating'; -import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities'; +import { TestWrapperDecoratorFixedWidth } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Rating Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const RatingSizeSmall = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx index 72b8fb7d634da3..a50a20a2d5650f 100644 --- a/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx @@ -1,30 +1,22 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { Rating } from '@fluentui/react-rating'; -import { - getStoryVariant, - withStoryWrightSteps, - TestWrapperDecoratorFixedWidth, - HIGH_CONTRAST, - DARK_MODE, -} from '../../utilities'; +import { getStoryVariant, TestWrapperDecoratorFixedWidth, HIGH_CONTRAST, DARK_MODE } from '../../utilities'; export default { title: 'Rating Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('rest', { cropTo: '.testWrapper' }) - .hover('input') - .snapshot('hover', { cropTo: '.testWrapper' }) - .end(), - }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('rest', { cropTo: '.testWrapper' }) + .hover('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const NeutralRatingWithHalfStar = () => ; diff --git a/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx b/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx index 7d8d2cb085957f..9a8665a6bd190c 100644 --- a/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/RatingDisplay.stories.tsx @@ -2,21 +2,15 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { CircleFilled, SquareFilled } from '@fluentui/react-icons'; import { RatingDisplay } from '@fluentui/react-rating'; -import { - getStoryVariant, - withStoryWrightSteps, - TestWrapperDecoratorFixedWidth, - HIGH_CONTRAST, - DARK_MODE, -} from '../utilities'; -import { Steps } from 'storywright'; +import { getStoryVariant, TestWrapperDecoratorFixedWidth, HIGH_CONTRAST, DARK_MODE } from '../utilities'; +import { Steps, type StoryParameters } from 'storywright'; export default { title: 'RatingDisplay Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('rest', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const NoValue = () => ; diff --git a/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx index 36bb7737b77bdd..6f0f83ac386d8c 100644 --- a/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBox.stories.tsx @@ -1,28 +1,27 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { SearchBox } from '@fluentui/react-search'; import { ArrowEnterLeftRegular, MicRegular } from '@fluentui/react-icons'; -import { getStoryVariant, withStoryWrightSteps, TestWrapperDecorator, RTL } from '../../utilities'; +import { getStoryVariant, TestWrapperDecorator, RTL } from '../../utilities'; export default { title: 'SearchBox Converged', - decorators: [ - TestWrapperDecorator, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .click('input') - .snapshot('hover', { cropTo: '.testWrapper' }) - .click('input') - .wait(250) // let focus border animation finish - .snapshot('focused', { cropTo: '.testWrapper' }) - .end(), - }), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .click('input') + .snapshot('hover', { cropTo: '.testWrapper' }) + .click('input') + .wait(250) // let focus border animation finish + .snapshot('focused', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const WithValue = () => ; diff --git a/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx index 91ef2063598a3d..ac6e300a92e8e1 100644 --- a/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/SearchBox/SearchBoxClearsValue.stories.tsx @@ -1,29 +1,28 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; import { SearchBox } from '@fluentui/react-search'; -import { withStoryWrightSteps, TestWrapperDecorator } from '../../utilities'; +import { TestWrapperDecorator } from '../../utilities'; export default { title: 'SearchBox Converged', - decorators: [ - TestWrapperDecorator, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .keys('input', 'Tab') - .wait(250) // let focus border animation finish - .snapshot('input focused', { cropTo: '.testWrapper' }) - .focus('[role=button]') - .snapshot('dismiss focused', { cropTo: '.testWrapper' }) - .click('[role=button]') - .snapshot('dismiss clicked', { cropTo: '.testWrapper' }) - .end(), - }), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .keys('input', 'Tab') + .wait(250) // let focus border animation finish + .snapshot('input focused', { cropTo: '.testWrapper' }) + .focus('[role=button]') + .snapshot('dismiss focused', { cropTo: '.testWrapper' }) + .click('[role=button]') + .snapshot('dismiss clicked', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const ClearsValue = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx b/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx index cc9993c6a1ee53..66f4942f97fa28 100644 --- a/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx @@ -4,14 +4,15 @@ import { Steps } from 'storywright'; import { Select } from '@fluentui/react-select'; import { FluentProvider } from '@fluentui/react-provider'; -import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities'; +import { TestWrapperDecoratorFixedWidth } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Select Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const WithValue = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx index 0626a5fe6d81a0..2bc0c29922c0f2 100644 --- a/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx @@ -3,25 +3,24 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { Select } from '@fluentui/react-select'; -import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities'; +import { TestWrapperDecoratorFixedWidth } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Select Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('select') - .snapshot('hover', { cropTo: '.testWrapper' }) - .focus('select') - .wait(250) // let focus border animation finish - .snapshot('focused', { cropTo: '.testWrapper' }) - .end(), - }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('select') + .snapshot('hover', { cropTo: '.testWrapper' }) + .focus('select') + .wait(250) // let focus border animation finish + .snapshot('focused', { cropTo: '.testWrapper' }) + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const AppearanceOutlineDefault = () => ( diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx index 7417a564b7da37..fb24288ce658b5 100644 --- a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx @@ -5,7 +5,8 @@ import { Input } from '@fluentui/react-input'; import * as React from 'react'; import { ShadowRoot } from './utils'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; const useClasses = makeStyles({ container: { @@ -38,12 +39,15 @@ const ComponentSet: React.FC = () => { export default { title: 'Shadow DOM', + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, }; export const Default = () => ( - - - - - + + + ); + +Default.parameters = { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters; diff --git a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx index 15442ac31c509f..ce4752a5b645b0 100644 --- a/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx @@ -1,31 +1,38 @@ import { Button } from '@fluentui/react-button'; import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-menu'; import * as React from 'react'; +import type { StoryFn } from '@storybook/react'; import { ShadowRoot } from './utils'; -import { Steps, StoryWright } from 'storywright'; +import { Steps } from 'storywright'; +import type { StoryParameters } from 'storywright'; export default { title: 'Shadow DOM', + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, }; -export const Portal: React.FC = () => ( - - - - - - +export const Portal: StoryFn = () => ( + + + + + - - - New - New Window - Open File - Open Folder - - - - - + + + New + New Window + Open File + Open Folder + + + + ); + +Portal.parameters = { + storyWright: { steps: new Steps().click('#toggle-menu').snapshot('normal').end() }, +} satisfies StoryParameters; diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx index 16d4c7e661656a..970710bf794819 100644 --- a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx @@ -4,11 +4,12 @@ import { SwatchPicker } from '@fluentui/react-swatch-picker'; import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid } from './utils'; import { Steps } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'SwatchPicker Converged', - decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })], + parameters: { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx index dd8f7fe2b56057..883c7ecfd83a0e 100644 --- a/apps/vr-tests-react-components/src/stories/Switch.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Switch.stories.tsx @@ -1,35 +1,26 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; -import { Steps } from 'storywright'; +import { Steps, type StoryParameters } from 'storywright'; import { Switch } from '@fluentui/react-switch'; -import { - DARK_MODE, - getStoryVariant, - HIGH_CONTRAST, - RTL, - TestWrapperDecorator, - withStoryWrightSteps, -} from '../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, TestWrapperDecorator } from '../utilities'; export default { title: 'Switch Converged', - decorators: [ - TestWrapperDecorator, - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('.test-class') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('.test-class') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .mouseUp('.test-class') - .end(), - }), - ], + decorators: [TestWrapperDecorator], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('.test-class') + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('.test-class') + .snapshot('pressed', { cropTo: '.testWrapper' }) + .mouseUp('.test-class') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const EnabledAndUnchecked = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx index 371214546bd198..b4ef87c439ab40 100644 --- a/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx @@ -2,15 +2,17 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Table } from '@fluentui/react-table'; import { Steps } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { CellActionsAlwaysVisible, CellActionsDefault, CellActionsInHeaderCell } from './utils'; export default { title: 'Table layout table - cell actions', - decorators: [ - story => withStoryWrightSteps({ story, steps: new Steps().hover('.row-1').snapshot('hover row').end() }), - ], + decorators: [], + parameters: { + storyWright: { steps: new Steps().hover('.row-1').snapshot('hover row').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx index 710dca742f54f5..2ab4e6d8a69d82 100644 --- a/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx @@ -2,15 +2,15 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Table } from '@fluentui/react-table'; import { Steps } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { CellActionsAlwaysVisible, CellActionsDefault, CellActionsInHeaderCell } from './utils'; export default { title: 'Table layout flex - cell actions', - - decorators: [ - story => withStoryWrightSteps({ story, steps: new Steps().hover('.row-1').snapshot('hover row').end() }), - ], + parameters: { + storyWright: { steps: new Steps().hover('.row-1').snapshot('hover row').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx index eb8f89a74cd52d..f083a23e88a4d1 100644 --- a/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx @@ -2,23 +2,22 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Table } from '@fluentui/react-table'; import { Steps } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { SortableHeaders } from './utils'; export default { title: 'Table layout flex - headers', - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .hover('.columnheader') - .snapshot('hover header') - .mouseDown('.columnheader') - .snapshot('press header') - .end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps() + .hover('.columnheader') + .snapshot('hover header') + .mouseDown('.columnheader') + .snapshot('press header') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Sortable = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx index 2d14df310bac18..e892d68398a6f3 100644 --- a/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx @@ -2,15 +2,14 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Table } from '@fluentui/react-table'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { SubtleSelection } from './utils'; export default { title: 'Table flex - subtle selection', - decorators: [ - story => - withStoryWrightSteps({ story, steps: new Steps().hover('.not-selected').snapshot('hover unselected row').end() }), - ], + parameters: { + storyWright: { steps: new Steps().hover('.not-selected').snapshot('hover unselected row').end() }, + } satisfies StoryParameters, } satisfies Meta; export const Rest = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx index 30a60f3264bb67..91522de1ebb8c0 100644 --- a/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx @@ -2,23 +2,22 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Table } from '@fluentui/react-table'; import { Steps } from 'storywright'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, withStoryWrightSteps } from '../../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { SortableHeaders } from './utils'; export default { title: 'Table layout table - headers', - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .hover('.columnheader') - .snapshot('hover header') - .mouseDown('.columnheader') - .snapshot('press header') - .end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps() + .hover('.columnheader') + .snapshot('hover header') + .mouseDown('.columnheader') + .snapshot('press header') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Sortable = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx b/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx index c15a696da11793..f668d6ad2357f7 100644 --- a/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx @@ -2,23 +2,21 @@ import * as React from 'react'; import type { Meta } from '@storybook/react'; import { Table, tableHeaderClassNames } from '@fluentui/react-table'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { SubtleSelection, SubtleSelectionEmpty } from './utils'; export default { title: 'Table table - subtle selection', - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .hover('.not-selected') - .snapshot('hover unselected row') - .hover(`.${tableHeaderClassNames.root}`) - .snapshot('hover header row') - .end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps() + .hover('.not-selected') + .snapshot('hover unselected row') + .hover(`.${tableHeaderClassNames.root}`) + .snapshot('hover header row') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Rest = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx index d7cd382029b1e6..3a01c21a3964c4 100644 --- a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx @@ -3,25 +3,24 @@ import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; import { TabList, Tab } from '@fluentui/react-tabs'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'TabList and Tab Converged', - decorators: [ - story => - withStoryWrightSteps({ - story, - steps: new Steps() - .snapshot('default') - .hover('.mouse-target') - .snapshot('hover') - .mouseDown('.mouse-target') - .snapshot('pressed') - .mouseUp('.mouse-target') - .end(), - }), - ], + parameters: { + storyWright: { + steps: new Steps() + .snapshot('default') + .hover('.mouse-target') + .snapshot('hover') + .mouseDown('.mouse-target') + .snapshot('pressed') + .mouseUp('.mouse-target') + .end(), + }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx index 6e6270225d6722..8986c1873b3b81 100644 --- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import type { Meta } from '@storybook/react'; -import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { Steps } from 'storywright'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -26,7 +27,7 @@ const steps = new Steps() export default { title: 'InteractionTag Converged', component: InteractionTag, - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const Filled = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx index ffd616c6b05b08..afceb11d3a5acd 100644 --- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { Tag } from '@fluentui/react-tags'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import type { Meta } from '@storybook/react'; -import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { Avatar } from '@fluentui/react-avatar'; import { Steps } from 'storywright'; @@ -13,7 +14,7 @@ const steps = new Steps().snapshot('default').end(); export default { title: 'Tag Converged', component: Tag, - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const Default = () => Primary Text; diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx index 469f07ff026d15..af6825f27e9b41 100644 --- a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { Tag } from '@fluentui/react-tags'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import type { Meta } from '@storybook/react'; -import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; +import type { StoryParameters } from 'storywright'; import { Steps } from 'storywright'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); @@ -19,7 +20,7 @@ const steps = new Steps() export default { title: 'Tag Converged', component: Tag, - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const Filled = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx index f24947feb4ae0f..8d26f8bd35faad 100644 --- a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx @@ -2,14 +2,14 @@ import * as React from 'react'; import { TagGroup, Tag, InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags'; import type { Meta } from '@storybook/react'; import { Steps } from 'storywright'; -import { withStoryWrightSteps } from '../../utilities'; +import type { StoryParameters } from 'storywright'; const steps = new Steps().snapshot('default').end(); export default { title: 'TagGroup Converged', component: TagGroup, - decorators: [story => withStoryWrightSteps({ story, steps })], + parameters: { storyWright: { steps } } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Text.stories.tsx b/apps/vr-tests-react-components/src/stories/Text.stories.tsx index 2f44cb6f30c088..4aeec292e7035a 100644 --- a/apps/vr-tests-react-components/src/stories/Text.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Text.stories.tsx @@ -22,7 +22,8 @@ import { Title3, } from '@fluentui/react-text'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../utilities'; +import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Text Converged', @@ -33,8 +34,10 @@ export default { {storyFn(context)} ), - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }), ], + parameters: { + storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx b/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx index d26b599da702d0..b8e3ba46649675 100644 --- a/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx @@ -4,15 +4,16 @@ import { Steps } from 'storywright'; import { Textarea } from '@fluentui/react-textarea'; import { FluentProvider } from '@fluentui/react-provider'; -import { withStoryWrightSteps, TestWrapperDecoratorFixedWidth } from '../../utilities'; +import { TestWrapperDecoratorFixedWidth } from '../../utilities'; +import type { StoryParameters } from 'storywright'; export default { title: 'Textarea Converged', - decorators: [ - TestWrapperDecoratorFixedWidth, - story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }), - ], + decorators: [TestWrapperDecoratorFixedWidth], + parameters: { + storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }, + } satisfies StoryParameters, } satisfies Meta; export const SizeSmall = () =>