Skip to content

Commit 4498bc0

Browse files
dmytrokirpadmytrokirpa
authored
refactor: migrate VR tests StoryWright steps from decorators to params API (#35346)
1 parent adc08ae commit 4498bc0

230 files changed

Lines changed: 2137 additions & 1919 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { Steps, StoryWright } from 'storywright';
2+
import { Steps } from 'storywright';
3+
import type { StoryParameters } from 'storywright';
34
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
45
import { CircleRegular } from '@fluentui/react-icons';
56
import type { Meta } from '@storybook/react';
@@ -10,13 +11,14 @@ export default {
1011

1112
decorators: [
1213
story => (
13-
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
14-
<div className="testWrapper" style={{ width: '300px' }}>
15-
{story()}
16-
</div>
17-
</StoryWright>
14+
<div className="testWrapper" style={{ width: '300px' }}>
15+
{story()}
16+
</div>
1817
),
1918
],
19+
parameters: {
20+
storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
21+
} satisfies StoryParameters,
2022
} satisfies Meta<typeof Accordion>;
2123

2224
export const Size = () => (

‎apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import * as React from 'react';
2-
import { Steps, StoryWright } from 'storywright';
2+
import { Steps } from 'storywright';
3+
import type { StoryParameters } from 'storywright';
34
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
45
import type { Meta } from '@storybook/react';
56
import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
67

78
export default {
89
title: 'Accordion Converged',
9-
1010
decorators: [
1111
story => (
12-
<StoryWright
13-
steps={new Steps()
14-
.snapshot('normal', { cropTo: '.testWrapper' })
15-
.focus('#opened-btn')
16-
.snapshot('focus opened', { cropTo: '.testWrapper' })
17-
.focus('#closed-btn')
18-
.snapshot('focus closed', { cropTo: '.testWrapper' })
19-
.end()}
20-
>
21-
<div className="testWrapper" style={{ width: '300px' }}>
22-
{story()}
23-
</div>
24-
</StoryWright>
12+
<div className="testWrapper" style={{ width: '300px' }}>
13+
{story()}
14+
</div>
2515
),
2616
],
17+
parameters: {
18+
storyWright: {
19+
steps: new Steps()
20+
.snapshot('normal', { cropTo: '.testWrapper' })
21+
.focus('#opened-btn')
22+
.snapshot('focus opened', { cropTo: '.testWrapper' })
23+
.focus('#closed-btn')
24+
.snapshot('focus closed', { cropTo: '.testWrapper' })
25+
.end(),
26+
},
27+
} satisfies StoryParameters,
2728
} satisfies Meta<typeof Accordion>;
2829

2930
export const VisibilityFocus = () => (

‎apps/vr-tests-react-components/src/stories/Avatar.stories.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta } from '@storybook/react';
22
import * as React from 'react';
3-
import { Steps, StoryWright } from 'storywright';
3+
import { Steps } from 'storywright';
4+
import type { StoryParameters } from 'storywright';
45
import { Avatar, AvatarProps } from '@fluentui/react-avatar';
56
import { tokens } from '@fluentui/react-theme';
67
import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons';
@@ -197,10 +198,10 @@ export default {
197198
</div>
198199
</div>
199200
),
200-
story => (
201-
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
202-
),
203201
],
202+
parameters: {
203+
storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
204+
} satisfies StoryParameters,
204205
} satisfies Meta<typeof Avatar>;
205206

206207
export const Basic = () => (

‎apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import type { Meta } from '@storybook/react';
3-
import { Steps, StoryWright } from 'storywright';
3+
import { Steps } from 'storywright';
4+
import type { StoryParameters } from 'storywright';
45
import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover } from '@fluentui/react-avatar';
56

67
import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../../utilities';
@@ -11,15 +12,16 @@ export default {
1112
component: AvatarGroup,
1213
decorators: [
1314
story => (
14-
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
15-
<div style={{ display: 'flex' }}>
16-
<div className="testWrapper" style={{ overflow: 'hidden' }}>
17-
{story()}
18-
</div>
15+
<div style={{ display: 'flex' }}>
16+
<div className="testWrapper" style={{ overflow: 'hidden' }}>
17+
{story()}
1918
</div>
20-
</StoryWright>
19+
</div>
2120
),
2221
],
22+
parameters: {
23+
storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
24+
} satisfies StoryParameters,
2325
} satisfies Meta<typeof AvatarGroup>;
2426

2527
export const Basic = () => <AvatarGroupList />;

‎apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupOverflow.stories.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import type { Meta } from '@storybook/react';
3-
import { Steps, StoryWright } from 'storywright';
3+
import { Steps } from 'storywright';
4+
import type { StoryParameters } from 'storywright';
45
import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar';
56

