diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx index 657dc05ac58..2431b1ffd00 100644 --- 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('', () => { expect(cssTransition.prop('in')).toBe(true); }); + it('calls onNavigationDismiss on dismiss button click', () => { + const mockOnNavigationDismiss = jest.fn(); + const navigation =
; + const cssTransition = mountWithAppProvider( + , + {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 =
; + mountWithAppProvider( + , + {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() .find('a') @@ -224,6 +271,20 @@ describe('', () => { expect(frame.find(FrameContextualSavebar).exists()).toBe(true); }); + // it('unmounts rendered Frame ContextualSavebar if Polaris ContextualSavebar is unmounted', () => { + // const frame = mountWithAppProvider( + // + // + // , + // ); + // 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( @@ -232,4 +293,63 @@ describe('', () => { ); expect(frame.find(FrameLoading).exists()).toBe(true); }); + + it('unmounts rendered Frame Loading if Polaris Loading is unmounted', () => { + const frame = mountWithAppProvider( + + + , + ); + + 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( + + + , + ); + + 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( + + + + , + ); + + 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( + // + // + // , + // ); + + // 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 index e6cdde9e965..94a3863d018 100644 --- 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); });