[OptionList] Modernize tests

UNRELEASED.md

@@ -73,6 +73,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - 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 IndexTable, Indicator, InlineError, KeyboardKey, and KeypressListener components([#4431](https://github.com/Shopify/polaris-react/pull/4431))
+- Modernized tests for OptionList and its subcomponents ([#4441](https://github.com/Shopify/polaris-react/pull/4441))
 - Modernized tests for Modal ([#4433](https://github.com/Shopify/polaris-react/pull/4433))
 - Modernized tests for Navigation and Navigation.Section ([#4440](https://github.com/Shopify/polaris-react/pull/4440))
 - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427))

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,24 +15,19 @@ describe('<Checkbox />', () => {
   };
 
   it('sets pass through props for input', () => {
-    const input = mountWithAppProvider(<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', () => {
     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);
   });
@@ -73,6 +66,7 @@ describe('<Checkbox />', () => {
       checkboxInput!.trigger('onChange', {
         currentTarget: checkboxInput!.domNode as HTMLInputElement,
       });
+
       expect(checkbox).not.toContainReactComponent('input', {
         className: 'Input keyFocused',
       });

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);