From a4741ee664d779dfeb2ea663149d91262a5e69f1 Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <kirpadv@gmail.com>
Date: Thu, 4 Jul 2024 11:49:03 +0200
Subject: [PATCH] chore(vr-tests-v9): Convert Combobox VR tests to CSF

---
 .../src/stories/Combobox.stories.tsx          | 200 ------------------
 .../src/stories/Combobox/Combobox.stories.tsx | 147 +++++++++++++
 .../ComboboxOptionInteractions.stories.tsx    | 134 ++++++++++++
 3 files changed, 281 insertions(+), 200 deletions(-)
 delete mode 100644 apps/vr-tests-react-components/src/stories/Combobox.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx

diff --git a/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx
deleted file mode 100644
index be6014897e6af..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Combobox Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .focus('input')
-        .wait(250) // let focus border animation finish
-        .snapshot('focused', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Appearance: outline (default)', () => (
-    <Combobox>
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Appearance: underline', () => (
-    <Combobox appearance="underline">
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Appearance: filled-darker', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Combobox appearance="filled-darker">
-        <Option>text</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('Appearance: filled-lighter', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Combobox appearance="filled-lighter">
-        <Option>text</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('Disabled', () => (
-    <Combobox disabled>
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Disabled with value', () => (
-    <Combobox disabled value="text">
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Invalid: outline', () => (
-    <Combobox aria-invalid>
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Invalid: underline', () => (
-    <Combobox aria-invalid appearance="underline">
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Invalid: filled-darker', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Combobox aria-invalid appearance="filled-darker">
-        <Option>text</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('Invalid: filled-lighter', () => (
-    <div style={{ background: '#00335c', padding: '10px' }}>
-      <Combobox aria-invalid appearance="filled-lighter">
-        <Option>text</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('With placeholder', () => (
-    <Combobox placeholder="Color">
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('With value', () => (
-    <Combobox value="Text text">
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Size: small', () => (
-    <Combobox size="small">
-      <Option>text</Option>
-    </Combobox>
-  ))
-  .addStory('Size: large', () => (
-    <Combobox size="large">
-      <Option>text</Option>
-    </Combobox>
-  ));
-
-// Option interaction stories
-storiesOf('Combobox Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('default', { cropTo: '.testWrapper' })
-        .hover('[role=option]')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .keys('input', 'ArrowDown')
-        .snapshot('active option', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('Open', () => (
-    <div style={{ paddingBottom: '120px' }}>
-      <Combobox open>
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('Open with inlinePopup', () => (
-    <div style={{ paddingBottom: '120px' }}>
-      <Combobox open inlinePopup>
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('When rendering inline, it should render on top of relatively positioned elements', () => (
-    <div style={{ paddingBottom: '120px' }}>
-      <Combobox open inlinePopup>
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Combobox>
-      <button style={{ position: 'relative' }}>sample button</button>
-    </div>
-  ))
-  .addStory('Option with long content', () => (
-    <div style={{ paddingBottom: '240px' }}>
-      <Combobox open>
-        <Option>
-          Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
-          periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
-        </Option>
-        <Option>Red</Option>
-        <Option>Green</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('With selection', () => (
-    <div style={{ paddingBottom: '120px' }}>
-      <Combobox selectedOptions={['Red']} open>
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('With multiselect selection', () => (
-    <div style={{ paddingBottom: '120px' }}>
-      <Combobox multiselect selectedOptions={['Green', 'Red']} open>
-        <Option>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('Disabled option', () => (
-    <div style={{ paddingBottom: '120px' }}>
-      <Combobox open>
-        <Option disabled>Red</Option>
-        <Option>Green</Option>
-        <Option>Blue</Option>
-      </Combobox>
-    </div>
-  ))
-  .addStory('Open with grouped options', () => (
-    <div style={{ paddingBottom: '300px' }}>
-      <Combobox open>
-        <OptionGroup label="Colors">
-          <Option>Red</Option>
-          <Option>Green</Option>
-          <Option>Blue</Option>
-        </OptionGroup>
-        <OptionGroup label="Shapes">
-          <Option>Circle</Option>
-          <Option>Square</Option>
-          <Option>Oval</Option>
-        </OptionGroup>
-      </Combobox>
-    </div>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
new file mode 100644
index 0000000000000..fc2e9e8c19314
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Combobox, Option } from '@fluentui/react-combobox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Combobox Converged',
+  component: Combobox,
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .focus('input')
+          .wait(250) // let focus border animation finish
+          .snapshot('focused', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Combobox>;
+
+type Story = StoryFn<typeof Combobox>;
+
+export const AppearanceOutlineDefault: Story = () => (
+  <Combobox>
+    <Option>text</Option>
+  </Combobox>
+);
+
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceUnderline: Story = () => (
+  <Combobox appearance="underline">
+    <Option>text</Option>
+  </Combobox>
+);
+
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceFilledDarker: Story = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Combobox appearance="filled-darker">
+      <Option>text</Option>
+    </Combobox>
+  </div>
+);
+
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter: Story = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Combobox appearance="filled-lighter">
+      <Option>text</Option>
+    </Combobox>
+  </div>
+);
+
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const Disabled: Story = () => (
+  <Combobox disabled>
+    <Option>text</Option>
+  </Combobox>
+);
+
+export const DisabledWithValue: Story = () => (
+  <Combobox disabled value="text">
+    <Option>text</Option>
+  </Combobox>
+);
+
+DisabledWithValue.storyName = 'Disabled with value';
+
+export const InvalidOutline: Story = () => (
+  <Combobox aria-invalid>
+    <Option>text</Option>
+  </Combobox>
+);
+
+InvalidOutline.storyName = 'Invalid: outline';
+
+export const InvalidUnderline: Story = () => (
+  <Combobox aria-invalid appearance="underline">
+    <Option>text</Option>
+  </Combobox>
+);
+
+InvalidUnderline.storyName = 'Invalid: underline';
+
+export const InvalidFilledDarker: Story = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Combobox aria-invalid appearance="filled-darker">
+      <Option>text</Option>
+    </Combobox>
+  </div>
+);
+
+InvalidFilledDarker.storyName = 'Invalid: filled-darker';
+
+export const InvalidFilledLighter: Story = () => (
+  <div style={{ background: '#00335c', padding: '10px' }}>
+    <Combobox aria-invalid appearance="filled-lighter">
+      <Option>text</Option>
+    </Combobox>
+  </div>
+);
+
+InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
+
+export const WithPlaceholder: Story = () => (
+  <Combobox placeholder="Color">
+    <Option>text</Option>
+  </Combobox>
+);
+
+WithPlaceholder.storyName = 'With placeholder';
+
+export const WithValue: Story = () => (
+  <Combobox value="Text text">
+    <Option>text</Option>
+  </Combobox>
+);
+
+WithValue.storyName = 'With value';
+
+export const SizeSmall: Story = () => (
+  <Combobox size="small">
+    <Option>text</Option>
+  </Combobox>
+);
+
+SizeSmall.storyName = 'Size: small';
+
+export const SizeLarge: Story = () => (
+  <Combobox size="large">
+    <Option>text</Option>
+  </Combobox>
+);
+
+SizeLarge.storyName = 'Size: large';
diff --git a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx
new file mode 100644
index 0000000000000..9bd7f05de3e60
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Combobox Converged',
+  component: Combobox,
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('default', { cropTo: '.testWrapper' })
+          .hover('[role=option]')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .keys('input', 'ArrowDown')
+          .snapshot('active option', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Combobox>;
+
+type Story = StoryFn<typeof Combobox>;
+
+export const Open: Story = () => (
+  <div style={{ paddingBottom: '120px' }}>
+    <Combobox open>
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Combobox>
+  </div>
+);
+
+export const OpenWithInlinePopup: Story = () => (
+  <div style={{ paddingBottom: '120px' }}>
+    <Combobox open inlinePopup>
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Combobox>
+  </div>
+);
+
+OpenWithInlinePopup.storyName = 'Open with inlinePopup';
+
+export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements: Story = () => (
+  <div style={{ paddingBottom: '120px' }}>
+    <Combobox open inlinePopup>
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Combobox>
+    <button style={{ position: 'relative' }}>sample button</button>
+  </div>
+);
+
+WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements.storyName =
+  'When rendering inline, it should render on top of relatively positioned elements';
+
+export const OptionWithLongContent: Story = () => (
+  <div style={{ paddingBottom: '240px' }}>
+    <Combobox open>
+      <Option>
+        Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
+        periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
+      </Option>
+      <Option>Red</Option>
+      <Option>Green</Option>
+    </Combobox>
+  </div>
+);
+
+OptionWithLongContent.storyName = 'Option with long content';
+
+export const WithSelection: Story = () => (
+  <div style={{ paddingBottom: '120px' }}>
+    <Combobox selectedOptions={['Red']} open>
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Combobox>
+  </div>
+);
+
+WithSelection.storyName = 'With selection';
+
+export const WithMultiselectSelection: Story = () => (
+  <div style={{ paddingBottom: '120px' }}>
+    <Combobox multiselect selectedOptions={['Green', 'Red']} open>
+      <Option>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Combobox>
+  </div>
+);
+
+WithMultiselectSelection.storyName = 'With multiselect selection';
+
+export const DisabledOption: Story = () => (
+  <div style={{ paddingBottom: '120px' }}>
+    <Combobox open>
+      <Option disabled>Red</Option>
+      <Option>Green</Option>
+      <Option>Blue</Option>
+    </Combobox>
+  </div>
+);
+
+DisabledOption.storyName = 'Disabled option';
+
+export const OpenWithGroupedOptions: Story = () => (
+  <div style={{ paddingBottom: '300px' }}>
+    <Combobox open>
+      <OptionGroup label="Colors">
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </OptionGroup>
+      <OptionGroup label="Shapes">
+        <Option>Circle</Option>
+        <Option>Square</Option>
+        <Option>Oval</Option>
+      </OptionGroup>
+    </Combobox>
+  </div>
+);
+
+OpenWithGroupedOptions.storyName = 'Open with grouped options';