Forward `autocompleter` prop from `CompareFilter` to `Search` (https://github.com/woocommerce/woocommerce-admin/pull/6911)

- Forward `autocompleter` prop from `CompareFilter` to `Search`.
	Allow, to use the `custom` type of search, 
	previously it was complaining about lack of `autocompleter`,
	even though it was provided.

- Move `path` in Storybooks example to a parameter, to allow setting it in unit tests.
- Add few tests for FilterPicker. 
	- it renders the basic storybook example without throwing an error
	- it forwards `autocompleter` & `type` props

Fixes: woocommerce/woocommerce-admin#6890

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,5 +1,6 @@
 # Unreleased
 
+-   Fix `autocompleter` for custom Search in `CompareFilter` #6911
 -   SelectControl: automatically scroll to selected options when list is displayed. #6906
 -   SelectControl: no longer auto selects on rendering list. #6906
 -   Make `Search` accept synchronous `autocompleter.options`. #6884

plugins/woocommerce-admin/packages/components/src/compare-filter/index.js

@@ -91,7 +91,7 @@ export class CompareFilter extends Component {
 	}
 
 	render() {
-		const { labels, type } = this.props;
+		const { labels, type, autocompleter } = this.props;
 		const { selected } = this.state;
 		return (
 			<Card className="woocommerce-filters__compare">
@@ -100,6 +100,7 @@ export class CompareFilter extends Component {
 				</CardHeader>
 				<CardBody>
 					<Search
+						autocompleter={ autocompleter }
 						type={ type }
 						selected={ selected }
 						placeholder={ labels.placeholder }
@@ -165,6 +166,10 @@ CompareFilter.propTypes = {
 	 * Which type of autocompleter should be used in the Search
 	 */
 	type: PropTypes.string.isRequired,
+	/**
+	 * The custom autocompleter to be forwarded to the `Search` component.
+	 */
+	autocompleter: PropTypes.object,
 };
 
 CompareFilter.defaultProps = {

plugins/woocommerce-admin/packages/components/src/compare-filter/stories/index.js

@@ -3,7 +3,6 @@
  */
 import { CompareFilter } from '@woocommerce/components';
 
-const path = new URL( document.location ).searchParams.get( 'path' );
 const query = {};
 const compareFilter = {
 	type: 'products',
@@ -19,9 +18,9 @@ const compareFilter = {
 	},
 };
 
-export const Basic = () => (
+export const Basic = ( {
-	<CompareFilter path={ path } query={ query } { ...compareFilter } />
+	path = new URL( document.location ).searchParams.get( 'path' ),
-);
+} ) => <CompareFilter path={ path } query={ query } { ...compareFilter } />;
 
 export default {
 	title: 'WooCommerce Admin/components/CompareFilter',

plugins/woocommerce-admin/packages/components/src/compare-filter/test/compare-filter.js

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Basic } from '../stories/index';
+import { CompareFilter } from '../index';
+import Search from '../../search';
+import productAutocompleter from '../../search/autocompleters/product';
+// Due to Jest implementation we cannot mock it only for specific tests.
+// If your test requires non-mocked Search, move them to another test file.
+jest.mock( '../../search' );
+Search.mockName( 'Search' );
+
+describe( 'CompareFilter', () => {
+	let props;
+	beforeEach( () => {
+		props = {
+			path: '/foo/bar',
+			type: 'products',
+			param: 'product',
+			getLabels() {
+				return Promise.resolve( [] );
+			},
+			labels: {
+				helpText: 'Select at least two to compare',
+				placeholder: 'Search for things to compare',
+				title: 'Compare Things',
+				update: 'Compare',
+			},
+		};
+	} );
+	it( 'should render the example from the storybook', () => {
+		const path = '/story/woocommerce-admin-components-comparefilter--basic';
+
+		expect( function () {
+			render( <Basic path={ path } /> );
+		} ).not.toThrow();
+	} );
+
+	it( 'should forward the `type` prop the Search component', () => {
+		props.type = 'custom';
+
+		render( <CompareFilter { ...props } /> );
+
+		// Check that Search component received the prop, without checking its behavior/internals/implementation details.
+		expect( Search ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				type: 'custom',
+			} ),
+			expect.anything()
+		);
+	} );
+	it( 'should forward the `autocompleter` prop the Search component', () => {
+		props.autocompleter = productAutocompleter;
+
+		render( <CompareFilter { ...props } /> );
+
+		// Check that Search component received the prop, without checking its behavior/internals/implementation details.
+		expect( Search ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				autocompleter: productAutocompleter,
+			} ),
+			expect.anything()
+		);
+	} );
+} );

plugins/woocommerce-admin/readme.txt

@@ -74,6 +74,8 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 == Changelog ==
 
 == Unreleased ==
+
+- Fix: Autocompleter for custom Search in CompareFilter #6911
 - Enhancement: Adding Slotfills for remote payments and SettingsForm component. #6932
 - Fix: Make `Search` accept synchronous `autocompleter.options`. #6884
 - Add: Consume remote payment methods on frontend #6867