diff --git a/plugins/woocommerce-blocks/assets/js/components/search-list-control/index.js b/plugins/woocommerce-blocks/assets/js/components/search-list-control/index.js index 0ce88ceb1d6..6cd6ba03efa 100644 --- a/plugins/woocommerce-blocks/assets/js/components/search-list-control/index.js +++ b/plugins/woocommerce-blocks/assets/js/components/search-list-control/index.js @@ -104,7 +104,7 @@ export class SearchListControl extends Component { } render() { - const { className, search, selected, setState } = this.props; + const { className = '', search, selected, setState } = this.props; const messages = { ...defaultMessages, ...this.props.messages }; const list = this.getFilteredList( this.props.list, search ); const noResults = search ? sprintf( messages.noResults, search ) : null; diff --git a/plugins/woocommerce-blocks/assets/js/components/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce-blocks/assets/js/components/search-list-control/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000..b2045c78972 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/components/search-list-control/test/__snapshots__/index.js.snap @@ -0,0 +1,1113 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SearchListControl should render a search box and list of options 1`] = ` +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + + + + + +
+
+
+`; + +exports[`SearchListControl should render a search box and list of options with a custom className 1`] = ` +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + + + + + +
+
+
+`; + +exports[`SearchListControl should render a search box and list of options, with a custom render callback for each item 1`] = ` +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+
+ Apricots + ! +
+
+ Clementine + ! +
+
+ Elderberry + ! +
+
+ Guava + ! +
+
+ Lychee + ! +
+
+ Mulberry + ! +
+
+
+
+`; + +exports[`SearchListControl should render a search box and list of options, with a custom search input message 1`] = ` +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + + + + + +
+
+
+`; + +exports[`SearchListControl should render a search box and no options 1`] = ` +
+
+
+
+ + +
+
+
+
+`; + +exports[`SearchListControl should render a search box with a search term, and no matching options 1`] = ` +
+
+
+
+ + +
+
+
+ No results for no matches +
+`; + +exports[`SearchListControl should render a search box with a search term, and only matching options 1`] = ` +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + +
+
+
+`; + +exports[`SearchListControl should render a search box with a search term, and only matching options, regardless of case sensitivity 1`] = ` +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + +
+
+
+`; + +exports[`SearchListControl should render a search box, a list of options, and 1 selected item 1`] = ` +
+
+
+ + 1 item selected + + +
+ + + + Clementine + + + + + +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + + + + +
+
+
+`; + +exports[`SearchListControl should render a search box, a list of options, and 2 selected item 1`] = ` +
+
+
+ + 2 items selected + + +
+ + + + Clementine + + + + + + + + + Guava + + + + + +
+
+
+
+ + +
+
+
+
+
+ Results +
+
+ + + + +
+
+
+`; diff --git a/plugins/woocommerce-blocks/assets/js/components/search-list-control/test/index.js b/plugins/woocommerce-blocks/assets/js/components/search-list-control/test/index.js new file mode 100644 index 00000000000..778cbcf79b2 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/components/search-list-control/test/index.js @@ -0,0 +1,93 @@ +/** + * External dependencies + */ +import renderer from 'react-test-renderer'; +import { noop } from 'lodash'; + +/** + * Internal dependencies + */ +import { SearchListControl } from '../'; + +const list = [ + { id: 1, name: 'Apricots' }, + { id: 2, name: 'Clementine' }, + { id: 3, name: 'Elderberry' }, + { id: 4, name: 'Guava' }, + { id: 5, name: 'Lychee' }, + { id: 6, name: 'Mulberry' }, +]; + +describe( 'SearchListControl', () => { + test( 'should render a search box and list of options', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box and list of options with a custom className', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box, a list of options, and 1 selected item', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box, a list of options, and 2 selected item', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box and no options', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box with a search term, and only matching options', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box with a search term, and only matching options, regardless of case sensitivity', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box with a search term, and no matching options', () => { + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box and list of options, with a custom search input message', () => { + const messages = { search: 'Testing search label' }; + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); + + test( 'should render a search box and list of options, with a custom render callback for each item', () => { + const renderItem = ( { item } ) =>
{ item.name }!
; // eslint-disable-line + const component = renderer.create( + + ); + expect( component.toJSON() ).toMatchSnapshot(); + } ); +} ); diff --git a/plugins/woocommerce-blocks/tests/js/setup-globals.js b/plugins/woocommerce-blocks/tests/js/setup-globals.js index f43a335649f..43a0dcc4c02 100644 --- a/plugins/woocommerce-blocks/tests/js/setup-globals.js +++ b/plugins/woocommerce-blocks/tests/js/setup-globals.js @@ -4,6 +4,25 @@ global.wp = {}; // Set up our settings global. global.wc_product_block_data = {}; +// wcSettings is required by @woocommerce/* packages +global.wcSettings = { + adminUrl: 'https://vagrant.local/wp/wp-admin/', + locale: 'en-US', + currency: { code: 'USD', precision: 2, symbol: '$' }, + date: { + dow: 0, + }, + orderStatuses: { + pending: 'Pending payment', + processing: 'Processing', + 'on-hold': 'On hold', + completed: 'Completed', + cancelled: 'Cancelled', + refunded: 'Refunded', + failed: 'Failed', + }, +}; + const wordPressPackages = [ 'blocks', 'components',