Introduce withSearchedProducts higher order component and refactor ProductsControl Component (https://github.com/woocommerce/woocommerce-blocks/pull/791)

* add new withSearchedProducts hoc

includes tests

* convert to functional component and wrap with new hoc

* remove dependency between tests

* Fix typo with PropTypes bool

Co-Authored-By: Albert Juhé Lluveras <contact@albertjuhe.com>

* remove unnecessary specific import

* fix bug introduced on refactor for selected prop recalc

* fix tests that were testing the wrong expectation

- also improved mocks a bit so they are a bit more realistic for the purpose of the test coverage.

* remove unnecessary Fragment

* tweak propType definitions and remove defaults

- this keeps argument expectations in sync with wrapped component and reduces chance of unexpected behaviour if `SearchListControl` logic changes.

* remove lodash.find dependency.

plugins/woocommerce-blocks/assets/js/components/products-control/index.js

@@ -2,58 +2,35 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
-import { debounce, find } from 'lodash';
-import PropTypes from 'prop-types';
 import { SearchListControl } from '@woocommerce/components';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
-import { isLargeCatalog, getProducts } from '../utils';
-
-class ProductsControl extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			list: [],
-			loading: true,
-		};
-
-		this.debouncedOnSearch = debounce( this.onSearch.bind( this ), 400 );
-	}
-
-	componentDidMount() {
-		const { selected } = this.props;
-
-		getProducts( { selected } )
-			.then( ( list ) => {
-				this.setState( { list, loading: false } );
-			} )
-			.catch( () => {
-				this.setState( { list: [], loading: false } );
-			} );
-	}
-
-	componentWillUnmount() {
-		this.debouncedOnSearch.cancel();
-	}
-
-	onSearch( search ) {
-		const { selected } = this.props;
-		getProducts( { selected, search } )
-			.then( ( list ) => {
-				this.setState( { list, loading: false } );
-			} )
-			.catch( () => {
-				this.setState( { list: [], loading: false } );
-			} );
-	}
-
-	render() {
-		const { list, loading } = this.state;
-		const { onChange, selected } = this.props;
+import { withSearchedProducts } from '../../hocs';
 
+/**
+ * The products control exposes a custom selector for searching and selecting
+ * products.
+ *
+ * @param {function} props.onChange  Callback fired when the selected item
+ *                                   changes
+ * @param {function} props.onSearch  Callback fired when a search is triggered
+ * @param {array}    props.selected  An array of selected products.
+ * @param {array}    props.products  An array of products to select from.
+ * @param {boolean}  props.isLoading Whether or not the products are being
+ *                                   loaded.
+ *
+ * @return {function} A functional component.
+ */
+const ProductsControl = ( {
+	onChange,
+	onSearch,
+	selected,
+	products,
+	isLoading,
+} ) => {
 	const messages = {
 		clear: __( 'Clear all products', 'woo-gutenberg-products-block' ),
 		list: __( 'Products', 'woo-gutenberg-products-block' ),
@@ -80,32 +57,31 @@ class ProductsControl extends Component {
 			'woo-gutenberg-products-block'
 		),
 	};
-
 	return (
-			<Fragment>
 		<SearchListControl
 			className="woocommerce-products"
-					list={ list }
-					isLoading={ loading }
-					selected={ selected.map( ( id ) => find( list, { id } ) ).filter( Boolean ) }
-					onSearch={ isLargeCatalog ? this.debouncedOnSearch : null }
+			list={ products }
+			isLoading={ isLoading }
+			selected={ selected }
+			onSearch={ onSearch }
 			onChange={ onChange }
 			messages={ messages }
 		/>
-			</Fragment>
 	);
-	}
-}
-
-ProductsControl.propTypes = {
-	/**
-	 * Callback to update the selected products.
-	 */
-	onChange: PropTypes.func.isRequired,
-	/**
-	 * The list of currently selected IDs.
-	 */
-	selected: PropTypes.array.isRequired,
 };
 
-export default ProductsControl;
+ProductsControl.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	onSearch: PropTypes.func,
+	selected: PropTypes.array,
+	products: PropTypes.array,
+	isLoading: PropTypes.bool,
+};
+
+ProductsControl.defaultProps = {
+	selected: [],
+	products: [],
+	isLoading: true,
+};
+
+export default withSearchedProducts( ProductsControl );

plugins/woocommerce-blocks/assets/js/hocs/index.js

@@ -1,2 +1,3 @@
 export { default as withComponentId } from './with-component-id';
 export { default as withProduct } from './with-product';
+export { default as withSearchedProducts } from './with-searched-products';

