fix: make StoryWright steps work in storybook 7

apps/vr-tests-react-components/.storybook/main.js

@@ -53,4 +53,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
       },
     };
   },
+  // 💡 NOTE: this is necessary for StoryWright. without this the current version "0.0.27-storybook7.9" wont take screenshots for Steps
+  features: {
+    storyStoreV7: false,
+  },
 });

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

@@ -11,13 +11,13 @@ import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@flue
 const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
 
 export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('.breadcrumb-sample')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown('.breadcrumb-sample')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .focus('.breadcrumb-sample')
-  .snapshot('focused', { cropTo: '.testWrapper' })
+  .snapshot('focused')
   .end();
 
 export const SampleBreadcrumbButtons = (props: BreadcrumbProps) => (

apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx

@@ -9,12 +9,12 @@ import { buttonId } from './utils';
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   // https://github.com/microsoft/fluentui/issues/21998
   // .hover('#button-id')
   // .snapshot('hover', { cropTo: '.testWrapper' })
   .mouseDown('#button-id')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .end();
 
 export default {

apps/vr-tests-react-components/src/stories/Button/utils.ts

@@ -10,9 +10,9 @@ export const useStyles = makeStyles({
 });
 
 export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('#button-id')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown('#button-id')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .end();

apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx

@@ -8,9 +8,7 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps }
 
 export default {
   title: 'ColorPicker Converged',
-  decorators: [
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
 } satisfies Meta<typeof ColorPicker>;
 
 export const Default = () => <SampleColorPicker color={{ h: 109, s: 1, v: 0.91 }} />;

apps/vr-tests-react-components/src/stories/Image/Image.stories.tsx

@@ -9,9 +9,7 @@ export default {
   title: 'Image Converged',
 
   decorators: [
-    (story: () => React.ReactNode) => (
-      <StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-    ),
+    (story: () => React.ReactNode) => <StoryWright steps={new Steps().snapshot('normal').end()}>{story()}</StoryWright>,
   ],
 } satisfies Meta<typeof Image>;
 

apps/vr-tests-react-components/src/stories/Label.stories.tsx

@@ -7,9 +7,7 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps }
 export default {
   title: 'Label Converged',
 
-  decorators: [
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
 } satisfies Meta<typeof Label>;
 
 export const Root = () => <Label>I'm a label</Label>;

apps/vr-tests-react-components/src/stories/Link/utils.tsx

@@ -21,25 +21,25 @@ export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ ch
 };
 
 export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('.fui-Link')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   // This needs to be added so that the focus outline is shown correctly
   .executeScript("document.getElementsByClassName('fui-Link')[0].setAttribute('data-fui-focus-visible', '')")
   .focus('.fui-Link')
-  .snapshot('focused', { cropTo: '.testWrapper' })
+  .snapshot('focused')
   .executeScript("document.getElementsByClassName('fui-Link')[0].removeAttribute('data-fui-focus-visible')")
   .mouseDown('.fui-Link')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .mouseUp('.fui-Link')
   .end();
 
 // Disabled stories use steps without focus so they do not error out on the focused step.
 export const disabledUnfocusableSteps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover('.fui-Link')
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown('.fui-Link')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .mouseUp('.fui-Link')
   .end();

apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx

@@ -124,15 +124,17 @@ export const Auto = () => {
 
 export const Square = () => {
   return (
-    <MessageBar shape="square">
-      <MessageBarBody>
-        <MessageBarTitle>Title</MessageBarTitle>
-        Message providing information to the user with actionable insights. <Link>Link</Link>
-      </MessageBarBody>
-      <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
-        <Button>Action</Button>
-        <Button>Action</Button>
-      </MessageBarActions>
-    </MessageBar>
+    <div className="testWrapper">
+      <MessageBar shape="square">
+        <MessageBarBody>
+          <MessageBarTitle>Title</MessageBarTitle>
+          Message providing information to the user with actionable insights. <Link>Link</Link>
+        </MessageBarBody>
+        <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
+          <Button>Action</Button>
+          <Button>Action</Button>
+        </MessageBarActions>
+      </MessageBar>
+    </div>
   );
 };

apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMDefault.stories.tsx

@@ -41,7 +41,7 @@ export default {
 };
 
 export const Default = () => (
-  <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>
+  <StoryWright steps={new Steps().snapshot('default').end()}>
     <ShadowRoot>
       <ComponentSet />
     </ShadowRoot>

apps/vr-tests-react-components/src/stories/ShadowDOM/ShadowDOMPortal.stories.tsx

@@ -10,7 +10,7 @@ export default {
 };
 
 export const Portal: React.FC = () => (
-  <StoryWright steps={new Steps().click('#toggle-menu').snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+  <StoryWright steps={new Steps().click('#toggle-menu').snapshot('normal').end()}>
     <ShadowRoot>
       <Menu>
         <MenuTrigger disableButtonEnhancement>

apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx

@@ -8,9 +8,7 @@ import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps }
 
 export default {
   title: 'SwatchPicker Converged',
-  decorators: [
-    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
-  ],
+  decorators: [story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default').end() })],
 } satisfies Meta<typeof SwatchPicker>;
 
 export const Default = () => (

apps/vr-tests-react-components/src/stories/Tabs.stories.tsx

@@ -13,11 +13,11 @@ export default {
       withStoryWrightSteps({
         story,
         steps: new Steps()
-          .snapshot('default', { cropTo: '.testWrapper' })
+          .snapshot('default')
           .hover('.mouse-target')
-          .snapshot('hover', { cropTo: '.testWrapper' })
+          .snapshot('hover')
           .mouseDown('.mouse-target')
-          .snapshot('pressed', { cropTo: '.testWrapper' })
+          .snapshot('pressed')
           .mouseUp('.mouse-target')
           .end(),
       }),

apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from '@griffel/react';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+const steps = new Steps().snapshot('default').end();
 
 export default {
   title: 'InteractionTag Converged',

apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx

@@ -10,16 +10,16 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 const contentId = 'content-id';
 const dismissButtonId = 'dismiss-button-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover(`#${contentId}`)
-  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .snapshot('hover content')
   .mouseDown(`#${contentId}`)
-  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .snapshot('pressed content')
   .mouseUp(`#${contentId}`)
   .hover(`#${dismissButtonId}`)
-  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .snapshot('hover dismiss')
   .mouseDown(`#${dismissButtonId}`)
-  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .snapshot('pressed dismiss')
   .mouseUp(`#${dismissButtonId}`)
   .end();
 

apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx

@@ -8,18 +8,18 @@ import { Steps } from 'storywright';
 const contentId = 'content-id';
 const dismissButtonId = 'dismiss-button-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
 
   // This needs to be added so that the focus outline is shown correctly
   .executeScript(`document.querySelector('#${contentId}').setAttribute('data-fui-focus-visible', '')`)
   .focus(`#${contentId}`)
-  .snapshot('focus content', { cropTo: '.testWrapper' })
+  .snapshot('focus content')
   .executeScript(`document.querySelector('#${contentId}').removeAttribute('data-fui-focus-visible')`)
 
   // This needs to be added so that the focus outline is shown correctly
   .executeScript(`document.querySelector('#${dismissButtonId}').setAttribute('data-fui-focus-visible', '')`)
   .focus(`#${dismissButtonId}`)
-  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
+  .snapshot('focus dismiss')
   .executeScript(`document.querySelector('#${dismissButtonId}').removeAttribute('data-fui-focus-visible')`)
 
   .end();

apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx

@@ -8,7 +8,7 @@ import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+const steps = new Steps().snapshot('default').end();
 
 export default {
   title: 'Tag Converged',

apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx

@@ -9,11 +9,11 @@ const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const dismissIconId = 'dismiss-icon-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   .hover(`#${dismissIconId}}`)
-  .snapshot('hover', { cropTo: '.testWrapper' })
+  .snapshot('hover')
   .mouseDown(`#${dismissIconId}}`)
-  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .snapshot('pressed')
   .end();
 
 export default {

apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { withStoryWrightSteps } from '../../utilities';
 
-const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+const steps = new Steps().snapshot('default').end();
 
 export default {
   title: 'TagGroup Converged',

apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx

@@ -7,11 +7,11 @@ import { Steps } from 'storywright';
 
 const tagId = 'tag-id';
 const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
+  .snapshot('default')
   // This needs to be added so that the focus outline is shown correctly
   .executeScript(`document.querySelector('#${tagId}').setAttribute('data-fui-focus-visible', '')`)
   .focus(`#${tagId}`)
-  .snapshot('focused', { cropTo: '.testWrapper' })
+  .snapshot('focused')
   .executeScript(`document.querySelector('#${tagId}').removeAttribute('data-fui-focus-visible')`)
   .end();
 

apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx

@@ -18,7 +18,7 @@ export default {
           .snapshot('hover', { cropTo: '.testWrapper' })
           .click('textarea')
           .wait(250) // needed for bottom focus border animation
-          .snapshot('focused', { cropTo: '.textWrapper' })
+          .snapshot('focused', { cropTo: '.testWrapper' })
           .end(),
       }),
   ],

apps/vr-tests-web-components/.storybook/main.cjs

@@ -85,4 +85,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
 
     return config;
   },
+  // 💡 NOTE: this is necessary for StoryWright. without this the current version "0.0.27-storybook7.9" wont take screenshots for Steps
+  features: {
+    storyStoreV7: false,
+  },
 });

apps/vr-tests/.storybook/main.js

@@ -51,4 +51,8 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
       },
     };
   },
+  // 💡 NOTE: this is necessary for StoryWright. without this the current version "0.0.27-storybook7.9" wont take screenshots for Steps
+  features: {
+    storyStoreV7: false,
+  },
 });