From 764a7596bed0c25b10d09519dd0dfdabe288672f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 16 Mar 2023 17:46:14 +0400 Subject: [PATCH 1/5] Plugins: Add unit tests for the 'PluginArea' component --- .../src/components/test/plugin-area.js | 119 ++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 packages/plugins/src/components/test/plugin-area.js diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js new file mode 100644 index 00000000000000..e67cb8a10ee0ef --- /dev/null +++ b/packages/plugins/src/components/test/plugin-area.js @@ -0,0 +1,119 @@ +/** + * External dependencies + */ +import { act, render, cleanup } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { getPlugins, unregisterPlugin, registerPlugin } from '../../api'; +import PluginArea from '../plugin-area'; + +describe( 'PluginArea', () => { + afterEach( () => { + cleanup(); + getPlugins().forEach( ( plugin ) => { + unregisterPlugin( plugin.name ); + } ); + getPlugins( 'my-app' ).forEach( ( plugin ) => { + unregisterPlugin( plugin.name ); + } ); + } ); + + const TestComponent = ( { content } ) => { + return `plugin: ${ content }.`; + }; + + test( 'renders unscoped plugin', () => { + registerPlugin( 'unscoped', { + render: () => , + icon: 'smiley', + } ); + + const { container } = render( ); + + expect( container ).toHaveTextContent( 'plugin: unscoped.' ); + } ); + + test( 'renders scoped plugin', () => { + registerPlugin( 'scoped', { + render: () => , + icon: 'smiley', + scope: 'my-app', + } ); + + const { container } = render( ); + + expect( container ).toHaveTextContent( 'plugin: scoped.' ); + } ); + + test( 'rerenders when new plugin is registered', () => { + registerPlugin( 'foo', { + render: () => , + icon: 'smiley', + scope: 'my-app', + } ); + + const { container } = render( ); + + act( () => { + registerPlugin( 'bar', { + render: () => , + icon: 'smiley', + scope: 'my-app', + } ); + } ); + + expect( container ).toHaveTextContent( 'plugin: bar.' ); + } ); + + test( 'rerenders when new plugin is unregistered', () => { + registerPlugin( 'one', { + render: () => , + icon: 'smiley', + scope: 'my-app', + } ); + registerPlugin( 'two', { + render: () => , + icon: 'smiley', + scope: 'my-app', + } ); + + const { container } = render( ); + + expect( container ).toHaveTextContent( 'plugin: one.plugin: two.' ); + + act( () => { + unregisterPlugin( 'one' ); + } ); + + expect( container ).toHaveTextContent( 'plugin: two.' ); + } ); + + test.failing( + 'does not rerender when plugin is added to a different scope', + () => { + const ComponentSpy = jest.fn( ( { content } ) => { + return `plugin: ${ content }.`; + } ); + + registerPlugin( 'scoped', { + render: () => , + icon: 'smiley', + scope: 'my-app', + } ); + + render( ); + + act( () => { + registerPlugin( 'unscoped', { + render: () => , + icon: 'smiley', + } ); + } ); + + // Any store update triggers setState and causes PluginArea to rerender. + expect( ComponentSpy ).toHaveBeenCalledTimes( 1 ); + } + ); +} ); From 89f5900efbc3a52be37ae467758fa2417e1de179 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 17 Mar 2023 11:38:03 +0400 Subject: [PATCH 2/5] Fix type in the test description --- packages/plugins/src/components/test/plugin-area.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js index e67cb8a10ee0ef..8ea1de57d3d32c 100644 --- a/packages/plugins/src/components/test/plugin-area.js +++ b/packages/plugins/src/components/test/plugin-area.js @@ -67,7 +67,7 @@ describe( 'PluginArea', () => { expect( container ).toHaveTextContent( 'plugin: bar.' ); } ); - test( 'rerenders when new plugin is unregistered', () => { + test( 'rerenders when a plugin is unregistered', () => { registerPlugin( 'one', { render: () => , icon: 'smiley', From 11ba29d85103671a62dad6299e1419ac72f653d6 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 20 Mar 2023 10:54:35 +0400 Subject: [PATCH 3/5] Update packages/plugins/src/components/test/plugin-area.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Greg Ziółkowski --- packages/plugins/src/components/test/plugin-area.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js index 8ea1de57d3d32c..3b15e99a357540 100644 --- a/packages/plugins/src/components/test/plugin-area.js +++ b/packages/plugins/src/components/test/plugin-area.js @@ -91,7 +91,7 @@ describe( 'PluginArea', () => { } ); test.failing( - 'does not rerender when plugin is added to a different scope', + 'does not rerender when a plugin is added to a different scope', () => { const ComponentSpy = jest.fn( ( { content } ) => { return `plugin: ${ content }.`; From c610b956c5aa50c683f8aedf73bf246fb4028abd Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 20 Mar 2023 10:54:43 +0400 Subject: [PATCH 4/5] Update packages/plugins/src/components/test/plugin-area.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Greg Ziółkowski --- packages/plugins/src/components/test/plugin-area.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js index 3b15e99a357540..d33f9e5f2c1b9d 100644 --- a/packages/plugins/src/components/test/plugin-area.js +++ b/packages/plugins/src/components/test/plugin-area.js @@ -47,7 +47,7 @@ describe( 'PluginArea', () => { expect( container ).toHaveTextContent( 'plugin: scoped.' ); } ); - test( 'rerenders when new plugin is registered', () => { + test( 'rerenders when a new plugin is registered', () => { registerPlugin( 'foo', { render: () => , icon: 'smiley', From d0890dd72a2e6894ae83c55e39f8638fa6522d6a Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 20 Mar 2023 11:09:53 +0400 Subject: [PATCH 5/5] Add an explanation for manual cleanup --- packages/plugins/src/components/test/plugin-area.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js index d33f9e5f2c1b9d..68ed2b5368d032 100644 --- a/packages/plugins/src/components/test/plugin-area.js +++ b/packages/plugins/src/components/test/plugin-area.js @@ -11,6 +11,8 @@ import PluginArea from '../plugin-area'; describe( 'PluginArea', () => { afterEach( () => { + // Unmount components before unregistering the plugins. + // RTL uses top-level `afterEach` for cleanup, executed after this teardown. cleanup(); getPlugins().forEach( ( plugin ) => { unregisterPlugin( plugin.name );