test(react-color-picker): added vr tests (#33491)

Co-authored-by: Victor Genaev <[email protected]>

apps/vr-tests-react-components/package.json

@@ -27,6 +27,7 @@
     "@fluentui/react-card": "*",
     "@fluentui/react-charts-preview": "*",
     "@fluentui/react-checkbox": "*",
+    "@fluentui/react-color-picker-preview": "*",
     "@fluentui/react-combobox": "*",
     "@fluentui/react-context-selector": "*",
     "@fluentui/react-datepicker-compat": "*",

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ColorPicker } from '@fluentui/react-color-picker-preview';
+import { SampleColorPicker } from './utils';
+import { Steps } from 'storywright';
+
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'ColorPicker Converged',
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof ColorPicker>;
+
+export const Default = () => <SampleColorPicker color={{ h: 109, s: 1, v: 0.91 }} />;
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Shape = () => (
+  <>
+    <SampleColorPicker color={{ h: 195, s: 0.85, v: 0.93 }} shape="square" />
+    <SampleColorPicker color={{ h: 195, s: 0.85, v: 0.913 }} shape="rounded" />
+  </>
+);
+Shape.storyName = 'shape';

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {
+  ColorPicker,
+  ColorArea,
+  AlphaSlider,
+  ColorSlider,
+  type ColorPickerProps,
+} from '@fluentui/react-color-picker-preview';
+
+export const SampleColorPicker = (props: ColorPickerProps) => (
+  <ColorPicker {...props}>
+    <ColorArea />
+    <ColorSlider />
+    <AlphaSlider />
+  </ColorPicker>
+);