[Test Modernization]: Add test modernization to CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail

UNRELEASED.md

@@ -50,6 +50,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for DualThumb ([#4341](https://github.com/Shopify/polaris-react/pull/4341))
 - 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 CalloutCard, Caption, CheckableButton, Resizer, VideoThumbnail ([#4387](https://github.com/Shopify/polaris-react/pull/4387))
 - 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))

src/components/CalloutCard/tests/CalloutCard.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 {Button, ButtonGroup} from 'components';
 
 import {CalloutCard} from '../CalloutCard';
@@ -9,56 +8,70 @@ describe('<CalloutCard />', () => {
   const illustration =
     'https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg';
   const spy = jest.fn();
-  const calloutCard = mountWithAppProvider(
-    <CalloutCard
-      title="Title"
-      illustration={illustration}
-      primaryAction={{
-        content: 'Customize checkout',
-        url: 'https://www.shopify.com',
-      }}
-      secondaryAction={{content: 'Secondary action'}}
-      onDismiss={spy}
-    >
-      <p>Content</p>
-    </CalloutCard>,
-  );
+
+  function calloutCardMock() {
+    return mountWithApp(
+      <CalloutCard
+        title="Title"
+        illustration={illustration}
+        primaryAction={{
+          content: 'Customize checkout',
+          url: 'https://www.shopify.com',
+        }}
+        secondaryAction={{content: 'Secondary action'}}
+        onDismiss={spy}
+      >
+        <p>Content</p>
+      </CalloutCard>,
+    );
+  }
 
   it('renders its children', () => {
-    expect(calloutCard.find('p').first().contains('Content')).toBe(true);
+    const calloutCard = calloutCardMock();
+    expect(calloutCard.find('p')).toContainReactText('Content');
   });
 
   it('renders the title as an h2 element', () => {
-    expect(calloutCard.find('h2').first().contains('Title')).toBe(true);
+    const calloutCard = calloutCardMock();
+    expect(calloutCard.find('h2')).toContainReactText('Title');
   });
 
   it('renders the illustration', () => {
-    expect(calloutCard.find('img').prop('src')).toBe(illustration);
+    const calloutCard = calloutCardMock();
+    expect(calloutCard).toContainReactComponent('img', {
+      src: illustration,
+    });
   });
 
   it('renders the primaryAction as an a tag with the given url', () => {
-    expect(calloutCard.find('a').prop('href')).toBe('https://www.shopify.com');
+    const calloutCard = calloutCardMock();
+    expect(calloutCard).toContainReactComponent('a', {
+      href: 'https://www.shopify.com',
+    });
   });
 
   it('renders the primaryAction as an a tag with the given content', () => {
-    expect(calloutCard.find('a').contains('Customize checkout')).toBe(true);
+    const calloutCard = calloutCardMock();
+    expect(calloutCard.find('a')).toContainReactText('Customize checkout');
   });
 
   it('renders a secondary action with the given content in a button group', () => {
-    expect(calloutCard.find(Button).last().text()).toBe('Secondary action');
-    expect(calloutCard.find(ButtonGroup)).toHaveLength(1);
+    const calloutCard = calloutCardMock();
+    expect(calloutCard).toContainReactComponentTimes(ButtonGroup, 1);
+    expect(calloutCard).toContainReactComponent(Button, {
+      children: 'Secondary action',
+    });
   });
 
   it('is dismissed', () => {
-    expect(calloutCard.find(Button)).toHaveLength(3);
-
-    calloutCard.find(Button).first().simulate('click');
-
+    const calloutCard = calloutCardMock();
+    expect(calloutCard).toContainReactComponentTimes(Button, 3);
+    calloutCard.findAll(Button)[0].trigger('onClick');
     expect(spy).toHaveBeenCalled();
   });
 
   it('only renders one button when only a primary action is given', () => {
-    const oneActionCalloutCard = mountWithAppProvider(
+    const oneActionCalloutCard = mountWithApp(
       <CalloutCard
         title="Title"
         illustration={illustration}
@@ -71,6 +84,6 @@ describe('<CalloutCard />', () => {
       </CalloutCard>,
     );
 
-    expect(oneActionCalloutCard.find(Button)).toHaveLength(1);
+    expect(oneActionCalloutCard).toContainReactComponent(Button);
   });
 });

src/components/Caption/tests/Caption.test.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Caption} from '../Caption';
 
 describe('<Caption />', () => {
   it('renders a p tag', () => {
-    const caption = mountWithAppProvider(<Caption>Caption text</Caption>);
-    expect(caption.find('p')).toHaveLength(1);
+    const caption = mountWithApp(<Caption>Caption text</Caption>);
+    expect(caption).toContainReactComponentTimes('p', 1);
   });
 
   it('renders its children', () => {
     const captionMarkup = 'Caption text';
-    const caption = mountWithAppProvider(<Caption>{captionMarkup}</Caption>);
-    expect(caption.contains(captionMarkup)).toBe(true);
+    const caption = mountWithApp(<Caption>{captionMarkup}</Caption>);
+    expect(caption).toContainReactText(captionMarkup);
   });
 });

src/components/CheckableButton/tests/CheckableButton.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 {Checkbox} from 'components';
 
 import {CheckableButton} from '../CheckableButton';
@@ -18,65 +17,73 @@ describe('<CheckableButton />', () => {
   describe('select', () => {
     it('is passed down to Checkbox', () => {
       const {selected} = CheckableButtonProps;
-      const element = mountWithAppProvider(
+      const element = mountWithApp(
         <CheckableButton {...CheckableButtonProps} />,
       );
-      expect(element.find(Checkbox).prop('checked')).toStrictEqual(selected);
+      expect(element).toContainReactComponent(Checkbox, {
+        checked: selected,
+      });
+      expect(element).toContainReactComponentTimes(Checkbox, 1);
     });
   });
 
   describe('label', () => {
     it('is passed down to span', () => {
       const {label} = CheckableButtonProps;
-      const element = mountWithAppProvider(
+      const element = mountWithApp(
         <CheckableButton {...CheckableButtonProps} />,
       );
-      expect(element.find('span').last().text()).toStrictEqual(label);
+      expect(element).toContainReactComponent('span', {
+        className: 'Label',
+        children: label,
+      });
     });
   });
 
   describe('accessibilityLabel', () => {
     it('sets the label on the Checkbox', () => {
       const {accessibilityLabel} = CheckableButtonProps;
-      const element = mountWithAppProvider(
+      const element = mountWithApp(
         <CheckableButton {...CheckableButtonProps} />,
       );
-      expect(element.find(Checkbox).first().prop('label')).toStrictEqual(
-        accessibilityLabel,
-      );
+      expect(element).toContainReactComponent(Checkbox, {
+        label: accessibilityLabel,
+      });
     });
 
     describe('disabled', () => {
       it('is passed down to checkbox', () => {
         const {disabled} = CheckableButtonProps;
-        const element = mountWithAppProvider(
+        const element = mountWithApp(
           <CheckableButton {...CheckableButtonProps} />,
         );
-        expect(element.find(Checkbox).first().prop('disabled')).toStrictEqual(
+        expect(element).toContainReactComponent(Checkbox, {
           disabled,
-        );
+        });
       });
     });
   });
 
   describe('onToggleAll', () => {
     it('is called when the CheckableButton is clicked', () => {
       const spy = jest.fn();
-      const element = mountWithAppProvider(
+      const element = mountWithApp(
         <CheckableButton {...CheckableButtonProps} onToggleAll={spy} />,
       );
-      element.find('div').first().simulate('click');
+      element.find('div')!.trigger('onClick');
       expect(spy).toHaveBeenCalled();
     });
 
     it('is called when the CheckableButton pressed with spacebar', () => {
       const spy = jest.fn();
-      const element = mountWithAppProvider(
+      const element = mountWithApp(
         <CheckableButton {...CheckableButtonProps} onToggleAll={spy} />,
       );
-      element.find(Checkbox).first().simulate('click', {
+
+      element.find(Checkbox)!.find('input')!.trigger('onKeyUp', {
         keyCode: Key.Space,
       });
+
       expect(spy).toHaveBeenCalled();
     });
   });

src/components/TextField/components/Resizer/Resizer.tsx

@@ -35,7 +35,6 @@ export function Resizer({
 
   const minimumLinesMarkup = minimumLines ? (
     <div
-      testID="MinimumLines"
       ref={minimumLinesNode}
       className={styles.DummyInput}
       dangerouslySetInnerHTML={{
@@ -70,10 +69,9 @@ export function Resizer({
   });
 
   return (
-    <div testID="ResizerWrapper" aria-hidden className={styles.Resizer}>
+    <div aria-hidden className={styles.Resizer}>
       <EventListener event="resize" handler={handleHeightCheck} />
       <div
-        testID="ContentsNode"
         ref={contentNode}
         className={styles.DummyInput}
         dangerouslySetInnerHTML={{__html: getFinalContents(contents)}}