add more tests

Shopify · Oct 2, 2019 · bb6a66e · bb6a66e
1 parent a1abe22
commit bb6a66e
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 1 deletion.
diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx
@@ -7,11 +7,13 @@ import {
   TrapFocus,
   ContextualSaveBar as PolarisContextualSavebar,
   Loading as PolarisLoading,
+  Toast as PolarisToast,
 } from 'components';
 import {Frame} from '../Frame';
 import {
   ContextualSaveBar as FrameContextualSavebar,
   Loading as FrameLoading,
+  Toast as FrameToast,
 } from '../components';
 
 window.matchMedia =
@@ -123,6 +125,51 @@ describe('<Frame />', () => {
     expect(cssTransition.prop('in')).toBe(true);
   });
 
+  it('calls onNavigationDismiss on dismiss button click', () => {
+    const mockOnNavigationDismiss = jest.fn();
+    const navigation = <div />;
+    const cssTransition = mountWithAppProvider(
+      <Frame
+        navigation={navigation}
+        onNavigationDismiss={mockOnNavigationDismiss}
+      />,
+      {mediaQuery: {isNavigationCollapsed: true}},
+    )
+      .find(Frame)
+      .find(TrapFocus)
+      .find(CSSTransition);
+
+    cssTransition
+      .find('button')
+      .first()
+      .simulate('click');
+    animationFrame.runFrame();
+
+    expect(mockOnNavigationDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onNavigationDismiss on Escape keypress', () => {
+    const mockOnNavigationDismiss = jest.fn();
+    const navigation = <div />;
+    mountWithAppProvider(
+      <Frame
+        navigation={navigation}
+        onNavigationDismiss={mockOnNavigationDismiss}
+      />,
+      {mediaQuery: {isNavigationCollapsed: true}},
+    )
+      .find(Frame)
+      .find(TrapFocus)
+      .find(CSSTransition)
+      .find('div')
+      .first()
+      .simulate('keydown', {key: 'Escape'});
+
+    animationFrame.runFrame();
+
+    expect(mockOnNavigationDismiss).toHaveBeenCalledTimes(1);
+  });
+
   it('renders a skip to content link with the proper text', () => {
     const skipToContentLinkText = mountWithAppProvider(<Frame />)
       .find('a')
@@ -224,6 +271,20 @@ describe('<Frame />', () => {
     expect(frame.find(FrameContextualSavebar).exists()).toBe(true);
   });
 
+  // it('unmounts rendered Frame ContextualSavebar if Polaris ContextualSavebar is unmounted', () => {
+  //   const frame = mountWithAppProvider(
+  //     <Frame>
+  //       <PolarisContextualSavebar />
+  //     </Frame>,
+  //   );
+  //   expect(frame.find(FrameContextualSavebar).exists()).toBe(true);
+
+  //   frame.setProps({children: null});
+  //   frame.update();
+
+  //   expect(frame.find(FrameContextualSavebar).exists()).toBe(false);
+  // });
+
   it('renders a Frame Loading if Polaris Loading is rendered', () => {
     const frame = mountWithAppProvider(
       <Frame>
@@ -232,4 +293,63 @@ describe('<Frame />', () => {
     );
     expect(frame.find(FrameLoading).exists()).toBe(true);
   });
+
+  it('unmounts rendered Frame Loading if Polaris Loading is unmounted', () => {
+    const frame = mountWithAppProvider(
+      <Frame>
+        <PolarisLoading />
+      </Frame>,
+    );
+
+    expect(frame.find(FrameLoading).exists()).toBe(true);
+
+    frame.setProps({children: null});
+    frame.update();
+
+    expect(frame.find(FrameLoading).exists()).toBe(false);
+  });
+
+  it('renders a Frame Toast if Polaris Toast is rendered', () => {
+    const props = {content: 'Image uploaded', onDismiss: () => {}};
+    const frame = mountWithAppProvider(
+      <Frame>
+        <PolarisToast {...props} />
+      </Frame>,
+    );
+
+    expect(frame.find(FrameToast).exists()).toBe(true);
+  });
+
+  it('only renders a Frame Toast if two Polaris Toasts with same ID are rendered', () => {
+    const props = {
+      id: 'mock-id',
+      content: 'Image uploaded',
+      onDismiss: () => {},
+    };
+    const frame = mountWithAppProvider(
+      <Frame>
+        <PolarisToast {...props} />
+        <PolarisToast {...props} />
+      </Frame>,
+    );
+
+    expect(frame.find(FrameToast).exists()).toBe(true);
+    expect(frame.find(FrameToast)).toHaveLength(1);
+  });
+
+  // it('unmounts rendered Frame Toast if Polaris Toast is unmounted', () => {
+  //   const props = {content: 'Image uploaded', onDismiss: () => {}};
+  //   const frame = mountWithAppProvider(
+  //     <Frame>
+  //       <PolarisToast {...props} />
+  //     </Frame>,
+  //   );
+
+  //   expect(frame.find(FrameToast).exists()).toBe(true);
+
+  //   frame.setProps({children: null});
+  //   frame.update();
+
+  //   expect(frame.find(FrameToast).exists()).toBe(false);
+  // });
 });
diff --git a/src/utilities/tests/set-root-property.test.ts b/src/utilities/tests/set-root-property.test.ts
@@ -2,11 +2,15 @@ import {documentHasStyle} from 'test-utilities';
 import {setRootProperty} from '../set-root-property';
 
 describe('setRootProperty', () => {
+  it('sets styles on the document element', () => {
+    setRootProperty('color', 'red', null);
+    expect(documentHasStyle('color', 'red')).toBe(true);
+  });
   // JSDOM 11.12.0 does not support setting/reading custom properties so we are
   // unable to assert that we set a custom property
   // See https://github.com/jsdom/jsdom/issues/1895
   // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('sets styles on the document element', () => {
+  it.skip('sets custom styles on the document element', () => {
     setRootProperty('topBar', '#eee', null);
     expect(documentHasStyle('topBar', '#eee')).toBe(true);
   });