[Test Modernization] - Scrollable, ScrollTo, ScrollLock, Select, SettingToggle, Sheet, Spinner, and Sticky components

UNRELEASED.md

@@ -52,5 +52,6 @@ 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 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))
 
 ### Deprecations

src/components/ScrollLock/tests/ScrollLock.test.tsx

@@ -1,6 +1,5 @@
 import React, {useState, useCallback} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {SCROLL_LOCKING_ATTRIBUTE} from '../../../utilities/scroll-lock-manager';
 import {ScrollLock} from '../ScrollLock';
@@ -19,7 +18,6 @@ describe('ScrollLock', () => {
   it('does not remove the data attribute from the body when two scrolllocks are mounted and one unmounts', () => {
     function DummyFrame() {
       const [showScrollLock, setScrollLock] = useState(true);
-
       const setScollLockFalse = useCallback(() => setScrollLock(false), []);
 
       const scrollLockMarkup = showScrollLock ? <ScrollLock /> : null;
@@ -33,24 +31,23 @@ describe('ScrollLock', () => {
       );
     }
 
-    const scrollLockContainer = mountWithAppProvider(<DummyFrame />);
-
-    scrollLockContainer.find('button').simulate('click');
+    const scrollLockContainer = mountWithApp(<DummyFrame />);
+    scrollLockContainer.find('button')!.trigger('onClick');
 
     expect(document.body.hasAttribute(`${SCROLL_LOCKING_ATTRIBUTE}`)).toBe(
       true,
     );
   });
 
   it('adds data attribute to the body when it mounts', () => {
-    mountWithAppProvider(<ScrollLock />);
+    mountWithApp(<ScrollLock />);
     expect(document.body.hasAttribute(`${SCROLL_LOCKING_ATTRIBUTE}`)).toBe(
       true,
     );
   });
 
   it('removes data attribute from the body when it unmounts', () => {
-    const scrollLock = mountWithAppProvider(<ScrollLock />);
+    const scrollLock = mountWithApp(<ScrollLock />);
     scrollLock.unmount();
     expect(document.body.hasAttribute(`${SCROLL_LOCKING_ATTRIBUTE}`)).toBe(
       false,

src/components/Scrollable/components/ScrollTo/tests/ScrollTo.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 {ScrollTo} from '../ScrollTo';
 import {ScrollableContext} from '../../../context';
@@ -9,7 +8,7 @@ describe('<Scrollable.ScrollTo />', () => {
   it('calls scrollToPosition on mount', () => {
     const spy = jest.fn();
 
-    mountWithAppProvider(
+    mountWithApp(
       <ScrollableContext.Provider value={spy}>
         <ScrollTo />
       </ScrollableContext.Provider>,
@@ -20,7 +19,7 @@ describe('<Scrollable.ScrollTo />', () => {
 
   it("does not call scrollToPosition when it's undefined", () => {
     function fn() {
-      mountWithAppProvider(
+      mountWithApp(
         <ScrollableContext.Provider value={undefined}>
           <ScrollTo />
         </ScrollableContext.Provider>,

src/components/Scrollable/tests/Scrollable.test.tsx

@@ -1,19 +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 {Scrollable} from '../Scrollable';
 import {ScrollableContext} from '../context';
 
 describe('<Scrollable />', () => {
   it('mounts', () => {
-    const scrollable = mountWithAppProvider(<Scrollable />);
+    const scrollable = mountWithApp(<Scrollable />);
     expect(scrollable).toBeTruthy();
   });
 
   it('unmounts', () => {
-    const scrollable = mountWithAppProvider(<Scrollable />);
+    const scrollable = mountWithApp(<Scrollable />);
     expect(() => {
       scrollable.unmount();
     }).not.toThrow();
@@ -26,41 +24,39 @@ describe('<Scrollable />', () => {
         of Shopify Inc.
       </p>
     );
-    const scrollable = mountWithAppProvider(
-      <Scrollable>{children}</Scrollable>,
-    );
-    expect(scrollable.contains(children)).toBe(true);
+    const scrollable = mountWithApp(<Scrollable>{children}</Scrollable>);
+    expect(scrollable).toContainReactComponent('div', {children});
   });
 
   it('provides scrollToPosition callback to children', () => {
-    const Child: React.SFC = (_) => (
+    const Child: React.FunctionComponent = (_) => (
       <ScrollableContext.Consumer>
         {(scrollToPosition) => {
           return scrollToPosition ? <div /> : null;
         }}
       </ScrollableContext.Consumer>
     );
 
-    const scrollableContainer = mountWithAppProvider(
+    const scrollableContainer = mountWithApp(
       <ScrollableContext.Provider value={() => {}}>
         <Scrollable>
           <Child />
         </Scrollable>
       </ScrollableContext.Provider>,
     );
 
-    const div = scrollableContainer.find(Child).find('div').first();
-    expect(div.exists()).toBe(true);
+    const scrollChild = scrollableContainer.find(Child)!;
+    expect(scrollChild).toContainReactComponent('div');
   });
 
   it('allows children to receive scroll events', () => {
     const spy = jest.fn();
-    const scrollArea = mountWithAppProvider(
+    const scrollArea = mountWithApp(
       <Scrollable>
-        <div id="scrollContents" onScroll={spy} />
+        <div onScroll={spy} />
       </Scrollable>,
     );
-    scrollArea.find('#scrollContents').simulate('scroll');
+    scrollArea.find('div', {onScroll: spy})!.trigger('onScroll');
     expect(spy).toHaveBeenCalledTimes(1);
   });