diff --git a/UNRELEASED.md b/UNRELEASED.md index 04854f7d3c5..0a661312557 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -45,9 +45,9 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for FormLayout and some components of ColorPicker ([#4330](https://github.com/Shopify/polaris-react/pull/4330)) - Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components([#4315](https://github.com/Shopify/polaris-react/pull/4315)) - Modernized tests for DualThumb ([#4341](https://github.com/Shopify/polaris-react/pull/4341)) -- Modernized tests for AppProvider, AfterInitialMount components([#4315](https://github.com/Shopify/polaris-react/pull/4331)) +- Modernized tests for AppProvider, AfterInitialMount components([#4331](https://github.com/Shopify/polaris-react/pull/4331)) - Modernized tests for SkeletonBodyTest, SkeletonDisplayTest, SkeletonPage, SkeletonThumbnail, and Spinner components ([#4353](https://github.com/Shopify/polaris-react/pull/4353)) - - Modernized tests for Message, Menu, Search, SearchDismissOverlay, SearchField, UserMenu and TopBar components. ([#4311](https://github.com/Shopify/polaris-react/pull/4311)) +- Modernized tests for Konami, Labelled, and Link components([#4389](https://github.com/Shopify/polaris-react/pull/4389)) ### Deprecations diff --git a/src/components/KonamiCode/tests/KonamiCode.test.tsx b/src/components/KonamiCode/tests/KonamiCode.test.tsx index 32a796eb4bf..0338f2f81d7 100644 --- a/src/components/KonamiCode/tests/KonamiCode.test.tsx +++ b/src/components/KonamiCode/tests/KonamiCode.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {clock} from '@shopify/jest-dom-mocks'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {KonamiCode, KONAMI_CODE} from '../KonamiCode'; @@ -20,7 +19,7 @@ describe('', () => { it('calls the handler when the Konami Code is entered', () => { const spy = jest.fn(); - mountWithAppProvider(); + mountWithApp(); simulateKeySequence(KONAMI_CODE); expect(spy).toHaveBeenCalledTimes(1); @@ -30,7 +29,7 @@ describe('', () => { const spy = jest.fn(); const reverseKonamiCode = [...KONAMI_CODE].reverse(); - mountWithAppProvider(); + mountWithApp(); simulateKeySequence(reverseKonamiCode); expect(spy).toHaveBeenCalledTimes(0); @@ -39,7 +38,7 @@ describe('', () => { it('removes Konami Code listener on unmount', () => { const spy = jest.fn(); - mountWithAppProvider().unmount(); + mountWithApp().unmount(); simulateKeySequence(KONAMI_CODE); expect(spy).toHaveBeenCalledTimes(0); diff --git a/src/components/Labelled/tests/Labelled.test.tsx b/src/components/Labelled/tests/Labelled.test.tsx index 835f69d203a..c6ca2a9034a 100644 --- a/src/components/Labelled/tests/Labelled.test.tsx +++ b/src/components/Labelled/tests/Labelled.test.tsx @@ -1,42 +1,41 @@ import React from 'react'; -import {InlineError, Label, buttonFrom, Labelled} from 'components'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {InlineError, Label, Labelled} from 'components'; +import {mountWithApp} from 'test-utilities'; +import {Button} from 'components/Button'; describe('', () => { it('passes relevant props along to the label', () => { const action = {content: 'Do something'}; - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const label = element.find(Label); - expect(label.prop('id')).toBe('my-label'); - expect(label.prop('children')).toBe('Label'); + expect(element).toContainReactComponent(Label, { + id: 'my-label', + children: 'Label', + }); }); it('passes required indicator prop along to the label', () => { - const element = mountWithAppProvider( + const element = mountWithApp( , ); - const label = element.find(Label); - expect(label.prop('requiredIndicator')).toBe(true); + expect(element).toContainReactComponent(Label, {requiredIndicator: true}); }); describe('error', () => { it('renders error markup when provided with a value', () => { - const label = mountWithAppProvider( + const label = mountWithApp( , ); - const error = label.find(InlineError); - expect(error).toHaveLength(1); - expect(error.text()).toContain('Error message'); + expect(label).toContainReactComponentTimes(InlineError, 1); + expect(label).toContainReactText('Error message'); }); it('renders no error markup when provided with a boolean value', () => { - const label = mountWithAppProvider( + const label = mountWithApp( ', () => { />, ); - expect(label.find(InlineError)).toHaveLength(0); + expect(label).not.toContainReactComponent(InlineError); }); }); @@ -53,12 +52,12 @@ describe('', () => { return
; } - const element = mountWithAppProvider( + const element = mountWithApp( , ); - expect(element.find(MyComponent).exists()).toBe(true); + expect(element).toContainReactComponent(MyComponent); }); describe('action', () => { @@ -71,22 +70,22 @@ describe('', () => { accessibilityLabel: 'My action with more description', }; - const label = mountWithAppProvider( + const label = mountWithApp( , ); - const button = buttonFrom(action, {plain: true}); - expect(label.containsMatchingElement(button)).toBe(true); + + expect(label).toContainReactComponent(Button, {plain: true}); }); it('does not render any block-level elements in the label element', () => { - const label = mountWithAppProvider( + const label = mountWithApp( , ); - expect(label.find('label').find('div')).toHaveLength(0); + expect(label.find('label')).not.toContainReactComponent('div'); }); }); }); diff --git a/src/components/Link/tests/Link.test.tsx b/src/components/Link/tests/Link.test.tsx index 7aee150942e..3662cd783a0 100644 --- a/src/components/Link/tests/Link.test.tsx +++ b/src/components/Link/tests/Link.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 {Banner, UnstyledLink, Icon} from 'components'; @@ -10,106 +8,109 @@ import {Link} from '../Link'; describe('', () => { it('calls onClick when clicking', () => { const spy = jest.fn(); - const link = mountWithAppProvider(); - link.find('a').simulate('click'); + const link = mountWithApp(); + link.find('a')!.trigger('onClick'); expect(spy).toHaveBeenCalled(); }); it('renders a button if no url is provided', () => { - const link = mountWithAppProvider(); - const button = link.find('button').first(); - expect(button.exists()).toBe(true); + const link = mountWithApp(); + expect(link).toContainReactComponentTimes('button', 1); }); it('renders an anchor if a url is provided', () => { - const link = mountWithAppProvider(); - const anchor = link.find(UnstyledLink).first(); - expect(anchor.exists()).toBe(true); + const link = mountWithApp(); + expect(link).toContainReactComponentTimes('a', 1); }); describe('id', () => { it('is passed down to an underlying button', () => { const id = 'MyID'; - const link = mountWithAppProvider(); - expect(link.find('button').prop('id')).toBe(id); + const link = mountWithApp(); + expect(link).toContainReactComponent('button', {id}); }); it('is passed down to an underlying UnstyledLink', () => { const id = 'MyID'; - const link = mountWithAppProvider( - , - ); - expect(link.find(UnstyledLink).prop('id')).toBe(id); + const link = mountWithApp(); + expect(link).toContainReactComponent(UnstyledLink, {id}); }); }); describe('external link', () => { it('has a trailing icon', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Shopify Help Center , ); - expect(link.children().last().find(Icon).exists()).toBe(true); + expect(link).toContainReactComponent(Icon); }); it('informs screen readers that it opens in a new window', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Shopify Help Center , ); const hintText = en.Polaris.Common.newWindowAccessibilityHint; - expect(link.children().last().find(Icon).prop('accessibilityLabel')).toBe( - hintText, - ); + + expect(link).toContainReactComponent(Icon, { + accessibilityLabel: hintText, + }); }); it('doesn’t have a trailing icon for non-string children', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Shopify Help Center , ); - expect(link.find(Icon).exists()).toBe(false); + expect(link).not.toContainReactComponent(Icon); }); }); describe('monochrome link', () => { it('outputs a monochrome unstyled link if rendered within a banner', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Some content , - ).find(UnstyledLink); + ); - expect(link.hasClass('monochrome')).toBe(true); + expect(link).toContainReactComponent(UnstyledLink, { + className: expect.stringContaining('monochrome'), + }); }); it('does not output a monochrome unstyled link if it is not rendered within a banner', () => { - const link = mountWithAppProvider( + const link = mountWithApp( Some content, - ).find(UnstyledLink); + ); - expect(link.hasClass('monochrome')).toBe(false); + expect(link).not.toContainReactComponent(UnstyledLink, { + className: expect.stringContaining('monochrome'), + }); }); it('outputs a monochrome button if rendered within a banner', () => { - const button = mountWithAppProvider( + const button = mountWithApp( Some content , - ).find('button'); + ); - expect(button.hasClass('monochrome')).toBe(true); + expect(button).toContainReactComponent('button', { + className: expect.stringContaining('monochrome'), + }); }); it('does not output a monochrome button if it is not rendered within a banner', () => { - const button = mountWithAppProvider(Some content).find( - 'button', - ); + const button = mountWithApp(Some content); - expect(button.hasClass('monochrome')).toBe(false); + expect(button).not.toContainReactComponent('button', { + className: expect.stringContaining('monochrome'), + }); }); }); @@ -143,9 +144,11 @@ describe('', () => { describe('removesUnderline', () => { it('adds removeUnderline class to the link', () => { - const link = mountWithAppProvider(Test); + const link = mountWithApp(Test); - expect(link.find('button').hasClass('removeUnderline')).toBe(true); + expect(link).toContainReactComponent('button', { + className: expect.stringContaining('removeUnderline'), + }); }); }); });