[TestModernization]: Add test modernization to UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog

UNRELEASED.md

@@ -53,6 +53,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - 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 test for UnstyledLink, Tag, DisplayText, FileUpload, MessageIndicator, Choice and Dialog ([#4407](https://github.com/Shopify/polaris-react/pull/4407)).
 - 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/Choice/tests/Choice.test.tsx

@@ -1,45 +1,43 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities/react-testing';
 import {InlineError} from 'components';
 
 import {Choice} from '../Choice';
 
 describe('<Choice />', () => {
   it('calls the provided onClick when clicked', () => {
     const spy = jest.fn();
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label" onClick={spy} />,
     );
-    element.find('label').simulate('click');
+    element.find('label')!.trigger('onClick');
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('uses the id as the for attribute of a label', () => {
-    const element = mountWithAppProvider(
-      <Choice id="MyChoice" label="Label" />,
-    );
-    const label = element.find('label');
+    const element = mountWithApp(<Choice id="MyChoice" label="Label" />);
 
-    expect(label.prop('htmlFor')).toBe('MyChoice');
-    expect(label.text()).toBe('Label');
+    expect(element).toContainReactComponent('label', {
+      htmlFor: 'MyChoice',
+    });
+    expect(element.find('label'))!.toContainReactText('Label');
   });
 
   it('renders error markup when provided with a value', () => {
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label" error="Error message" />,
     );
 
-    expect(element.find('#MyChoiceError').text()).toContain('Error message');
+    expect(element.find(InlineError)).toContainReactText('Error message');
   });
 
   it('avoids rendering error markup when the error is a boolean value', () => {
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label" error={Boolean(true)} />,
     );
 
-    expect(element.find(InlineError)).toHaveLength(0);
+    expect(element).not.toContainReactComponent(InlineError);
   });
 
   // We want the entire choice to be clickable, including the space
@@ -49,14 +47,13 @@ describe('<Choice />', () => {
       return <div />;
     }
 
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Choice id="MyChoice" label="Label">
         <MyComponent />
       </Choice>,
     );
-    const label = element.find('label');
 
-    expect(label.containsMatchingElement(<MyComponent />)).toBe(true);
+    expect(element.find('label')).toContainReactComponent(MyComponent);
   });
 
   it('does not render block-level elements in the label', () => {
@@ -80,12 +77,11 @@ describe('<Choice />', () => {
       'hr',
       'table',
     ];
-    const element = mountWithAppProvider(
-      <Choice id="MyChoice" label="Label" />,
-    );
-    const label = element.find('label');
+    const element = mountWithApp(<Choice id="MyChoice" label="Label" />);
     for (const blockLevelElement of blockLevelElements) {
-      expect(label.find(blockLevelElement)).toHaveLength(0);
+      expect(element.find('label')).not.toContainReactComponent(
+        blockLevelElement,
+      );
     }
   });
 });

src/components/DisplayText/tests/DisplayText.test.tsx

@@ -1,33 +1,33 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {DisplayText} from '../DisplayText';
 
 describe('<DisplayText />', () => {
   it('renders its children', () => {
     const text = 'Important text.';
-    const displayText = mountWithAppProvider(
+    const displayText = mountWithApp(
       <DisplayText size="small" element="h1">
         {text}
       </DisplayText>,
     );
-    expect(displayText.contains(text)).toBe(true);
+    expect(displayText).toContainReactText(text);
   });
 
   it('renders the specified element', () => {
-    const displayText = mountWithAppProvider(
+    const displayText = mountWithApp(
       <DisplayText size="extraLarge" element="h1">
         Important text.
       </DisplayText>,
     );
-    expect(displayText.find('h1')).toHaveLength(1);
+    expect(displayText).toContainReactComponentTimes('h1', 1);
   });
 
   it('renders a p element if not specified', () => {
-    const displayText = mountWithAppProvider(
+    const displayText = mountWithApp(
       <DisplayText size="extraLarge">Important text.</DisplayText>,
     );
-    expect(displayText.find('p')).toHaveLength(1);
+
+    expect(displayText).toContainReactComponentTimes('p', 1);
   });
 });

src/components/DropZone/components/FileUpload/FileUpload.tsx

@@ -47,9 +47,7 @@ export function FileUpload(props: FileUploadProps) {
 
   const buttonMarkup =
     (size === 'extraLarge' || size === 'large') && buttonStyles ? (
-      <div testID="Button" className={buttonStyles}>
-        {actionTitle}
-      </div>
+      <div className={buttonStyles}>{actionTitle}</div>
     ) : null;
 
   const actionTitleClassName = classNames(
@@ -59,9 +57,7 @@ export function FileUpload(props: FileUploadProps) {
   );
 
   const actionTitleMarkup = (
-    <div testID="Link" className={actionTitleClassName}>
-      {actionTitle}
-    </div>
+    <div className={actionTitleClassName}>{actionTitle}</div>
   );
 
   const fileUploadClassName = classNames(

src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import {Caption, TextStyle} from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
 import {DropZoneContext} from '../../../context';
@@ -18,7 +16,7 @@ describe('<FileUpload />', () => {
   };
   describe('measuring', () => {
     it('hides the FileUpload while measuring is true', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{
             size: 'extraLarge',
@@ -31,14 +29,15 @@ describe('<FileUpload />', () => {
         </DropZoneContext.Provider>,
       );
 
-      const wrapper = fileUpload.find('div').first();
-      expect(wrapper.hasClass('measuring')).toBe(true);
+      expect(fileUpload).toContainReactComponent('div', {
+        className: expect.stringContaining('measuring'),
+      });
     });
   });
 
   describe('extraLarge', () => {
     it('renders extra large view for type file', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{
             size: 'extraLarge',
@@ -50,68 +49,79 @@ describe('<FileUpload />', () => {
         </DropZoneContext.Provider>,
       );
 
-      expect(fileUpload.find('img').prop('src')).toBe(uploadArrowImage);
-      expect(findByTestID(fileUpload, 'Button')).toHaveLength(1);
-      expect(fileUpload.find(TextStyle)).toHaveLength(1);
+      expect(fileUpload).toContainReactComponent('img', {
+        src: uploadArrowImage,
+      });
+      expect(fileUpload).toContainReactComponent(TextStyle);
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'Button',
+      });
     });
 
     it('renders extra large view for type image', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{size: 'extraLarge', type: 'image', ...defaultStates}}
         >
           <FileUpload />
         </DropZoneContext.Provider>,
       );
 
-      expect(findByTestID(fileUpload, 'Button')).toHaveLength(1);
-      expect(fileUpload.find(TextStyle)).toHaveLength(1);
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'Button',
+      });
+      expect(fileUpload).toContainReactComponent(TextStyle);
     });
   });
 
   describe('large', () => {
     it('renders large view', () => {
-      const fileUpload = mountWithAppProvider(
+      const fileUpload = mountWithApp(
         <DropZoneContext.Provider
           value={{size: 'large', type: 'file', ...defaultStates}}
         >
           <FileUpload />
         </DropZoneContext.Provider>,
       );
 
-      expect(findByTestID(fileUpload, 'Button')).toHaveLength(1);
-      expect(fileUpload.find(TextStyle)).toHaveLength(1);
-      expect(fileUpload.find(Caption)).toHaveLength(1);
+      expect(fileUpload).toContainReactComponent(Caption);
+      expect(fileUpload).toContainReactComponent(TextStyle);
+
+      expect(fileUpload).toContainReactComponent('div', {
+        className: 'Button slim',
+      });
     });
   });
 
   it('renders medium view', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'medium', type: 'file', ...defaultStates}}
       >
         <FileUpload />
       </DropZoneContext.Provider>,
     );
 
-    expect(findByTestID(fileUpload, 'Link')).toHaveLength(1);
-    expect(fileUpload.find(Caption)).toHaveLength(1);
+    expect(fileUpload).toContainReactComponent('div', {
+      className: 'ActionTitle',
+    });
+    expect(fileUpload).toContainReactComponentTimes(Caption, 1);
   });
 
   it('renders small view', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'small', type: 'file', ...defaultStates}}
       >
         <FileUpload />
       </DropZoneContext.Provider>,
     );
 
