diff --git a/UNRELEASED.md b/UNRELEASED.md
index 7b4f4dd09b0..d65eb0b58aa 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -63,7 +63,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
- Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353))
- Modernized tests for CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail ([#4387](https://github.com/Shopify/polaris-react/pull/4387))
- Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
-- Modernized test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)).
+- Modernized tests for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)).
- Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389))
- Modernized tests for Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components([#4386](https://github.com/Shopify/polaris-react/pull/4386))
- Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311))
@@ -78,6 +78,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
- 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))
+- Modernized tests for ComboBox and Autocomplete components ([#4442](https://github.com/Shopify/polaris-react/pull/4442))
- Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438))
- Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430))
- Modernized tests for Dropzone, ExceptionList, and ConnectedFilterControl > Item components([#4412](https://github.com/Shopify/polaris-react/pull/4412))
diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
index dd7de0edffc..9221eccd9b8 100644
--- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
+++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
@@ -24,7 +24,7 @@ describe('', () => {
describe('options', () => {
it('passes options to OptionList', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
+ comboBox.find('div')!.trigger('onClick');
- const optionListOptions = comboBox.find(OptionList).prop('options') || [
+ const optionListOptions = comboBox.find(OptionList)!.prop('options') || [
{
value: '',
label: '',
@@ -69,7 +69,7 @@ describe('', () => {
describe('contentBefore and contentAfter', () => {
it('renders content passed into contentBefore', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
contentBefore={renderNodeWithId()}
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('#CustomNode')).toHaveLength(1);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponentTimes('div', 1, {
+ id: 'CustomNode',
+ });
});
it('renders content passed into contentAfter', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
contentAfter={renderNodeWithId()}
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('#CustomNode')).toHaveLength(1);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponentTimes('div', 1, {
+ id: 'CustomNode',
+ });
});
});
describe('actionsBefore and actionsAfter', () => {
- const comboBox = mountWithAppProvider(
- ,
- );
-
it('passes actionsBefore to the options in the first ActionList', () => {
- comboBox.simulate('click');
+ const comboBox = mountWithApp(
+ ,
+ );
+
+ comboBox.find('div')!.trigger('onClick');
- const actionListItems = comboBox
- .find(ActionList)
- .first()
- .prop('items') || [
+ const actionListItems = comboBox.find(ActionList)!.prop('items') || [
{
image: '',
role: '',
@@ -127,12 +128,24 @@ describe('', () => {
});
it('passes actionsAfter to the options in the second ActionList', () => {
- comboBox.simulate('click');
+ const comboBox = mountWithApp(
+ ,
+ );
+
+ comboBox.find('div')!.trigger('onClick');
- const actionListItems = comboBox
- .find(ActionList)
- .last()
- .prop('items') || [
+ const actionLists = comboBox.findAll(ActionList);
+ // last actionList
+ const actionListItems = actionLists[actionLists.length - 1].prop(
+ 'items',
+ ) || [
{
image: '',
role: '',
@@ -146,7 +159,7 @@ describe('', () => {
describe('ids', () => {
it('passes an id to the options in OptionList', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
onSelect={noop}
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('button').at(0).prop('id')).toBe('TestId-0');
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponent('button', {id: 'TestId-0'});
});
it('passes an id to the actions in ActionList', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
actionsBefore={action}
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('button').at(0).prop('id')).toBe('TestId-0');
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponent('button', {id: 'TestId-0'});
});
});
describe('actions', () => {
it('renders an action in actionsBefore', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
-
- expect(comboBox.find('button').at(0).text()).toBe('Add tag');
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox.find('button')).toContainReactText('Add tag');
});
it('renders an action in actionsAfter', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
actionsAfter={action}
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('button').at(3).text()).toBe('Add tag');
+
+ comboBox.find('div')!.trigger('onClick');
+ const buttons = comboBox.findAll('button');
+ expect(buttons[3]).toContainReactText('Add tag');
});
});
describe('select', () => {
it('passes the selected options to OptionList', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(OptionList).prop('selected')).toStrictEqual([
- 'cheese_pizza',
- ]);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponent(OptionList, {
+ selected: ['cheese_pizza'],
+ });
});
});
describe('listTitle', () => {
it('passes the listTitle as title to OptionList', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(OptionList).prop('title')).toBe('List title');
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponent(OptionList, {
+ title: 'List title',
+ });
});
});
describe('', () => {
it('renders TextField by default', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
onSelect={noop}
/>,
);
- expect(comboBox.find(TextField)).toHaveLength(1);
+ expect(comboBox).toContainReactComponentTimes(TextField, 1);
});
it('renders a custom given input', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
onSelect={noop}
/>,
);
- expect(comboBox.find('input')).toHaveLength(1);
- expect(comboBox.find(TextField)).toHaveLength(0);
+ expect(comboBox).toContainReactComponentTimes('input', 1);
+ expect(comboBox).not.toContainReactComponent(TextField);
});
it('is passed to Popover as the activator', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- expect(comboBox.find(Popover).find(TextField)).toHaveLength(1);
+ expect(comboBox.find(Popover)).toContainReactComponentTimes(TextField, 1);
});
});
describe('', () => {
- const comboBox = mountWithAppProvider(
- ,
- );
+ const mountComboBox = () =>
+ mountWithApp(
+ ,
+ );
it('does not set Popover to active before being clicked', () => {
- expect(comboBox.find(Popover).prop('active')).toBe(false);
+ const comboBox = mountComboBox();
+ expect(comboBox).toContainReactComponent(Popover, {active: false});
});
it('sets Popover to active when clicked', () => {
- comboBox.simulate('click');
- expect(comboBox.find(Popover).prop('active')).toBe(true);
+ const comboBox = mountComboBox();
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponent(Popover, {active: true});
});
it('sets Popover to active on keyDown', () => {
- comboBox.simulate('keydown');
- expect(comboBox.find(Popover).prop('active')).toBe(true);
+ const comboBox = mountComboBox();
+ comboBox.find('div')!.trigger('onKeyDown');
+ expect(comboBox).toContainReactComponent(Popover, {active: true});
});
it('sets Popover to fullWidth', () => {
- expect(comboBox.find(Popover).prop('fullWidth')).toBe(true);
+ const comboBox = mountComboBox();
+ expect(comboBox).toContainReactComponent(Popover, {fullWidth: true});
});
it('prevents autofocus on Popover', () => {
- expect(comboBox.find(Popover).prop('autofocusTarget')).toBe('none');
+ const comboBox = mountComboBox();
+ expect(comboBox).toContainReactComponent(Popover, {
+ autofocusTarget: 'none',
+ });
});
it('passes the preferredPosition to Popover', () => {
- expect(comboBox.find(Popover).prop('preferredPosition')).toBe('above');
+ const comboBox = mountComboBox();
+ expect(comboBox).toContainReactComponent(Popover, {
+ preferredPosition: 'above',
+ });
});
});
describe('allowMultiple', () => {
it('renders a button if the prop is false', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
allowMultiple={false}
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('button')).toHaveLength(options.length);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponentTimes('button', options.length);
});
it('renders a checkbox if the prop is set to true', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
allowMultiple
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find('input[type="checkbox"]')).toHaveLength(
- options.length,
- );
+ comboBox.find('div')!.trigger('onClick');
+ const checkboxes = comboBox.findAll('input', {type: 'checkbox'});
+ expect(checkboxes).toHaveLength(options.length);
});
});
describe('onSelect', () => {
it('gets called when an item is clicked', () => {
const spy = jest.fn();
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
onSelect={spy}
/>,
);
- comboBox.simulate('click');
- comboBox.find('button').at(0).simulate('click');
+ comboBox.find('div')!.trigger('onClick');
+ comboBox.find('button')!.trigger('onClick');
expect(spy).toHaveBeenCalledTimes(1);
});
it('gets called when a checkbox is changed', () => {
const spy = jest.fn();
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
allowMultiple
/>,
);
- comboBox.simulate('click');
+ comboBox.find('div')!.trigger('onClick');
comboBox
- .find('input[type="checkbox"]')
- .at(0)
- .simulate('change', {target: {checked: true}});
+ .find('input', {type: 'checkbox'})!
+ .trigger('onChange', {target: {checked: true}});
expect(spy).toHaveBeenCalledTimes(1);
});
});
@@ -499,7 +524,7 @@ describe('', () => {
});
it('activates the popover when the combobox is focused', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('focus');
- expect(comboBox.find(Popover).prop('active')).toBe(true);
+ comboBox.find('div')!.trigger('onFocus');
+ expect(comboBox).toContainReactComponent(Popover, {active: true});
});
it('deactivates the popover when the escape key is pressed', () => {
@@ -538,7 +563,7 @@ describe('', () => {
const EmptyState = () => No results
;
it('renders an empty state when no options are passed in', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(EmptyState)).toHaveLength(1);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).toContainReactComponentTimes(EmptyState, 1);
});
it('does not render empty state if actionsBefore exist', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(EmptyState)).toHaveLength(0);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).not.toContainReactComponent(EmptyState);
});
it('does not render empty state if actionsAfter exist', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(EmptyState)).toHaveLength(0);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).not.toContainReactComponent(EmptyState);
});
it('does not render empty state if contentAfter exist', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(EmptyState)).toHaveLength(0);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).not.toContainReactComponent(EmptyState);
});
it('does not render empty state if contentBefore exist', () => {
- const comboBox = mountWithAppProvider(
+ const comboBox = mountWithApp(
', () => {
/>,
);
- comboBox.simulate('click');
- expect(comboBox.find(EmptyState)).toHaveLength(0);
+ comboBox.find('div')!.trigger('onClick');
+ expect(comboBox).not.toContainReactComponent(EmptyState);
});
});
});
diff --git a/src/components/Autocomplete/tests/Autocomplete.test.tsx b/src/components/Autocomplete/tests/Autocomplete.test.tsx
index bfc942b6623..d99d62198c6 100644
--- a/src/components/Autocomplete/tests/Autocomplete.test.tsx
+++ b/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import {CirclePlusMinor} from '@shopify/polaris-icons';
// eslint-disable-next-line no-restricted-imports
import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
import {Spinner} from 'components';
import {Key} from '../../../types';
@@ -15,20 +16,8 @@ describe('', () => {
{value: 'pepperoni_pizza', label: 'Pepperoni Pizza'},
];
- it('mounts', () => {
- const autocomplete = mountWithAppProvider(
- ,
- );
- expect(autocomplete.find(Autocomplete).exists()).toBe(true);
- });
-
it('displays a spinner when loading is true', () => {
- const autocomplete = mountWithAppProvider(
+ const autocomplete = mountWithApp(
', () => {
loading
/>,
);
- autocomplete.simulate('click');
- expect(autocomplete.find(Spinner).exists()).toBe(true);
+ autocomplete.find('div')!.trigger('onClick');
+ expect(autocomplete).toContainReactComponent(Spinner);
});
describe('', () => {
it('passes props to ComboBox', () => {
- const actionBefore = {
+ const actionsBefore = {
content: "Add 'f'",
icon: CirclePlusMinor,
id: 'ComboBox3-0',
@@ -51,7 +40,7 @@ describe('', () => {
const EmptyState = () => No results;
- const autocomplete = mountWithAppProvider(
+ const autocomplete = mountWithApp(
', () => {
preferredPosition="mostSpace"
listTitle="List title"
allowMultiple
- actionBefore={actionBefore}
+ actionBefore={actionsBefore}
onSelect={handleOnSelect}
emptyState={}
/>,
);
- expect(autocomplete.find(ComboBox).prop('id')).toBe('Autocomplete-ID');
- expect(autocomplete.find(ComboBox).prop('options')).toBe(options);
- expect(autocomplete.find(ComboBox).prop('selected')).toStrictEqual([
- 'cheese_pizza',
- ]);
- expect(autocomplete.find(ComboBox).prop('textField')).toStrictEqual(
- renderTextField(),
- );
- expect(autocomplete.find(ComboBox).prop('preferredPosition')).toBe(
- 'mostSpace',
- );
- expect(autocomplete.find(ComboBox).prop('listTitle')).toBe('List title');
- expect(autocomplete.find(ComboBox).prop('allowMultiple')).toBe(true);
- expect(autocomplete.find(ComboBox).prop('actionsBefore')).toStrictEqual([
- actionBefore,
- ]);
- expect(autocomplete.find(ComboBox).prop('onSelect')).toBe(handleOnSelect);
- expect(autocomplete.find(ComboBox).prop('emptyState')).toStrictEqual(
- ,
- );
+ expect(autocomplete).toContainReactComponent(ComboBox, {
+ id: 'Autocomplete-ID',
+ options,
+ selected: ['cheese_pizza'],
+ textField: renderTextField(),
+ preferredPosition: 'mostSpace',
+ listTitle: 'List title',
+ allowMultiple: true,
+ actionsBefore: [actionsBefore],
+ onSelect: handleOnSelect,
+ emptyState: ,
+ });
});
it('`Enter` keypress in does not trigger `onSubmit` when wrapped in a