diff --git a/UNRELEASED.md b/UNRELEASED.md index 7262e54b5e4..05ceb749dd4 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -53,6 +53,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 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)) diff --git a/src/components/Choice/tests/Choice.test.tsx b/src/components/Choice/tests/Choice.test.tsx index 17258974ecd..19fbe1a9a4b 100644 --- a/src/components/Choice/tests/Choice.test.tsx +++ b/src/components/Choice/tests/Choice.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/react-testing'; import {InlineError} from 'components'; import {Choice} from '../Choice'; @@ -8,38 +7,37 @@ import {Choice} from '../Choice'; describe('', () => { it('calls the provided onClick when clicked', () => { const spy = jest.fn(); - const element = mountWithAppProvider( + const element = mountWithApp( , ); - element.find('label').simulate('click'); + element.find('label')!.trigger('onClick'); expect(spy).toHaveBeenCalledTimes(1); }); it('uses the id as the for attribute of a label', () => { - const element = mountWithAppProvider( - , - ); - const label = element.find('label'); + const element = mountWithApp(); - expect(label.prop('htmlFor')).toBe('MyChoice'); - expect(label.text()).toBe('Label'); + expect(element).toContainReactComponent('label', { + htmlFor: 'MyChoice', + }); + expect(element.find('label'))!.toContainReactText('Label'); }); it('renders error markup when provided with a value', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find('#MyChoiceError').text()).toContain('Error message'); + expect(element.find(InlineError)).toContainReactText('Error message'); }); it('avoids rendering error markup when the error is a boolean value', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(InlineError)).toHaveLength(0); + expect(element).not.toContainReactComponent(InlineError); }); // We want the entire choice to be clickable, including the space @@ -49,14 +47,13 @@ describe('', () => { return
; } - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const label = element.find('label'); - expect(label.containsMatchingElement()).toBe(true); + expect(element.find('label')).toContainReactComponent(MyComponent); }); it('does not render block-level elements in the label', () => { @@ -80,12 +77,11 @@ describe('', () => { 'hr', 'table', ]; - const element = mountWithAppProvider( - , - ); - const label = element.find('label'); + const element = mountWithApp(); for (const blockLevelElement of blockLevelElements) { - expect(label.find(blockLevelElement)).toHaveLength(0); + expect(element.find('label')).not.toContainReactComponent( + blockLevelElement, + ); } }); }); diff --git a/src/components/DisplayText/tests/DisplayText.test.tsx b/src/components/DisplayText/tests/DisplayText.test.tsx index d5daccd3400..a5b7d553a45 100644 --- a/src/components/DisplayText/tests/DisplayText.test.tsx +++ b/src/components/DisplayText/tests/DisplayText.test.tsx @@ -1,33 +1,33 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {DisplayText} from '../DisplayText'; describe('', () => { it('renders its children', () => { const text = 'Important text.'; - const displayText = mountWithAppProvider( + const displayText = mountWithApp( {text} , ); - expect(displayText.contains(text)).toBe(true); + expect(displayText).toContainReactText(text); }); it('renders the specified element', () => { - const displayText = mountWithAppProvider( + const displayText = mountWithApp( Important text. , ); - expect(displayText.find('h1')).toHaveLength(1); + expect(displayText).toContainReactComponentTimes('h1', 1); }); it('renders a p element if not specified', () => { - const displayText = mountWithAppProvider( + const displayText = mountWithApp( Important text., ); - expect(displayText.find('p')).toHaveLength(1); + + expect(displayText).toContainReactComponentTimes('p', 1); }); }); diff --git a/src/components/DropZone/components/FileUpload/FileUpload.tsx b/src/components/DropZone/components/FileUpload/FileUpload.tsx index c9261f2736a..3c45972d870 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.tsx +++ b/src/components/DropZone/components/FileUpload/FileUpload.tsx @@ -47,9 +47,7 @@ export function FileUpload(props: FileUploadProps) { const buttonMarkup = (size === 'extraLarge' || size === 'large') && buttonStyles ? ( -
- {actionTitle} -
+
{actionTitle}
) : null; const actionTitleClassName = classNames( @@ -59,9 +57,7 @@ export function FileUpload(props: FileUploadProps) { ); const actionTitleMarkup = ( -
- {actionTitle} -
+
{actionTitle}
); const fileUploadClassName = classNames( diff --git a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx index 19d40524627..f34c3ad4284 100755 --- a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx +++ b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx @@ -1,7 +1,5 @@ import React from 'react'; import {Caption, TextStyle} from 'components'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities'; import {DropZoneContext} from '../../../context'; @@ -18,7 +16,7 @@ describe('', () => { }; describe('measuring', () => { it('hides the FileUpload while measuring is true', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( ', () => { , ); - const wrapper = fileUpload.find('div').first(); - expect(wrapper.hasClass('measuring')).toBe(true); + expect(fileUpload).toContainReactComponent('div', { + className: expect.stringContaining('measuring'), + }); }); }); describe('extraLarge', () => { it('renders extra large view for type file', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( ', () => { , ); - expect(fileUpload.find('img').prop('src')).toBe(uploadArrowImage); - expect(findByTestID(fileUpload, 'Button')).toHaveLength(1); - expect(fileUpload.find(TextStyle)).toHaveLength(1); + expect(fileUpload).toContainReactComponent('img', { + src: uploadArrowImage, + }); + expect(fileUpload).toContainReactComponent(TextStyle); + expect(fileUpload).toContainReactComponent('div', { + className: 'Button', + }); }); it('renders extra large view for type image', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( @@ -64,14 +67,16 @@ describe('', () => { , ); - expect(findByTestID(fileUpload, 'Button')).toHaveLength(1); - expect(fileUpload.find(TextStyle)).toHaveLength(1); + expect(fileUpload).toContainReactComponent('div', { + className: 'Button', + }); + expect(fileUpload).toContainReactComponent(TextStyle); }); }); describe('large', () => { it('renders large view', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( @@ -79,14 +84,17 @@ describe('', () => { , ); - expect(findByTestID(fileUpload, 'Button')).toHaveLength(1); - expect(fileUpload.find(TextStyle)).toHaveLength(1); - expect(fileUpload.find(Caption)).toHaveLength(1); + expect(fileUpload).toContainReactComponent(Caption); + expect(fileUpload).toContainReactComponent(TextStyle); + + expect(fileUpload).toContainReactComponent('div', { + className: 'Button slim', + }); }); }); it('renders medium view', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( @@ -94,12 +102,14 @@ describe('', () => { , ); - expect(findByTestID(fileUpload, 'Link')).toHaveLength(1); - expect(fileUpload.find(Caption)).toHaveLength(1); + expect(fileUpload).toContainReactComponent('div', { + className: 'ActionTitle', + }); + expect(fileUpload).toContainReactComponentTimes(Caption, 1); }); it('renders small view', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( @@ -107,11 +117,11 @@ describe('', () => { , ); - expect(fileUpload.find('img')).toHaveLength(1); + expect(fileUpload).toContainReactComponentTimes('img', 1); }); it('sets a default actionTitle if the prop is provided then removed', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( @@ -120,11 +130,12 @@ describe('', () => { ); fileUpload.setProps({children: }); - expect(findByTestID(fileUpload, 'Button').text()).toBe('Add files'); + + expect(fileUpload).toContainReactText('Add files'); }); it('sets a default actionHint if the prop is provided then removed', () => { - const fileUpload = mountWithAppProvider( + const fileUpload = mountWithApp( @@ -133,7 +144,7 @@ describe('', () => { ); fileUpload.setProps({children: }); - expect(fileUpload.find(TextStyle).text()).toBe('or drop files to upload'); + expect(fileUpload).toContainReactText('or drop files to upload'); }); it.each([ diff --git a/src/components/MessageIndicator/MessageIndicator.tsx b/src/components/MessageIndicator/MessageIndicator.tsx index ecbdbacc596..e621eee512e 100644 --- a/src/components/MessageIndicator/MessageIndicator.tsx +++ b/src/components/MessageIndicator/MessageIndicator.tsx @@ -8,9 +8,7 @@ export interface MessageIndicatorProps { } export function MessageIndicator({children, active}: MessageIndicatorProps) { - const indicatorMarkup = active && ( -
- ); + const indicatorMarkup = active &&
; return (
diff --git a/src/components/MessageIndicator/tests/MessageIndicator.test.tsx b/src/components/MessageIndicator/tests/MessageIndicator.test.tsx index 7c0aa26c17c..457d093abfa 100644 --- a/src/components/MessageIndicator/tests/MessageIndicator.test.tsx +++ b/src/components/MessageIndicator/tests/MessageIndicator.test.tsx @@ -1,32 +1,32 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {MessageIndicator} from '../MessageIndicator'; describe('', () => { it('mounts', () => { - const indicator = mountWithAppProvider(); - expect(indicator.exists()).toBe(true); + const indicator = mountWithApp(); + expect(indicator).not.toBeNull(); }); it('renders its children', () => { - const indicator = mountWithAppProvider( + const indicator = mountWithApp(
Hello Polaris
, ); - expect(indicator.text()).toContain('Hello Polaris'); + expect(indicator).toContainReactText('Hello Polaris'); }); it('renders indicator markup when active is true', () => { - const indicator = mountWithAppProvider( + const indicator = mountWithApp(
Hello Polaris
, ); - - expect(findByTestID(indicator, 'indicator').exists()).toBe(true); + expect(indicator).toContainReactComponent('div', { + className: 'MessageIndicator', + }); }); }); diff --git a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx index a4fc49592b2..b310e7eb887 100644 --- a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx +++ b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {animationFrame} from '@shopify/jest-dom-mocks'; -// eslint-disable-next-line no-restricted-imports -import {trigger, mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {KeypressListener} from 'components'; import {Dialog} from '../Dialog'; @@ -16,23 +15,28 @@ describe('', () => { }); it('sets CloseKeypressListener when `in` is true', () => { - const listener = mountWithAppProvider( - + const listener = mountWithApp( + something , - ).find(KeypressListener); + ); - expect(listener.exists()).toBe(true); + expect(listener).toContainReactComponent(KeypressListener); }); it('triggers an onEntered prop', () => { - const dialog = mountWithAppProvider( - + const spy = jest.fn(); + + const dialog = mountWithApp( + something , ); - trigger(dialog.find('FadeUp'), 'onEntered'); - expect(dialog.find('FadeUp').prop('onEntered')).toHaveBeenCalledTimes(1); + dialog.triggerKeypath('onEntered'); + + expect(spy).toHaveBeenCalledTimes(1); }); }); + +function noop() {} diff --git a/src/components/Tag/tests/Tag.test.tsx b/src/components/Tag/tests/Tag.test.tsx index 731bf0a49a7..6b093f286c9 100644 --- a/src/components/Tag/tests/Tag.test.tsx +++ b/src/components/Tag/tests/Tag.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/react-testing'; import {Tag} from '../Tag'; @@ -8,15 +7,15 @@ describe('', () => { describe('onRemove', () => { it('calls onRemove when remove button is clicked', () => { const spy = jest.fn(); - const tag = mountWithAppProvider(); - tag.find('button').simulate('click'); + const tag = mountWithApp(); + tag.find('button')!.domNode!.click(); expect(spy).toHaveBeenCalled(); }); it('does not call onRemove when remove button is disabled', () => { const spy = jest.fn(); - const tag = mountWithAppProvider(); - tag.find('button').simulate('click'); + const tag = mountWithApp(); + tag.find('button')!.domNode!.click(); expect(spy).not.toHaveBeenCalled(); }); }); @@ -24,15 +23,15 @@ describe('', () => { describe('onClick', () => { it('calls onClick when tag is clicked', () => { const spy = jest.fn(); - const tag = mountWithAppProvider(); - tag.find('button').simulate('click'); + const tag = mountWithApp(); + tag.find('button')!.domNode!.click(); expect(spy).toHaveBeenCalled(); }); it('does not call onClick when disabled', () => { const spy = jest.fn(); - const tag = mountWithAppProvider(); - tag.find('button').simulate('click'); + const tag = mountWithApp(); + tag.find('button')!.domNode!.click(); expect(spy).not.toHaveBeenCalled(); }); }); diff --git a/src/components/UnstyledLink/tests/UnstyledLink.test.tsx b/src/components/UnstyledLink/tests/UnstyledLink.test.tsx index a5c93cfc2b6..134ccf1fc6f 100644 --- a/src/components/UnstyledLink/tests/UnstyledLink.test.tsx +++ b/src/components/UnstyledLink/tests/UnstyledLink.test.tsx @@ -1,61 +1,76 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities/react-testing'; import {UnstyledLink} from 'components/UnstyledLink'; describe('', () => { describe('custom link component', () => { it('uses a custom link component instead of an anchor', () => { const CustomLinkComponent = () =>
; - const anchorElement = mountWithAppProvider( + const anchorElement = mountWithApp( , {link: CustomLinkComponent}, - ).find(CustomLinkComponent); - - expect(anchorElement).toHaveLength(1); + ); + expect(anchorElement).toContainReactComponentTimes( + CustomLinkComponent, + 1, + ); }); it('doesn’t have polaris prop', () => { const CustomLinkComponent = () =>
; - const anchorElement = mountWithAppProvider( + const anchorElement = mountWithApp( , {link: CustomLinkComponent}, - ).find(CustomLinkComponent); + ); - expect(anchorElement.prop('polaris')).not.toBeDefined(); + expect(anchorElement).toContainReactComponent(CustomLinkComponent, { + polaris: undefined, + }); }); }); describe('external', () => { it('adds rel and target attributes', () => { - const anchorElement = mountWithAppProvider( + const anchorElement = mountWithApp( , - ).find('a'); - expect(anchorElement.prop('target')).toBe('_blank'); - expect(anchorElement.prop('rel')).toBe('noopener noreferrer'); + ); + + expect(anchorElement).toContainReactComponent('a', { + target: '_blank', + rel: 'noopener noreferrer', + }); }); }); describe('download', () => { it('adds true as a boolean attribute', () => { - const anchorElement = mountWithAppProvider( + const anchorElement = mountWithApp( , - ).find('a'); - expect(anchorElement.prop('download')).toBe(true); + ); + + expect(anchorElement).toContainReactComponent('a', { + download: true, + }); }); it('adds the provided string', () => { - const anchorElement = mountWithAppProvider( + const anchorElement = mountWithApp( , - ).find('a'); - expect(anchorElement.prop('download')).toBe('file.txt'); + ); + + expect(anchorElement).toContainReactComponent('a', { + download: 'file.txt', + }); }); it('does not add the attribute when not set', () => { - const anchorElement = mountWithAppProvider( + const anchorElement = mountWithApp( , - ).find('a'); - expect(anchorElement.prop('download')).toBeFalsy(); + ); + + expect(anchorElement).toContainReactComponent('a', { + download: undefined, + }); }); }); });