diff --git a/UNRELEASED.md b/UNRELEASED.md
index 51453a78f96..bcd834e230c 100644
--- a/UNRELEASED.md
+++ b/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))
diff --git a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
index c3c60f64176..84fb79d13ee 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,24 +15,19 @@ describe('', () => {
};
it('sets pass through props for input', () => {
- const input = mountWithAppProvider().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();
+
+ expect(input).toContainReactComponent('input', defaultProps);
});
it('calls onChange', () => {
const spy = jest.fn();
- mountWithAppProvider()
- .find('input')
- .simulate('change');
+ const input = mountWithApp(
+ ,
+ ).find('input');
+
+ input!.trigger('onChange');
expect(spy).toHaveBeenCalledTimes(1);
});
@@ -73,6 +66,7 @@ describe('', () => {
checkboxInput!.trigger('onChange', {
currentTarget: checkboxInput!.domNode as HTMLInputElement,
});
+
expect(checkbox).not.toContainReactComponent('input', {
className: 'Input keyFocused',
});
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('', () => {
};
it('renders a checkbox if allowMultiple is true', () => {
- const checkbox = mountWithAppProvider(
- ,
- ).find(Checkbox);
- expect(checkbox.exists()).toBe(true);
+ const checkbox = mountWithApp();
+ expect(checkbox).toContainReactComponent(Checkbox);
});
it('renders a button if allowMultiple is false or undefined', () => {
- const button = mountWithAppProvider().find(
- 'button',
- );
- expect(button.exists()).toBe(true);
+ const button = mountWithApp();
+ 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(
,
- ).find('button');
- button.simulate('click');
+ ).find('button')!;
+ button.trigger('onClick');
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith(section, index);
@@ -47,10 +41,10 @@ describe('', () => {
it('doesn’t call onClick if option is disabled', () => {
const spy = jest.fn();
- const button = mountWithAppProvider(
+ const button = mountWithApp(
,
- ).find('button');
- button.simulate('click');
+ ).find('button')!;
+ button.trigger('onClick');
expect(spy).not.toHaveBeenCalled();
});
@@ -59,10 +53,10 @@ describe('', () => {
const spy = jest.fn();
const {section, index} = defaultProps;
- const input = mountWithAppProvider(
+ const input = mountWithApp(
,
- ).find('input');
- input.simulate('change');
+ ).find('input')!;
+ input.trigger('onChange');
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith(section, index);
@@ -71,19 +65,19 @@ describe('', () => {
it('doesn’t call onClick if option is disabled and multiple options are allowed', () => {
const spy = jest.fn();
- const input = mountWithAppProvider(
+ const input = mountWithApp(
,
- ).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(
,
- ).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('', () => {
it('renders options and sections', () => {
const {options, sections} = defaultProps;
- const optionWrappers = mountWithAppProvider(
+ const optionWrappers = mountWithApp(
,
- ).find(Option);
+ ).findAll(Option);
expect(optionWrappers).toHaveLength(totalOptions(options, sections));
});
@@ -68,9 +67,9 @@ describe('', () => {
it('renders sections', () => {
const {sections} = defaultProps;
const options: OptionDescriptor[] = [];
- const optionWrappers = mountWithAppProvider(
+ const optionWrappers = mountWithApp(
,
- ).find(Option);
+ ).findAll(Option);
expect(optionWrappers).toHaveLength(totalOptions(options, sections));
});
@@ -78,18 +77,16 @@ describe('', () => {
it('renders options', () => {
const {options} = defaultProps;
const sections: OptionListProps['sections'] = [];
- const optionWrappers = mountWithAppProvider(
+ const optionWrappers = mountWithApp(
,
- ).find(Option);
+ ).findAll(Option);
expect(optionWrappers).toHaveLength(totalOptions(options, sections));
});
it('re-renders with new options passed in', () => {
const {sections} = defaultProps;
- const optionList = mountWithAppProvider(
- ,
- );
+ const optionList = mountWithApp();
const newOptions: OptionDescriptor[] = [
{
@@ -104,16 +101,14 @@ describe('', () => {
];
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(
- ,
- );
+ const optionList = mountWithApp();
const newSections: OptionListProps['sections'] = [
{
@@ -132,15 +127,13 @@ describe('', () => {
];
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(
- ,
- );
+ const optionList = mountWithApp();
const newOptions: OptionDescriptor[] = [
{
@@ -171,39 +164,33 @@ describe('', () => {
];
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(
- ,
- );
+ const optionList = mountWithApp();
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(
- ,
- );
+ const optionList = mountWithApp();
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(
- ,
- );
+ const optionList = mountWithApp();
const newSections: OptionListProps['sections'] = [
{
@@ -222,15 +209,13 @@ describe('', () => {
];
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(
- ,
- );
+ const optionList = mountWithApp();
const newOptions: OptionDescriptor[] = [
{
@@ -245,8 +230,8 @@ describe('', () => {
];
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('', () => {
const spy = jest.fn();
const {options, sections} = defaultProps;
- const buttonWrappers = mountWithAppProvider(
+ const button = mountWithApp(
,
).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('', () => {
describe('allowMultiple', () => {
it('renders options and sections', () => {
const {options, sections} = defaultProps;
- const optionWrappers = mountWithAppProvider(
+ const optionWrappers = mountWithApp(
,
- ).find(Option);
+ ).findAll(Option);
expect(optionWrappers).toHaveLength(totalOptions(options, sections));
});
@@ -277,9 +262,9 @@ describe('', () => {
it('renders sections', () => {
const {sections} = defaultProps;
const options: OptionDescriptor[] = [];
- const optionWrappers = mountWithAppProvider(
+ const optionWrappers = mountWithApp(
,
- ).find(Option);
+ ).findAll(Option);
expect(optionWrappers).toHaveLength(totalOptions(options, sections));
});
@@ -287,16 +272,16 @@ describe('', () => {
it('renders options', () => {
const {options} = defaultProps;
const sections: OptionListProps['sections'] = [];
- const optionWrappers = mountWithAppProvider(
+ const optionWrappers = mountWithApp(
,
- ).find(Option);
+ ).findAll(Option);
expect(optionWrappers).toHaveLength(totalOptions(options, sections));
});
it('re-renders with new options passed in', () => {
const {sections} = defaultProps;
- const optionList = mountWithAppProvider(
+ const optionList = mountWithApp(
,
);
@@ -313,14 +298,14 @@ describe('', () => {
];
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(
+ const optionList = mountWithApp(
,
);
@@ -341,13 +326,13 @@ describe('', () => {
];
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(
+ const optionList = mountWithApp(
,
);
@@ -380,8 +365,8 @@ describe('', () => {
];
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('', () => {
it('re-renders with undefined options', () => {
const {sections} = defaultProps;
- const optionList = mountWithAppProvider(
+ const optionList = mountWithApp(
,
);
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(
+ const optionList = mountWithApp(
,
);
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(
+ const optionList = mountWithApp(
,
);
@@ -433,13 +418,13 @@ describe('', () => {
];
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(
+ const optionList = mountWithApp(
,
);
@@ -456,8 +441,8 @@ describe('', () => {
];
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('', () => {
const spy = jest.fn();
const {options, sections} = defaultProps;
- const inputWrappers = mountWithAppProvider(
+ const inputWrapper = mountWithApp(
,
).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('', () => {
const {options, sections} = defaultProps;
const selected = ['11', '8'];
- const inputWrappers = mountWithAppProvider(
+ const inputWrapper = mountWithApp(
', () => {
/>,
).find('input');
- inputWrappers.at(0).simulate('change');
+ inputWrapper!.trigger('onChange');
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith([
@@ -504,7 +489,7 @@ describe('', () => {
const {options, sections} = defaultProps;
const selected = ['10', '8', '5'];
- const inputWrappers = mountWithAppProvider(
+ const inputWrapper = mountWithApp(
', () => {
/>,
).find('input');
- inputWrappers.at(0).simulate('change');
+ inputWrapper!.trigger('onChange');
const valueToCheck = firstOption(options, sections);
const newSelected = selected.filter((value) => value !== valueToCheck);