From 113c831b1aaf2587e2d0fd83524a70eea4a12572 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Wed, 25 Aug 2021 18:49:21 -0400
Subject: [PATCH 1/3] [OptionList] Modernize tests

---
 .../Checkbox/tests/Checkbox.test.tsx          |  14 +-
 .../components/Option/tests/Option.test.tsx   |  42 +++---
 .../OptionList/tests/OptionList.test.tsx      | 141 ++++++++----------
 3 files changed, 87 insertions(+), 110 deletions(-)

diff --git a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
index c3c60f64176..a7144d4c0b7 100644
--- a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
+++ b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {Key} from '../../../../../types';
@@ -17,9 +15,7 @@ describe('<Checkbox />', () => {
   };
 
   it('sets pass through props for input', () => {
-    const input = mountWithAppProvider(<Checkbox {...defaultProps} />).find(
-      'input',
-    );
+    const input = mountWithApp(<Checkbox {...defaultProps} />).find('input')!;
     const {checked, disabled, id, name, value} = defaultProps;
 
     expect(input.prop('checked')).toBe(checked);
@@ -32,9 +28,11 @@ describe('<Checkbox />', () => {
   it('calls onChange', () => {
     const spy = jest.fn();
 
-    mountWithAppProvider(<Checkbox {...defaultProps} onChange={spy} />)
-      .find('input')
-      .simulate('change');
+    const input = mountWithApp(
+      <Checkbox {...defaultProps} onChange={spy} />,
+    ).find('input');
+
+    input!.trigger('onChange');
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
diff --git a/src/components/OptionList/components/Option/tests/Option.test.tsx b/src/components/OptionList/components/Option/tests/Option.test.tsx
index a4cb5a49d63..fb92c8fafbb 100644
--- a/src/components/OptionList/components/Option/tests/Option.test.tsx
+++ b/src/components/OptionList/components/Option/tests/Option.test.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {Checkbox} from '../../Checkbox';
@@ -18,27 +16,23 @@ describe('<Option />', () => {
   };
 
   it('renders a checkbox if allowMultiple is true', () => {
-    const checkbox = mountWithAppProvider(
-      <Option {...defaultProps} allowMultiple />,
-    ).find(Checkbox);
-    expect(checkbox.exists()).toBe(true);
+    const checkbox = mountWithApp(<Option {...defaultProps} allowMultiple />);
+    expect(checkbox).toContainReactComponent(Checkbox);
   });
 
   it('renders a button if allowMultiple is false or undefined', () => {
-    const button = mountWithAppProvider(<Option {...defaultProps} />).find(
-      'button',
-    );
-    expect(button.exists()).toBe(true);
+    const button = mountWithApp(<Option {...defaultProps} />);
+    expect(button).toContainReactComponent('button');
   });
 
   it('calls onClick with section and index if option is not disabled', () => {
     const spy = jest.fn();
     const {section, index} = defaultProps;
 
-    const button = mountWithAppProvider(
+    const button = mountWithApp(
       <Option {...defaultProps} onClick={spy} />,
-    ).find('button');
-    button.simulate('click');
+    ).find('button')!;
+    button.trigger('onClick');
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(section, index);
@@ -47,10 +41,10 @@ describe('<Option />', () => {
   it('doesn’t call onClick if option is disabled', () => {
     const spy = jest.fn();
 
-    const button = mountWithAppProvider(
+    const button = mountWithApp(
       <Option {...defaultProps} onClick={spy} disabled />,
-    ).find('button');
-    button.simulate('click');
+    ).find('button')!;
+    button.trigger('onClick');
 
     expect(spy).not.toHaveBeenCalled();
   });
@@ -59,10 +53,10 @@ describe('<Option />', () => {
     const spy = jest.fn();
     const {section, index} = defaultProps;
 
-    const input = mountWithAppProvider(
+    const input = mountWithApp(
       <Option {...defaultProps} onClick={spy} allowMultiple />,
-    ).find('input');
-    input.simulate('change');
+    ).find('input')!;
+    input.trigger('onChange');
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(section, index);
@@ -71,19 +65,19 @@ describe('<Option />', () => {
   it('doesn’t call onClick if option is disabled and multiple options are allowed', () => {
     const spy = jest.fn();
 
-    const input = mountWithAppProvider(
+    const input = mountWithApp(
       <Option {...defaultProps} onClick={spy} disabled allowMultiple />,
-    ).find('input');
-    input.simulate('change');
+    ).find('input')!;
+    input.trigger('onChange');
 
     expect(spy).not.toHaveBeenCalled();
   });
 
   it('sets the pass through props for Checkbox if multiple items are allowed', () => {
     const {id, value, select, disabled} = defaultProps;
-    const checkbox = mountWithAppProvider(
+    const checkbox = mountWithApp(
       <Option {...defaultProps} allowMultiple />,
-    ).find(Checkbox);
+    ).find(Checkbox)!;
 
     expect(checkbox.prop('id')).toBe(id);
     expect(checkbox.prop('value')).toBe(value);
diff --git a/src/components/OptionList/tests/OptionList.test.tsx b/src/components/OptionList/tests/OptionList.test.tsx
index 0ab5be33469..8fc41a47743 100644
--- a/src/components/OptionList/tests/OptionList.test.tsx
+++ b/src/components/OptionList/tests/OptionList.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Option} from '../components';
 import {OptionList, OptionListProps, OptionDescriptor} from '../OptionList';
@@ -58,9 +57,9 @@ describe('<OptionList />', () => {
 
   it('renders options and sections', () => {
     const {options, sections} = defaultProps;
-    const optionWrappers = mountWithAppProvider<OptionListProps>(
+    const optionWrappers = mountWithApp(
       <OptionList {...defaultProps} />,
-    ).find(Option);
+    ).findAll(Option);
 
     expect(optionWrappers).toHaveLength(totalOptions(options, sections));
   });
@@ -68,9 +67,9 @@ describe('<OptionList />', () => {
   it('renders sections', () => {
     const {sections} = defaultProps;
     const options: OptionDescriptor[] = [];
-    const optionWrappers = mountWithAppProvider<OptionListProps>(
+    const optionWrappers = mountWithApp(
       <OptionList {...defaultProps} options={options} />,
-    ).find(Option);
+    ).findAll(Option);
 
     expect(optionWrappers).toHaveLength(totalOptions(options, sections));
   });
@@ -78,18 +77,16 @@ describe('<OptionList />', () => {
   it('renders options', () => {
     const {options} = defaultProps;
     const sections: OptionListProps['sections'] = [];
-    const optionWrappers = mountWithAppProvider<OptionListProps>(
+    const optionWrappers = mountWithApp(
       <OptionList {...defaultProps} sections={sections} />,
-    ).find(Option);
+    ).findAll(Option);
 
     expect(optionWrappers).toHaveLength(totalOptions(options, sections));
   });
 
   it('re-renders with new options passed in', () => {
     const {sections} = defaultProps;
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     const newOptions: OptionDescriptor[] = [
       {
@@ -104,16 +101,14 @@ describe('<OptionList />', () => {
     ];
 
     optionList.setProps({options: newOptions});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions(newOptions, sections));
   });
 
   it('re-renders with new sections passed in', () => {
     const {options} = defaultProps;
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     const newSections: OptionListProps['sections'] = [
       {
@@ -132,15 +127,13 @@ describe('<OptionList />', () => {
     ];
 
     optionList.setProps({sections: newSections});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions(options, newSections));
   });
 
   it('re-renders with new options and new sections passed in', () => {
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     const newOptions: OptionDescriptor[] = [
       {
@@ -171,39 +164,33 @@ describe('<OptionList />', () => {
     ];
 
     optionList.setProps({options: newOptions, sections: newSections});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions(newOptions, newSections));
   });
 
   it('re-renders with undefined options', () => {
     const {sections} = defaultProps;
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     optionList.setProps({options: undefined});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions([], sections));
   });
 
   it('re-renders with undefined sections', () => {
     const {options} = defaultProps;
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     optionList.setProps({sections: undefined});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions(options, []));
   });
 
   it('re-renders with undefined options and new sections', () => {
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     const newSections: OptionListProps['sections'] = [
       {
@@ -222,15 +209,13 @@ describe('<OptionList />', () => {
     ];
 
     optionList.setProps({options: undefined, sections: newSections});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions(undefined, newSections));
   });
 
   it('re-renders with new options and undefined sections', () => {
-    const optionList = mountWithAppProvider<OptionListProps>(
-      <OptionList {...defaultProps} />,
-    );
+    const optionList = mountWithApp(<OptionList {...defaultProps} />);
 
     const newOptions: OptionDescriptor[] = [
       {
@@ -245,8 +230,8 @@ describe('<OptionList />', () => {
     ];
 
     optionList.setProps({options: newOptions, sections: undefined});
-    optionList.update();
-    const optionWrappers = optionList.find(Option);
+    optionList.forceUpdate();
+    const optionWrappers = optionList.findAll(Option);
     expect(optionWrappers).toHaveLength(totalOptions(newOptions, undefined));
   });
 
@@ -254,11 +239,11 @@ describe('<OptionList />', () => {
     const spy = jest.fn();
     const {options, sections} = defaultProps;
 
-    const buttonWrappers = mountWithAppProvider<OptionListProps>(
+    const button = mountWithApp(
       <OptionList {...defaultProps} onChange={spy} />,
     ).find('button');
 
-    buttonWrappers.at(0).simulate('click');
+    button!.trigger('onClick');
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith([firstOption(options, sections)]);
@@ -267,9 +252,9 @@ describe('<OptionList />', () => {
   describe('allowMultiple', () => {
     it('renders options and sections', () => {
       const {options, sections} = defaultProps;
-      const optionWrappers = mountWithAppProvider<OptionListProps>(
+      const optionWrappers = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
-      ).find(Option);
+      ).findAll(Option);
 
       expect(optionWrappers).toHaveLength(totalOptions(options, sections));
     });
@@ -277,9 +262,9 @@ describe('<OptionList />', () => {
     it('renders sections', () => {
       const {sections} = defaultProps;
       const options: OptionDescriptor[] = [];
-      const optionWrappers = mountWithAppProvider<OptionListProps>(
+      const optionWrappers = mountWithApp(
         <OptionList {...defaultProps} options={options} allowMultiple />,
-      ).find(Option);
+      ).findAll(Option);
 
       expect(optionWrappers).toHaveLength(totalOptions(options, sections));
     });
@@ -287,16 +272,16 @@ describe('<OptionList />', () => {
     it('renders options', () => {
       const {options} = defaultProps;
       const sections: OptionListProps['sections'] = [];
-      const optionWrappers = mountWithAppProvider<OptionListProps>(
+      const optionWrappers = mountWithApp(
         <OptionList {...defaultProps} sections={sections} allowMultiple />,
-      ).find(Option);
+      ).findAll(Option);
 
       expect(optionWrappers).toHaveLength(totalOptions(options, sections));
     });
 
     it('re-renders with new options passed in', () => {
       const {sections} = defaultProps;
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -313,14 +298,14 @@ describe('<OptionList />', () => {
       ];
 
       optionList.setProps({options: newOptions});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(totalOptions(newOptions, sections));
     });
 
     it('re-renders with new sections passed in', () => {
       const {options} = defaultProps;
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -341,13 +326,13 @@ describe('<OptionList />', () => {
       ];
 
       optionList.setProps({sections: newSections});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(totalOptions(options, newSections));
     });
 
     it('re-renders with new options and new sections passed in', () => {
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -380,8 +365,8 @@ describe('<OptionList />', () => {
       ];
 
       optionList.setProps({options: newOptions, sections: newSections});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(
         totalOptions(newOptions, newSections),
       );
@@ -389,30 +374,30 @@ describe('<OptionList />', () => {
 
     it('re-renders with undefined options', () => {
       const {sections} = defaultProps;
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
       optionList.setProps({options: undefined});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(totalOptions(undefined, sections));
     });
 
     it('re-renders with undefined sections', () => {
       const {options} = defaultProps;
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
       optionList.setProps({sections: undefined});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(totalOptions(options, undefined));
     });
 
     it('re-renders with undefined options and new sections', () => {
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -433,13 +418,13 @@ describe('<OptionList />', () => {
       ];
 
       optionList.setProps({options: undefined, sections: newSections});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(totalOptions(undefined, newSections));
     });
 
     it('re-renders with new options and undefined sections', () => {
-      const optionList = mountWithAppProvider<OptionListProps>(
+      const optionList = mountWithApp(
         <OptionList {...defaultProps} allowMultiple />,
       );
 
@@ -456,8 +441,8 @@ describe('<OptionList />', () => {
       ];
 
       optionList.setProps({options: newOptions, sections: undefined});
-      optionList.update();
-      const optionWrappers = optionList.find(Option);
+      optionList.forceUpdate();
+      const optionWrappers = optionList.findAll(Option);
       expect(optionWrappers).toHaveLength(totalOptions(newOptions, undefined));
     });
 
@@ -466,11 +451,11 @@ describe('<OptionList />', () => {
         const spy = jest.fn();
         const {options, sections} = defaultProps;
 
-        const inputWrappers = mountWithAppProvider<OptionListProps>(
+        const inputWrapper = mountWithApp(
           <OptionList {...defaultProps} onChange={spy} allowMultiple />,
         ).find('input');
 
-        inputWrappers.at(0).simulate('change');
+        inputWrapper!.trigger('onChange');
 
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith([firstOption(options, sections)]);
@@ -481,7 +466,7 @@ describe('<OptionList />', () => {
         const {options, sections} = defaultProps;
         const selected = ['11', '8'];
 
-        const inputWrappers = mountWithAppProvider<OptionListProps>(
+        const inputWrapper = mountWithApp(
           <OptionList
             {...defaultProps}
             onChange={spy}
@@ -490,7 +475,7 @@ describe('<OptionList />', () => {
           />,
         ).find('input');
 
-        inputWrappers.at(0).simulate('change');
+        inputWrapper!.trigger('onChange');
 
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy).toHaveBeenCalledWith([
@@ -504,7 +489,7 @@ describe('<OptionList />', () => {
         const {options, sections} = defaultProps;
         const selected = ['10', '8', '5'];
 
-        const inputWrappers = mountWithAppProvider<OptionListProps>(
+        const inputWrapper = mountWithApp(
           <OptionList
             {...defaultProps}
             onChange={spy}
@@ -513,7 +498,7 @@ describe('<OptionList />', () => {
           />,
         ).find('input');
 
-        inputWrappers.at(0).simulate('change');
+        inputWrapper!.trigger('onChange');
 
         const valueToCheck = firstOption(options, sections);
         const newSelected = selected.filter((value) => value !== valueToCheck);

From 5d81be5f0085ca881cf3ca9e4d8c415f2a4e1799 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Thu, 26 Aug 2021 09:48:07 -0400
Subject: [PATCH 2/3] Add code quality entry

---
 UNRELEASED.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index d3d18828fe4..60e7466d498 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -72,5 +72,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for EventListener and EmptySearch components([#4423](https://github.com/Shopify/polaris-react/pull/4423))
 - Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider, and ConnectedFilter components ([#4429](https://github.com/Shopify/polaris-react/pull/4429))
 - Modernized tests for ContextualSaveBar and DataTable and its subcomponents ([#4397](https://github.com/Shopify/polaris-react/pull/4397))
+- Modernized tests for OptionList and its subcomponents ([#4441](https://github.com/Shopify/polaris-react/pull/4441))
 
 ### Deprecations

From 7cb1f22c23bafea478cde821713a64949dbf7a6c Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Thu, 26 Aug 2021 13:31:53 -0400
Subject: [PATCH 3/3] Update props test

---
 .../components/Checkbox/tests/Checkbox.test.tsx      | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
index a7144d4c0b7..84fb79d13ee 100644
--- a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
+++ b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
@@ -15,14 +15,9 @@ describe('<Checkbox />', () => {
   };
 
   it('sets pass through props for input', () => {
-    const input = mountWithApp(<Checkbox {...defaultProps} />).find('input')!;
-    const {checked, disabled, id, name, value} = defaultProps;
-
-    expect(input.prop('checked')).toBe(checked);
-    expect(input.prop('disabled')).toBe(disabled);
-    expect(input.prop('id')).toBe(id);
-    expect(input.prop('name')).toBe(name);
-    expect(input.prop('value')).toBe(value);
+    const input = mountWithApp(<Checkbox {...defaultProps} />);
+
+    expect(input).toContainReactComponent('input', defaultProps);
   });
 
   it('calls onChange', () => {
@@ -71,6 +66,7 @@ describe('<Checkbox />', () => {
       checkboxInput!.trigger('onChange', {
         currentTarget: checkboxInput!.domNode as HTMLInputElement,
       });
+
       expect(checkbox).not.toContainReactComponent('input', {
         className: 'Input keyFocused',
       });