From d94a8dcc2c7f513d5a4d74456006f04440ea5f5d Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 12 Aug 2021 13:56:28 -0400 Subject: [PATCH 1/5] Modernized MediaCard Test --- src/components/MediaCard/tests/MediaCard.test.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/MediaCard/tests/MediaCard.test.tsx b/src/components/MediaCard/tests/MediaCard.test.tsx index 7aec2496986..58f7a737851 100644 --- a/src/components/MediaCard/tests/MediaCard.test.tsx +++ b/src/components/MediaCard/tests/MediaCard.test.tsx @@ -1,8 +1,6 @@ import React from 'react'; import {Heading, Popover, Button, ActionList, Badge} from 'components'; import {mountWithApp} from 'test-utilities'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import {MediaCard} from '../MediaCard'; @@ -33,14 +31,12 @@ describe('', () => { {badgeString} ); - const videoCard = mountWithAppProvider( - , - ); + const videoCard = mountWithApp(); - const headerMarkup = videoCard.find('h2'); + const headerMarkup = videoCard.find('h2')!; - expect(headerMarkup.text()).toContain(titleString); - expect(headerMarkup.find('Badge').text()).toBe(badgeString); + expect(headerMarkup.find(Badge)).toContainReactText(badgeString); + expect(headerMarkup).toContainReactText(titleString); }); it('renders the description as a paragraph', () => { From 81ba32b888e92bd619d3ca4529741fcfd7f18dbc Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 12 Aug 2021 14:02:34 -0400 Subject: [PATCH 2/5] Added test modernization of MediaCard to UNRELEASED.md --- UNRELEASED.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 98fd56384c5..a83b4d739df 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -57,5 +57,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - 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)) - 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)) +- Modernized tests for MediaCard component ([#4393](https://github.com/Shopify/polaris-react/pull/4393)) ### Deprecations From 87389eeb13e04148ca9f24e22fba28b0c19a6ea7 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 12 Aug 2021 14:42:42 -0400 Subject: [PATCH 3/5] Modernized test for Layout component --- UNRELEASED.md | 2 +- src/components/Layout/tests/Layout.test.tsx | 79 ++++++++++++--------- 2 files changed, 46 insertions(+), 35 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index a83b4d739df..def97f2ef8b 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -58,6 +58,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - 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)) -- Modernized tests for MediaCard component ([#4393](https://github.com/Shopify/polaris-react/pull/4393)) +- Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393)) ### Deprecations diff --git a/src/components/Layout/tests/Layout.test.tsx b/src/components/Layout/tests/Layout.test.tsx index 51035235184..72d4dcc4272 100644 --- a/src/components/Layout/tests/Layout.test.tsx +++ b/src/components/Layout/tests/Layout.test.tsx @@ -1,103 +1,114 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {findByTestID, mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; +import {TextContainer} from 'components/TextContainer'; +import {Heading} from 'components/Heading'; +import styles from 'Layout.scss'; import {Section} from '../components'; import {Layout} from '../Layout'; describe('', () => { it('renders children', () => { - const layout = mountWithAppProvider( + const layout = mountWithApp( , ); - expect(layout.find(MyComponent).exists()).toBe(true); + expect(layout).toContainReactComponent(MyComponent); }); it('renders children wrapped in a section', () => { - const layout = mountWithAppProvider( + const layout = mountWithApp( , ); - const section = layout.find(Section); - expect(section.exists()).toBe(true); - expect(section.find(MyComponent).exists()).toBe(true); + expect(layout).toContainReactComponent(Section); + expect(layout.find(Section)).toContainReactComponent(MyComponent); }); describe('', () => { it('renders children', () => { - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( , ); - expect(annotatedSection.find(MyComponent).exists()).toBe(true); + expect(annotatedSection).toContainReactComponent(MyComponent); }); it('renders a title', () => { const title = 'Store details'; - const annotatedSection = mountWithAppProvider( - , + const annotatedSection = mountWithApp( + , ); - - expect(findByTestID(annotatedSection, 'AnnotationTitle').text()).toBe( + expect(annotatedSection.find(Heading, {id: 'someId'})).toContainReactText( title, ); }); it('renders a description as a string', () => { const description = 'A good description of this section'; - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( , ); - expect( - findByTestID(annotatedSection, 'AnnotationDescription').text(), - ).toBe(description); + const annotedDescriptionTextContainer = annotatedSection.find( + TextContainer, + )!; + + expect(annotedDescriptionTextContainer).toContainReactComponent('div'); + expect(annotedDescriptionTextContainer.find('div')).toContainReactText( + description, + ); }); it('renders a description as a node', () => { - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( } />, ); - const annotatedDescription = findByTestID( - annotatedSection, - 'AnnotationDescription', - ); - expect(annotatedDescription.find(MyComponent).exists()).toBe(true); + const annotedDescriptionTextContainer = annotatedSection.find( + TextContainer, + )!; + + expect(annotedDescriptionTextContainer).toContainReactComponent( + MyComponent, + ); }); it('does not render an empty description node', () => { - const annotatedSection = mountWithAppProvider( + const annotatedSection = mountWithApp( , ); - const description = findByTestID( - annotatedSection, - 'AnnotationDescription', - ); - expect(description.exists()).toBe(false); + const annotedDescriptionTextContainer = annotatedSection.find( + TextContainer, + )!; + + expect(annotatedSection).toContainReactComponent(TextContainer); + expect(annotedDescriptionTextContainer).not.toContainReactComponent( + 'div', + { + className: expect.stringContaining(styles.AnnotationDescription), + }, + ); }); it('passes through an ID for deeplinking', () => { - const layout = mountWithAppProvider( + const layout = mountWithApp( , ); - const section = layout.find('#MySection'); - - expect(section.exists()).toBe(true); + expect(layout).toContainReactComponent(Heading, {id: 'MySection'}); }); }); }); From 51b89d6e72a2faccf927bae445169907cc736e34 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 12 Aug 2021 15:59:07 -0400 Subject: [PATCH 4/5] Removed unneeded testIDs --- .../components/AnnotatedSection/AnnotatedSection.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx index 2222c279ca0..353f0972fa5 100644 --- a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx +++ b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx @@ -22,14 +22,9 @@ export function AnnotatedSection(props: AnnotatedSectionProps) {
- - {title} - + {title} {descriptionMarkup && ( -
+
{descriptionMarkup}
)} From edb23684364f7789a1ee478df26dc3f9215fe4dd Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 18 Aug 2021 16:12:21 -0400 Subject: [PATCH 5/5] Removed duplicate assertion --- src/components/Layout/tests/Layout.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Layout/tests/Layout.test.tsx b/src/components/Layout/tests/Layout.test.tsx index 72d4dcc4272..eaedfc6339b 100644 --- a/src/components/Layout/tests/Layout.test.tsx +++ b/src/components/Layout/tests/Layout.test.tsx @@ -60,7 +60,6 @@ describe('', () => { TextContainer, )!; - expect(annotedDescriptionTextContainer).toContainReactComponent('div'); expect(annotedDescriptionTextContainer.find('div')).toContainReactText( description, );