[Test Modernization]: Frame components

UNRELEASED.md

@@ -25,6 +25,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for AccountConnection, ActionList components([#4316](https://github.com/Shopify/polaris-react/pull/4316))
 - Modernized tests for ActionMenu and its subcomponents ([#4318](https://github.com/Shopify/polaris-react/pull/4318))
 - Modernized tests for Loading-List-Item-Label components([#4321](https://github.com/Shopify/polaris-react/pull/4321))
+- Modernizes test for DiscardConfirmationModal, ContextualSaveBar, Loading, Toast, ToastManager, Frame (from Frame components) ([#4324](https://github.com/Shopify/polaris-react/pull/4324))
 - Modernized tests for PageActions, Page and its components ([#4326](https://github.com/Shopify/polaris-react/pull/4326))
 - 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))

src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx

@@ -1,47 +1,54 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {Modal} from 'components';
 
 import {DiscardConfirmationModal} from '../DiscardConfirmationModal';
 
 describe('<DiscardConfirmationModal />', () => {
   it('passes its open prop value to the Modal', () => {
-    const discardConfirmationModalOpen = mountWithAppProvider(
+    const discardConfirmationModalOpen = mountWithApp(
       <DiscardConfirmationModal open onDiscard={noop} onCancel={noop} />,
     );
-    expect(discardConfirmationModalOpen.find(Modal).prop('open')).toBe(true);
+    expect(discardConfirmationModalOpen).toContainReactComponent(Modal, {
+      open: true,
+    });
 
-    const discardConfirmationModalClosed = mountWithAppProvider(
+    const discardConfirmationModalClosed = mountWithApp(
       <DiscardConfirmationModal
         open={false}
         onDiscard={noop}
         onCancel={noop}
       />,
     );
-    expect(discardConfirmationModalClosed.find(Modal).prop('open')).toBe(false);
+
+    expect(discardConfirmationModalClosed).toContainReactComponent(Modal, {
+      open: false,
+    });
   });
 
   it('calls onDiscard when primaryAction is triggered', () => {
     const spy = jest.fn();
-    const discardConfirmationModal = mountWithAppProvider(
+    const discardConfirmationModal = mountWithApp(
       <DiscardConfirmationModal open onDiscard={spy} onCancel={noop} />,
     );
 
-    trigger(discardConfirmationModal.find(Modal), 'primaryAction.onAction');
+    discardConfirmationModal
+      .find(Modal)
+      ?.triggerKeypath('primaryAction.onAction');
+
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('calls onCancel when secondaryAction is triggered', () => {
     const spy = jest.fn();
-    const discardConfirmationModal = mountWithAppProvider(
+    const discardConfirmationModal = mountWithApp(
       <DiscardConfirmationModal open onDiscard={noop} onCancel={spy} />,
     );
 
-    trigger(
-      discardConfirmationModal.find(Modal),
-      'secondaryActions.0.onAction',
-    );
+    discardConfirmationModal
+      .find(Modal)
+      ?.triggerKeypath('secondaryActions.0.onAction');
+
     expect(spy).toHaveBeenCalledTimes(1);
   });
 });

src/components/Frame/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {Button, Image, ThemeProvider} from 'components';
 import {mountWithApp} from 'test-utilities';
 
@@ -15,13 +13,14 @@ describe('<ContextualSaveBar />', () => {
         onAction: jest.fn(),
       };
 
-      const contextualSaveBar = mountWithAppProvider(
+      const contextualSaveBar = mountWithApp(
         <ContextualSaveBar discardAction={discardAction} />,
       );
 
-      const button = contextualSaveBar.find(Button);
-      expect(button.prop('onClick')).toBe(discardAction.onAction);
-      expect(button.prop('children')).toBe(discardAction.content);
+      expect(contextualSaveBar).toContainReactComponent(Button, {
+        onClick: discardAction.onAction,
+        children: discardAction.content,
+      });
     });
 
     describe('discardConfirmationModal is false', () => {
@@ -32,11 +31,11 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: false,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        contextualSaveBar.find(Button).simulate('click');
+        contextualSaveBar.find(Button)!.trigger('onClick');
         expect(discardAction.onAction).toHaveBeenCalled();
       });
 
@@ -47,12 +46,12 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: false,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        expect(contextualSaveBar.find(DiscardConfirmationModal)).toHaveLength(
-          0,
+        expect(contextualSaveBar).not.toContainReactComponent(
+          DiscardConfirmationModal,
         );
       });
     });
@@ -65,11 +64,11 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: true,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        contextualSaveBar.find(Button).simulate('click');
+        contextualSaveBar.find(Button)!.trigger('onClick');
         expect(discardAction.onAction).not.toHaveBeenCalled();
       });
 
@@ -80,11 +79,16 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: true,
         };
 
-        const discardConfirmationModal = mountWithAppProvider(
+        const discardConfirmationModal = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
-        ).find(DiscardConfirmationModal);
+        );
 
-        expect(discardConfirmationModal.prop('open')).toBe(false);
+        expect(discardConfirmationModal).toContainReactComponent(
+          DiscardConfirmationModal,
+          {
+            open: false,
+          },
+        );
       });
 
       it('sets the DiscardConfirmationModal `open` prop to true when the discard button is clicked', () => {
@@ -94,16 +98,17 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: true,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        contextualSaveBar.find(Button).simulate('click');
-        const discardConfirmationModal = contextualSaveBar.find(
+        contextualSaveBar.find(Button)!.trigger('onClick');
+        expect(contextualSaveBar).toContainReactComponent(
           DiscardConfirmationModal,
+          {
+            open: true,
+          },
         );
-        expect(discardConfirmationModal).toHaveLength(1);
-        expect(discardConfirmationModal.prop('open')).toBe(true);
       });
 
       it("sets the DiscardConfirmationModal `open` prop to false when it's `onCancel` handler is triggered", () => {
@@ -113,16 +118,20 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: true,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        const discardConfirmationModal = contextualSaveBar.find(
+        const modal = contextualSaveBar.find(DiscardConfirmationModal)!;
+        contextualSaveBar.find(Button)!.trigger('onClick');
+        modal!.trigger('onCancel');
+
+        expect(contextualSaveBar).toContainReactComponent(
           DiscardConfirmationModal,
+          {
+            open: false,
+          },
         );
-        trigger(discardConfirmationModal, 'onCancel');
-
-        expect(discardConfirmationModal.prop('open')).toBe(false);
       });
 
       it("calls the discardAction prop when it's `onDiscard` handler is triggered", () => {
@@ -132,17 +141,12 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: true,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        contextualSaveBar.find(Button).simulate('click');
-        const discardConfirmationModal = contextualSaveBar.find(
-          DiscardConfirmationModal,
-        );
-
-        trigger(discardConfirmationModal, 'onDiscard');
-
+        contextualSaveBar.find(Button)!.trigger('onClick');
+        contextualSaveBar.find(DiscardConfirmationModal)!.trigger('onDiscard');
         expect(discardAction.onAction).toHaveBeenCalled();
       });
 
@@ -153,16 +157,18 @@ describe('<ContextualSaveBar />', () => {
           discardConfirmationModal: true,
         };
 
-        const contextualSaveBar = mountWithAppProvider(
+        const contextualSaveBar = mountWithApp(
           <ContextualSaveBar discardAction={discardAction} />,
         );
 
-        const discardConfirmationModal = contextualSaveBar.find(
+        contextualSaveBar.find(DiscardConfirmationModal)!.trigger('onDiscard');
+
+        expect(contextualSaveBar).toContainReactComponent(
           DiscardConfirmationModal,
+          {
+            open: false,
+          },
         );
-        trigger(discardConfirmationModal, 'onDiscard');
-
-        expect(discardConfirmationModal.prop('open')).toBe(false);
       });
     });
   });
@@ -174,13 +180,14 @@ describe('<ContextualSaveBar />', () => {
         onAction: jest.fn(),
       };
 
-      const contextualSaveBar = mountWithAppProvider(
+      const contextualSaveBar = mountWithApp(
         <ContextualSaveBar saveAction={saveAction} />,
       );
 
-      const button = contextualSaveBar.find(Button);
-      expect(button.prop('onClick')).toBe(saveAction.onAction);
-      expect(button.prop('children')).toBe(saveAction.content);
+      expect(contextualSaveBar).toContainReactComponent(Button, {
+        children: saveAction.content,
+        onClick: saveAction.onAction,
+      });
     });
   });
 
@@ -190,75 +197,77 @@ describe('<ContextualSaveBar />', () => {
         onAction: jest.fn(),
       };
 
-      const contextualSaveBar = mountWithAppProvider(
+      const contextualSaveBar = mountWithApp(
         <ContextualSaveBar discardAction={discardAction} />,
       );
 
-      const discardButton = contextualSaveBar.find(Button);
-      expect(discardButton.text()).toBe('Discard');
+      expect(contextualSaveBar).toContainReactComponent(Button, {
+        children: 'Discard',
+      });
     });
 
     it('renders a save action with default text without content being provided', () => {
       const saveAction = {
         onAction: jest.fn(),
       };
 
-      const contextualSaveBar = mountWithAppProvider(
+      const contextualSaveBar = mountWithApp(
         <ContextualSaveBar saveAction={saveAction} />,
       );
 
-      const commitButton = contextualSaveBar.find(Button);
-      expect(commitButton.text()).toBe('Save');
+      expect(contextualSaveBar).toContainReactComponent(Button, {
+        children: 'Save',
+      });
     });
   });
 
   describe('logo', () => {
     it('will render an image with the contextual save bar source', () => {
-      const contextualSaveBar = mountWithAppProvider(<ContextualSaveBar />, {
+      const contextualSaveBar = mountWithApp(<ContextualSaveBar />, {
         theme: {
           logo: {
             width: 200,
             contextualSaveBarSource: './assets/monochrome_shopify.svg',
           },
         },
       });
-      expect(contextualSaveBar.find(Image).prop('source')).toBe(
-        './assets/monochrome_shopify.svg',
-      );
+
+      expect(contextualSaveBar).toContainReactComponent(Image, {
+        source: './assets/monochrome_shopify.svg',
+      });
     });
 
     it('will render an image with the width provided', () => {
-      const contextualSaveBar = mountWithAppProvider(<ContextualSaveBar />, {
+      const contextualSaveBar = mountWithApp(<ContextualSaveBar />, {
         theme: {
           logo: {
             width: 200,
             contextualSaveBarSource: './assets/monochrome_shopify.svg',
           },
         },
       });
-      expect(contextualSaveBar.find(Image).get(0).props.style).toHaveProperty(
-        'width',
-        '200px',
-      );
+      expect(contextualSaveBar).toContainReactComponent(Image, {
+        style: {width: '200px'},
+      });
     });
 
     it('will render the image with a default width if 0 is provided', () => {
-      const contextualSaveBar = mountWithAppProvider(<ContextualSaveBar />, {
+      const contextualSaveBar = mountWithApp(<ContextualSaveBar />, {
         theme: {
           logo: {
             contextualSaveBarSource: './assets/monochrome_shopify.svg',
             width: 0,
           },
         },
       });
-      expect(contextualSaveBar.find(Image).get(0).props.style).toHaveProperty(
-        'width',
-        '104px',
-      );
+
+      expect(contextualSaveBar).toContainReactComponent(Image, {
+        style: {width: '104px'},
+      });
     });
 
     it('will not render the logo when content is aligned flush left', () => {
-      const contextualSaveBar = mountWithAppProvider(
+      const contextualSaveBar = mountWithApp(
         <ContextualSaveBar alignContentFlush />,
         {
           theme: {
@@ -270,7 +279,7 @@ describe('<ContextualSaveBar />', () => {
         },
       );
 
-      expect(contextualSaveBar.find(Image).exists()).toBeFalsy();
+      expect(contextualSaveBar).not.toContainReactComponent(Image);
     });
   });