Shopify · rdott · Aug 25, 2021 · Aug 24, 2021
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -69,5 +69,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for MediaCard, and Layout components ([#4393](https://github.com/Shopify/polaris-react/pull/4393))
 - Modernized tests for Image and Icon components ([#4418](https://github.com/Shopify/polaris-react/pull/4418))
 - Modernized tests for EventListener and EmptySearch components([#4423](https://github.com/Shopify/polaris-react/pull/4423))
+- Modernized tests for Pane, Section, PositionedOverlay, SingleThumb, RangeSlider, and ConnectedFilter components ([#4429](https://github.com/Shopify/polaris-react/pull/4429))
 
 ### Deprecations
diff --git a/...omponents/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx b/...omponents/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import {Popover, Button} from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 
+import styles from '../ConnectedFilterControl.scss';
 import {
   ConnectedFilterControl,
   ConnectedFilterControlProps,
@@ -40,7 +39,7 @@ const mockRightAction = <Button onClick={noop}>Right Action</Button>;
 describe('<ConnectedFilterControl />', () => {
   it('mounts', () => {
     expect(() => {
-      mountWithAppProvider(
+      mountWithApp(
         <ConnectedFilterControl>
           <MockChild />
         </ConnectedFilterControl>,
@@ -49,27 +48,27 @@ describe('<ConnectedFilterControl />', () => {
   });
 
   it('does not render buttons without right actions or right popoverable actions', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl>
         <MockChild />
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Button).exists()).toBe(false);
+    expect(connectedFilterControl).not.toContainReactComponent(Button);
   });
 
   it('does not render popovers without right popoverable actions', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl>
         <MockChild />
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Popover).exists()).toBe(false);
+    expect(connectedFilterControl).not.toContainReactComponent(Popover);
   });
 
   it('always render a RightAction if forceShowMorefiltersButton is true', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl
         rightAction={mockRightAction}
         forceShowMorefiltersButton
@@ -78,11 +77,11 @@ describe('<ConnectedFilterControl />', () => {
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Button).exists()).toBe(true);
+    expect(connectedFilterControl).toContainReactComponent(Button);
   });
 
   it('renders a RightAction if forceShowMorefiltersButton is false and rightPopoverableActions do not fit on the "right action" container', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl
         rightAction={mockRightAction}
         rightPopoverableActions={[mockRightOpenPopoverableAction]}
@@ -92,11 +91,11 @@ describe('<ConnectedFilterControl />', () => {
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Button).exists()).toBe(true);
+    expect(connectedFilterControl).toContainReactComponent(Button);
   });
 
   it('does not render a RightAction there are no actions hidden', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl
         rightAction={mockRightAction}
         forceShowMorefiltersButton={false}
@@ -105,7 +104,7 @@ describe('<ConnectedFilterControl />', () => {
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Button).exists()).toBe(false);
+    expect(connectedFilterControl).not.toContainReactComponent(Button);
   });
 
   it('renders rightActionMarkup if rightAction is not null', () => {
@@ -139,19 +138,19 @@ describe('<ConnectedFilterControl />', () => {
   });
 
   it('does render a button with a popoverable action', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl
         rightPopoverableActions={[mockRightOpenPopoverableAction]}
       >
         <MockChild />
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Button)).toHaveLength(1);
+    expect(connectedFilterControl).toContainReactComponentTimes(Button, 1);
   });
 
   it('renders three buttons with two popoverable actions and a right action', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl
         rightPopoverableActions={[
           mockRightOpenPopoverableAction,
@@ -163,11 +162,11 @@ describe('<ConnectedFilterControl />', () => {
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(Button)).toHaveLength(3);
+    expect(connectedFilterControl).toContainReactComponentTimes(Button, 3);
   });
 
   it('hides an action if it does not fit', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl
         rightPopoverableActions={[
           mockRightOpenPopoverableAction,
@@ -179,19 +178,25 @@ describe('<ConnectedFilterControl />', () => {
       </ConnectedFilterControl>,
     );
 
-    connectedFilterControl.setState({availableWidth: 100});
+    connectedFilterControl.instance.setState({availableWidth: 100});
+
+    connectedFilterControl.forceUpdate();
 
-    expect(findActions(connectedFilterControl)).toHaveLength(2);
+    const wrapper = connectedFilterControl.find('div', {
+      className: styles.Wrapper,
+    })!;
+
+    expect(wrapper).toContainReactComponentTimes(Button, 2);
   });
 
   it('renders auxiliary content', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl auxiliary={<MockAux />}>
         <MockChild />
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find(MockAux).exists()).toBe(true);
+    expect(connectedFilterControl).toContainReactComponent(MockAux);
   });
 
   it('only disables activators of inactive rightPopoverableActions', () => {
@@ -234,27 +239,26 @@ describe('<ConnectedFilterControl />', () => {
   });
 
   it('does not render CenterContainer when no child element is "null"', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl>{null}</ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find('.CenterContainer')).toHaveLength(0);
+    expect(connectedFilterControl).not.toContainReactComponent('div', {
+      className: expect.stringContaining('CenterContainer'),
+    });
   });
 
   it('renders CenterContainer when no child element is not "null"', () => {
-    const connectedFilterControl = mountWithAppProvider(
+    const connectedFilterControl = mountWithApp(
       <ConnectedFilterControl>
         <MockChild />
       </ConnectedFilterControl>,
     );
 
-    expect(connectedFilterControl.find('.CenterContainer')).toHaveLength(1);
+    expect(connectedFilterControl).toContainReactComponentTimes('div', 1, {
+      className: expect.stringContaining('CenterContainer'),
+    });
   });
 });
 
 function noop() {}
-
-function findActions(wrapper: ReactWrapper) {
-  // this omits the invisible proxy actions used for measuring width
-  return wrapper.find('.Wrapper Button');
-}
diff --git a/src/components/Popover/components/Pane/tests/Pane.test.tsx b/src/components/Popover/components/Pane/tests/Pane.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {TextContainer, Scrollable} from 'components';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {Pane} from '../Pane';
 import {Section} from '../../Section';
@@ -15,13 +14,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane fixed>
           <Children />
         </Pane>,
       );
 
-      expect(popoverPane.find(Scrollable)).toHaveLength(0);
+      expect(popoverPane).not.toContainReactComponent(Scrollable);
     });
 
     it('renders content in a Scrollable when set to false', () => {
@@ -31,13 +30,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane fixed={false}>
           <Children />
         </Pane>,
       );
 
-      expect(popoverPane.find(Scrollable)).toHaveLength(1);
+      expect(popoverPane).toContainReactComponentTimes(Scrollable, 1);
     });
 
     it('renders content in a Scrollable when unset', () => {
@@ -47,13 +46,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane>
           <Children />
         </Pane>,
       );
 
-      expect(popoverPane.find(Scrollable)).toHaveLength(1);
+      expect(popoverPane).toContainReactComponentTimes(Scrollable, 1);
     });
   });
 
@@ -65,13 +64,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane sectioned>
           <Children />
         </Pane>,
       );
 
