Forward autocompleter prop from CompareFilter to Search

[tomalec]

(Follow-up to #6880, to make `ReportFilters support custom Search)

• 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: #6890
Needed for:242-gh-woocommerce/google-listings-and-ads

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader

No new texts or animations were introduced, existing ones behave as before.

• [n/a] All animations respect prefers-reduced-motion
• [n/a] All text has at least a 4.5 color contrast with its background

Screenshots

Detailed test instructions:

• Create CompareFilter with type="custom" and autocompleter

  <CompareFilter
  	type: 'custom',
  	autocompleter: {...} // Even the one copied from exiting ones.
  />

• Check for errors.

Doubts:

1. I was wondering whether maybe the more sustainable and flexible solution would be to either forward all the props to allow customization of the Search element, and do not curate the list of forwarded ones.

[becdetat]

What do you think about changing this to searchAutocompleter? That could make it more obvious that it is used by search.

[tomalec]

But then it would be inconsistent with type which is also kind of searchType:

	/**
	 * 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,

and changing type would be a breaking change.

As mentioned above I was thinking of doing it another way around and provide all props together like:

	searchProps: PropTypes.shape( {
		placeholder: PropTypes.string,
		type: PropTypes.string.isRequired,
		autocompleter: PropTypes.object,
	} ),

Or even accepting the entire component as a prop.

Personally, to keep the API and prop names consistent, I'd either:

1. Leave it as is, or
2. Group all search props together.

WDYT?

[becdetat]

Apart from my one comment, this works well and the code is good. Pre-approving. Thanks!

[tomalec]

I'm merging it as is. autocompleter vs. searchAutocompleter discussion could be continued at woocommerce/woocommerce#32254