Add tests for SearchListControl (https://github.com/woocommerce/woocommerce-blocks/pull/174)

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;

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(
+			<SearchListControl list={ list } selected={ [] } onChange={ noop } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a search box and list of options with a custom className', () => {
+		const component = renderer.create(
+			<SearchListControl className="test-search" list={ list } selected={ [] } onChange={ noop } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a search box, a list of options, and 1 selected item', () => {
+		const component = renderer.create(
+			<SearchListControl list={ list } selected={ [ list[ 1 ] ] } onChange={ noop } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a search box, a list of options, and 2 selected item', () => {
+		const component = renderer.create(
+			<SearchListControl list={ list } selected={ [ list[ 1 ], list[ 3 ] ] } onChange={ noop } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a search box and no options', () => {
+		const component = renderer.create(
+			<SearchListControl list={ [] } selected={ [] } onChange={ noop } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a search box with a search term, and only matching options', () => {
+		const component = renderer.create(
+			<SearchListControl list={ list } search="berry" selected={ [] } onChange={ noop } debouncedSpeak={ noop } />
+		);
+		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(
+			<SearchListControl list={ list } search="bERry" selected={ [] } onChange={ noop } debouncedSpeak={ noop } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+
+	test( 'should render a search box with a search term, and no matching options', () => {
+		const component = renderer.create(
+			<SearchListControl list={ list } search="no matches" selected={ [] } onChange={ noop } debouncedSpeak={ noop } />
+		);
+		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(
+			<SearchListControl list={ list } selected={ [] } onChange={ noop } messages={ messages } />
+		);
+		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 } ) => <div key={ item.id }>{ item.name }!</div>; // eslint-disable-line
+		const component = renderer.create(
+			<SearchListControl list={ list } selected={ [] } onChange={ noop } renderItem={ renderItem } />
+		);
+		expect( component.toJSON() ).toMatchSnapshot();
+	} );
+} );

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',