From 1d21a3e2fd7c0d56aa923988ae759f09c02ab326 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 16 Dec 2022 10:20:05 +0100 Subject: [PATCH 1/3] useSelect: add unit tests for static select mode --- .../src/components/use-select/test/index.js | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js index 6dccfd74b741fc..4b7babcedeaac7 100644 --- a/packages/data/src/components/use-select/test/index.js +++ b/packages/data/src/components/use-select/test/index.js @@ -1146,4 +1146,38 @@ describe( 'useSelect', () => { expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' ); } ); } ); + + describe( 'static store selection mode', () => { + it( 'can read the current value from store', () => { + registry.registerStore( 'testStore', { + reducer: ( s = 0, a ) => ( a.type === 'INC' ? s + 1 : s ), + actions: { inc: () => ( { type: 'INC' } ) }, + selectors: { get: ( s ) => s }, + } ); + + const record = jest.fn(); + + function TestComponent() { + const { get } = useSelect( 'testStore' ); + return ( + + ); + } + + render( + + + + ); + + fireEvent.click( screen.getByRole( 'button' ) ); + expect( record ).toHaveBeenLastCalledWith( 0 ); + + // no need to act() as the component doesn't react to the updates + registry.dispatch( 'testStore' ).inc(); + + fireEvent.click( screen.getByRole( 'button' ) ); + expect( record ).toHaveBeenLastCalledWith( 1 ); + } ); + } ); } ); From f97baf6961a4b73888218aa7d4ead9ce7ac2c85b Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Fri, 16 Dec 2022 12:11:18 +0200 Subject: [PATCH 2/3] Refactor to use userEvent instead of fireEvent --- .../src/components/use-select/test/index.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js index 4b7babcedeaac7..54ef15098d5b60 100644 --- a/packages/data/src/components/use-select/test/index.js +++ b/packages/data/src/components/use-select/test/index.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { act, render, fireEvent, screen } from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; /** * WordPress dependencies @@ -435,7 +436,9 @@ describe( 'useSelect', () => { ); } ); - it( 'captures state changes scheduled between render and effect', () => { + it( 'captures state changes scheduled between render and effect', async () => { + const user = userEvent.setup(); + registry.registerStore( 'store-1', counterStore ); class ChildComponent extends Component { @@ -484,7 +487,7 @@ describe( 'useSelect', () => { ); - fireEvent.click( screen.getByText( 'triggerChildDispatch' ) ); + await user.click( screen.getByText( 'triggerChildDispatch' ) ); expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 ); expect( screen.getByRole( 'status' ) ).toHaveTextContent( @@ -1148,7 +1151,9 @@ describe( 'useSelect', () => { } ); describe( 'static store selection mode', () => { - it( 'can read the current value from store', () => { + it( 'can read the current value from store', async () => { + const user = userEvent.setup(); + registry.registerStore( 'testStore', { reducer: ( s = 0, a ) => ( a.type === 'INC' ? s + 1 : s ), actions: { inc: () => ( { type: 'INC' } ) }, @@ -1170,13 +1175,13 @@ describe( 'useSelect', () => { ); - fireEvent.click( screen.getByRole( 'button' ) ); + await user.click( screen.getByRole( 'button' ) ); expect( record ).toHaveBeenLastCalledWith( 0 ); // no need to act() as the component doesn't react to the updates registry.dispatch( 'testStore' ).inc(); - fireEvent.click( screen.getByRole( 'button' ) ); + await user.click( screen.getByRole( 'button' ) ); expect( record ).toHaveBeenLastCalledWith( 1 ); } ); } ); From 172644f4e5f688548d16affa47e1b7a8f3d16bff Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Fri, 16 Dec 2022 12:33:24 +0200 Subject: [PATCH 3/3] Revert "Refactor to use userEvent instead of fireEvent" This reverts commit f97baf6961a4b73888218aa7d4ead9ce7ac2c85b. --- .../src/components/use-select/test/index.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js index 54ef15098d5b60..4b7babcedeaac7 100644 --- a/packages/data/src/components/use-select/test/index.js +++ b/packages/data/src/components/use-select/test/index.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { act, render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { act, render, fireEvent, screen } from '@testing-library/react'; /** * WordPress dependencies @@ -436,9 +435,7 @@ describe( 'useSelect', () => { ); } ); - it( 'captures state changes scheduled between render and effect', async () => { - const user = userEvent.setup(); - + it( 'captures state changes scheduled between render and effect', () => { registry.registerStore( 'store-1', counterStore ); class ChildComponent extends Component { @@ -487,7 +484,7 @@ describe( 'useSelect', () => { ); - await user.click( screen.getByText( 'triggerChildDispatch' ) ); + fireEvent.click( screen.getByText( 'triggerChildDispatch' ) ); expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 ); expect( screen.getByRole( 'status' ) ).toHaveTextContent( @@ -1151,9 +1148,7 @@ describe( 'useSelect', () => { } ); describe( 'static store selection mode', () => { - it( 'can read the current value from store', async () => { - const user = userEvent.setup(); - + it( 'can read the current value from store', () => { registry.registerStore( 'testStore', { reducer: ( s = 0, a ) => ( a.type === 'INC' ? s + 1 : s ), actions: { inc: () => ( { type: 'INC' } ) }, @@ -1175,13 +1170,13 @@ describe( 'useSelect', () => { ); - await user.click( screen.getByRole( 'button' ) ); + fireEvent.click( screen.getByRole( 'button' ) ); expect( record ).toHaveBeenLastCalledWith( 0 ); // no need to act() as the component doesn't react to the updates registry.dispatch( 'testStore' ).inc(); - await user.click( screen.getByRole( 'button' ) ); + fireEvent.click( screen.getByRole( 'button' ) ); expect( record ).toHaveBeenLastCalledWith( 1 ); } ); } );