diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx
index 657dc05ac58..6d89e7ac6b0 100644
--- a/src/components/Frame/tests/Frame.test.tsx
+++ b/src/components/Frame/tests/Frame.test.tsx
@@ -7,11 +7,14 @@ 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,
+ ToastManager,
} from '../components';
window.matchMedia =
@@ -123,6 +126,52 @@ 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 = ;
+ const div = mountWithAppProvider(
+ ,
+ {mediaQuery: {isNavigationCollapsed: true}},
+ )
+ .find(Frame)
+ .find(TrapFocus)
+ .find(CSSTransition)
+ .find('div')
+ .first();
+
+ div.simulate('keydown', {key: 'Enter'});
+ expect(mockOnNavigationDismiss).toHaveBeenCalledTimes(0);
+
+ div.simulate('keydown', {key: 'Escape'});
+ expect(mockOnNavigationDismiss).toHaveBeenCalledTimes(1);
+ });
+
it('renders a skip to content link with the proper text', () => {
const skipToContentLinkText = mountWithAppProvider()
.find('a')
@@ -224,6 +273,20 @@ describe('', () => {
expect(frame.find(FrameContextualSavebar).exists()).toBe(true);
});
+ it("unmounts rendered Frame's 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('CSSAnimation.ContextualSaveBar').prop('in')).toBe(false);
+ });
+
it('renders a Frame Loading if Polaris Loading is rendered', () => {
const frame = mountWithAppProvider(
@@ -232,4 +295,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(ToastManager).prop('toastMessages')).toHaveLength(0);
+ });
});
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);
});