Add some tests

src/components/AppProvider/tests/AppProvider.test.tsx

@@ -1,6 +1,8 @@
 import React, {useContext} from 'react';
 import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities/react-testing';
+import {MediaQueryProvider} from 'components/MediaQueryProvider';
 import {LinkContext} from '../../../utilities/link';
 import {AppProvider} from '../AppProvider';
 
@@ -31,4 +33,13 @@ describe('<AppProvider />', () => {
     wrapper.update();
     expect(wrapper.find('#child')).toHaveLength(1);
   });
+
+  it('renders a MediaProvider', () => {
+    const appProvider = mountWithApp(
+      <AppProvider i18n={{}}>
+        <div>Child</div>
+      </AppProvider>,
+    );
+    expect(appProvider).toContainReactComponent(MediaQueryProvider);
+  });
 });

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

@@ -54,16 +54,10 @@ describe('<Frame />', () => {
   });
 
   it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on small screens and showMobileNavigation is false', () => {
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      writable: true,
-      value: 500,
-    });
-
     const navigation = <div />;
-    const frame = mountWithAppProvider(<Frame navigation={navigation} />).find(
-      Frame,
-    );
+    const frame = mountWithAppProvider(<Frame navigation={navigation} />, {
+      mediaQuery: {isNavigationCollapsed: false},
+    }).find(Frame);
 
     const trapFocus = frame.find(TrapFocus);
     expect(trapFocus.exists()).toBe(true);

src/components/MediaQueryProvider/tests/MediaQueryProvider.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {matchMedia} from '@shopify/jest-dom-mocks';
+import {act} from 'react-dom/test-utils';
+import {mountWithApp} from 'test-utilities';
+import {EventListener} from 'components';
+import {MediaQueryProvider} from '../MediaQueryProvider';
+import {useMediaQuery} from '../../../utilities/media-query';
+
+describe('MediaQueryProvider', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
+  it('renders EventListener with the resize event', () => {
+    const mediaQueryProvider = mountWithApp(<MediaQueryProvider />);
+    expect(mediaQueryProvider).toContainReactComponentTimes(EventListener, 1, {
+      event: 'resize',
+    });
+  });
+
+  it('passes isNavigationCollapsed to MediaQueryContext.Provider', () => {
+    function Component() {
+      const mediaQuery = useMediaQuery();
+      // eslint-disable-next-line shopify/jest/no-if
+      return mediaQuery !== undefined ? <div /> : null;
+    }
+
+    const mediaQueryProvider = mountWithApp(
+      <MediaQueryProvider>
+        <Component />
+      </MediaQueryProvider>,
+    );
+    expect(mediaQueryProvider).toContainReactComponentTimes('div', 1);
+  });
+
+  it('sets isNavigationCollapsed when resize occurs', () => {
+    function Component() {
+      const {isNavigationCollapsed} = useMediaQuery();
+      // eslint-disable-next-line shopify/jest/no-if
+      return isNavigationCollapsed ? <div>content</div> : null;
+    }
+    const mediaQueryProvider = mountWithApp(
+      <MediaQueryProvider>
+        <Component />
+      </MediaQueryProvider>,
+    );
+
+    matchMedia.setMedia(() => ({matches: true}));
+
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    mediaQueryProvider.forceUpdate();
+    expect(mediaQueryProvider).toContainReactComponentTimes('div', 1);
+  });
+});

src/components/Page/tests/Page.test.tsx

@@ -20,8 +20,6 @@ window.matchMedia =
     };
   };
 
-const defaultWindowWidth = window.innerWidth;
-
 jest.mock('../../../utilities/app-bridge-transformers', () => ({
   ...require.requireActual('../../../utilities/app-bridge-transformers'),
   generateRedirect: jest.fn((...args) => args),
@@ -57,11 +55,6 @@ describe('<Page />', () => {
 
   afterEach(() => {
     animationFrame.restore();
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      writable: true,
-      value: defaultWindowWidth,
-    });
   });
 
   describe('forceRender renders children in page', () => {

src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {mount} from '@shopify/react-testing';
+import {mount, mountWithApp} from 'test-utilities';
+import {MediaQueryContext, useMediaQuery} from 'utilities/media-query';
 import {PolarisTestProvider} from '../PolarisTestProvider';
 
 describe('PolarisTestProvider', () => {
@@ -22,4 +23,34 @@ describe('PolarisTestProvider', () => {
 
     expect(polarisTestProvider).toContainReactComponent(React.StrictMode);
   });
+
+  describe('MediaQueryContext', () => {
+    it('contains a MediaQueryContext provider', () => {
+      const polarisTestProvider = mountWithApp(
+        <PolarisTestProvider>
+          <div>Children</div>
+        </PolarisTestProvider>,
+      );
+
+      expect(polarisTestProvider).toContainReactComponent(
+        MediaQueryContext.Provider,
+      );
+    });
+
+    it('allows isNavigationCollapsed to be overwritten', () => {
+      function Component() {
+        const {isNavigationCollapsed} = useMediaQuery();
+        // eslint-disable-next-line shopify/jest/no-if
+        return isNavigationCollapsed ? <div /> : null;
+      }
+
+      const polarisTestProvider = mountWithApp(
+        <PolarisTestProvider mediaQuery={{isNavigationCollapsed: true}}>
+          <Component />
+        </PolarisTestProvider>,
+      );
+
+      expect(polarisTestProvider).toContainReactComponentTimes('div', 1);
+    });
+  });
 });

src/components/Sheet/tests/Sheet.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {CSSTransition} from '@material-ui/react-transition-group';
-// import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
 import {Backdrop} from 'components/Backdrop';

src/utilities/media-query/tests/hooks.test.tsx

@@ -0,0 +1,32 @@
+import React, {useContext} from 'react';
+import {mount, mountWithApp} from 'test-utilities';
+import {useMediaQuery} from '../hooks';
+import {MediaQueryContext} from '../context';
+
+let consoleErrorSpy: jest.SpyInstance;
+
+function Component() {
+  return useMediaQuery() === useContext(MediaQueryContext) ? <div /> : null;
+}
+
+describe('useMediaQuery', () => {
+  beforeEach(() => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('returns context', () => {
+    const component = mountWithApp(<Component />);
+    expect(component).toContainReactComponent('div');
+  });
+
+  it('throws an error if context is not set', () => {
+    const attemptMount = () => mount(<Component />);
+    expect(attemptMount).toThrow(
+      'No mediaQuery was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.',
+    );
+  });
+});