[Test Modernization]: Card components

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))

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,55 +14,57 @@ const buttonsFromMock = buttonsFrom as jest.Mock;
 describe('<Header />', () => {
   describe('title', () => {
     it('renders a heading when defined', () => {
-      const header = mountWithAppProvider(<Header title="Staff accounts" />);
-      expect(header.find(Heading).exists()).toBeTruthy();
+      const header = mountWithApp(<Header title="Staff accounts" />);
+      expect(header).toContainReactComponent(Heading);
     });
 
     it('renders the title directly if its a valid React element', () => {
       const title = <div>Staff accounts</div>;
-      const header = mountWithAppProvider(<Header title={title} />);
-      expect(header.find(Heading).exists()).toBeFalsy();
-      expect(header.find(title)).toBeTruthy();
+      const header = mountWithApp(<Header title={title} />);
+      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(<Header title={title} />);
-      expect(header.find(Heading).prop('children')).toBe(title);
+      const header = mountWithApp(<Header title={title} />);
+      expect(header.find(Heading)).toContainReactText(title);
     });
   });
 
   describe('actions', () => {
     const mockActions = [{content: 'Preview'}];
 
     it('renders a button group when defined', () => {
-      const header = mountWithAppProvider(<Header actions={mockActions} />);
-      expect(header.find(ButtonGroup).exists()).toBeTruthy();
+      const header = mountWithApp(<Header actions={mockActions} />);
+      expect(header).toContainReactComponent(ButtonGroup);
     });
 
     it('renders buttons for each action', () => {
-      mountWithAppProvider(<Header actions={mockActions} />);
+      mountWithApp(<Header actions={mockActions} />);
       expect(buttonsFromMock).toHaveBeenCalledWith(
         mockActions,
         expect.anything(),
       );
     });
 
     it('does not render a button group when not defined', () => {
-      const header = mountWithAppProvider(<Header />);
-      expect(header.find(ButtonGroup).exists()).toBeFalsy();
+      const header = mountWithApp(<Header />);
+      expect(header).not.toContainReactComponent(ButtonGroup);
     });
   });
 
   describe('children', () => {
     it('renders when defined', () => {
       const Children = () => <div>Hello!</div>;
-      const header = mountWithAppProvider(
+      const header = mountWithApp(
         <Header>
           <Children />
         </Header>,
       );
-      expect(header.find(Children).exists()).toBeTruthy();
+      expect(header).toContainReactComponent(Children);
     });
   });
 });

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('<Card.Section />', () => {
       </h2>
     );
 
-    const section = mountWithAppProvider(<Section title={titleMarkup} />);
-    const headerMarkup = section.find('h2');
+    const section = mountWithApp(<Section title={titleMarkup} />);
+    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 <Subheading />', () => {
     const titleString = 'Online store';
-
-    const card = mountWithAppProvider(<Section title={titleString} />);
-    const headerMarkup = card.find(Subheading);
-
-    expect(headerMarkup.exists()).toBeTruthy();
-    expect(headerMarkup.text()).toStrictEqual(titleString);
+    const card = mountWithApp(<Section title={titleString} />);
+    expect(card.find(Subheading)).toContainReactText(titleString);
   });
 
   describe('hideWhenPrinting prop', () => {
@@ -56,18 +50,18 @@ describe('<Card.Section />', () => {
     const mockActions = [{content: 'Preview'}, {content: 'Open'}];
 
     it('renders a button group when defined', () => {
-      const section = mountWithAppProvider(<Section actions={mockActions} />);
-      expect(section.find(ButtonGroup).exists()).toBeTruthy();
+      const section = mountWithApp(<Section actions={mockActions} />);
+      expect(section).toContainReactComponent(ButtonGroup);
     });
 
     it('renders buttons for each action', () => {
-      const section = mountWithAppProvider(<Section actions={mockActions} />);
-      expect(section.find(Button)).toHaveLength(2);
+      const section = mountWithApp(<Section actions={mockActions} />);
+      expect(section).toContainReactComponentTimes(Button, 2);
     });
 
     it('does not render a button group when not defined', () => {
-      const section = mountWithAppProvider(<Section />);
-      expect(section.find(ButtonGroup).exists()).toBeFalsy();
+      const section = mountWithApp(<Section />);
+      expect(section).not.toContainReactComponent(ButtonGroup);
     });
 
     it('renders both custom title markup and actions', () => {
@@ -79,12 +73,12 @@ describe('<Card.Section />', () => {
           <Badge>{badgeString}</Badge>
         </h2>
       );
-      const section = mountWithAppProvider(
+      const section = mountWithApp(
         <Section actions={mockActions} title={titleMarkup} />,
       );
-      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);
     });
   });
 });

src/components/Card/components/Subsection/tests/Subsection.test.tsx

@@ -1,18 +1,15 @@
 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';
 
 describe('<Card.Subsection />', () => {
   it('can have any valid react element for children', () => {
     const childrenMarkup = <p>Some content</p>;
 
-    const section = mountWithAppProvider(
-      <Subsection>{childrenMarkup}</Subsection>,
-    );
+    const section = mountWithApp(<Subsection>{childrenMarkup}</Subsection>);
 
-    expect(section.text()).toContain('Some content');
-    expect(section.find('p').exists()).toBeTruthy();
+    expect(section).toContainReactText('Some content');
+    expect(section).toContainReactComponent('p');
   });
 });

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('<Card />', () => {
       return null;
     }
 
-    const component = mountWithAppProvider(
+    const component = mountWithApp(
       <Card>
         <WithinContentContext.Consumer>
           {(withinContentContext) => {
@@ -24,16 +22,15 @@ describe('<Card />', () => {
         </WithinContentContext.Consumer>
       </Card>,
     );
-
-    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(<Card title="Online store" />);
-    expect(card.find('h2').text()).toBe(title);
+    const card = mountWithApp(<Card title={title} />);
+    expect(card.find('h2')).toContainReactText(title);
   });
 
   it('can have any valid react element as the title', () => {
@@ -46,31 +43,31 @@ describe('<Card />', () => {
       </h2>
     );
 
-    const card = mountWithAppProvider(<Card title={titleMarkup} />);
-    const headerMarkup = card.find('h2');
+    const card = mountWithApp(<Card title={titleMarkup} />);
+    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(
       <Card>
         <Card.Header />
       </Card>,
     );
-    expect(card.find(Card.Header).exists()).toBeTruthy();
+    expect(card).toContainReactComponent(Card.Header);
   });
 
   it('renders a <Header /> component with actions and no title', () => {
-    const card = mountWithAppProvider(
+    const card = mountWithApp(
       <Card actions={[{content: 'test action'}]}>
         <p>Some card content.</p>
       </Card>,
     );
 
-    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('<Card />', () => {
   });
 
   it('renders a primary footer action', () => {
-    const card = mountWithAppProvider(
+    const card = mountWithApp(
       <Card primaryFooterAction={{content: 'test action'}}>
         <p>Some card content.</p>
       </Card>,
     );
-
-    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(
         <Card secondaryFooterActions={[{content: 'test action'}]}>
           <p>Some card content.</p>
         </Card>,
       );
 
-      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(
         <Card
           secondaryFooterActions={[
             {content: 'Most important action'},
@@ -187,12 +178,10 @@ describe('<Card />', () => {
         </Card>,
       );
 
-      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('<Card />', () => {
     });
 
     it('sets the disclosure button content to the value set on secondaryFooterActionsDisclosureText', () => {
-      const card = mountWithAppProvider(
+      const card = mountWithApp(
         <Card
           secondaryFooterActions={[
             {content: 'Most important action'},
@@ -237,22 +226,19 @@ describe('<Card />', () => {
         </Card>,
       );
 
-      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(
       <Card sectioned>
         <p>Some card content.</p>
       </Card>,
     );
 
-    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.');
   });
 });