From c95a344beaf4be69bc98b5e882c7ae0229f353cc Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Tue, 24 Aug 2021 09:49:33 -0400 Subject: [PATCH 1/3] Modernized tests for EmptyState component --- UNRELEASED.md | 1 + .../EmptyState/tests/EmptyState.test.tsx | 102 +++++++++--------- 2 files changed, 53 insertions(+), 50 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 2e0c8f92a0b..28cd09bf9cf 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -73,5 +73,6 @@ 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 EmptyState component ([#](https://github.com/Shopify/polaris-react/pull/)) ### Deprecations diff --git a/src/components/EmptyState/tests/EmptyState.test.tsx b/src/components/EmptyState/tests/EmptyState.test.tsx index 5c962018fe0..4996159e881 100644 --- a/src/components/EmptyState/tests/EmptyState.test.tsx +++ b/src/components/EmptyState/tests/EmptyState.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import {mountWithApp} from 'test-utilities'; import { Button, DisplayText, @@ -7,9 +8,6 @@ import { TextContainer, UnstyledLink, } from 'components'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; -import {mountWithApp} from 'test-utilities'; import {WithinContentContext} from '../../../utilities/within-content-context'; import {EmptyState} from '../EmptyState'; @@ -20,15 +18,16 @@ describe('', () => { describe('action', () => { it('renders a button with the action content if action is set', () => { - const emptyState = mountWithAppProvider( + const emptyState = mountWithApp( , ); - expect(emptyState.find('button').contains('Add transfer')).toBe(true); + expect(emptyState.find('button')).toContainReactText('Add transfer'); }); it('does not render a button when no action is set', () => { - const emptyState = mountWithAppProvider(); - expect(emptyState.find('button').contains('Add transfer')).toBe(false); + const emptyState = mountWithApp(); + + expect(emptyState).not.toContainReactComponent('button'); }); it('renders a medium size primary button by default', () => { @@ -43,15 +42,15 @@ describe('', () => { }); it('renders a medium button when in a content context', () => { - const emptyStateInContentContext = mountWithAppProvider( + const emptyStateInContentContext = mountWithApp( , ); - expect(emptyStateInContentContext.find(Button).prop('size')).toBe( - 'medium', - ); + expect(emptyStateInContentContext).toContainReactComponent(Button, { + size: 'medium', + }); }); it('adds center distribution and tight spacing to Stack', () => { @@ -93,86 +92,89 @@ describe('', () => {

); - const emptyState = mountWithAppProvider( + const emptyState = mountWithApp( {children}, ); - expect(emptyState.find(TextContainer).text()).toContain(expectedContent); + expect(emptyState.find(TextContainer)).toContainReactText( + expectedContent, + ); }); }); describe('img', () => { - const emptyState = mountWithAppProvider(); - it('passes the provided source to Image', () => { - expect(emptyState.find(Image).prop('source')).toBe(imgSrc); + const emptyState = mountWithApp(); + expect(emptyState).toContainReactComponent(Image, {source: imgSrc}); }); it('renders an Image with a sourceSet when largeImage is passed', () => { imgSrc = 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg'; - const emptyState = mountWithAppProvider( + const emptyState = mountWithApp( , ); - expect(emptyState.find(Image).props().sourceSet).toStrictEqual([ - { - descriptor: '568w', - source: - 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg', - }, - { - descriptor: '1136w', - source: - 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg', - }, - ]); + expect(emptyState).toContainReactComponent(Image, { + sourceSet: [ + { + descriptor: '568w', + source: + 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg', + }, + { + descriptor: '1136w', + source: + 'https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg', + }, + ], + }); }); }); describe('role', () => { - const emptyState = mountWithAppProvider(); it('passes the presentation role to Image', () => { - expect(emptyState.find(Image).prop('role')).toBe('presentation'); + const emptyState = mountWithApp(); + expect(emptyState).toContainReactComponent(Image, {role: 'presentation'}); }); }); describe('alt', () => { - const emptyState = mountWithAppProvider(); it('passes an empty alt to Image', () => { - expect(emptyState.find(Image).prop('alt')).toBe(''); + const emptyState = mountWithApp(); + expect(emptyState).toContainReactComponent(Image, {alt: ''}); }); }); describe('heading', () => { it('passes the provided heading to DisplayText', () => { const expectedHeading = 'Manage your inventory transfers'; - const emptyState = mountWithAppProvider( + const emptyState = mountWithApp( , ); - expect(emptyState.find(DisplayText).prop('size')).toBe('medium'); - expect(emptyState.find(DisplayText).contains(expectedHeading)).toBe(true); + const displayText = emptyState.find(DisplayText)!; + + expect(displayText).toHaveReactProps({size: 'medium'}); + expect(displayText).toContainReactText(expectedHeading); }); it('renders a small DisplayText when in a content context', () => { - const emptyStateInContentContext = mountWithAppProvider( + const emptyStateInContentContext = mountWithApp( , ); - const headingSize = emptyStateInContentContext - .find(DisplayText) - .prop('size'); - - expect(headingSize).toBe('small'); + expect(emptyStateInContentContext).toContainReactComponent(DisplayText, { + size: 'small', + }); }); }); describe('secondaryAction', () => { it('renders secondaryAction if provided', () => { - const emptyState = mountWithAppProvider( + const emptyState = mountWithApp( ', () => { />, ); - expect(emptyState.find(UnstyledLink).text()).toContain('Learn more'); + expect(emptyState.find(UnstyledLink)).toContainReactText('Learn more'); }); }); @@ -192,18 +194,18 @@ describe('', () => { const footerContentMarkup =

{expectedContent}

; it('renders footer content', () => { - const emptyState = mountWithAppProvider( + const emptyState = mountWithApp( , ); - const footerContentTextContainer = emptyState.find(TextContainer).last(); - - expect(footerContentTextContainer.text()).toContain(expectedContent); + expect(emptyState).toContainReactComponent(TextContainer, { + children: footerContentMarkup, + }); }); it('does not create a footer when footerContent is not provided', () => { - const emptyState = mountWithAppProvider(); + const emptyState = mountWithApp(); - expect(emptyState.find(TextContainer)).toHaveLength(0); + expect(emptyState).not.toContainReactComponent(TextContainer); }); }); }); From 40348880bcad8d1013317b81a6334f7073f7d2af Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Tue, 24 Aug 2021 09:51:00 -0400 Subject: [PATCH 2/3] Updated PR # in UNRELEASED.md --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 28cd09bf9cf..53996f8a5a5 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -74,5 +74,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - 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 EmptyState component ([#](https://github.com/Shopify/polaris-react/pull/)) +- Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427)) ### Deprecations From fdeb76ca3412f1cf3b2d317fcab2e6b8341a8b03 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 26 Aug 2021 10:04:20 -0400 Subject: [PATCH 3/3] Removed dup in UNRELEASED.md --- UNRELEASED.md | 1 - 1 file changed, 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 53996f8a5a5..e0138419216 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -73,7 +73,6 @@ 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 EmptyState component ([#](https://github.com/Shopify/polaris-react/pull/)) - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427)) ### Deprecations