From af37a5eda081fb244a8001726ce67a50634e5232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karen=20Pinz=C3=A1s=20Morrongiello?= <45268098+kpinzas-sh@users.noreply.github.com> Date: Tue, 27 Jul 2021 17:54:55 -0400 Subject: [PATCH] Test modernization in Card --- UNRELEASED.md | 1 + .../components/Header/tests/Header.test.tsx | 33 ++++---- .../components/Section/tests/Section.test.tsx | 38 ++++------ .../Subsection/tests/Subsection.test.tsx | 11 +-- src/components/Card/tests/Card.test.tsx | 76 ++++++++----------- 5 files changed, 69 insertions(+), 90 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 1b059291bac..5bea4eedfae 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Code quality - Modernized tests for Avatar, Backdrop, Badge, Banner components([#4306](https://github.com/Shopify/polaris-react/pull/4306)) +- Modernized test for Card: Subsection, Header, Sections and Card ([#4325](https://github.com/Shopify/polaris-react/pull/4325)). - Modernized tests for Item, Panel, List, Tab, TabMeasurer (from Tabs components). ([#4313](https://github.com/Shopify/polaris-react/pull/4313)) - Modernized tests for Tooltip, Toast components([#4314](https://github.com/Shopify/polaris-react/pull/4314)) - Modernized tests for AccountConnection, ActionList components([#4316](https://github.com/Shopify/polaris-react/pull/4316)) diff --git a/src/components/Card/components/Header/tests/Header.test.tsx b/src/components/Card/components/Header/tests/Header.test.tsx index a881db193d6..a604340a8f9 100644 --- a/src/components/Card/components/Header/tests/Header.test.tsx +++ b/src/components/Card/components/Header/tests/Header.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'; import {ButtonGroup, Heading, buttonsFrom} from 'components'; import {Header} from '../Header'; @@ -15,21 +14,23 @@ const buttonsFromMock = buttonsFrom as jest.Mock; describe('
', () => { describe('title', () => { it('renders a heading when defined', () => { - const header = mountWithAppProvider(
); - expect(header.find(Heading).exists()).toBeTruthy(); + const header = mountWithApp(
); + expect(header).toContainReactComponent(Heading); }); it('renders the title directly if its a valid React element', () => { const title =
Staff accounts
; - const header = mountWithAppProvider(
); - expect(header.find(Heading).exists()).toBeFalsy(); - expect(header.find(title)).toBeTruthy(); + const header = mountWithApp(
); + expect(header).not.toContainReactComponent(Heading); + expect(header).toContainReactComponent('div', { + children: 'Staff accounts', + }); }); it('is used as the content for the heading', () => { const title = 'Staff accounts'; - const header = mountWithAppProvider(
); - expect(header.find(Heading).prop('children')).toBe(title); + const header = mountWithApp(
); + expect(header.find(Heading)).toContainReactText(title); }); }); @@ -37,12 +38,12 @@ describe('
', () => { const mockActions = [{content: 'Preview'}]; it('renders a button group when defined', () => { - const header = mountWithAppProvider(
); - expect(header.find(ButtonGroup).exists()).toBeTruthy(); + const header = mountWithApp(
); + expect(header).toContainReactComponent(ButtonGroup); }); it('renders buttons for each action', () => { - mountWithAppProvider(
); + mountWithApp(
); expect(buttonsFromMock).toHaveBeenCalledWith( mockActions, expect.anything(), @@ -50,20 +51,20 @@ describe('
', () => { }); it('does not render a button group when not defined', () => { - const header = mountWithAppProvider(
); - expect(header.find(ButtonGroup).exists()).toBeFalsy(); + const header = mountWithApp(
); + expect(header).not.toContainReactComponent(ButtonGroup); }); }); describe('children', () => { it('renders when defined', () => { const Children = () =>
Hello!
; - const header = mountWithAppProvider( + const header = mountWithApp(
, ); - expect(header.find(Children).exists()).toBeTruthy(); + expect(header).toContainReactComponent(Children); }); }); }); diff --git a/src/components/Card/components/Section/tests/Section.test.tsx b/src/components/Card/components/Section/tests/Section.test.tsx index 8ec57e88b3d..f09ce38a423 100644 --- a/src/components/Card/components/Section/tests/Section.test.tsx +++ b/src/components/Card/components/Section/tests/Section.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 {Badge, Subheading, ButtonGroup, Button} from 'components'; @@ -17,21 +15,17 @@ describe('', () => { ); - const section = mountWithAppProvider(
); - const headerMarkup = section.find('h2'); + const section = mountWithApp(
); + const headerMarkup = section.find('h2')!; - expect(headerMarkup.text()).toContain(titleString); - expect(headerMarkup.find('Badge').text()).toBe(badgeString); + expect(headerMarkup).toContainReactText(titleString); + expect(headerMarkup.find(Badge)).toContainReactText(badgeString); }); it('wraps plain string titles in a ', () => { const titleString = 'Online store'; - - const card = mountWithAppProvider(
); - const headerMarkup = card.find(Subheading); - - expect(headerMarkup.exists()).toBeTruthy(); - expect(headerMarkup.text()).toStrictEqual(titleString); + const card = mountWithApp(
); + expect(card.find(Subheading)).toContainReactText(titleString); }); describe('hideWhenPrinting prop', () => { @@ -56,18 +50,18 @@ describe('', () => { const mockActions = [{content: 'Preview'}, {content: 'Open'}]; it('renders a button group when defined', () => { - const section = mountWithAppProvider(
); - expect(section.find(ButtonGroup).exists()).toBeTruthy(); + const section = mountWithApp(
); + expect(section).toContainReactComponent(ButtonGroup); }); it('renders buttons for each action', () => { - const section = mountWithAppProvider(
); - expect(section.find(Button)).toHaveLength(2); + const section = mountWithApp(
); + expect(section).toContainReactComponentTimes(Button, 2); }); it('does not render a button group when not defined', () => { - const section = mountWithAppProvider(
); - expect(section.find(ButtonGroup).exists()).toBeFalsy(); + const section = mountWithApp(
); + expect(section).not.toContainReactComponent(ButtonGroup); }); it('renders both custom title markup and actions', () => { @@ -79,12 +73,12 @@ describe('', () => { {badgeString} ); - const section = mountWithAppProvider( + const section = mountWithApp(
, ); - expect(section.find(Button)).toHaveLength(2); - expect(section.text()).toContain(titleString); - expect(section.find('Badge').text()).toBe(badgeString); + expect(section).toContainReactComponentTimes(Button, 2); + expect(section).toContainReactText(titleString); + expect(section.find(Badge)).toContainReactText(badgeString); }); }); }); diff --git a/src/components/Card/components/Subsection/tests/Subsection.test.tsx b/src/components/Card/components/Subsection/tests/Subsection.test.tsx index 5c55f90d9fd..f13cc0c01a9 100644 --- a/src/components/Card/components/Subsection/tests/Subsection.test.tsx +++ b/src/components/Card/components/Subsection/tests/Subsection.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'; import {Subsection} from '../Subsection'; @@ -8,11 +7,9 @@ describe('', () => { it('can have any valid react element for children', () => { const childrenMarkup =

Some content

; - const section = mountWithAppProvider( - {childrenMarkup}, - ); + const section = mountWithApp({childrenMarkup}); - expect(section.text()).toContain('Some content'); - expect(section.find('p').exists()).toBeTruthy(); + expect(section).toContainReactText('Some content'); + expect(section).toContainReactComponent('p'); }); }); diff --git a/src/components/Card/tests/Card.test.tsx b/src/components/Card/tests/Card.test.tsx index f8e615e4c18..995f97541ef 100644 --- a/src/components/Card/tests/Card.test.tsx +++ b/src/components/Card/tests/Card.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 {Card, Badge, Button, Popover, ActionList} from 'components'; @@ -13,7 +11,7 @@ describe('', () => { return null; } - const component = mountWithAppProvider( + const component = mountWithApp( {(withinContentContext) => { @@ -24,16 +22,15 @@ describe('', () => { , ); - - expect(component.find(TestComponent).prop('withinContentContainer')).toBe( - true, - ); + expect(component).toContainReactComponent(TestComponent, { + withinContentContainer: true, + }); }); it('has a header tag when the title is a string', () => { const title = 'Online store'; - const card = mountWithAppProvider(); - expect(card.find('h2').text()).toBe(title); + const card = mountWithApp(); + expect(card.find('h2')).toContainReactText(title); }); it('can have any valid react element as the title', () => { @@ -46,31 +43,31 @@ describe('', () => { ); - const card = mountWithAppProvider(); - const headerMarkup = card.find('h2'); + const card = mountWithApp(); + const headerMarkup = card.find('h2')!; - expect(headerMarkup.text()).toContain(titleString); - expect(headerMarkup.find('Badge').text()).toBe(badgeString); + expect(headerMarkup).toContainReactText(titleString); + expect(headerMarkup.find(Badge)).toContainReactText(badgeString); }); it('exposes the header component', () => { - const card = mountWithAppProvider( + const card = mountWithApp( , ); - expect(card.find(Card.Header).exists()).toBeTruthy(); + expect(card).toContainReactComponent(Card.Header); }); it('renders a
component with actions and no title', () => { - const card = mountWithAppProvider( + const card = mountWithApp(

Some card content.

, ); - expect(card.find(Button)).toHaveLength(1); - expect(card.find(Card.Header)).toHaveLength(1); + expect(card).toContainReactComponent(Button); + expect(card).toContainReactComponent(Card.Header); }); describe('footerActionAlignment prop', () => { @@ -149,34 +146,28 @@ describe('', () => { }); it('renders a primary footer action', () => { - const card = mountWithAppProvider( + const card = mountWithApp(

Some card content.

, ); - - const primaryAction = card.find(Button).first(); - - expect(primaryAction).toHaveLength(1); - expect(primaryAction.text()).toBe('test action'); + expect(card).toContainReactComponent(Button, {children: 'test action'}); }); describe('secondaryFooterActions', () => { it('renders a single secondary footer action button when only 1 is supplied', () => { - const card = mountWithAppProvider( + const card = mountWithApp(

Some card content.

, ); - const secondaryAction = card.find(Button).first(); - expect(secondaryAction).toHaveLength(1); - expect(secondaryAction.text()).toBe('test action'); - expect(card.find(Popover).first()).toHaveLength(0); + expect(card).toContainReactComponent(Button, {children: 'test action'}); + expect(card).not.toContainReactComponent(Popover); }); it('renders popover when >1 are supplied', () => { - const card = mountWithAppProvider( + const card = mountWithApp( ', () => { , ); - const disclosureButton = card.find(Button).first(); - expect(disclosureButton).toHaveLength(1); - expect(disclosureButton.text()).toBe('More'); - - const popover = card.find(Popover).first(); - expect(popover).toHaveLength(1); + expect(card).toContainReactComponent(Button, { + children: 'More', + }); + expect(card).toContainReactComponent(Popover); }); it('activates popover when disclosure button is clicked', () => { @@ -225,7 +214,7 @@ describe('', () => { }); it('sets the disclosure button content to the value set on secondaryFooterActionsDisclosureText', () => { - const card = mountWithAppProvider( + const card = mountWithApp( ', () => { , ); - const disclosureButton = card.find(Button).first(); - expect(disclosureButton).toHaveLength(1); - expect(disclosureButton.text()).toBe('Show more'); + expect(card).toContainReactComponent(Button, { + children: 'Show more', + }); }); }); it('renders a section when sectioned', () => { - const card = mountWithAppProvider( + const card = mountWithApp(

Some card content.

, ); - const section = card.find(Section).first(); - - expect(section).toHaveLength(1); - expect(section.text()).toBe('Some card content.'); + expect(card.find(Section)).toContainReactText('Some card content.'); }); });