diff --git a/packages/connectors/src/store.ts b/packages/connectors/src/store.ts index 1335e050d845fc..2b5a68064a81d1 100644 --- a/packages/connectors/src/store.ts +++ b/packages/connectors/src/store.ts @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createReduxStore, register } from '@wordpress/data'; +import { createReduxStore, createSelector, register } from '@wordpress/data'; /** * Internal dependencies @@ -49,9 +49,11 @@ function reducer( } const selectors = { - getConnectors( state: ConnectorsState ): ConnectorConfig[] { - return Object.values( state.connectors ); - }, + getConnectors: createSelector( + ( state: ConnectorsState ): ConnectorConfig[] => + Object.values( state.connectors ), + ( state: ConnectorsState ) => [ state.connectors ] + ), getConnector( state: ConnectorsState, slug: string diff --git a/packages/connectors/src/test/store.ts b/packages/connectors/src/test/store.ts new file mode 100644 index 00000000000000..21bf785f36a59b --- /dev/null +++ b/packages/connectors/src/test/store.ts @@ -0,0 +1,54 @@ +/** + * WordPress dependencies + */ +import { createRegistry } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store, STORE_NAME } from '../store'; +import { unlock } from '../lock-unlock'; + +function createRegistryWithStore() { + const registry = createRegistry(); + registry.register( store ); + return registry; +} + +describe( 'connectors store', () => { + describe( 'getConnectors', () => { + it( 'should return the same reference if state has not changed', () => { + const registry = createRegistryWithStore(); + const { getConnectors } = unlock( registry.select( STORE_NAME ) ); + + const first = getConnectors(); + const second = getConnectors(); + + expect( first ).toBe( second ); + } ); + + it( 'should return a new reference after a connector is registered', () => { + const registry = createRegistryWithStore(); + const { getConnectors } = unlock( registry.select( STORE_NAME ) ); + const { registerConnector } = unlock( + registry.dispatch( STORE_NAME ) + ); + + const before = getConnectors(); + + registerConnector( 'test', { + label: 'Test', + description: 'A test connector', + } ); + + const after = getConnectors(); + + expect( before ).not.toBe( after ); + expect( after ).toHaveLength( 1 ); + expect( after[ 0 ] ).toMatchObject( { + slug: 'test', + label: 'Test', + } ); + } ); + } ); +} );