diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 664aa46a9fd..2af83a30ec4 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/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 diff --git a/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js b/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js index 013f5553be7..4d63717e615 100644 --- a/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js +++ b/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 ( @@ -100,6 +100,7 @@ export class CompareFilter extends Component { ( - -); +export const Basic = ( { + path = new URL( document.location ).searchParams.get( 'path' ), +} ) => ; export default { title: 'WooCommerce Admin/components/CompareFilter', diff --git a/plugins/woocommerce-admin/packages/components/src/compare-filter/test/compare-filter.js b/plugins/woocommerce-admin/packages/components/src/compare-filter/test/compare-filter.js new file mode 100644 index 00000000000..f01e2e88681 --- /dev/null +++ b/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( ); + } ).not.toThrow(); + } ); + + it( 'should forward the `type` prop the Search component', () => { + props.type = 'custom'; + + render( ); + + // 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( ); + + // Check that Search component received the prop, without checking its behavior/internals/implementation details. + expect( Search ).toHaveBeenLastCalledWith( + expect.objectContaining( { + autocompleter: productAutocompleter, + } ), + expect.anything() + ); + } ); +} ); diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 0de0329b6e1..515cfedaa32 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/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