From 7cc1d724ded1cf8d278c75c1ab21dc094ef0b88c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomek=20Wytr=C4=99bowicz?= Date: Thu, 13 May 2021 17:20:07 +0200 Subject: [PATCH] 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 --- .../packages/components/CHANGELOG.md | 1 + .../components/src/compare-filter/index.js | 7 +- .../src/compare-filter/stories/index.js | 7 +- .../src/compare-filter/test/compare-filter.js | 70 +++++++++++++++++++ plugins/woocommerce-admin/readme.txt | 2 + 5 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 plugins/woocommerce-admin/packages/components/src/compare-filter/test/compare-filter.js 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