@wordpress/data 6.7.0 → 6.10.0

package/src/components/use-select/test/index.js

@@ -118,6 +118,71 @@ describe( 'useSelect', () => {
 		expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
 	} );
 
+	it( 'avoid calling nested listener after unmounted', async () => {
+		registry.registerStore( 'toggler', {
+			reducer: ( state = false, action ) =>
+				action.type === 'TOGGLE' ? ! state : state,
+			actions: {
+				toggle: () => ( { type: 'TOGGLE' } ),
+			},
+			selectors: {
+				get: ( state ) => state,
+			},
+		} );
+
+		const mapSelect = ( select ) => select( 'toggler' ).get();
+
+		const mapSelectChild = jest.fn( mapSelect );
+		function Child() {
+			const show = useSelect( mapSelectChild, [] );
+			return show ? 'yes' : 'no';
+		}
+
+		const mapSelectParent = jest.fn( mapSelect );
+		function Parent() {
+			const show = useSelect( mapSelectParent, [] );
+			return show ? <Child /> : 'none';
+		}
+
+		const rendered = render(
+			<RegistryProvider value={ registry }>
+				<Parent />
+			</RegistryProvider>
+		);
+
+		// Initial render renders only parent and subscribes the parent to store.
+		expect( rendered.getByText( 'none' ) ).toBeInTheDocument();
+		expect( mapSelectParent ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectChild ).toHaveBeenCalledTimes( 0 );
+
+		// act() does batched updates internally, i.e., any scheduled setStates or effects
+		// will be executed only after the dispatch finishes. But we want to opt out of
+		// batched updates here. We want all the setStates to be done synchronously, as the
+		// store listeners are called. The async/await code is a trick to do it: do the
+		// dispatch in a different event loop tick, where the batched updates are no longer active.
+		await act( async () => {
+			await Promise.resolve();
+			registry.dispatch( 'toggler' ).toggle();
+		} );
+
+		// Child was rendered and subscribed to the store, as the _second_ subscription.
+		expect( rendered.getByText( 'yes' ) ).toBeInTheDocument();
+		expect( mapSelectParent ).toHaveBeenCalledTimes( 3 );
+		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+
+		await act( async () => {
+			await Promise.resolve();
+			registry.dispatch( 'toggler' ).toggle();
+		} );
+
+		// Check that child was unmounted without any extra state update being performed on it.
+		// I.e., `mapSelectChild` was never called again, and no "state update on an unmounted
+		// component" warning was triggered.
+		expect( rendered.getByText( 'none' ) ).toBeInTheDocument();
+		expect( mapSelectParent ).toHaveBeenCalledTimes( 4 );
+		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+	} );
+
 	describe( 'rerenders as expected with various mapSelect return types', () => {
 		const getComponent = ( mapSelectSpy ) => () => {
 			const data = useSelect( mapSelectSpy, [] );
@@ -819,10 +884,10 @@ describe( 'useSelect', () => {
 			// Ensure the async update was flushed during the rerender.
 			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
 
-			// initial render + subscription check + flushed store update
+			// initial render + subscription check + rerender with isAsync=false
 			expect( selectSpy ).toHaveBeenCalledTimes( 3 );
-			// initial render + rerender with isAsync=false + store state update
-			expect( TestComponent ).toHaveBeenCalledTimes( 3 );
+			// initial render + rerender with isAsync=false
+			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
 
 		it( 'cancels scheduled updates when mapSelect function changes', async () => {
@@ -960,4 +1025,75 @@ describe( 'useSelect', () => {
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
 	} );
+
+	describe( 'usage without dependencies array', () => {
+		function registerStore( name, initial ) {
+			registry.registerStore( name, {
+				reducer: ( s = initial, a ) => ( a.type === 'inc' ? s + 1 : s ),
+				actions: { inc: () => ( { type: 'inc' } ) },
+				selectors: { get: ( s ) => s },
+			} );
+		}
+
+		it( 'does not memoize the callback when there are no deps', () => {
+			registerStore( 'store', 1 );
+
+			const Status = ( { multiple } ) => {
+				const count = useSelect(
+					( select ) => select( 'store' ).get() * multiple
+				);
+				return <div role="status">{ count }</div>;
+			};
+
+			const App = ( { multiple } ) => (
+				<RegistryProvider value={ registry }>
+					<Status multiple={ multiple } />
+				</RegistryProvider>
+			);
+
+			const rendered = render( <App multiple={ 1 } /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+
+			// Check that the most recent value of `multiple` is used to render:
+			// the old callback wasn't memoized and there is no stale closure problem.
+			rendered.rerender( <App multiple={ 2 } /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 2 );
+		} );
+
+		it( 'subscribes only stores used by the initial callback', () => {
+			registerStore( 'counter-1', 1 );
+			registerStore( 'counter-2', 10 );
+
+			const Status = ( { store } ) => {
+				const count = useSelect( ( select ) => select( store ).get() );
+				return <div role="status">{ count }</div>;
+			};
+
+			const App = ( { store } ) => (
+				<RegistryProvider value={ registry }>
+					<Status store={ store } />
+				</RegistryProvider>
+			);
+
+			// initial render with counter-1
+			const rendered = render( <App store="counter-1" /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 1 );
+
+			// update from counter-1
+			act( () => {
+				registry.dispatch( 'counter-1' ).inc();
+			} );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 2 );
+
+			// rerender with counter-2
+			rendered.rerender( <App store="counter-2" /> );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 10 );
+
+			// update from counter-2 is ignored because component is subcribed only to counter-1
+			act( () => {
+				registry.dispatch( 'counter-2' ).inc();
+			} );
+			expect( rendered.getByRole( 'status' ) ).toHaveTextContent( 10 );
+		} );
+	} );
 } );

package/src/components/use-select/test/suspense.js

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import { render, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createRegistry,
+	createReduxStore,
+	useSuspenseSelect,
+	RegistryProvider,
+} from '@wordpress/data';
+import { Component, Suspense } from '@wordpress/element';
+
+jest.useRealTimers();
+
+function createRegistryWithStore() {
+	const initialState = {
+		prefix: 'pre-',
+		token: null,
+		data: null,
+		fails: true,
+	};
+
+	const reducer = ( state = initialState, action ) => {
+		switch ( action.type ) {
+			case 'RECEIVE_TOKEN':
+				return { ...state, token: action.token };
+			case 'RECEIVE_DATA':
+				return { ...state, data: action.data };
+			default:
+				return state;
+		}
+	};
+
+	const selectors = {
+		getPrefix: ( state ) => state.prefix,
+		getToken: ( state ) => state.token,
+		getData: ( state, token ) => {
+			if ( ! token ) {
+				throw 'missing token in selector';
+			}
+			return state.data;
+		},
+		getThatFails: ( state ) => state.fails,
+	};
+
+	const sleep = ( ms ) => new Promise( ( r ) => setTimeout( () => r(), ms ) );
+
+	const resolvers = {
+		getToken: () => async ( { dispatch } ) => {
+			await sleep( 10 );
+			dispatch( { type: 'RECEIVE_TOKEN', token: 'token' } );
+		},
+		getData: ( token ) => async ( { dispatch } ) => {
+			await sleep( 10 );
+			if ( ! token ) {
+				throw 'missing token in resolver';
+			}
+			dispatch( { type: 'RECEIVE_DATA', data: 'therealdata' } );
+		},
+		getThatFails: () => async () => {
+			await sleep( 10 );
+			throw 'resolution failed';
+		},
+	};
+
+	const store = createReduxStore( 'test', {
+		reducer,
+		selectors,
+		resolvers,
+	} );
+
+	const registry = createRegistry();
+	registry.register( store );
+
+	return { registry, store };
+}
+
+describe( 'useSuspenseSelect', () => {
+	it( 'renders after suspending a few times', async () => {
+		const { registry, store } = createRegistryWithStore();
+		let attempts = 0;
+		let renders = 0;
+
+		const UI = () => {
+			attempts++;
+			const { result } = useSuspenseSelect( ( select ) => {
+				const prefix = select( store ).getPrefix();
+				const token = select( store ).getToken();
+				const data = select( store ).getData( token );
+				return { result: prefix + data };
+			}, [] );
+			renders++;
+			return <div aria-label="loaded">{ result }</div>;
+		};
+
+		const App = () => (
+			<RegistryProvider value={ registry }>
+				<Suspense fallback="loading">
+					<UI />
+				</Suspense>
+			</RegistryProvider>
+		);
+
+		const rendered = render( <App /> );
+		await waitFor( () => rendered.getByLabelText( 'loaded' ) );
+
+		// Verify there were 3 attempts to render. Suspended twice because of
+		// `getToken` and `getData` selectors not being resolved, and then finally
+		// rendered after all data got loaded.
+		expect( attempts ).toBe( 3 );
+		expect( renders ).toBe( 1 );
+	} );
+
+	it( 'shows error when resolution fails', async () => {
+		const { registry, store } = createRegistryWithStore();
+
+		const UI = () => {
+			const { token } = useSuspenseSelect( ( select ) => {
+				// Call a selector whose resolution fails. The `useSuspenseSelect`
+				// is then supposed to throw the resolution error.
+				return { token: select( store ).getThatFails() };
+			}, [] );
+			return <div aria-label="loaded">{ token }</div>;
+		};
+
+		class Error extends Component {
+			state = { error: null };
+
+			static getDerivedStateFromError( error ) {
+				return { error };
+			}
+
+			render() {
+				if ( this.state.error ) {
+					return <div aria-label="error">{ this.state.error }</div>;
+				}
+				return this.props.children;
+			}
+		}
+
+		const App = () => (
+			<RegistryProvider value={ registry }>
+				<Error>
+					<Suspense fallback="loading">
+						<UI />
+					</Suspense>
+				</Error>
+			</RegistryProvider>
+		);
+
+		const rendered = render( <App /> );
+		const label = await waitFor( () => rendered.getByLabelText( 'error' ) );
+		expect( label.textContent ).toBe( 'resolution failed' );
+		expect( console ).toHaveErrored();
+	} );
+} );

package/src/index.js

@@ -19,7 +19,10 @@ export {
 	RegistryConsumer,
 	useRegistry,
 } from './components/registry-provider';
-export { default as useSelect } from './components/use-select';
+export {
+	default as useSelect,
+	useSuspenseSelect,
+} from './components/use-select';
 export { useDispatch } from './components/use-dispatch';
 export { AsyncModeProvider } from './components/async-mode-provider';
 export { createRegistry } from './registry';
@@ -115,6 +118,18 @@ export const select = defaultRegistry.select;
  */
 export const resolveSelect = defaultRegistry.resolveSelect;
 
+/**
+ * Given the name of a registered store, returns an object containing the store's
+ * selectors pre-bound to state so that you only need to supply additional arguments,
+ * and modified so that they throw promises in case the selector is not resolved yet.
+ *
+ * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
+ *                                                       or the store descriptor.
+ *
+ * @return {Object} Object containing the store's suspense-wrapped selectors.
+ */
+export const suspendSelect = defaultRegistry.suspendSelect;
+
 /**
  * Given the name of a registered store, returns an object of the store's action creators.
  * Calling an action creator will cause it to be dispatched, updating the state value accordingly.