From 56faefb7c3a0d62be9c883e1a92c98ee3e7e54f6 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Mon, 17 Oct 2022 13:24:33 -0700
Subject: [PATCH 1/2] chore: Refactor Field VR tests to have individual tests
 per component

---
 .../src/stories/Field.stories.tsx             | 200 +++++++++++-------
 1 file changed, 120 insertions(+), 80 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
index d84d951888ddd..68fd519b41bbc 100644
--- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -6,7 +6,6 @@ import {
   CheckboxField,
   ComboboxField,
   InputField,
-  InputFieldProps,
   ProgressField,
   RadioGroupField,
   SelectField,
@@ -16,85 +15,126 @@ import {
   TextareaField,
 } from '@fluentui/react-field';
 import { SparkleFilled } from '@fluentui/react-icons';
+import { FieldComponent, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field';
 
-const AllFields = (
-  props: Pick<
-    InputFieldProps,
-    'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint'
-  >,
-) => {
-  return (
-    <div style={{ display: 'grid', rowGap: '12px' }}>
-      <CheckboxField label="Checkbox" {...props} />
-      <ComboboxField label="Combo box field" {...props} />
-      <InputField label="Input field" {...props} />
-      <ProgressField label="Progress field" {...props} />
-      <RadioGroupField label="Radio group field" {...props}>
-        <Radio label="Option one" />
-        <Radio label="Option two" />
-        <Radio label="Option three" />
-      </RadioGroupField>
-      <SelectField label="Select field" {...props}>
-        <option>Option</option>
-      </SelectField>
-      <SliderField label="Slider field" {...props} />
-      <SpinButtonField label="Spin button field" {...props} />
-      <SwitchField label="Switch field" {...props} />
-      <TextareaField label="Textarea field" {...props} />
-    </div>
-  );
-};
+type FieldComponentProps = Pick<
+  FieldPropsWithOptionalComponentProps<FieldComponent>,
+  'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint'
+>;
 
-storiesOf('Field Converged', module)
-  .addDecorator(story => (
-    <div style={{ display: 'flex' }}>
-      <div className="testWrapper" style={{ padding: '10px', width: '480px' }}>
-        <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+/**
+ * Common VR tests for all field components. Pass the given Field component (or a wrapper around it).
+ */
+const storiesOfField = (name: string, Field: React.VoidFunctionComponent<FieldComponentProps>) =>
+  storiesOf(name, module)
+    .addDecorator(story => <Screener steps={new Steps().snapshot('default').end()}>{story()}</Screener>)
+    .addDecorator(story => (
+      <div style={{ display: 'flex' }}>
+        <div className="testWrapper" style={{ padding: '10px', width: '480px' }}>
+          <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+        </div>
       </div>
-    </div>
-  ))
-  .addStory('base', () => <AllFields />)
-  .addStory('required', () => <AllFields required />)
-  .addStory('validation:error', () => <AllFields validationState="error" validationMessage="Error message" />)
-  .addStory('validation:warning', () => <AllFields validationState="warning" validationMessage="Warning message" />)
-  .addStory('validation:success', () => <AllFields validationState="success" validationMessage="Success message" />)
-  .addStory('validation:custom', () => (
-    <AllFields validationMessageIcon={<SparkleFilled />} validationMessage="Custom message" />
-  ))
-  .addStory('hint', () => <AllFields hint="Hint message" />)
-  .addStory('horizontal', () => <AllFields orientation="horizontal" />)
-  .addStory('horizontal+label:multiline', () => (
-    <AllFields
-      orientation="horizontal"
-      label="This is a very long label that should wrap around to be multiple lines in height"
-    />
-  ))
-  .addStory('horizontal+validation:error+hint', () => (
-    <AllFields orientation="horizontal" validationState="error" validationMessage="Error message" hint="Hint text" />
-  ))
-  .addStory('size:small', () => (
-    <div style={{ display: 'grid', rowGap: '12px' }}>
-      <ComboboxField label="Combo box field" size="small" />
-      <InputField label="Input field" size="small" />
-      <SelectField label="Select field" size="small">
-        <option>Option</option>
-      </SelectField>
-      <SliderField label="Slider field" size="small" />
-      <SpinButtonField label="Spin button field" size="small" />
-      <TextareaField label="Textarea field" size="small" />
-    </div>
-  ))
-  .addStory('size:large', () => (
-    <div style={{ display: 'grid', rowGap: '12px' }}>
-      <CheckboxField label="Checkbox" size="large" />
-      <ComboboxField label="Combo box field" size="large" />
-      <InputField label="Input field" size="large" />
-      <SelectField label="Select field" size="large">
-        <option>Option</option>
-      </SelectField>
-      <TextareaField label="Textarea field" size="large" />
-    </div>
-  ))
-  .addStory('CheckboxField+fieldLabel', () => (
-    <CheckboxField label="Label for the checkbox" fieldLabel="Field label" required />
-  ));
+    ))
+    .addStory('base', () => <Field label="Example field" />)
+    .addStory('required', () => <Field label="Example field" required />)
+    .addStory('validation', () => (
+      <div style={{ display: 'grid', rowGap: '10px' }}>
+        <Field label="Validation error" validationState="error" validationMessage="Error message" />
+        <Field label="Validation warning" validationState="warning" validationMessage="Warning message" />
+        <Field label="Validation success" validationState="success" validationMessage="Success message" />
+        <Field
+          label="Custom validation state"
+          validationMessageIcon={<SparkleFilled />}
+          validationMessage="Custom message"
+        />
+      </div>
+    ))
+    .addStory('hint', () => <Field label="Example field" hint="Hint message" />)
+    .addStory('horizontal', () => (
+      <Field
+        label="This is a very long label that should wrap around to be multiple lines in height"
+        orientation="horizontal"
+        validationState="error"
+        validationMessage="Error message"
+        hint="Hint text"
+      />
+    ));
+
+/**
+ * Same as storiesOfField, but with extra stories for Field components that support the size prop.
+ */
+const storiesOfFieldWithSize = (
+  name: string,
+  Field: React.VoidFunctionComponent<FieldComponentProps & { size?: 'small' | 'medium' | 'large' }>,
+) =>
+  storiesOfField(name, Field)
+    .addStory('size:small', () => <Field label="Example field" size="small" />)
+    .addStory('size:large', () => <Field label="Example field" size="large" />);
+
+//
+// CheckboxField
+//
+storiesOfField('CheckboxField converged', CheckboxField)
+  .addStory('size:large', () => <CheckboxField label="Example field" size="large" />)
+  .addStory('fieldLabel', () => <CheckboxField label="Label for the checkbox" fieldLabel="Field label" required />);
+
+//
+// ComboboxField
+//
+storiesOfFieldWithSize('ComboboxField converged', ComboboxField);
+
+//
+// InputField
+//
+storiesOfFieldWithSize('InputField converged', InputField);
+
+//
+// ProgressField
+//
+storiesOfField('ProgressField converged', props =>
+  props.validationState === 'warning' ? null : (
+    <ProgressField value={0.5} {...props} validationState={props.validationState} />
+  ),
+);
+
+//
+// RadioGroupField
+//
+storiesOfField('RadioGroupField converged', props => (
+  <RadioGroupField {...props}>
+    <Radio label="Option one" />
+    <Radio label="Option two" />
+    <Radio label="Option three" />
+  </RadioGroupField>
+));
+
+//
+// SelectField
+//
+storiesOfFieldWithSize('SelectField converged', props => (
+  <SelectField {...props}>
+    <option>Option one</option>
+    <option>Option two</option>
+    <option>Option three</option>
+  </SelectField>
+));
+
+//
+// SliderField
+//
+storiesOfField('SliderField converged', SliderField);
+
+//
+// SpinButtonField
+//
+storiesOfField('SpinButtonField converged', SpinButtonField);
+
+//
+// SwitchField
+//
+storiesOfField('SwitchField converged', SwitchField);
+
+//
+// TextareaField
+//
+storiesOfFieldWithSize('TextareaField converged', TextareaField);

From 9fd9db1f190230f5f01df7394098bb87ff370fc7 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Fri, 21 Oct 2022 16:19:48 -0700
Subject: [PATCH 2/2] Restore progress warning test

---
 .../src/stories/Field.stories.tsx                         | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
index 68fd519b41bbc..663edb6328523 100644
--- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -91,11 +91,7 @@ storiesOfFieldWithSize('InputField converged', InputField);
 //
 // ProgressField
 //
-storiesOfField('ProgressField converged', props =>
-  props.validationState === 'warning' ? null : (
-    <ProgressField value={0.5} {...props} validationState={props.validationState} />
-  ),
-);
+storiesOfField('ProgressField converged', props => <ProgressField value={0.5} {...props} />);
 
 //
 // RadioGroupField
@@ -114,8 +110,6 @@ storiesOfField('RadioGroupField converged', props => (
 storiesOfFieldWithSize('SelectField converged', props => (
   <SelectField {...props}>
     <option>Option one</option>
-    <option>Option two</option>
-    <option>Option three</option>
   </SelectField>
 ));