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

Co-Authored-By: Andrew Musgrave <andrew.musgrave@shopify.com>
Shopify · Jan 9, 2020 · c89d7e6 · c89d7e6
1 parent 7bf3d14
commit c89d7e6
Showing 1 changed file with 18 additions and 21 deletions.
diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
-import {CSSTransition} from '@material-ui/react-transition-group';
-import {animationFrame} from '@shopify/jest-dom-mocks';
-import {documentHasStyle, mountWithApp} from 'test-utilities';
+import { CSSTransition } from '@material-ui/react-transition-group';
+import { animationFrame } from '@shopify/jest-dom-mocks';
+import { documentHasStyle, mountWithApp } from 'test-utilities';
 // eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
+import { mountWithAppProvider, trigger } from 'test-utilities/legacy';
 import {
   TrapFocus,
   ContextualSaveBar as PolarisContextualSavebar,
   Loading as PolarisLoading,
 } from 'components';
-import Frame, {FrameProps} from '../Frame';
+import Frame from '../Frame';
 import {
   ContextualSaveBar as FrameContextualSavebar,
   Loading as FrameLoading,
 } from '../components';
 
 window.matchMedia =
   window.matchMedia ||
-  function() {
+  function () {
     return {
       matches: window.innerWidth <= 769,
-      addListener() {},
-      removeListener() {},
+      addListener() { },
+      removeListener() { },
     };
   };
 
@@ -103,7 +103,7 @@ describe('<Frame />', () => {
       const navigation = <div />;
       const frame = mountWithAppProvider(
         <Frame showMobileNavigation navigation={navigation} />,
-        {mediaQuery: {isNavigationCollapsed: true}},
+        { mediaQuery: { isNavigationCollapsed: true } },
       ).find(Frame);
 
       const trapFocus = frame.find(TrapFocus);
@@ -115,7 +115,7 @@ describe('<Frame />', () => {
     it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on small screens and showMobileNavigation is false', () => {
       const navigation = <div />;
       const frame = mountWithAppProvider(<Frame navigation={navigation} />, {
-        mediaQuery: {isNavigationCollapsed: true},
+        mediaQuery: { isNavigationCollapsed: true },
       }).find(Frame);
 
       const trapFocus = frame.find(TrapFocus);
@@ -137,7 +137,7 @@ describe('<Frame />', () => {
       const navigation = <div />;
       const cssTransition = mountWithAppProvider(
         <Frame showMobileNavigation navigation={navigation} />,
-        {mediaQuery: {isNavigationCollapsed: true}},
+        { mediaQuery: { isNavigationCollapsed: true } },
       )
         .find(TrapFocus)
         .find(CSSTransition);
@@ -199,10 +199,9 @@ describe('<Frame />', () => {
         <Frame navigation={<div />} onNavigationDismiss={spy} />,
       );
       frame
-        .find('div', {id: 'AppFrameNav'})!
-        .trigger('onKeyDown', {key: 'Escape'});
+        .find('div', { id: 'AppFrameNav' })!
+        .trigger('onKeyDown', { key: 'Escape' });
 
-      const {onNavigationDismiss} = frame.props as FrameProps;
 
       expect(spy).not.toHaveBeenCalled();
     });
@@ -215,15 +214,13 @@ describe('<Frame />', () => {
           showMobileNavigation
           onNavigationDismiss={spy}
         />,
-        {mediaQuery: {isNavigationCollapsed: true}},
+        { mediaQuery: { isNavigationCollapsed: true } },
       );
       frame
-        .find('div', {id: 'AppFrameNav'})!
-        .trigger('onKeyDown', {key: 'Escape'});
+        .find('div', { id: 'AppFrameNav' })!
+        .trigger('onKeyDown', { key: 'Escape' });
 
-      const {onNavigationDismiss} = frame.props as FrameProps;
-
-      expect(onNavigationDismiss).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -243,7 +240,7 @@ describe('<Frame />', () => {
     // eslint-disable-next-line jest/no-disabled-tests
     it.skip('sets a root property with global ribbon height if new props are passed', () => {
       const frame = mountWithAppProvider(<Frame />);
-      frame.setProps({globalRibbon: <div />});
+      frame.setProps({ globalRibbon: <div /> });
       expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
     });