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

Hotell · Feb 9, 2023 · 67eff36 · 67eff36
1 parent cb33d29
commit 67eff36
Show file tree

Hide file tree

Showing 43 changed files with 156 additions and 226 deletions.
diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js
@@ -67,8 +67,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;
-}
diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -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",
     "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": {
@@ -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"
   }
 }
diff --git a/apps/vr-tests-react-components/screener.config.js b/apps/vr-tests-react-components/screener.config.js
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
@@ -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';
@@ -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>;

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
@@ -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';
@@ -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' })
@@ -21,7 +21,7 @@ export default {
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Accordion>;

diff --git 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,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';
 
@@ -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: [
@@ -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',

diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
@@ -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,
@@ -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,
@@ -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',

diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx
@@ -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>;

diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx
@@ -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 = () => (

diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx
@@ -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')
@@ -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 = () => (

diff --git a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx
@@ -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>;

diff --git a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx
@@ -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>;

diff --git a/apps/vr-tests-react-components/src/stories/Button/utils.ts b/apps/vr-tests-react-components/src/stories/Button/utils.ts
@@ -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';
@@ -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' })

diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -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';
@@ -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>;

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
@@ -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';
@@ -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' })
@@ -23,7 +23,7 @@ export default {
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Card>;

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
@@ -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';
@@ -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' })
@@ -24,7 +24,7 @@ export default {
         <div className="testWrapper" style={{ width: '300px' }}>
           {story()}
         </div>
-      </Screener>
+      </StoryWright>
     ),
   ],
 } as ComponentMeta<typeof Card>;