plugins/woocommerce-blocks/assets/js/hocs/test/with-searched-products.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import TestRenderer from 'react-test-renderer';
+import _ from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import withSearchedProducts from '../with-searched-products';
+import * as mockedUtils from '../../components/utils';
+
+// Mock the getProducts and isLargeCatalog values for tests.
+mockedUtils.getProducts = jest.fn().mockImplementation(
+	() => Promise.resolve(
+		[ { id: 10, name: 'foo' }, { id: 20, name: 'bar' } ]
+	)
+);
+mockedUtils.isLargeCatalog = true;
+
+// Add a mock implementation of debounce for testing so we can spy on
+// the onSearch call.
+const debouncedCancel = jest.fn();
+const debouncedAction = jest.fn();
+_.debounce = ( onSearch ) => {
+	const debounced = debouncedAction.mockImplementation(
+		() => {
+			onSearch();
+		}
+	);
+	debounced.cancel = debouncedCancel;
+	return debounced;
+};
+
+describe( 'withSearchedProducts Component', () => {
+	const { getProducts } = mockedUtils;
+	afterEach( () => {
+		debouncedCancel.mockClear();
+		debouncedAction.mockClear();
+		mockedUtils.getProducts.mockClear();
+		mockedUtils.isLargeCatalog = false;
+	} );
+	const TestComponent = withSearchedProducts( ( {
+		selected,
+		products,
+		isLoading,
+		onSearch,
+	} ) => {
+		return <div
+			products={ products }
+			selected={ selected }
+			isLoading={ isLoading }
+			onSearch={ onSearch }
+		/>;
+	} );
+	describe( 'lifecycle tests', () => {
+		const selected = [ 10 ];
+		const renderer = TestRenderer.create(
+			<TestComponent
+				selected={ selected }
+			/>
+		);
+		let props;
+		it( 'getProducts is called on mount with passed in selected ' +
+			'values', () => {
+			expect( getProducts ).toHaveBeenCalledWith( { selected } );
+			expect( getProducts ).toHaveBeenCalledTimes( 1 );
+		} );
+		it( 'has expected values for props', () => {
+			props = renderer.root.findByType( 'div' ).props;
+			expect( props.selected ).toEqual( [ { id: 10, name: 'foo' } ] );
+			expect( props.products ).toEqual(
+				[ { id: 10, name: 'foo' }, { id: 20, name: 'bar' } ]
+			);
+		} );
+		it( 'debounce and getProducts is called on search event', () => {
+			props = renderer.root.findByType( 'div' ).props;
+			props.onSearch();
+			expect( debouncedAction ).toHaveBeenCalled();
+			expect( getProducts ).toHaveBeenCalledTimes( 1 );
+		} );
+		it( 'debounce is cancelled on unmount', () => {
+			renderer.unmount();
+			expect( debouncedCancel ).toHaveBeenCalled();
+			expect( getProducts ).toHaveBeenCalledTimes( 0 );
+		} );
+	} );
+} );

plugins/woocommerce-blocks/assets/js/hocs/with-searched-products.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { debounce } from 'lodash';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { isLargeCatalog, getProducts } from '../components/utils';
+
+/**
+ * A higher order component that enhances the provided component with products
+ * from a search query.
+ */
+const withSearchedProducts = createHigherOrderComponent( ( OriginalComponent ) => {
+	/**
+	 * A Component wrapping the passed in component.
+	 *
+	 * @class WrappedComponent
+	 * @extends {Component}
+	 */
+	class WrappedComponent extends Component {
+		constructor() {
+			super( ...arguments );
+			this.state = {
+				list: [],
+				loading: true,
+			};
+			this.debouncedOnSearch = debounce( this.onSearch.bind( this ), 400 );
+		}
+
+		componentDidMount() {
+			const { selected } = this.props;
+			getProducts( { selected } )
+				.then( ( list ) => {
+					this.setState( { list, loading: false } );
+				} )
+				.catch( () => {
+					this.setState( { list: [], loading: false } );
+				} );
+		}
+
+		componentWillUnmount() {
+			this.debouncedOnSearch.cancel();
+		}
+
+		onSearch( search ) {
+			const { selected } = this.props;
+			getProducts( { selected, search } )
+				.then( ( list ) => {
+					this.setState( { list, loading: false } );
+				} )
+				.catch( () => {
+					this.setState( { list: [], loading: false } );
+				} );
+		}
+
+		render() {
+			const { list, loading } = this.state;
+			const { selected } = this.props;
+			return (
+				<OriginalComponent
+					{ ...this.props }
+					products={ list }
+					isLoading={ loading }
+					selected={ list.filter(
+						( { id } ) => selected.includes( id )
+					) }
+					onSearch={ isLargeCatalog ? this.debouncedOnSearch : null }
+				/>
+			);
+		}
+	}
+	WrappedComponent.propTypes = {
+		selected: PropTypes.array,
+	};
+	WrappedComponent.defaultProps = {
+		selected: [],
+	};
+	return WrappedComponent;
+}, 'withSearchedProducts' );
+
+export default withSearchedProducts;