[Test modernization] Konami, Labelled, Link

UNRELEASED.md

@@ -45,9 +45,9 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for FormLayout and some components of ColorPicker ([#4330](https://github.com/Shopify/polaris-react/pull/4330))
 - Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components([#4315](https://github.com/Shopify/polaris-react/pull/4315))
 - Modernized tests for DualThumb ([#4341](https://github.com/Shopify/polaris-react/pull/4341))
-- Modernized tests for AppProvider, AfterInitialMount components([#4315](https://github.com/Shopify/polaris-react/pull/4331))
+- 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 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))
 
 ### Deprecations

src/components/KonamiCode/tests/KonamiCode.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {clock} from '@shopify/jest-dom-mocks';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {KonamiCode, KONAMI_CODE} from '../KonamiCode';
 
@@ -20,7 +19,7 @@ describe('<KonamiCode />', () => {
   it('calls the handler when the Konami Code is entered', () => {
     const spy = jest.fn();
 
-    mountWithAppProvider(<KonamiCode handler={spy} />);
+    mountWithApp(<KonamiCode handler={spy} />);
     simulateKeySequence(KONAMI_CODE);
 
     expect(spy).toHaveBeenCalledTimes(1);
@@ -30,7 +29,7 @@ describe('<KonamiCode />', () => {
     const spy = jest.fn();
     const reverseKonamiCode = [...KONAMI_CODE].reverse();
 
-    mountWithAppProvider(<KonamiCode handler={spy} />);
+    mountWithApp(<KonamiCode handler={spy} />);
     simulateKeySequence(reverseKonamiCode);
 
     expect(spy).toHaveBeenCalledTimes(0);
@@ -39,7 +38,7 @@ describe('<KonamiCode />', () => {
   it('removes Konami Code listener on unmount', () => {
     const spy = jest.fn();
 
-    mountWithAppProvider(<KonamiCode handler={spy} />).unmount();
+    mountWithApp(<KonamiCode handler={spy} />).unmount();
     simulateKeySequence(KONAMI_CODE);
 
     expect(spy).toHaveBeenCalledTimes(0);

src/components/Labelled/tests/Labelled.test.tsx

@@ -1,50 +1,49 @@
 import React from 'react';
-import {InlineError, Label, buttonFrom, Labelled} from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {InlineError, Label, Labelled} from 'components';
+import {mountWithApp} from 'test-utilities';
+import {Button} from 'components/Button';
 
 describe('<Labelled />', () => {
   it('passes relevant props along to the label', () => {
     const action = {content: 'Do something'};
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Labelled id="my-label" action={action} label="Label" />,
     );
-    const label = element.find(Label);
 
-    expect(label.prop('id')).toBe('my-label');
-    expect(label.prop('children')).toBe('Label');
+    expect(element).toContainReactComponent(Label, {
+      id: 'my-label',
+      children: 'Label',
+    });
   });
 
   it('passes required indicator prop along to the label', () => {
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Labelled id="my-label" label="Label" requiredIndicator />,
     );
-    const label = element.find(Label);
 
-    expect(label.prop('requiredIndicator')).toBe(true);
+    expect(element).toContainReactComponent(Label, {requiredIndicator: true});
   });
 
   describe('error', () => {
     it('renders error markup when provided with a value', () => {
-      const label = mountWithAppProvider(
+      const label = mountWithApp(
         <Labelled id="MyLabelled" label="Label" error="Error message" />,
       );
 
-      const error = label.find(InlineError);
-      expect(error).toHaveLength(1);
-      expect(error.text()).toContain('Error message');
+      expect(label).toContainReactComponentTimes(InlineError, 1);
+      expect(label).toContainReactText('Error message');
     });
 
     it('renders no error markup when provided with a boolean value', () => {
-      const label = mountWithAppProvider(
+      const label = mountWithApp(
         <Labelled
           id="MyLabelled"
           label="Label"
           error={Boolean('Error message')}
         />,
       );
 
-      expect(label.find(InlineError)).toHaveLength(0);
+      expect(label).not.toContainReactComponent(InlineError);
     });
   });
 
@@ -53,12 +52,12 @@ describe('<Labelled />', () => {
       return <div />;
     }
 
-    const element = mountWithAppProvider(
+    const element = mountWithApp(
       <Labelled id="MyLabelled" label="Label">
         <MyComponent />
       </Labelled>,
     );
-    expect(element.find(MyComponent).exists()).toBe(true);
+    expect(element).toContainReactComponent(MyComponent);
   });
 
   describe('action', () => {
@@ -71,22 +70,22 @@ describe('<Labelled />', () => {
         accessibilityLabel: 'My action with more description',
       };
 
-      const label = mountWithAppProvider(
+      const label = mountWithApp(
         <Labelled id="MyLabelled" label="Label" action={action} />,
       );
-      const button = buttonFrom(action, {plain: true});
-      expect(label.containsMatchingElement(button)).toBe(true);
+
+      expect(label).toContainReactComponent(Button, {plain: true});
     });
 
     it('does not render any block-level elements in the label element', () => {
-      const label = mountWithAppProvider(
+      const label = mountWithApp(
         <Labelled
           id="MyThing"
           action={{content: 'My action'}}
           label="My thing"
         />,
       );
-      expect(label.find('label').find('div')).toHaveLength(0);
+      expect(label.find('label')).not.toContainReactComponent('div');
     });
   });
 });

src/components/Link/tests/Link.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 {Banner, UnstyledLink, Icon} from 'components';
 
@@ -10,106 +8,109 @@ import {Link} from '../Link';
 describe('<Link />', () => {
   it('calls onClick when clicking', () => {
     const spy = jest.fn();
-    const link = mountWithAppProvider(<Link url="MyThing" onClick={spy} />);
-    link.find('a').simulate('click');
+    const link = mountWithApp(<Link url="MyThing" onClick={spy} />);
+    link.find('a')!.trigger('onClick');
     expect(spy).toHaveBeenCalled();
   });
 
   it('renders a button if no url is provided', () => {
-    const link = mountWithAppProvider(<Link />);
-    const button = link.find('button').first();
-    expect(button.exists()).toBe(true);
+    const link = mountWithApp(<Link />);
+    expect(link).toContainReactComponentTimes('button', 1);
   });
 
   it('renders an anchor if a url is provided', () => {
-    const link = mountWithAppProvider(<Link url="MyThing" />);
-    const anchor = link.find(UnstyledLink).first();
-    expect(anchor.exists()).toBe(true);
+    const link = mountWithApp(<Link url="MyThing" />);
+    expect(link).toContainReactComponentTimes('a', 1);
   });
 
   describe('id', () => {
     it('is passed down to an underlying button', () => {
       const id = 'MyID';
-      const link = mountWithAppProvider(<Link id={id} />);
-      expect(link.find('button').prop('id')).toBe(id);
+      const link = mountWithApp(<Link id={id} />);
+      expect(link).toContainReactComponent('button', {id});
     });
 
     it('is passed down to an underlying UnstyledLink', () => {
       const id = 'MyID';
-      const link = mountWithAppProvider(
-        <Link url="https://shopify.com" id={id} />,
-      );
-      expect(link.find(UnstyledLink).prop('id')).toBe(id);
+      const link = mountWithApp(<Link url="https://shopify.com" id={id} />);
+      expect(link).toContainReactComponent(UnstyledLink, {id});
     });
   });
 
   describe('external link', () => {
     it('has a trailing icon', () => {
-      const link = mountWithAppProvider(
+      const link = mountWithApp(
         <Link url="https://help.shopify.com/" external>
           Shopify Help Center
         </Link>,
       );
-      expect(link.children().last().find(Icon).exists()).toBe(true);
+      expect(link).toContainReactComponent(Icon);
     });
 
     it('informs screen readers that it opens in a new window', () => {
-      const link = mountWithAppProvider(
+      const link = mountWithApp(
         <Link url="https://help.shopify.com/" external>
           Shopify Help Center
         </Link>,
       );
       const hintText = en.Polaris.Common.newWindowAccessibilityHint;
-      expect(link.children().last().find(Icon).prop('accessibilityLabel')).toBe(
-        hintText,
-      );
+
+      expect(link).toContainReactComponent(Icon, {
+        accessibilityLabel: hintText,
+      });
     });
 
     it('doesn’t have a trailing icon for non-string children', () => {
-      const link = mountWithAppProvider(
+      const link = mountWithApp(
         <Link url="https://help.shopify.com/" external>
           <span>Shopify Help Center</span>
         </Link>,
       );
-      expect(link.find(Icon).exists()).toBe(false);
+      expect(link).not.toContainReactComponent(Icon);
     });
   });
 
   describe('monochrome link', () => {
     it('outputs a monochrome unstyled link if rendered within a banner', () => {
-      const link = mountWithAppProvider(
+      const link = mountWithApp(
         <Banner>
           <Link url="https://examp.le">Some content</Link>
         </Banner>,
-      ).find(UnstyledLink);
+      );
 
-      expect(link.hasClass('monochrome')).toBe(true);
+      expect(link).toContainReactComponent(UnstyledLink, {
+        className: expect.stringContaining('monochrome'),
+      });
     });
 
     it('does not output a monochrome unstyled link if it is not rendered within a banner', () => {
-      const link = mountWithAppProvider(
+      const link = mountWithApp(
         <Link url="https://examp.le">Some content</Link>,
-      ).find(UnstyledLink);
+      );
 
-      expect(link.hasClass('monochrome')).toBe(false);
+      expect(link).not.toContainReactComponent(UnstyledLink, {
+        className: expect.stringContaining('monochrome'),
+      });
     });
 
     it('outputs a monochrome button if rendered within a banner', () => {
-      const button = mountWithAppProvider(
+      const button = mountWithApp(
         <Banner>
           <Link>Some content</Link>
         </Banner>,
-      ).find('button');
+      );
 
-      expect(button.hasClass('monochrome')).toBe(true);
+      expect(button).toContainReactComponent('button', {
+        className: expect.stringContaining('monochrome'),
+      });
     });
 
     it('does not output a monochrome button if it is not rendered within a banner', () => {
-      const button = mountWithAppProvider(<Link>Some content</Link>).find(
-        'button',
-      );
+      const button = mountWithApp(<Link>Some content</Link>);
 
-      expect(button.hasClass('monochrome')).toBe(false);
+      expect(button).not.toContainReactComponent('button', {
+        className: expect.stringContaining('monochrome'),
+      });
     });
   });
 
@@ -143,9 +144,11 @@ describe('<Link />', () => {
 
   describe('removesUnderline', () => {
     it('adds removeUnderline class to the link', () => {
-      const link = mountWithAppProvider(<Link removeUnderline>Test</Link>);
+      const link = mountWithApp(<Link removeUnderline>Test</Link>);
 
-      expect(link.find('button').hasClass('removeUnderline')).toBe(true);
+      expect(link).toContainReactComponent('button', {
+        className: expect.stringContaining('removeUnderline'),
+      });
     });
   });
 });