diff --git a/UNRELEASED.md b/UNRELEASED.md index 9fd49f30fd7..93f2b271050 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -25,6 +25,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for AccountConnection, ActionList components([#4316](https://github.com/Shopify/polaris-react/pull/4316)) - Modernized tests for ActionMenu and its subcomponents ([#4318](https://github.com/Shopify/polaris-react/pull/4318)) - Modernized tests for Loading-List-Item-Label components([#4321](https://github.com/Shopify/polaris-react/pull/4321)) +- Modernizes test for DiscardConfirmationModal, ContextualSaveBar, Loading, Toast, ToastManager, Frame (from Frame components) ([#4324](https://github.com/Shopify/polaris-react/pull/4324)) - Modernized tests for PageActions, Page and its components ([#4326](https://github.com/Shopify/polaris-react/pull/4326)) - Modernized tests for FormLayout and some components of ColorPicker ([#4330](https://github.com/Shopify/polaris-react/pull/4330)) - Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components([#4315](https://github.com/Shopify/polaris-react/pull/4315)) diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx index 69f11126289..bdaf76c5fec 100644 --- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx +++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx @@ -1,47 +1,54 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Modal} from 'components'; import {DiscardConfirmationModal} from '../DiscardConfirmationModal'; describe('', () => { it('passes its open prop value to the Modal', () => { - const discardConfirmationModalOpen = mountWithAppProvider( + const discardConfirmationModalOpen = mountWithApp( , ); - expect(discardConfirmationModalOpen.find(Modal).prop('open')).toBe(true); + expect(discardConfirmationModalOpen).toContainReactComponent(Modal, { + open: true, + }); - const discardConfirmationModalClosed = mountWithAppProvider( + const discardConfirmationModalClosed = mountWithApp( , ); - expect(discardConfirmationModalClosed.find(Modal).prop('open')).toBe(false); + + expect(discardConfirmationModalClosed).toContainReactComponent(Modal, { + open: false, + }); }); it('calls onDiscard when primaryAction is triggered', () => { const spy = jest.fn(); - const discardConfirmationModal = mountWithAppProvider( + const discardConfirmationModal = mountWithApp( , ); - trigger(discardConfirmationModal.find(Modal), 'primaryAction.onAction'); + discardConfirmationModal + .find(Modal) + ?.triggerKeypath('primaryAction.onAction'); + expect(spy).toHaveBeenCalledTimes(1); }); it('calls onCancel when secondaryAction is triggered', () => { const spy = jest.fn(); - const discardConfirmationModal = mountWithAppProvider( + const discardConfirmationModal = mountWithApp( , ); - trigger( - discardConfirmationModal.find(Modal), - 'secondaryActions.0.onAction', - ); + discardConfirmationModal + .find(Modal) + ?.triggerKeypath('secondaryActions.0.onAction'); + expect(spy).toHaveBeenCalledTimes(1); }); }); diff --git a/src/components/Frame/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx b/src/components/Frame/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx index 1b98a9c20c2..690d597891b 100644 --- a/src/components/Frame/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx +++ b/src/components/Frame/components/ContextualSaveBar/tests/ContextualSaveBar.test.tsx @@ -1,6 +1,4 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {Button, Image, ThemeProvider} from 'components'; import {mountWithApp} from 'test-utilities'; @@ -15,13 +13,14 @@ describe('', () => { onAction: jest.fn(), }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - const button = contextualSaveBar.find(Button); - expect(button.prop('onClick')).toBe(discardAction.onAction); - expect(button.prop('children')).toBe(discardAction.content); + expect(contextualSaveBar).toContainReactComponent(Button, { + onClick: discardAction.onAction, + children: discardAction.content, + }); }); describe('discardConfirmationModal is false', () => { @@ -32,11 +31,11 @@ describe('', () => { discardConfirmationModal: false, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - contextualSaveBar.find(Button).simulate('click'); + contextualSaveBar.find(Button)!.trigger('onClick'); expect(discardAction.onAction).toHaveBeenCalled(); }); @@ -47,12 +46,12 @@ describe('', () => { discardConfirmationModal: false, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - expect(contextualSaveBar.find(DiscardConfirmationModal)).toHaveLength( - 0, + expect(contextualSaveBar).not.toContainReactComponent( + DiscardConfirmationModal, ); }); }); @@ -65,11 +64,11 @@ describe('', () => { discardConfirmationModal: true, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - contextualSaveBar.find(Button).simulate('click'); + contextualSaveBar.find(Button)!.trigger('onClick'); expect(discardAction.onAction).not.toHaveBeenCalled(); }); @@ -80,11 +79,16 @@ describe('', () => { discardConfirmationModal: true, }; - const discardConfirmationModal = mountWithAppProvider( + const discardConfirmationModal = mountWithApp( , - ).find(DiscardConfirmationModal); + ); - expect(discardConfirmationModal.prop('open')).toBe(false); + expect(discardConfirmationModal).toContainReactComponent( + DiscardConfirmationModal, + { + open: false, + }, + ); }); it('sets the DiscardConfirmationModal `open` prop to true when the discard button is clicked', () => { @@ -94,16 +98,17 @@ describe('', () => { discardConfirmationModal: true, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - contextualSaveBar.find(Button).simulate('click'); - const discardConfirmationModal = contextualSaveBar.find( + contextualSaveBar.find(Button)!.trigger('onClick'); + expect(contextualSaveBar).toContainReactComponent( DiscardConfirmationModal, + { + open: true, + }, ); - expect(discardConfirmationModal).toHaveLength(1); - expect(discardConfirmationModal.prop('open')).toBe(true); }); it("sets the DiscardConfirmationModal `open` prop to false when it's `onCancel` handler is triggered", () => { @@ -113,16 +118,20 @@ describe('', () => { discardConfirmationModal: true, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - const discardConfirmationModal = contextualSaveBar.find( + const modal = contextualSaveBar.find(DiscardConfirmationModal)!; + contextualSaveBar.find(Button)!.trigger('onClick'); + modal!.trigger('onCancel'); + + expect(contextualSaveBar).toContainReactComponent( DiscardConfirmationModal, + { + open: false, + }, ); - trigger(discardConfirmationModal, 'onCancel'); - - expect(discardConfirmationModal.prop('open')).toBe(false); }); it("calls the discardAction prop when it's `onDiscard` handler is triggered", () => { @@ -132,17 +141,12 @@ describe('', () => { discardConfirmationModal: true, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - contextualSaveBar.find(Button).simulate('click'); - const discardConfirmationModal = contextualSaveBar.find( - DiscardConfirmationModal, - ); - - trigger(discardConfirmationModal, 'onDiscard'); - + contextualSaveBar.find(Button)!.trigger('onClick'); + contextualSaveBar.find(DiscardConfirmationModal)!.trigger('onDiscard'); expect(discardAction.onAction).toHaveBeenCalled(); }); @@ -153,16 +157,18 @@ describe('', () => { discardConfirmationModal: true, }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - const discardConfirmationModal = contextualSaveBar.find( + contextualSaveBar.find(DiscardConfirmationModal)!.trigger('onDiscard'); + + expect(contextualSaveBar).toContainReactComponent( DiscardConfirmationModal, + { + open: false, + }, ); - trigger(discardConfirmationModal, 'onDiscard'); - - expect(discardConfirmationModal.prop('open')).toBe(false); }); }); }); @@ -174,13 +180,14 @@ describe('', () => { onAction: jest.fn(), }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - const button = contextualSaveBar.find(Button); - expect(button.prop('onClick')).toBe(saveAction.onAction); - expect(button.prop('children')).toBe(saveAction.content); + expect(contextualSaveBar).toContainReactComponent(Button, { + children: saveAction.content, + onClick: saveAction.onAction, + }); }); }); @@ -190,12 +197,13 @@ describe('', () => { onAction: jest.fn(), }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - const discardButton = contextualSaveBar.find(Button); - expect(discardButton.text()).toBe('Discard'); + expect(contextualSaveBar).toContainReactComponent(Button, { + children: 'Discard', + }); }); it('renders a save action with default text without content being provided', () => { @@ -203,18 +211,19 @@ describe('', () => { onAction: jest.fn(), }; - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , ); - const commitButton = contextualSaveBar.find(Button); - expect(commitButton.text()).toBe('Save'); + expect(contextualSaveBar).toContainReactComponent(Button, { + children: 'Save', + }); }); }); describe('logo', () => { it('will render an image with the contextual save bar source', () => { - const contextualSaveBar = mountWithAppProvider(, { + const contextualSaveBar = mountWithApp(, { theme: { logo: { width: 200, @@ -222,13 +231,14 @@ describe('', () => { }, }, }); - expect(contextualSaveBar.find(Image).prop('source')).toBe( - './assets/monochrome_shopify.svg', - ); + + expect(contextualSaveBar).toContainReactComponent(Image, { + source: './assets/monochrome_shopify.svg', + }); }); it('will render an image with the width provided', () => { - const contextualSaveBar = mountWithAppProvider(, { + const contextualSaveBar = mountWithApp(, { theme: { logo: { width: 200, @@ -236,14 +246,13 @@ describe('', () => { }, }, }); - expect(contextualSaveBar.find(Image).get(0).props.style).toHaveProperty( - 'width', - '200px', - ); + expect(contextualSaveBar).toContainReactComponent(Image, { + style: {width: '200px'}, + }); }); it('will render the image with a default width if 0 is provided', () => { - const contextualSaveBar = mountWithAppProvider(, { + const contextualSaveBar = mountWithApp(, { theme: { logo: { contextualSaveBarSource: './assets/monochrome_shopify.svg', @@ -251,14 +260,14 @@ describe('', () => { }, }, }); - expect(contextualSaveBar.find(Image).get(0).props.style).toHaveProperty( - 'width', - '104px', - ); + + expect(contextualSaveBar).toContainReactComponent(Image, { + style: {width: '104px'}, + }); }); it('will not render the logo when content is aligned flush left', () => { - const contextualSaveBar = mountWithAppProvider( + const contextualSaveBar = mountWithApp( , { theme: { @@ -270,7 +279,7 @@ describe('', () => { }, ); - expect(contextualSaveBar.find(Image).exists()).toBeFalsy(); + expect(contextualSaveBar).not.toContainReactComponent(Image); }); }); diff --git a/src/components/Frame/components/Loading/tests/Loading.test.tsx b/src/components/Frame/components/Loading/tests/Loading.test.tsx index 32be734b2e0..6499a5e3661 100644 --- a/src/components/Frame/components/Loading/tests/Loading.test.tsx +++ b/src/components/Frame/components/Loading/tests/Loading.test.tsx @@ -1,11 +1,9 @@ import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Loading} from '../Loading'; describe('', () => { - const loading = mountWithAppProvider(); let requestAnimationFrameSpy: jest.SpyInstance; beforeEach(() => { @@ -21,17 +19,20 @@ describe('', () => { }); it('mounts', () => { - expect(loading.exists()).toBe(true); + const loading = mountWithApp(); + expect(loading).not.toBeNull(); }); it('unmounts safely', () => { + const loading = mountWithApp(); + expect(() => { loading.unmount(); }).not.toThrow(); }); it('calls requestAnimationFrame', () => { - mountWithAppProvider(); + mountWithApp(); expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1); }); }); diff --git a/src/components/Frame/components/Toast/tests/Toast.test.tsx b/src/components/Frame/components/Toast/tests/Toast.test.tsx index df9c41b5e32..4b5a8ced944 100644 --- a/src/components/Frame/components/Toast/tests/Toast.test.tsx +++ b/src/components/Frame/components/Toast/tests/Toast.test.tsx @@ -1,11 +1,6 @@ import React from 'react'; import {timer} from '@shopify/jest-dom-mocks'; -// eslint-disable-next-line no-restricted-imports -import { - mountWithAppProvider, - trigger, - findByTestID, -} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Button} from '../../../../Button'; import {Toast, ToastProps} from '../Toast'; @@ -29,21 +24,23 @@ describe('', () => { timer.restore(); }); - const message = mountWithAppProvider(); - it('renders its content', () => { - const message = mountWithAppProvider(); - expect(message.text()).toStrictEqual('Image uploaded'); + const message = mountWithApp(); + expect(message).toContainReactText('Image uploaded'); }); it('renders an error Toast when error is true', () => { - const message = mountWithAppProvider(); - expect(message.find('.Toast').hasClass('error')).toBe(true); + const message = mountWithApp(); + + expect(message).toContainReactComponent('div', { + className: 'Toast error', + }); }); describe('dismiss button', () => { it('renders by default', () => { - expect(message.find('button')).toHaveLength(1); + const message = mountWithApp(); + expect(message).toContainReactComponent('button'); }); }); @@ -54,26 +51,28 @@ describe('', () => { }; it('does not render when not defined', () => { - const message = mountWithAppProvider(); - expect(message.find(Button)).toHaveLength(0); + const message = mountWithApp(); + expect(message).not.toContainReactComponent(Button); }); it('passes content as button text', () => { - const message = mountWithAppProvider( + const message = mountWithApp( , ); - expect(message.find(Button).text()).toContain(mockAction.content); + expect(message).toContainReactComponent(Button, { + children: mockAction.content, + }); }); it('triggers onAction when button is clicked', () => { const spy = jest.fn(); const mockActionWithSpy = {...mockAction, onAction: spy}; - const message = mountWithAppProvider( + const message = mountWithApp( , ); - trigger(message.find(Button), 'onClick'); + message.find(Button)?.trigger('onClick'); expect(spy).toHaveBeenCalledTimes(1); }); @@ -82,7 +81,7 @@ describe('', () => { const spy = jest.fn(); const mockActionWithSpy = {...mockAction, onAction: spy}; - mountWithAppProvider( + mountWithApp( ', () => { it('warns that a duration of 10000ms is recommended with action if duration is lower than 10000', () => { const logSpy = jest.spyOn(console, 'log'); logSpy.mockImplementation(() => {}); - mountWithAppProvider( + mountWithApp( , ); @@ -114,11 +113,11 @@ describe('', () => { describe('onDismiss()', () => { it('is called when the dismiss button is pressed', () => { const spy = jest.fn(); - const message = mountWithAppProvider( + const message = mountWithApp( , ); - findByTestID(message, 'closeButton').simulate('click'); + message.find('button')!.trigger('onClick'); expect(spy).toHaveBeenCalled(); }); @@ -148,9 +147,7 @@ describe('', () => { it('is called when the escape key is pressed', () => { const spy = jest.fn(); - mountWithAppProvider( - , - ); + mountWithApp(); listenerMap.keyup({keyCode: Key.Escape}); @@ -162,7 +159,7 @@ describe('', () => { const spy = jest.fn(); const duration = 1000; - mountWithAppProvider( + mountWithApp( , ); expect(spy).not.toHaveBeenCalled(); @@ -174,7 +171,7 @@ describe('', () => { it('is called after the default duration is reached and no duration was provided', () => { const spy = jest.fn(); - mountWithAppProvider(); + mountWithApp(); expect(spy).not.toHaveBeenCalled(); const defaultDuration = 5000; @@ -186,7 +183,7 @@ describe('', () => { it('is not called if the component unmounts before the duration is reached', () => { const spy = jest.fn(); const duration = 1000; - const toast = mountWithAppProvider( + const toast = mountWithApp( , ); toast.unmount(); diff --git a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx index d001cd937ea..6763f42ec48 100644 --- a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx +++ b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {timer} from '@shopify/jest-dom-mocks'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; +import {mountWithApp} from 'test-utilities'; import {Toast} from '../../Toast'; import {Frame} from '../../../Frame'; @@ -19,7 +18,7 @@ window.matchMedia = describe('', () => { it('updates toast safely', () => { - const toastManager = mountWithAppProvider( + const toastManager = mountWithApp( , @@ -33,27 +32,28 @@ describe('', () => { }); it('has and aria-live attribute of assertive', () => { - const toastManager = mountWithAppProvider( + const toastManager = mountWithApp( , ); - expect(toastManager.find('[aria-live]').prop('aria-live')).toBe( - 'assertive', - ); + + expect(toastManager).toContainReactComponent('div', { + 'aria-live': 'assertive', + }); }); }); describe('', () => { it('renders and updates multiple toasts', () => { - const multipleMessages = mountWithAppProvider( + const multipleMessages = mountWithApp( , ); - expect(multipleMessages.find(Toast)).toHaveLength(2); + expect(multipleMessages).toContainReactComponentTimes(Toast, 2); }); }); @@ -72,12 +72,12 @@ describe('onDismiss()', () => { const duration1 = 3000; const duration2 = 10000; - mountWithAppProvider( + mountWithApp( , ); - mountWithAppProvider( + mountWithApp( , diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx index 5d06e47d8ed..581a547f267 100644 --- a/src/components/Frame/tests/Frame.test.tsx +++ b/src/components/Frame/tests/Frame.test.tsx @@ -2,8 +2,6 @@ import React, {createRef} from 'react'; import {CSSTransition} from 'react-transition-group'; import {animationFrame, dimension} from '@shopify/jest-dom-mocks'; import {mountWithApp} from 'test-utilities'; -// eslint-disable-next-line no-restricted-imports -import {mountWithAppProvider} from 'test-utilities/legacy'; import { ContextualSaveBar as PolarisContextualSavebar, Loading as PolarisLoading, @@ -44,12 +42,11 @@ describe('', () => { describe('skipToContentTarget', () => { it('renders a skip to content link with the proper text', () => { - const skipToContentLinkText = mountWithAppProvider() - .find('a') - .at(0) - .text(); + const skipToContentLinkText = mountWithApp(); - expect(skipToContentLinkText).toStrictEqual('Skip to content'); + expect(skipToContentLinkText).toContainReactComponent('a', { + children: 'Skip to content', + }); }); it('targets the main container element by default', () => { @@ -84,115 +81,120 @@ describe('', () => { ); }); }); - describe('topBar', () => { it('renders with a top bar data attribute if a topBar is passed', () => { const topbar =
; - const topBar = mountWithAppProvider(); - - expect(topBar.find('[data-polaris-top-bar]')).toHaveLength(1); + const frame = mountWithApp(); + const selector: any = { + 'data-polaris-top-bar': true, + }; + expect(frame).toContainReactComponent('div', selector); }); it('does not render with a top bar data attribute if none is passed', () => { - const topBar = mountWithAppProvider(); - - expect(topBar.find('[data-polaris-top-bar]')).toHaveLength(0); + const topBar = mountWithApp(); + const selector: any = { + 'data-polaris-top-bar': true, + }; + expect(topBar).not.toContainReactComponent('div', selector); }); }); describe('navigation', () => { it('renders a TrapFocus with a `trapping` prop set to true around the navigation on small screens and showMobileNavigation is true', () => { const navigation =
; - const frame = mountWithAppProvider( + const frame = mountWithApp( , {mediaQuery: {isNavigationCollapsed: true}}, - ).find(Frame); - - const trapFocus = frame.find(TrapFocus); + ); - expect(trapFocus.exists()).toBe(true); - expect(trapFocus.prop('trapping')).toBe(true); + expect(frame).toContainReactComponent(TrapFocus, { + trapping: true, + }); }); it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on small screens and showMobileNavigation is false', () => { const navigation =
; - const frame = mountWithAppProvider(, { + const frame = mountWithApp(, { mediaQuery: {isNavigationCollapsed: true}, - }).find(Frame); + }); - const trapFocus = frame.find(TrapFocus); - expect(trapFocus.exists()).toBe(true); - expect(trapFocus.prop('trapping')).toBe(false); + expect(frame).toContainReactComponent(TrapFocus, { + trapping: false, + }); }); it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on large screens even if showMobileNavigation is true', () => { const navigation =
; - const trapFocus = mountWithAppProvider( + const trapFocus = mountWithApp( , - ).find(TrapFocus); + ); - expect(trapFocus.exists()).toBe(true); - expect(trapFocus.prop('trapping')).toBe(false); + expect(trapFocus).toContainReactComponent(TrapFocus, { + trapping: false, + }); }); it('renders a CSSTransition around the navigation with `appear` and `exit` set to true on small screen', () => { const navigation =
; - const cssTransition = mountWithAppProvider( + const frame = mountWithApp( , {mediaQuery: {isNavigationCollapsed: true}}, - ) - .find(TrapFocus) - .find(CSSTransition); + ); - expect(cssTransition.prop('appear')).toBe(true); - expect(cssTransition.prop('exit')).toBe(true); + expect(frame).toContainReactComponent(CSSTransition, { + appear: true, + exit: true, + }); }); it('renders a CSSTransition around the navigation with `appear` and `exit` set to false on large screen', () => { const navigation =
; - const cssTransition = mountWithAppProvider( - , - ) - .find(TrapFocus) - .find(CSSTransition); - - expect(cssTransition.prop('appear')).toBe(false); - expect(cssTransition.prop('exit')).toBe(false); + const frame = mountWithApp(); + + expect(frame).toContainReactComponent(CSSTransition, { + appear: false, + exit: false, + }); }); it('renders a CSSTransition around the navigation with an `in` prop set to false if showMobileNavigation is true', () => { const navigation =
; - const cssTransition = mountWithAppProvider( + const cssTransition = mountWithApp( , - ) - .find(Frame) - .find(TrapFocus) - .find(CSSTransition); + ); - expect(cssTransition.prop('in')).toBe(false); + expect(cssTransition).toContainReactComponent(CSSTransition, { + in: false, + }); }); it('renders a CSSTransition around the navigation with an `in` prop set to true if showMobileNavigation is true', () => { const navigation =
; - const cssTransition = mountWithAppProvider( + const cssTransition = mountWithApp( , - ) - .find(Frame) - .find(TrapFocus) - .find(CSSTransition); + ); - expect(cssTransition.prop('in')).toBe(true); + expect(cssTransition).toContainReactComponent(CSSTransition, { + in: true, + }); }); it('renders with a has nav data attribute when nav is passed', () => { const navigation =
; - const frame = mountWithAppProvider(); - expect(frame.find('[data-has-navigation]')).toHaveLength(1); + const frame = mountWithApp(); + const selector: any = { + 'data-has-navigation': true, + }; + expect(frame).toContainReactComponent('div', selector); }); it('does not render with a has nav data attribute when nav is not passed', () => { - const frame = mountWithAppProvider(); - expect(frame.find('[data-has-navigation]')).toHaveLength(0); + const frame = mountWithApp(); + const selector: any = { + 'data-has-navigation': false, + }; + expect(frame).not.toContainReactComponent('div', selector); }); it('does not call onNavigationDismiss when escape is pressed and screen size is large', () => { @@ -264,9 +266,7 @@ describe('', () => { }); it('sets a root property with global ribbon height if passed', () => { - mountWithAppProvider( - }>I am some content, - ); + mountWithApp(}>I am some content); expect( document.documentElement.style.getPropertyValue( '--global-ribbon-height', @@ -275,7 +275,7 @@ describe('', () => { }); it('sets a root property with global ribbon height if new props are passed', () => { - const frame = mountWithAppProvider(); + const frame = mountWithApp(); expect( document.documentElement.style.getPropertyValue( @@ -292,7 +292,7 @@ describe('', () => { }); it('sets a root property with global ribbon height of 0 if there is no globalRibbon prop', () => { - mountWithAppProvider(); + mountWithApp(); expect( document.documentElement.style.getPropertyValue( '--global-ribbon-height', @@ -303,23 +303,25 @@ describe('', () => { describe('ContextualSavebar', () => { it('renders a Frame ContextualSavebar if Polaris ContextualSavebar is rendered', () => { - const frame = mountWithAppProvider( + const frame = mountWithApp( , ); - expect(frame.find(FrameContextualSavebar).exists()).toBe(true); + + expect(frame).toContainReactComponent(FrameContextualSavebar); }); }); describe('loading', () => { it('renders a Frame Loading if Polaris Loading is rendered', () => { - const frame = mountWithAppProvider( + const frame = mountWithApp( , ); - expect(frame.find(FrameLoading).exists()).toBe(true); + + expect(frame).toContainReactComponent(FrameLoading); }); }); }); diff --git a/src/components/Tabs/components/List/tests/List.test.tsx b/src/components/Tabs/components/List/tests/List.test.tsx index c11a2213b23..d2ed9a50a00 100644 --- a/src/components/Tabs/components/List/tests/List.test.tsx +++ b/src/components/Tabs/components/List/tests/List.test.tsx @@ -98,7 +98,7 @@ describe('', () => { const list = mountWithApp( , ); - expect(list).toContainReactText('Repeat customers'); + expect(list.find(Item)).toContainReactText('Repeat customers'); }); }); });