diff --git a/data/index.js b/data/index.js
index 69fe38b89a2a80..85b67b7c3b2470 100644
--- a/data/index.js
+++ b/data/index.js
@@ -288,7 +288,5 @@ export const query = ( mapSelectToProps ) => {
plugin: 'Gutenberg',
} );
- return withSelect( ( props ) => {
- return mapSelectToProps( select, props );
- } );
+ return withSelect( mapSelectToProps );
};
diff --git a/data/test/index.js b/data/test/index.js
index 010387b0c5ccdb..12cfd573adbbf7 100644
--- a/data/test/index.js
+++ b/data/test/index.js
@@ -1,11 +1,13 @@
/**
* External dependencies
*/
+import { noop, flowRight } from 'lodash';
import { mount } from 'enzyme';
/**
* WordPress dependencies
*/
+import { deprecated } from '@wordpress/utils';
import { compose } from '@wordpress/element';
/**
@@ -21,8 +23,13 @@ import {
withSelect,
withDispatch,
subscribe,
+ query,
} from '../';
+jest.mock( '@wordpress/utils', () => ( {
+ deprecated: jest.fn(),
+} ) );
+
describe( 'registerStore', () => {
it( 'should be shorthand for reducer, actions, selectors registration', () => {
const store = registerStore( 'butcher', {
@@ -95,17 +102,24 @@ describe( 'select', () => {
expect( select( 'reducer', 'selector', 'arg' ) ).toEqual( 'result' );
expect( selector ).toBeCalledWith( store.getState(), 'arg' );
- expect( console ).toHaveWarned();
+ expect( deprecated ).toHaveBeenCalled();
} );
} );
describe( 'withSelect', () => {
+ let wrapper;
+
const unsubscribes = [];
afterEach( () => {
let unsubscribe;
while ( ( unsubscribe = unsubscribes.shift() ) ) {
unsubscribe();
}
+
+ if ( wrapper ) {
+ wrapper.unmount();
+ wrapper = null;
+ }
} );
function subscribeWithUnsubscribe( ...args ) {
@@ -114,135 +128,149 @@ describe( 'withSelect', () => {
return unsubscribe;
}
- it( 'passes the relevant data to the component', () => {
- registerReducer( 'reactReducer', () => ( { reactKey: 'reactState' } ) );
- registerSelectors( 'reactReducer', {
- reactSelector: ( state, key ) => state[ key ],
- } );
-
- // In normal circumstances, the fact that we have to add an arbitrary
- // prefix to the variable name would be concerning, and perhaps an
- // argument that we ought to expect developer to use select from the
- // wp.data export. But in-fact, this serves as a good deterrent for
- // including both `withSelect` and `select` in the same scope, which
- // shouldn't occur for a typical component, and if it did might wrongly
- // encourage the developer to use `select` within the component itself.
- const Component = withSelect( ( _select, ownProps ) => ( {
- data: _select( 'reactReducer' ).reactSelector( ownProps.keyName ),
- } ) )( ( props ) =>
{ props.data }
);
-
- const wrapper = mount( );
+ function cases( withSelectImplementation, extraAssertions = noop ) {
+ function itWithExtraAssertions( description, test ) {
+ return it( description, flowRight( test, extraAssertions ) );
+ }
- // Wrapper is the enhanced component. Find props on the rendered child.
- const child = wrapper.childAt( 0 );
- expect( child.props() ).toEqual( {
- keyName: 'reactKey',
- data: 'reactState',
+ itWithExtraAssertions( 'passes the relevant data to the component', () => {
+ registerReducer( 'reactReducer', () => ( { reactKey: 'reactState' } ) );
+ registerSelectors( 'reactReducer', {
+ reactSelector: ( state, key ) => state[ key ],
+ } );
+
+ // In normal circumstances, the fact that we have to add an arbitrary
+ // prefix to the variable name would be concerning, and perhaps an
+ // argument that we ought to expect developer to use select from the
+ // wp.data export. But in-fact, this serves as a good deterrent for
+ // including both `withSelect` and `select` in the same scope, which
+ // shouldn't occur for a typical component, and if it did might wrongly
+ // encourage the developer to use `select` within the component itself.
+ const Component = withSelectImplementation( ( _select, ownProps ) => ( {
+ data: _select( 'reactReducer' ).reactSelector( ownProps.keyName ),
+ } ) )( ( props ) =>
);
+ wrapper.setProps( { offset: 10 } );
- const wrapper = mount( );
+ expect( wrapper.childAt( 0 ).text() ).toBe( '10' );
+ } );
- wrapper.setProps( { offset: 10 } );
+ itWithExtraAssertions( 'ensures component is still mounted before setting state', () => {
+ // This test verifies that even though unsubscribe doesn't take effect
+ // until after the current listener stack is called, we don't attempt
+ // to setState on an unmounting `withSelect` component. It will fail if
+ // an attempt is made to `setState` on an unmounted component.
+ const store = registerReducer( 'counter', ( state = 0, action ) => {
+ if ( action.type === 'increment' ) {
+ return state + 1;
+ }
- expect( wrapper.childAt( 0 ).text() ).toBe( '10' );
+ return state;
+ } );
- wrapper.unmount();
- } );
+ registerSelectors( 'counter', {
+ getCount: ( state, offset ) => state + offset,
+ } );
- it( 'ensures component is still mounted before setting state', () => {
- // This test verifies that even though unsubscribe doesn't take effect
- // until after the current listener stack is called, we don't attempt
- // to setState on an unmounting `withSelect` component. It will fail if
- // an attempt is made to `setState` on an unmounted component.
- const store = registerReducer( 'counter', ( state = 0, action ) => {
- if ( action.type === 'increment' ) {
- return state + 1;
- }
+ subscribeWithUnsubscribe( () => {
+ wrapper.unmount();
+ } );
- return state;
- } );
+ const Component = withSelectImplementation( ( _select, ownProps ) => ( {
+ count: _select( 'counter' ).getCount( ownProps.offset ),
+ } ) )( ( props ) =>