From a60ddc7fce4689c30f3d9d1a6a59f0f7c6fe5d36 Mon Sep 17 00:00:00 2001 From: Luca Bezerra Date: Thu, 26 Aug 2021 12:42:47 -0400 Subject: [PATCH 1/4] Initial modernization of tests. --- .../ComboBox/tests/ComboBox.test.tsx | 83 +++++++++++-------- 1 file changed, 48 insertions(+), 35 deletions(-) diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx index dd7de0edffc..89c9c07bc8f 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') || [ { @@ -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'}); }); }); From c57000f205251d2ac12d7349fb04dd95ff99fdf0 Mon Sep 17 00:00:00 2001 From: Luca Bezerra Date: Thu, 26 Aug 2021 16:12:20 -0400 Subject: [PATCH 2/4] Modernized more tests. --- UNRELEASED.md | 1 + .../ComboBox/tests/ComboBox.test.tsx | 176 ++++++++++-------- 2 files changed, 95 insertions(+), 82 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index a07a253841d..ee994dda5a1 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -75,5 +75,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for IndexTable, Indicator, InlineError, KeyboardKey, and KeypressListener components([#4431](https://github.com/Shopify/polaris-react/pull/4431)) - 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 component ([#4442](https://github.com/Shopify/polaris-react/pull/4442)) ### Deprecations diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx index 89c9c07bc8f..9221eccd9b8 100644 --- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx +++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx @@ -33,9 +33,9 @@ describe('', () => { />, ); - comboBox.find('div').trigger('onClick'); + comboBox.find('div')!.trigger('onClick'); - const optionListOptions = comboBox.find(OptionList).prop('options') || [ + const optionListOptions = comboBox.find(OptionList)!.prop('options') || [ { value: '', label: '', @@ -78,7 +78,7 @@ describe('', () => { contentBefore={renderNodeWithId()} />, ); - comboBox.find('div').trigger('onClick'); + comboBox.find('div')!.trigger('onClick'); expect(comboBox).toContainReactComponentTimes('div', 1, { id: 'CustomNode', }); @@ -94,7 +94,7 @@ describe('', () => { contentAfter={renderNodeWithId()} />, ); - comboBox.find('div').trigger('onClick'); + comboBox.find('div')!.trigger('onClick'); expect(comboBox).toContainReactComponentTimes('div', 1, { id: 'CustomNode', }); @@ -114,9 +114,9 @@ describe('', () => { />, ); - comboBox.find('div').trigger('onClick'); + comboBox.find('div')!.trigger('onClick'); - const actionListItems = comboBox.find(ActionList).prop('items') || [ + const actionListItems = comboBox.find(ActionList)!.prop('items') || [ { image: '', role: '', @@ -139,7 +139,7 @@ describe('', () => { />, ); - comboBox.find('div').trigger('onClick'); + comboBox.find('div')!.trigger('onClick'); const actionLists = comboBox.findAll(ActionList); // last actionList @@ -168,7 +168,7 @@ describe('', () => { onSelect={noop} />, ); - comboBox.find('div').trigger('onClick'); + comboBox.find('div')!.trigger('onClick'); expect(comboBox).toContainReactComponent('button', {id: 'TestId-0'}); }); @@ -183,14 +183,14 @@ describe('', () => { actionsBefore={action} />, ); - comboBox.find('div').trigger('onClick'); + 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); }); }); @@ -512,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', () => { @@ -551,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); }); }); }); From df6330f9f01541623305950654ecf29e199812c1 Mon Sep 17 00:00:00 2001 From: Luca Bezerra Date: Thu, 26 Aug 2021 17:24:31 -0400 Subject: [PATCH 3/4] Partially modernizing Autocomplete. --- UNRELEASED.md | 2 +- .../Autocomplete/tests/Autocomplete.test.tsx | 64 +++++++------------ 2 files changed, 24 insertions(+), 42 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index ee994dda5a1..b0c0bd33dc2 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -75,6 +75,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for IndexTable, Indicator, InlineError, KeyboardKey, and KeypressListener components([#4431](https://github.com/Shopify/polaris-react/pull/4431)) - 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 component ([#4442](https://github.com/Shopify/polaris-react/pull/4442)) +- Modernized tests for ComboBox and Autocomplete components ([#4442](https://github.com/Shopify/polaris-react/pull/4442)) ### Deprecations 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
', () => { @@ -114,7 +95,7 @@ describe('', () => { describe('loading', () => { it('passes an empty array as options and contentAfter to ComboBox when loading is true', () => { - const autocomplete = mountWithAppProvider( + const autocomplete = mountWithApp( ', () => { loading />, ); - expect(autocomplete.find(ComboBox).prop('options')).toStrictEqual([]); - expect(autocomplete.find(ComboBox).prop('contentAfter')).not.toBeNull(); + expect(autocomplete).toContainReactComponent(ComboBox, {options: []}); + const comboBox = autocomplete.find(ComboBox); + expect(comboBox).not.toHaveReactProps({contentAfter: null}); }); }); From e06f6dae04474a312c2bbbf0252b6e9645c55818 Mon Sep 17 00:00:00 2001 From: Luca Bezerra Date: Thu, 26 Aug 2021 17:26:00 -0400 Subject: [PATCH 4/4] Fixing typo on UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index d2132fb0b2e..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))