Skip to content
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

chore (v9 vr-tests): Remove usage of Screener #25980

Merged
merged 5 commits into from
Dec 20, 2022
Merged

chore (v9 vr-tests): Remove usage of Screener #25980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9aa4336
chore: remove Screener related configs and deps
TristanWatanabe Dec 10, 2022
3ecd0ca
chore: replace Screener tags with StoryWright
TristanWatanabe Dec 10, 2022
fd26199
chore: remove screener related things from tsconfig
TristanWatanabe Dec 10, 2022
b6f7685
chore: rename withScreenerSteps to withStoryWright steps
TristanWatanabe Dec 10, 2022
b7f3a08
nit: reorder scripts alphabetically
TristanWatanabe Dec 11, 2022
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
5 changes: 0 additions & 5 deletions apps/vr-tests-react-components/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,3 @@ setAddon({

/** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
export const parameters = { layout: 'none', mode: 'vr-test' };

// For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app
if (typeof window === 'object') {
/** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook;
}
4 changes: 1 addition & 3 deletions apps/vr-tests-react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@
"description": "Visual regression tests for @fluentui/react-components",
"scripts": {
"build": "build-storybook -o dist/storybook",
"test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
"convert": "bash convertStoriesToStoryWright.sh",
"clean": "just-scripts clean",
"format": "prettier . -w --ignore-path ../../.prettierignore",
"lint": "just-scripts lint",
"screener": "just-scripts screener",
"screener:build": "yarn build",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

screener:build will be renamed in a separate PR along with other miscellaneous changes

"start": "start-storybook",
"test": "just-scripts test",
"test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true",
"type-check": "tsc"
},
"devDependencies": {
Expand Down Expand Up @@ -63,7 +62,6 @@
"@griffel/react": "^1.4.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"screener-storybook": "0.23.0",
"tslib": "^2.1.0"
}
}
49 changes: 0 additions & 49 deletions apps/vr-tests-react-components/screener.config.js
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 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,5 @@
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
import { CircleRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
Expand All @@ -10,11 +10,11 @@ export default {

decorators: [
story => (
<Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</Screener>
</StoryWright>
),
],
} as ComponentMeta<typeof Accordion>;
Expand Down
8 changes: 4 additions & 4 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,5 +1,5 @@
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
Expand All @@ -9,8 +9,8 @@ export default {

decorators: [
story => (
<Screener
steps={new Screener.Steps()
<StoryWright
steps={new Steps()
.snapshot('normal', { cropTo: '.testWrapper' })
.focus('#opened-btn')
.snapshot('focus opened', { cropTo: '.testWrapper' })
Expand All @@ -21,7 +21,7 @@ export default {
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</Screener>
</StoryWright>
),
],
} as ComponentMeta<typeof Accordion>;
Expand Down
6 changes: 3 additions & 3 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,6 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import { Avatar, AvatarProps } from '@fluentui/react-avatar';
import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons';

Expand Down Expand Up @@ -42,7 +42,7 @@ const nameAndImage = [
/** Arrays of example values for each Avatar prop */
const examples = {
size: [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128],
nameAndImage: nameAndImage,
nameAndImage,
name: nameAndImage.map(p => p.name),
image: nameAndImage.map(p => p.image),
badge: [
Expand Down Expand Up @@ -193,7 +193,7 @@ storiesOf('Avatar Converged', module)
</div>
))
.addDecorator(story => (
<Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
))
.addStory(
'basic',
Expand Down
8 changes: 4 additions & 4 deletions apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import {
AvatarGroup,
AvatarGroupItem,
Expand Down Expand Up @@ -74,7 +74,7 @@ const AvatarGroupList: React.FC<
storiesOf('AvatarGroup Converged', module)
.addDecorator(TestWrapperDecorator)
.addDecorator(story => (
<Screener steps={new Screener.Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
))
.addStory('basic', () => <AvatarGroupList />, {
includeHighContrast: true,
Expand Down Expand Up @@ -136,9 +136,9 @@ storiesOf('AvatarGroup Converged', module)
storiesOf('AvatarGroup Converged', module)
.addDecorator(TestWrapperDecorator)
.addDecorator(story => (
<Screener steps={new Screener.Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
<StoryWright steps={new Steps().click('#show-overflow').snapshot('popoverContentOpen').end()}>
{story()}
</Screener>
</StoryWright>
))
.addStory(
'overflowContent',
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import * as React from 'react';
import { Button } from '@fluentui/react-button';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
import { buttonId, steps, useStyles } from './utils';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

export default {
title: 'Button Converged',
Component: Button,
decorators: [story => withScreenerSteps({ story, steps })],
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof Button>;

export const Default = () => <Button id={buttonId}>Hello, world</Button>;
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import * as React from 'react';
import { CompoundButton } from '@fluentui/react-button';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
import { buttonId, steps, useStyles } from './utils';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

export default {
title: 'CompoundButton Converged',
component: CompoundButton,
decorators: [story => withScreenerSteps({ story, steps })],
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof CompoundButton>;

export const Outline = () => (
Expand Down
8 changes: 4 additions & 4 deletions apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps } from 'storywright';
import { CompoundButton } from '@fluentui/react-button';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
import { buttonId } from './utils';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

const steps = new Screener.Steps()
const steps = new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
// https://github.com/microsoft/fluentui/issues/21998
// .hover('#button-id')
Expand All @@ -20,7 +20,7 @@ const steps = new Screener.Steps()
export default {
title: 'CompoundButton Converged',
component: CompoundButton,
decorators: [story => withScreenerSteps({ story, steps })],
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof CompoundButton>;

export const Default = () => (
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import * as React from 'react';
import { MenuButton } from '@fluentui/react-button';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
import { buttonId, steps, useStyles } from './utils';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

export default {
title: 'MenuButton Converged',
component: MenuButton,
decorators: [story => withScreenerSteps({ story, steps })],
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof MenuButton>;

export const Default = () => <MenuButton id={buttonId}>Hello, world</MenuButton>;
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import * as React from 'react';
import { ToggleButton } from '@fluentui/react-button';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
import { buttonId, steps, useStyles } from './utils';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

export default {
title: 'ToggleButton Converged',
component: ToggleButton,
decorators: [story => withScreenerSteps({ story, steps })],
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof ToggleButton>;

export const Default = () => <ToggleButton id={buttonId}>Hello, world</ToggleButton>;
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/src/stories/Button/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Screener from 'screener-storybook/src/screener';
import { Steps } from 'storywright';
import { makeStyles } from '@griffel/react';

export const buttonId = 'button-id';
Expand All @@ -9,7 +9,7 @@ export const useStyles = makeStyles({
},
});

export const steps = new Screener.Steps()
export const steps = new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('#button-id')
.snapshot('hover', { cropTo: '.testWrapper' })
Expand Down
6 changes: 3 additions & 3 deletions apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
import { MoreHorizontal24Filled } from '@fluentui/react-icons';
import { Body1, Caption1 } from '@fluentui/react-text';
Expand All @@ -13,11 +13,11 @@ export default {

decorators: [
story => (
<Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
<div className="testWrapper" style={{ width: '600px' }}>
{story()}
</div>
</Screener>
</StoryWright>
),
],
} as ComponentMeta<typeof Card>;
Expand Down
8 changes: 4 additions & 4 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,5 @@
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import { Card } from '@fluentui/react-card';
import { action } from '@storybook/addon-actions';
import { SampleCardContent } from './utils';
Expand All @@ -11,8 +11,8 @@ export default {

decorators: [
story => (
<Screener
steps={new Screener.Steps()
<StoryWright
steps={new Steps()
.snapshot('normal', { cropTo: '.testWrapper' })
.hover('[role="group"]')
.snapshot('hover', { cropTo: '.testWrapper' })
Expand All @@ -23,7 +23,7 @@ export default {
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</Screener>
</StoryWright>
),
],
} as ComponentMeta<typeof Card>;
Expand Down
8 changes: 4 additions & 4 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,5 @@
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Steps, StoryWright } from 'storywright';
import { Card } from '@fluentui/react-card';
import { SampleCardContent } from './utils';
import { ComponentMeta } from '@storybook/react';
Expand All @@ -10,8 +10,8 @@ export default {

decorators: [
story => (
<Screener
steps={new Screener.Steps()
<StoryWright
steps={new Steps()
.snapshot('normal', { cropTo: '.testWrapper' })
.hover('[role="group"]')
.snapshot('hover', { cropTo: '.testWrapper' })
Expand All @@ -24,7 +24,7 @@ export default {
<div className="testWrapper" style={{ width: '300px' }}>
{story()}
</div>
</Screener>
</StoryWright>
),
],
} as ComponentMeta<typeof Card>;
Expand Down
Loading