diff --git a/assets/src/block-validation/components/amp-document-status/test/amp-document-status-notification.js b/assets/src/block-validation/components/amp-document-status/test/amp-document-status-notification.js index 40269fe62f9..bdaa6d94383 100644 --- a/assets/src/block-validation/components/amp-document-status/test/amp-document-status-notification.js +++ b/assets/src/block-validation/components/amp-document-status/test/amp-document-status-notification.js @@ -1,12 +1,11 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; +import { render, fireEvent } from '@testing-library/react'; /** * WordPress dependencies */ -import { render, unmountComponentAtNode } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; /** @@ -28,8 +27,6 @@ jest.mock('../../../hooks/use-errors-fetching-state-changes', () => ({ })); describe('AMPDocumentStatusNotification', () => { - let container; - const openGeneralSidebar = jest.fn(); const closePublishSidebar = jest.fn(); @@ -65,18 +62,6 @@ describe('AMPDocumentStatusNotification', () => { })); }); - beforeEach(() => { - // jest.clearAllMocks(); - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - unmountComponentAtNode(container); - container.remove(); - container = null; - }); - it('renders only a toggle if AMP is disabled', () => { setupHooks( {}, @@ -86,9 +71,7 @@ describe('AMPDocumentStatusNotification', () => { } ); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.children).toHaveLength(1); expect(container.innerHTML).toContain('Enable AMP'); @@ -103,9 +86,7 @@ describe('AMPDocumentStatusNotification', () => { } ); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toContain('Enable AMP'); expect( @@ -119,9 +100,7 @@ describe('AMPDocumentStatusNotification', () => { isPostDirty: true, }); - act(() => { - render(, container); - }); + let { container } = render(); expect(container.innerHTML).toContain('Enable AMP'); expect(container.innerHTML).toContain('Content has changed.'); @@ -133,14 +112,13 @@ describe('AMPDocumentStatusNotification', () => { maybeIsPostDirty: true, }); - act(() => { - render(, container); - }); + ({ container } = render()); expect(container.innerHTML).toContain('Content may have changed.'); // Simulate button click. - container.querySelector('button').click(); + fireEvent.click(container.querySelector('button')); + expect(openGeneralSidebar).toHaveBeenCalledTimes(1); expect(closePublishSidebar).toHaveBeenCalledTimes(1); }); @@ -150,9 +128,7 @@ describe('AMPDocumentStatusNotification', () => { keptMarkupValidationErrorCount: 3, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toContain('Enable AMP'); expect(container.innerHTML).toContain( @@ -169,9 +145,7 @@ describe('AMPDocumentStatusNotification', () => { unreviewedValidationErrorCount: 1, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toContain('Enable AMP'); expect(container.innerHTML).toContain( @@ -186,9 +160,7 @@ describe('AMPDocumentStatusNotification', () => { it('renders a correct message if there are no errors', () => { setupHooks(); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toContain('Enable AMP'); expect(container.innerHTML).toContain( diff --git a/assets/src/block-validation/components/amp-toggle/test/amp-toggle.js b/assets/src/block-validation/components/amp-toggle/test/amp-toggle.js index 1bb7f837a7b..248e3c1a961 100644 --- a/assets/src/block-validation/components/amp-toggle/test/amp-toggle.js +++ b/assets/src/block-validation/components/amp-toggle/test/amp-toggle.js @@ -1,12 +1,7 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; - -/** - * WordPress dependencies - */ -import { render, unmountComponentAtNode } from '@wordpress/element'; +import { render, fireEvent } from '@testing-library/react'; /** * Internal dependencies @@ -19,8 +14,6 @@ jest.mock('../../../hooks/use-amp-document-toggle', () => ({ })); describe('AMPToggle', () => { - let container; - const toggleAMP = jest.fn(); function setupHooks(overrides) { @@ -33,15 +26,6 @@ describe('AMPToggle', () => { beforeEach(() => { jest.clearAllMocks(); - - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - unmountComponentAtNode(container); - container.remove(); - container = null; }); it('renders a toggle that reacts to changes', () => { @@ -49,9 +33,7 @@ describe('AMPToggle', () => { isAMPEnabled: true, }); - act(() => { - render(, container); - }); + const { container } = render(); expect( container.querySelector('input[type="checkbox"]') @@ -60,7 +42,8 @@ describe('AMPToggle', () => { true ); - container.querySelector('input[type="checkbox"]').click(); + fireEvent.click(container.querySelector('input[type="checkbox"]')); + expect(toggleAMP).toHaveBeenCalledTimes(1); }); }); diff --git a/assets/src/block-validation/components/amp-validation-status/test/revalidate-notification.js b/assets/src/block-validation/components/amp-validation-status/test/revalidate-notification.js index f7a08f8ed7e..e5e993f4d15 100644 --- a/assets/src/block-validation/components/amp-validation-status/test/revalidate-notification.js +++ b/assets/src/block-validation/components/amp-validation-status/test/revalidate-notification.js @@ -1,12 +1,11 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; +import { render, fireEvent } from '@testing-library/react'; /** * WordPress dependencies */ -import { render, unmountComponentAtNode } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; /** @@ -24,8 +23,6 @@ jest.mock('../../../hooks/use-errors-fetching-state-changes', () => ({ })); describe('AMPRevalidateNotification', () => { - let container; - const autosave = jest.fn(); const savePost = jest.fn(); @@ -45,27 +42,16 @@ describe('AMPRevalidateNotification', () => { }); beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - useErrorsFetchingStateChanges.mockImplementation(() => ({ isFetchingErrors: false, fetchingErrorsMessage: '', })); }); - afterEach(() => { - unmountComponentAtNode(container); - container.remove(); - container = null; - }); - it('does not render revalidate message if post is not dirty', () => { setupUseSelect(); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.children).toHaveLength(0); }); @@ -76,9 +62,7 @@ describe('AMPRevalidateNotification', () => { fetchingErrorsMessage: 'Loading', })); - act(() => { - render(, container); - }); + const { container } = render(); expect( container.querySelector('.amp-spinner-container') @@ -91,9 +75,7 @@ describe('AMPRevalidateNotification', () => { isPostDirty: true, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.children).toHaveLength(1); @@ -103,7 +85,8 @@ describe('AMPRevalidateNotification', () => { 'Re-validate' ); - container.querySelector('button').click(); + fireEvent.click(container.querySelector('button')); + expect(autosave).toHaveBeenCalledWith({ isPreview: true }); }); @@ -113,9 +96,7 @@ describe('AMPRevalidateNotification', () => { isPostDirty: true, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain('has changed'); @@ -123,7 +104,8 @@ describe('AMPRevalidateNotification', () => { 'Save draft' ); - container.querySelector('button').click(); + fireEvent.click(container.querySelector('button')); + expect(savePost).toHaveBeenCalledWith({ isPreview: true }); }); @@ -134,9 +116,7 @@ describe('AMPRevalidateNotification', () => { maybeIsPostDirty: true, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.children).toHaveLength(1); diff --git a/assets/src/block-validation/components/amp-validation-status/test/status-notification.js b/assets/src/block-validation/components/amp-validation-status/test/status-notification.js index 4b115a43327..22c207543a8 100644 --- a/assets/src/block-validation/components/amp-validation-status/test/status-notification.js +++ b/assets/src/block-validation/components/amp-validation-status/test/status-notification.js @@ -1,12 +1,11 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; +import { render, fireEvent } from '@testing-library/react'; /** * WordPress dependencies */ -import { render, unmountComponentAtNode } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; /** @@ -20,8 +19,6 @@ jest.mock('@wordpress/data/build/components/use-dispatch/use-dispatch', () => ); describe('AMPValidationStatusNotification', () => { - let container; - const autosave = jest.fn(); const savePost = jest.fn(); @@ -44,25 +41,12 @@ describe('AMPValidationStatusNotification', () => { useDispatch.mockImplementation(() => ({ autosave, savePost })); }); - beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - unmountComponentAtNode(container); - container.remove(); - container = null; - }); - it('does not render when errors are being fetched', () => { setupUseSelect({ isFetchingErrors: true, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.children).toHaveLength(0); }); @@ -72,9 +56,7 @@ describe('AMPValidationStatusNotification', () => { isEditedPostNew: true, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain( @@ -90,9 +72,7 @@ describe('AMPValidationStatusNotification', () => { fetchingErrorsRequestErrorMessage: 'request error message', }); - act(() => { - render(, container); - }); + let { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain('request error message'); @@ -100,7 +80,8 @@ describe('AMPValidationStatusNotification', () => { container.querySelector('a[href="http://example.com"]') ).toBeNull(); - container.querySelector('button').click(); + fireEvent.click(container.querySelector('button')); + expect(autosave).toHaveBeenCalledWith({ isPreview: true }); setupUseSelect({ @@ -108,10 +89,10 @@ describe('AMPValidationStatusNotification', () => { fetchingErrorsRequestErrorMessage: 'request error message', }); - act(() => { - render(, container); - }); - container.querySelector('button').click(); + ({ container } = render()); + + fireEvent.click(container.querySelector('button')); + expect(savePost).toHaveBeenCalledWith({ isPreview: true }); }); @@ -120,9 +101,7 @@ describe('AMPValidationStatusNotification', () => { keptMarkupValidationErrorCount: 2, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain( @@ -138,9 +117,7 @@ describe('AMPValidationStatusNotification', () => { unreviewedValidationErrorCount: 3, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain( @@ -156,9 +133,7 @@ describe('AMPValidationStatusNotification', () => { validationErrorCount: 1, }); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain( @@ -172,9 +147,7 @@ describe('AMPValidationStatusNotification', () => { it('renders message when there are no AMP validation errors', () => { setupUseSelect(); - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.innerHTML).toContain( diff --git a/assets/src/block-validation/components/error/test/error.js b/assets/src/block-validation/components/error/test/error.js index 8e41b84fb0e..25532d5e102 100644 --- a/assets/src/block-validation/components/error/test/error.js +++ b/assets/src/block-validation/components/error/test/error.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; +import { render, act, fireEvent } from '@testing-library/react'; import { noop } from 'lodash'; import { VALIDATION_ERROR_ACK_ACCEPTED_STATUS, @@ -13,7 +13,6 @@ import { /** * WordPress dependencies */ -import { render } from '@wordpress/element'; import { dispatch, select } from '@wordpress/data'; import { registerBlockType, createBlock } from '@wordpress/blocks'; @@ -23,7 +22,7 @@ import { registerBlockType, createBlock } from '@wordpress/blocks'; import { Error } from '../index'; import { createStore } from '../../../store'; -let container, pluginBlock, muPluginBlock, themeBlock, coreBlock, unknownBlock; +let pluginBlock, muPluginBlock, themeBlock, coreBlock, unknownBlock; const TEST_PLUGIN_BLOCK = 'my-plugin/test-block'; const TEST_MU_PLUGIN_BLOCK = 'my-mu-plugin/test-block'; @@ -194,16 +193,6 @@ describe('Error', () => { createTestStoreAndBlocks(); }); - beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - document.body.removeChild(container); - container = null; - }); - it.each( [ VALIDATION_ERROR_ACK_ACCEPTED_STATUS, @@ -224,9 +213,7 @@ describe('Error', () => { )( 'errors with no associated blocks work correctly', (status, ErrorComponent) => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.firstChild.classList).toContain('amp-error'); expect( @@ -243,11 +230,18 @@ describe('Error', () => { ) ).not.toBeNull(); - container - .querySelector( + // container + // .querySelector( + // `.amp-error--${getErrorTypeClassName(status)} button` + // ) + // .click(); + + fireEvent.click( + container.querySelector( `.amp-error--${getErrorTypeClassName(status)} button` ) - .click(); + ); + expect( container.querySelector('.amp-error__block-type-icon') ).toBeNull(); @@ -281,9 +275,7 @@ describe('Error', () => { )( 'errors with associated blocks work correctly', (status, ErrorComponent) => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.firstChild.classList).toContain('amp-error'); expect( @@ -300,11 +292,12 @@ describe('Error', () => { ) ).not.toBeNull(); - container - .querySelector( + fireEvent.click( + container.querySelector( `.amp-error--${getErrorTypeClassName(status)} button` ) - .click(); + ); + expect( container.querySelector('.amp-error__block-type-icon') ).not.toBeNull(); @@ -341,9 +334,10 @@ describe('Error', () => { pluginBlock.clientId, false ); - render(, container); }); + const { container } = render(); + expect(container.firstChild.classList).toContain('amp-error'); expect( container.querySelectorAll( @@ -356,7 +350,8 @@ describe('Error', () => { container.querySelector('.amp-error--removed button') ).not.toBeNull(); - container.querySelector('.amp-error--removed button').click(); + fireEvent.click(container.querySelector('.amp-error--removed button')); + expect( container.querySelector('.amp-error__block-type-icon') ).toBeNull(); @@ -368,33 +363,20 @@ describe('Error', () => { }); describe('ErrorTypeIcon', () => { - beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - document.body.removeChild(container); - container = null; - }); - it.each([ 'js_error', 'html_attribute_error', 'html_element_error', 'css_error', ])('shows the correct error icon', (errorType) => { - act(() => { - render( - , - container - ); - }); + const { container } = render( + + ); expect( container.querySelector( @@ -404,17 +386,14 @@ describe('ErrorTypeIcon', () => { }); it('shows no error icon for unknown error type', () => { - act(() => { - render( - , - container - ); - }); + const { container } = render( + + ); expect( container.querySelector('svg[class^=amp-error__error-type-icon]') @@ -427,16 +406,6 @@ describe('ErrorContent', () => { createTestStoreAndBlocks(); }); - beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - document.body.removeChild(container); - container = null; - }); - /* eslint-disable jest/no-conditional-in-test */ it.each( [null, 'plugin', 'mu-plugin', 'theme', 'core', 'removed'].reduce( @@ -456,18 +425,17 @@ describe('ErrorContent', () => { (testBlockSource, status) => { const clientId = getTestBlock(testBlockSource); - render( + const { container } = render( , - container + /> ); - container.querySelector(`.components-button`).click(); + fireEvent.click(container.querySelector(`.components-button`)); expect(container.innerHTML).toContain('Markup status'); @@ -540,7 +508,10 @@ describe('ErrorContent', () => { : 'Kept' ); - container.querySelector('.amp-error__select-block').click(); + fireEvent.click( + container.querySelector('.amp-error__select-block') + ); + expect( select('core/block-editor').getSelectedBlock().clientId ).toBe(clientId); diff --git a/assets/src/block-validation/components/icon/test/icon.js b/assets/src/block-validation/components/icon/test/icon.js index f0d5153bc2a..6dd0f33e614 100644 --- a/assets/src/block-validation/components/icon/test/icon.js +++ b/assets/src/block-validation/components/icon/test/icon.js @@ -1,35 +1,16 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; - -/** - * WordPress dependencies - */ -import { render } from '@wordpress/element'; +import { render } from '@testing-library/react'; /** * Internal dependencies */ import { MoreMenuIcon, ToolbarIcon, StatusIcon } from '../index'; -let container; - describe('Icons', () => { - beforeEach(() => { - container = document.createElement('ul'); - document.body.appendChild(container); - }); - - afterEach(() => { - document.body.removeChild(container); - container = null; - }); - it('renders a toolbar icon without AMP broken and no badge', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.querySelector('.amp-toolbar-icon')).not.toBeNull(); expect( @@ -42,9 +23,7 @@ describe('Icons', () => { }); it('renders a toolbar icon without AMP broken and with a badge', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.querySelector('.amp-toolbar-icon')).not.toBeNull(); expect( @@ -57,9 +36,7 @@ describe('Icons', () => { }); it('renders a toolbar icon with AMP broken and with no badge', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.querySelector('.amp-toolbar-icon')).toBeNull(); expect( @@ -74,9 +51,7 @@ describe('Icons', () => { }); it('renders a toolbar icon with AMP broken and with a badge', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.querySelector('.amp-toolbar-icon')).toBeNull(); expect( @@ -91,9 +66,7 @@ describe('Icons', () => { }); it('renders the MoreMenuIcon', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.querySelector('.amp-toolbar-icon')).not.toBeNull(); expect( @@ -102,18 +75,14 @@ describe('Icons', () => { }); it('renders the StatusIcon', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.querySelector('.amp-status-icon')).not.toBeNull(); expect(container.querySelector('.amp-status-icon--broken')).toBeNull(); }); it('renders the broken StatusIcon', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect( container.querySelector('.amp-status-icon--broken') diff --git a/assets/src/block-validation/components/sidebar-notification/test/sidebar-notification.js b/assets/src/block-validation/components/sidebar-notification/test/sidebar-notification.js index b0a839e0558..3afe9f02c19 100644 --- a/assets/src/block-validation/components/sidebar-notification/test/sidebar-notification.js +++ b/assets/src/block-validation/components/sidebar-notification/test/sidebar-notification.js @@ -1,12 +1,7 @@ /** * External dependencies */ -import { act } from 'react-dom/test-utils'; - -/** - * WordPress dependencies - */ -import { render, unmountComponentAtNode } from '@wordpress/element'; +import { render } from '@testing-library/react'; /** * Internal dependencies @@ -14,23 +9,8 @@ import { render, unmountComponentAtNode } from '@wordpress/element'; import { SidebarNotification } from '../index'; describe('SidebarNotification', () => { - let container; - - beforeEach(() => { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - unmountComponentAtNode(container); - container.remove(); - container = null; - }); - it('renders notification without icon and call to action', () => { - act(() => { - render(, container); - }); + const { container } = render(); expect(container.innerHTML).toMatchSnapshot(); expect(container.children).toHaveLength(1); @@ -45,16 +25,13 @@ describe('SidebarNotification', () => { }); it('renders status message with icon and call to action', () => { - act(() => { - render( - } - action={