67
import { names } from './utils';
@@ -11,15 +12,16 @@ export default {
1112
component: AvatarGroup,
1213
decorators: [
1314
story => (
14-
<StoryWright steps={new Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
15-
<div style={{ display: 'flex' }}>
16-
<div className="testWrapper" style={{ width: '100%', overflow: 'hidden' }}>
17-
{story()}
18-
</div>
15+
<div style={{ display: 'flex' }}>
16+
<div className="testWrapper" style={{ width: '100%', overflow: 'hidden' }}>
17+
{story()}
1918
</div>
20-
</StoryWright>
19+
</div>
2120
),
2221
],
22+
parameters: {
23+
storyWright: { steps: new Steps().click('#show-overflow').snapshot('popoverContentOpen').end() },
24+
} satisfies StoryParameters,
2325
} satisfies Meta<typeof AvatarGroup>;
2426

2527
export const OverflowContent = () => {

‎apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import * as React from 'react';
22
import { Breadcrumb } from '@fluentui/react-breadcrumb';
33
import { SampleBreadcrumbButtons, steps } from './utils';
44
import type { Meta } from '@storybook/react';
5-
import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
5+
import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
6+
import type { StoryParameters } from 'storywright';
67

78
export default {
89
title: 'Breadcrumb Converged',
9-
decorators: [story => withStoryWrightSteps({ story, steps })],
10+
parameters: { storyWright: { steps } } satisfies StoryParameters,
1011
} satisfies Meta<typeof Breadcrumb>;
1112

1213
export const Appearance = () => (

‎apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import type { Meta } from '@storybook/react';
3-
import { Steps, StoryWright } from 'storywright';
3+
import { Steps } from 'storywright';
4+
import type { StoryParameters } from 'storywright';
45
import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat';
56
import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons';
67
import type { CalendarProps } from '@fluentui/react-calendar-compat';
@@ -15,12 +16,10 @@ const Calendar = (props: CalendarProps) => {
1516
export default {
1617
title: 'Calendar Compat',
1718
component: CalendarBase,
18-
decorators: [
19-
TestWrapperDecorator,
20-
story => (
21-
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
22-
),
23-
],
19+
decorators: [TestWrapperDecorator],
20+
parameters: {
21+
storyWright: { steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() },
22+
} satisfies StoryParameters,
2423
} satisfies Meta<typeof CalendarBase>;
2524

2625
export const Default = () => <Calendar />;

‎apps/vr-tests-react-components/src/stories/CalendarCompat/CalendarCompat.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import * as React from 'react';
22
import type { Meta } from '@storybook/react';
33
import { Calendar } from '@fluentui/react-calendar-compat';
44
import { SampleCalendarCompatMultiDayView } from './utils';
5-
import { Steps } from 'storywright';
5+
import { Steps, type StoryParameters } from 'storywright';
66

7-
import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
7+
import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
88

99
export default {
1010
title: 'CalendarCompat',
11-
decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
11+
parameters: { storyWright: { steps: new Steps().snapshot('default').end() } } satisfies StoryParameters,
1212
} satisfies Meta<typeof Calendar>;
1313

1414
export const CalendarCompatMultiDayView = () => <SampleCalendarCompatMultiDayView daysToSelectInDayView={5} />;

‎apps/vr-tests-react-components/src/stories/Card/CardDisabled.stories.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { Steps, StoryWright } from 'storywright';
2+
import { Steps } from 'storywright';
3+
import type { StoryParameters } from 'storywright';
34
import { Card } from '@fluentui/react-card';
45
import { SampleCardContent } from './utils';
56
import type { Meta } from '@storybook/react';
@@ -10,19 +11,20 @@ export default {
1011

1112
decorators: [
1213
story => (
13-
<StoryWright
14-
steps={new Steps()
15-
.snapshot('normal', { cropTo: '.testWrapper' })
16-
.hover('[role="group"]')
17-
.snapshot('hover', { cropTo: '.testWrapper' })
18-
.end()}
19-
>
20-
<div className="testWrapper" style={{ width: '300px' }}>
21-
{story()}
22-
</div>
23-
</StoryWright>
14+
<div className="testWrapper" style={{ width: '300px' }}>
15+
{story()}
16+
</div>
2417
),
2518
],
19+
parameters: {
20+
storyWright: {
21+
steps: new Steps()
22+
.snapshot('normal', { cropTo: '.testWrapper' })
23+
.hover('[role="group"]')
24+
.snapshot('hover', { cropTo: '.testWrapper' })
25+
.end(),
26+
},
27+
} satisfies StoryParameters,
2628
} satisfies Meta<typeof Card>;
2729

2830
export const AppearanceDisabledFilled = () => (

‎apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { Steps, StoryWright } from 'storywright';
2+
import { Steps } from 'storywright';
3+
import type { StoryParameters } from 'storywright';
34
import { Card } from '@fluentui/react-card';
45
import { action } from '@storybook/addon-actions';
56
import { SampleCardContent } from './utils';
@@ -11,21 +12,22 @@ export default {
1112

1213
decorators: [
1314
story => (
14-
<StoryWright
15-
steps={new Steps()
16-
.snapshot('normal', { cropTo: '.testWrapper' })
17-
.hover('[role="group"]')
18-
.snapshot('hover', { cropTo: '.testWrapper' })
19-
.mouseDown('[role="group"]')
20-
.snapshot('click', { cropTo: '.testWrapper' })
21-
.end()}
22-
>
23-
<div className="testWrapper" style={{ width: '300px' }}>
24-
{story()}
25-
</div>
26-
</StoryWright>
15+
<div className="testWrapper" style={{ width: '300px' }}>
16+
{story()}
17+
</div>
2718
),
2819
],
20+
parameters: {
21+
storyWright: {
22+
steps: new Steps()
23+
.snapshot('normal', { cropTo: '.testWrapper' })
24+
.hover('[role="group"]')
25+
.snapshot('hover', { cropTo: '.testWrapper' })
26+
.mouseDown('[role="group"]')
27+
.snapshot('click', { cropTo: '.testWrapper' })
28+
.end(),
29+
},
30+
} satisfies StoryParameters,
2931
} satisfies Meta<typeof Card>;
3032

3133
export const AppearanceInteractiveFilled = () => (

0 commit comments

Comments
 (0)