-    expect(fileUpload.find('img')).toHaveLength(1);
+    expect(fileUpload).toContainReactComponentTimes('img', 1);
   });
 
   it('sets a default actionTitle if the prop is provided then removed', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'large', type: 'file', ...defaultStates}}
       >
@@ -120,11 +130,12 @@ describe('<FileUpload />', () => {
     );
 
     fileUpload.setProps({children: <FileUpload />});
-    expect(findByTestID(fileUpload, 'Button').text()).toBe('Add files');
+
+    expect(fileUpload).toContainReactText('Add files');
   });
 
   it('sets a default actionHint if the prop is provided then removed', () => {
-    const fileUpload = mountWithAppProvider(
+    const fileUpload = mountWithApp(
       <DropZoneContext.Provider
         value={{size: 'large', type: 'file', ...defaultStates}}
       >
@@ -133,7 +144,7 @@ describe('<FileUpload />', () => {
     );
 
     fileUpload.setProps({children: <FileUpload />});
-    expect(fileUpload.find(TextStyle).text()).toBe('or drop files to upload');
+    expect(fileUpload).toContainReactText('or drop files to upload');
   });
 
   it.each([

src/components/MessageIndicator/MessageIndicator.tsx

@@ -8,9 +8,7 @@ export interface MessageIndicatorProps {
 }
 
 export function MessageIndicator({children, active}: MessageIndicatorProps) {
-  const indicatorMarkup = active && (
-    <div testID="indicator" className={styles.MessageIndicator} />
-  );
+  const indicatorMarkup = active && <div className={styles.MessageIndicator} />;
 
   return (
     <div className={styles.MessageIndicatorWrapper}>

src/components/MessageIndicator/tests/MessageIndicator.test.tsx

@@ -1,32 +1,32 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, findByTestID} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {MessageIndicator} from '../MessageIndicator';
 
 describe('<Indicator />', () => {
   it('mounts', () => {
-    const indicator = mountWithAppProvider(<MessageIndicator />);
-    expect(indicator.exists()).toBe(true);
+    const indicator = mountWithApp(<MessageIndicator />);
+    expect(indicator).not.toBeNull();
   });
 
   it('renders its children', () => {
-    const indicator = mountWithAppProvider(
+    const indicator = mountWithApp(
       <MessageIndicator>
         <div>Hello Polaris</div>
       </MessageIndicator>,
     );
 
-    expect(indicator.text()).toContain('Hello Polaris');
+    expect(indicator).toContainReactText('Hello Polaris');
   });
 
   it('renders indicator markup when active is true', () => {
-    const indicator = mountWithAppProvider(
+    const indicator = mountWithApp(
       <MessageIndicator active>
         <div>Hello Polaris</div>
       </MessageIndicator>,
     );
-
-    expect(findByTestID(indicator, 'indicator').exists()).toBe(true);
+    expect(indicator).toContainReactComponent('div', {
+      className: 'MessageIndicator',
+    });
   });
 });