From cbab7b18261f9d230dc238ecc52a2c4999905b74 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Tue, 24 Aug 2021 16:24:40 -0400 Subject: [PATCH 1/6] Modernized tests for PopoverOverlay component --- UNRELEASED.md | 1 + .../tests/PopoverOverlay.test.tsx | 130 +++++++++--------- 2 files changed, 63 insertions(+), 68 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 51453a78f96..6c988ea7341 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -79,5 +79,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#](https://github.com/Shopify/polaris-react/pull/)) - Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) +- Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430)) ### Deprecations diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx index f8ceb73dca9..8de06f03214 100644 --- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx +++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx @@ -1,12 +1,7 @@ import React, {useRef} from 'react'; -// eslint-disable-next-line no-restricted-imports -import { - mountWithAppProvider, - ReactWrapper, - trigger, -} from 'test-utilities/legacy'; import {mountWithApp} from 'test-utilities/react-testing'; import {TextContainer, TextField, EventListener} from 'components'; +import type {CustomRoot} from '@shopify/react-testing'; import {Key} from '../../../../../types'; import {PositionedOverlay} from '../../../../PositionedOverlay'; @@ -60,7 +55,7 @@ describe('', () => { ); it('passes activator to PositionedOverlay when active', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect(popoverOverlay.find(PositionedOverlay).prop('activator')).toBe( + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { activator, - ); + }); }); it('passes fullWidth to PositionedOverlay when active', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect(popoverOverlay.find(PositionedOverlay).prop('fullWidth')).toBe(true); + // expect(popoverOverlay.find(PositionedOverlay).prop('fullWidth')).toBe(true); + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + fullWidth: true, + }); }); it('passes fixed to PositionedOverlay when active', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect(popoverOverlay.find(PositionedOverlay).prop('fixed')).toBe(true); + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + fixed: true, + }); }); it('passes preferredPosition and preferredAlignment to PositionedOverlay when active', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect( - popoverOverlay.find(PositionedOverlay).prop('preferredPosition'), - ).toBe('above'); - expect( - popoverOverlay.find(PositionedOverlay).prop('preferredAlignment'), - ).toBe('right'); + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + preferredPosition: 'above', + preferredAlignment: 'right', + }); }); it('passes default preferredPosition and preferredAlignment to PositionedOverlay when active', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect( - popoverOverlay.find(PositionedOverlay).prop('preferredPosition'), - ).toBe('below'); - expect( - popoverOverlay.find(PositionedOverlay).prop('preferredAlignment'), - ).toBe('center'); + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + preferredPosition: 'below', + preferredAlignment: 'center', + }); }); it('passes preferInputActivator to PositionedOverlay when false', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect( - popoverOverlay.find(PositionedOverlay).prop('preferInputActivator'), - ).toBe(false); + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + preferInputActivator: false, + }); }); it('passes zIndexOverride to PositionedOverlay', () => { @@ -189,7 +185,7 @@ describe('', () => { }); it("doesn't include a tabindex prop when autofocusTarget is 'none'", () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - expect( - popoverOverlay.find(PositionedOverlay).prop('preferInputActivator'), - ).toBe(false); + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + preferInputActivator: false, + }); }); it('calls the onClose callback when the escape key is pressed', () => { const spy = jest.fn(); - mountWithAppProvider( + mountWithApp( ', () => { it('does not call the onClose callback when a descendent HTMLElement is clicked', () => { const spy = jest.fn(); - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - const target = popoverOverlay.find(TextField).find('input').getDOMNode(); + const target = popoverOverlay.find(TextField)!.find('input')!.domNode; - const clickEventListener = popoverOverlay - .find(EventListener) - .findWhere((node) => node.prop('event') === 'click'); + const clickEventListener = popoverOverlay.find(EventListener, { + event: 'click', + })!; - trigger(clickEventListener, 'handler', {target}); + clickEventListener.trigger('handler', {target}); expect(spy).not.toHaveBeenCalled(); }); @@ -254,7 +250,7 @@ describe('', () => { it('does not call the onClose callback when a descendent SVGElement is clicked', () => { const spy = jest.fn(); - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { , ); - const target = popoverOverlay - .find(TextField) - .find('svg') - .first() - .getDOMNode(); + const target = popoverOverlay.find(TextField)!.find('svg')!.domNode; - const clickEventListener = popoverOverlay - .find(EventListener) - .findWhere((node) => node.prop('event') === 'click'); + const clickEventListener = popoverOverlay.find(EventListener, { + event: 'click', + })!; - trigger(clickEventListener, 'handler', { + clickEventListener!.trigger('handler', { target, }); - expect(spy).not.toHaveBeenCalled(); }); it('starts animating in immediately', () => { - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { ); popoverOverlay.setProps({active: true}); - popoverOverlay.update(); - expect(popoverOverlay.find(PositionedOverlay).prop('classNames')).toMatch( - /PopoverOverlay-entering/, - ); + popoverOverlay.forceUpdate(); + + expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { + classNames: expect.stringContaining('PopoverOverlay-entering'), + }); }); it('does not render after exiting when the component is updated during exit', () => { jest.useFakeTimers(); - const popoverOverlay = mountWithAppProvider( + const popoverOverlay = mountWithApp( ', () => { // Start exiting close(popoverOverlay); - // Update before exiting is complete triggerSomeUpdate(popoverOverlay); // Run any timers and a final update for changed state jest.runOnlyPendingTimers(); - popoverOverlay.update(); + popoverOverlay.forceUpdate(); - expect(popoverOverlay.find(PositionedOverlay)).toHaveLength(0); + // expect(popoverOverlay.find(PositionedOverlay)).toHaveLength(0); + expect(popoverOverlay).not.toContainReactComponent(PositionedOverlay); }); describe('focus', () => { @@ -351,7 +343,7 @@ describe('', () => { it('focuses the content on mount', () => { const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus'); - mountWithAppProvider( + mountWithApp( ', () => { it('focuses the content on mount and prevents scroll in development', () => { process.env.NODE_ENV = 'development'; const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus'); - mountWithAppProvider( + mountWithApp( ', () => { function noop() {} -function close(wrapper: ReactWrapper) { +function close(wrapper: CustomRoot) { wrapper.setProps({active: false}); - wrapper.update(); + wrapper.forceUpdate(); } -function triggerSomeUpdate(wrapper: ReactWrapper) { +function triggerSomeUpdate(wrapper: CustomRoot) { wrapper.setProps({fullWidth: true}); - wrapper.update(); + wrapper.forceUpdate(); } + + From d4ebb2d074de9807c40fcaa4b5b5712b659e20fb Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Tue, 24 Aug 2021 16:25:56 -0400 Subject: [PATCH 2/6] Removed whitespace --- .../components/PopoverOverlay/tests/PopoverOverlay.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx index 8de06f03214..76881602c62 100644 --- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx +++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx @@ -478,5 +478,3 @@ function triggerSomeUpdate(wrapper: CustomRoot) { wrapper.setProps({fullWidth: true}); wrapper.forceUpdate(); } - - From 3e4e22ff26916be11f4cfcc919f756d964469cd2 Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Wed, 25 Aug 2021 15:58:45 -0400 Subject: [PATCH 3/6] Removed comments --- .../components/PopoverOverlay/tests/PopoverOverlay.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx index 76881602c62..1252e4d3aa1 100644 --- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx +++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx @@ -85,7 +85,6 @@ describe('', () => { , ); - // expect(popoverOverlay.find(PositionedOverlay).prop('fullWidth')).toBe(true); expect(popoverOverlay).toContainReactComponent(PositionedOverlay, { fullWidth: true, }); @@ -324,7 +323,6 @@ describe('', () => { jest.runOnlyPendingTimers(); popoverOverlay.forceUpdate(); - // expect(popoverOverlay.find(PositionedOverlay)).toHaveLength(0); expect(popoverOverlay).not.toContainReactComponent(PositionedOverlay); }); From ff680a9d194354c73d6b5d4105fced7694adf313 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Thu, 26 Aug 2021 09:37:50 -0400 Subject: [PATCH 4/6] Prevent re-renders on exit test --- .../tests/PopoverOverlay.test.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx index 1252e4d3aa1..ad22c586ea1 100644 --- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx +++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx @@ -315,14 +315,11 @@ describe('', () => { ); // Start exiting - close(popoverOverlay); - // Update before exiting is complete - triggerSomeUpdate(popoverOverlay); - + popoverOverlay.setProps({active: false}); // Run any timers and a final update for changed state jest.runOnlyPendingTimers(); - popoverOverlay.forceUpdate(); + popoverOverlay.forceUpdate(); expect(popoverOverlay).not.toContainReactComponent(PositionedOverlay); }); @@ -466,13 +463,3 @@ describe('', () => { }); function noop() {} - -function close(wrapper: CustomRoot) { - wrapper.setProps({active: false}); - wrapper.forceUpdate(); -} - -function triggerSomeUpdate(wrapper: CustomRoot) { - wrapper.setProps({fullWidth: true}); - wrapper.forceUpdate(); -} From 52b1226dae5d0d7fdaec8a010eaa2195f2f4672b Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 26 Aug 2021 09:54:17 -0400 Subject: [PATCH 5/6] Removed CustomRoot import --- .../components/PopoverOverlay/tests/PopoverOverlay.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx index ad22c586ea1..42f3e62fb1b 100644 --- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx +++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx @@ -1,7 +1,6 @@ import React, {useRef} from 'react'; import {mountWithApp} from 'test-utilities/react-testing'; import {TextContainer, TextField, EventListener} from 'components'; -import type {CustomRoot} from '@shopify/react-testing'; import {Key} from '../../../../../types'; import {PositionedOverlay} from '../../../../PositionedOverlay'; From 4ba6a9bf0bcf8da4b37c181b1e54d08eefcc931d Mon Sep 17 00:00:00 2001 From: Richard Todd Date: Thu, 26 Aug 2021 13:32:43 -0400 Subject: [PATCH 6/6] Removed dupes in UNRELEASED.md --- UNRELEASED.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 6c988ea7341..8d5f5ec99dc 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -76,8 +76,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Modernized tests for Modal ([#4433](https://github.com/Shopify/polaris-react/pull/4433)) - Modernized tests for Navigation and Navigation.Section ([#4440](https://github.com/Shopify/polaris-react/pull/4440)) - Modernized tests for EmptyState component ([#4427](https://github.com/Shopify/polaris-react/pull/4427)) -- Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#](https://github.com/Shopify/polaris-react/pull/)) -- Modernized tests for FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) - Modernized tests for Pagination, FilterControl, FilterCreator, FilterValueSelector, and DateSelector components ([#4438](https://github.com/Shopify/polaris-react/pull/4438)) - Modernized tests for PopoverOverlay component([#4430](https://github.com/Shopify/polaris-react/pull/4430))