-      expect(popoverPane.find(Section)).toHaveLength(1);
+      expect(popoverPane).toContainReactComponentTimes(Section, 1);
     });
 
     it('does not render content in a Section when set to false', () => {
@@ -81,13 +80,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane sectioned={false}>
           <Children />
         </Pane>,
       );
 
-      expect(popoverPane.find(Section)).toHaveLength(0);
+      expect(popoverPane).not.toContainReactComponent(Section);
     });
 
     it('does not render content in a Section when unset', () => {
@@ -97,13 +96,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane>
           <Children />
         </Pane>,
       );
 
-      expect(popoverPane.find(Section)).toHaveLength(0);
+      expect(popoverPane).not.toContainReactComponent(Section);
     });
   });
 
@@ -116,13 +115,13 @@ describe('<Pane />', () => {
         </TextContainer>
       );
 
-      const popoverPane = mountWithAppProvider(
+      const popoverPane = mountWithApp(
         <Pane onScrolledToBottom={onScrolledToBottom}>
           <Children />
         </Pane>,
       );
 
-      trigger(popoverPane.find(Scrollable).first(), 'onScrolledToBottom');
+      popoverPane.find(Scrollable)!.trigger('onScrolledToBottom');
 
       expect(onScrolledToBottom).toHaveBeenCalled();
     });

diff --git a/src/components/Popover/components/Section/tests/Section.test.tsx b/src/components/Popover/components/Section/tests/Section.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/react-testing';
 import {TextContainer} from 'components';
 
 import {Section} from '../Section';
@@ -11,12 +10,15 @@ describe('<Section />', () => {
       <p>Content</p>
     </TextContainer>
   );
-  const section = mountWithAppProvider(<Section>{children}</Section>);
   it('renders its children', () => {
-    expect(section.contains(children)).toBe(true);
+    const section = mountWithApp(<Section>{children}</Section>);
+
+    expect(section.find(TextContainer)).toContainReactHtml('<p>Content</p>');
   });
 
   it('renders a div', () => {
-    expect(section.find('div').exists()).toBe(true);
+    const section = mountWithApp(<Section>{children}</Section>);
+
+    expect(section).toContainReactComponent('div');
   });
 });