Merge pull request #1 from sunilsurana/susurana/storywright

storywright tests
sunilsurana · Oct 7, 2022 · 4928f2d · 4928f2d
2 parents bbb79fa + f45d0c3
commit 4928f2d
Show file tree

Hide file tree

Showing 34 changed files with 42 additions and 5,714 deletions.
diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -4,6 +4,7 @@
  "private": true,
  "description": "Visual regression tests for @fluentui/react-components",
  "scripts": {
+ "test:component": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --concurrency 4 --headless true",
  "build": "build-storybook -o dist/storybook",
  "clean": "just-scripts clean",
  "format": "prettier . -w --ignore-path ../../.prettierignore",
@@ -14,7 +15,8 @@
  "type-check": "tsc"
  },
  "devDependencies": {
- "@fluentui/eslint-plugin": "*"
+ "@fluentui/eslint-plugin": "*",
+ "storywright": "0.0.22"
  },
  "dependencies": {
  "@fluentui/react-accordion": "^9.0.7",

diff --git a/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx
@@ -1,13 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
+import { StoryWright, Steps } from 'storywright';
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
 import { CircleRegular } from '@fluentui/react-icons';
 
 storiesOf('Accordion Converged', module)
  .addDecorator(story => (
- <Screener
- steps={new Screener.Steps()
+ <StoryWright
+ steps={new Steps()
  .snapshot('normal', { cropTo: '.testWrapper' })
  .focus('#opened-btn')
  .snapshot('focus opened', { cropTo: '.testWrapper' })
@@ -18,7 +18,7 @@ storiesOf('Accordion Converged', module)
  <div className="testWrapper" style={{ width: '300px' }}>
  {story()}
  </div>
- </Screener>
+ </StoryWright>
  ))
 
  .addStory(
@@ -40,11 +40,11 @@ storiesOf('Accordion Converged', module)
 
 storiesOf('Accordion Converged', module)
  .addDecorator(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>
  ))
 
  .addStory(

diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx