add test coverage for mobile class names

Shopify · Mar 26, 2019 · 8a89e32 · 8a89e32
1 parent d43feb8
commit 8a89e32
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 28 deletions.
diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx
@@ -15,6 +15,20 @@ import EventListener from '../EventListener';
 
 import styles from './Sheet.scss';
 
+export const BOTTOM_CLASS_NAMES = {
+  enter: classNames(styles.Bottom, styles.enterBottom),
+  enterActive: classNames(styles.Bottom, styles.enterBottomActive),
+  exit: classNames(styles.Bottom, styles.exitBottom),
+  exitActive: classNames(styles.Bottom, styles.exitBottomActive),
+};
+
+export const RIGHT_CLASS_NAMES = {
+  enter: classNames(styles.Right, styles.enterRight),
+  enterActive: classNames(styles.Right, styles.enterRightActive),
+  exit: classNames(styles.Right, styles.exitRight),
+  exitActive: classNames(styles.Right, styles.exitRightActive),
+};
+
 export interface Props {
   open: boolean;
   children: React.ReactNode;
@@ -78,22 +92,8 @@ export default class Sheet extends React.PureComponent<Props, State> {
       unmountOnExit: true,
     };
 
-    const bottomClassNames = {
-      enter: classNames(styles.Bottom, styles.enterBottom),
-      enterActive: classNames(styles.Bottom, styles.enterBottomActive),
-      exit: classNames(styles.Bottom, styles.exitBottom),
-      exitActive: classNames(styles.Bottom, styles.exitBottomActive),
-    };
-
-    const rightClassNames = {
-      enter: classNames(styles.Right, styles.enterRight),
-      enterActive: classNames(styles.Right, styles.enterRightActive),
-      exit: classNames(styles.Right, styles.exitRight),
-      exitActive: classNames(styles.Right, styles.exitRightActive),
-    };
-
     const finalTransitionProps = {
-      classNames: mobile ? bottomClassNames : rightClassNames,
+      classNames: mobile ? BOTTOM_CLASS_NAMES : RIGHT_CLASS_NAMES,
       ...sharedTransitionProps,
     };
 

diff --git a/src/components/Sheet/tests/Sheet.test.tsx b/src/components/Sheet/tests/Sheet.test.tsx
@@ -1,19 +1,20 @@
 import * as React from 'react';
+
+import {CSSTransition} from 'react-transition-group';
 import {noop} from '@shopify/javascript-utilities/other';
+import {matchMedia} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'test-utilities';
-import Sheet from '../Sheet';
-
-window.matchMedia =
-  window.matchMedia ||
-  function() {
-    return {
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
+import Sheet, {isMobile, BOTTOM_CLASS_NAMES, RIGHT_CLASS_NAMES} from '../Sheet';
 
 describe('<Sheet />', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
   const mockProps = {
     open: true,
     onClose: noop,
@@ -22,10 +23,36 @@ describe('<Sheet />', () => {
   it('renders its children', () => {
     const children = <div>Content</div>;
 
-    const drawer = mountWithAppProvider(
+    const sheet = mountWithAppProvider(
       <Sheet {...mockProps}>{children}</Sheet>,
     );
 
-    expect(drawer.find(children)).not.toBeNull();
+    expect(sheet.find(children)).not.toBeNull();
+  });
+
+  it('renders a css transition component with bottom class names at mobile sizes', () => {
+    matchMedia.setMedia(() => ({matches: true}));
+
+    const sheet = mountWithAppProvider(
+      <Sheet {...mockProps}>
+        <div>Content</div>
+      </Sheet>,
+    );
+
+    expect(sheet.find(CSSTransition).props().classNames).toEqual(
+      BOTTOM_CLASS_NAMES,
+    );
+  });
+
+  it('renders a css transition component with right class names at desktop sizes', () => {
+    const sheet = mountWithAppProvider(
+      <Sheet {...mockProps}>
+        <div>Content</div>
+      </Sheet>,
+    );
+
+    expect(sheet.find(CSSTransition).props().classNames).toEqual(
+      RIGHT_CLASS_NAMES,
+    );
   });
 });