Skip to content

refactor: migrate VR tests StoryWright steps from decorators to params API #35346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hotell merged 6 commits into from
Oct 30, 2025
Merged

refactor: migrate VR tests StoryWright steps from decorators to params API #35346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9debb82
refactor: migrate VR tests StoryWright steps from decorators to param…
dmytrokirpa Oct 23, 2025
6cad8b8
Merge branch 'master' into refactor/vr-tests-steps-api
dmytrokirpa Oct 23, 2025
5af70f9
revert calendar story change
dmytrokirpa Oct 27, 2025
2439a7b
Merge branch 'master' into refactor/vr-tests-steps-api
dmytrokirpa Oct 27, 2025
d614565
remove "--stepsApi parameters", bring back bailOnStoriesError for vr-…
dmytrokirpa Oct 30, 2025
0a9c16f
add storywright patch
dmytrokirpa Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,13 +11,14 @@ export default {

decorators: [
story => (
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</StoryWright>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
),
],
parameters: {
storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
} satisfies StoryParameters,
} satisfies Meta<typeof Accordion>;

export const Size = () => (
Expand Down
31 changes: 16 additions & 15 deletions apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 => (
<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()}
>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</StoryWright>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
),
],
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<typeof Accordion>;

export const VisibilityFocus = () => (
Expand Down
9 changes: 5 additions & 4 deletions apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -197,10 +198,10 @@ export default {
</div>
</div>
),
story => (
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
),
],
parameters: {
storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
} satisfies StoryParameters,
} satisfies Meta<typeof Avatar>;

export const Basic = () => (
Expand Down
16 changes: 9 additions & 7 deletions apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -11,15 +12,16 @@ export default {
component: AvatarGroup,
decorators: [
story => (
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
<div style={{ display: 'flex' }}>
<div className="testWrapper" style={{ overflow: 'hidden' }}>
{story()}
</div>
<div style={{ display: 'flex' }}>
<div className="testWrapper" style={{ overflow: 'hidden' }}>
{story()}
</div>
</StoryWright>
</div>
),
],
parameters: {
storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
} satisfies StoryParameters,
} satisfies Meta<typeof AvatarGroup>;

export const Basic = () => <AvatarGroupList />;
Expand Down
16 changes: 9 additions & 7 deletions apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -11,15 +12,16 @@ export default {
component: AvatarGroup,
decorators: [
story => (
<StoryWright steps={new Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
<div style={{ display: 'flex' }}>
<div className="testWrapper" style={{ width: '100%', overflow: 'hidden' }}>
{story()}
</div>
<div style={{ display: 'flex' }}>
<div className="testWrapper" style={{ width: '100%', overflow: 'hidden' }}>
{story()}
</div>
</StoryWright>
</div>
),
],
parameters: {
storyWright: { steps: new Steps().click('#show-overflow').snapshot('popoverContentOpen').end() },
} satisfies StoryParameters,
} satisfies Meta<typeof AvatarGroup>;

export const OverflowContent = () => {
Expand Down
5 changes: 3 additions & 2 deletions apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof Breadcrumb>;

export const Appearance = () => (
Expand Down
13 changes: 6 additions & 7 deletions apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,12 +16,10 @@ const Calendar = (props: CalendarProps) => {
export default {
title: 'Calendar Compat',
component: CalendarBase,
decorators: [
TestWrapperDecorator,
story => (
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
),
],
decorators: [TestWrapperDecorator],
parameters: {
storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
} satisfies StoryParameters,
} satisfies Meta<typeof CalendarBase>;

export const Default = () => <Calendar />;
Expand Down
6 changes: 3 additions & 3 deletions apps/vr-tests-react-components/src/stories/CalendarCompat/CalendarCompat.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof Calendar>;

export const CalendarCompatMultiDayView = () => <SampleCalendarCompatMultiDayView daysToSelectInDayView={5} />;
Expand Down
26 changes: 14 additions & 12 deletions apps/vr-tests-react-components/src/stories/Card/CardDisabled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,19 +11,20 @@ export default {

decorators: [
story => (
<StoryWright
steps={new Steps()
.snapshot('normal', { cropTo: '.testWrapper' })
.hover('[role="group"]')
.snapshot('hover', { cropTo: '.testWrapper' })
.end()}
>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</StoryWright>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
),
],
parameters: {
storyWright: {
steps: new Steps()
.snapshot('normal', { cropTo: '.testWrapper' })
.hover('[role="group"]')
.snapshot('hover', { cropTo: '.testWrapper' })
.end(),
},
} satisfies StoryParameters,
} satisfies Meta<typeof Card>;

export const AppearanceDisabledFilled = () => (
Expand Down
30 changes: 16 additions & 14 deletions apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -11,21 +12,22 @@ export default {

decorators: [
story => (
<StoryWright
steps={new Steps()
.snapshot('normal', { cropTo: '.testWrapper' })
.hover('[role="group"]')
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('[role="group"]')
.snapshot('click', { cropTo: '.testWrapper' })
.end()}
>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</StoryWright>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
),
],
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<typeof Card>;

export const AppearanceInteractiveFilled = () => (
Expand Down
34 changes: 18 additions & 16 deletions apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,23 +11,24 @@ export default {

decorators: [
story => (
<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()}
>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</StoryWright>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
),
],
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<typeof Card>;

export const AppearanceSelectableFilled = () => (
Expand Down
13 changes: 6 additions & 7 deletions apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <StoryWright steps={steps}>{story(context)}</StoryWright>;
decorators: [TestWrapperDecorator],
parameters: {
storyWright: {
steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end(),
},
],
} satisfies StoryParameters,
} satisfies Meta<typeof DonutChart>;

export const Basic = () => {
Expand Down
Loading