test(react-swatch-picker): fixed VR tests. (#33513)

microsoft · Dec 27, 2024 · fc161e1 · fc161e1
1 parent 4172f93
commit fc161e1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 17 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx
@@ -1,13 +1,16 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { SwatchPicker } from '@fluentui/react-swatch-picker';
-import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid, steps } from './utils';
+import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid } from './utils';
+import { Steps } from 'storywright';
 
 import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
 
 export default {
   title: 'SwatchPicker Converged',
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
 } satisfies Meta<typeof SwatchPicker>;
 
 export const Default = () => (
@@ -20,7 +23,6 @@ export const Default = () => (
     <SampleSwatchPickerGrid />
   </>
 );
-Default.storyName = 'default';
 
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 
@@ -64,7 +66,7 @@ export const Shape = () => (
     <SampleSwatchPickerGrid shape="circular" />
   </>
 );
-Size.storyName = 'shape';
+Shape.storyName = 'shape';
 
 export const Spacing = () => (
   <>
@@ -79,4 +81,4 @@ export const Spacing = () => (
     <SampleSwatchPickerGrid spacing="small" />
   </>
 );
-Size.storyName = 'spacing';
+Spacing.storyName = 'spacing';
diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx
@@ -1,25 +1,14 @@
 import * as React from 'react';
-import { Steps } from 'storywright';
 import {
   SwatchPicker,
   ColorSwatch,
-  SwatchPickerProps,
+  type SwatchPickerProps,
   ImageSwatch,
   EmptySwatch,
   SwatchPickerRow,
 } from '@fluentui/react-swatch-picker';
 import { HeartRegular } from '@fluentui/react-icons';
 
-export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover('.breadcrumb-sample')
-  .snapshot('hover', { cropTo: '.testWrapper' })
-  .mouseDown('.breadcrumb-sample')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
-  .focus('.breadcrumb-sample')
-  .snapshot('focused', { cropTo: '.testWrapper' })
-  .end();
-
 export const SampleSwatchPickerColors = (props: SwatchPickerProps) => (
   <SwatchPicker defaultSelectedValue="00B053" {...props}>
     <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />