* Trim search box input

* Add tests
This commit is contained in:
Albert Juhé Lluveras 2019-02-01 10:43:56 +01:00 committed by GitHub
parent 907fcdb863
commit 1069034ca2
2 changed files with 67 additions and 13 deletions

View File

@ -132,6 +132,16 @@ export class Autocomplete extends Component {
loadOptions( completer, query ) {
const { options } = completer;
if ( ! query ) {
this.setState( {
options: [],
filteredOptions: [],
selectedIndex: 0,
} );
return;
}
/*
* We support both synchronous and asynchronous retrieval of completer options
* but internally treat all as async so we maintain a single, consistent code path.
@ -171,9 +181,7 @@ export class Autocomplete extends Component {
filteredOptions,
selectedIndex,
} );
if ( query ) {
this.announce( filteredOptions );
}
} ) );
}
@ -183,7 +191,7 @@ export class Autocomplete extends Component {
const container = event.target;
// look for the trigger prefix and search query just before the cursor location
const query = container.value;
const query = container.value.trim();
// asynchronously load the options for the open completer
if ( completer && query !== wasQuery ) {
if ( completer.isDebounced ) {

View File

@ -3,6 +3,7 @@
* External dependencies
*/
import { mount } from 'enzyme';
import { Button } from '@wordpress/components';
/**
* Internal dependencies
@ -10,19 +11,43 @@ import { mount } from 'enzyme';
import { Autocomplete } from '../autocomplete';
describe( 'Autocomplete', () => {
it( 'doesn\'t return matching excluded elements', () => {
const suggestionClassname = 'autocomplete-result';
const search = 'lorem';
const options = [
{ key: '1', label: 'lorem 1', value: { id: '1' } },
{ key: '2', label: 'lorem 2', value: { id: '2' } },
{ key: '3', label: 'bar', value: { id: '3' } },
];
it( 'returns matching elements', () => {
const autocomplete = mount(
<Autocomplete
children={ () => null }
completer={ {
className: suggestionClassname,
} }
/>
);
autocomplete.setState( {
options,
query: {},
search,
} );
autocomplete.instance().search( { target: { value: search } } );
autocomplete.update();
expect( autocomplete.find( Button ).filter( '.' + suggestionClassname ).length ).toBe( 2 );
} );
it( 'doesn\'t return matching excluded elements', () => {
const exclude = [ '2' ];
const autocomplete = mount(
<Autocomplete
children={ () => null }
className={ suggestionClassname }
completer={ {} }
completer={ {
className: suggestionClassname,
} }
selected={ exclude }
/>
);
@ -35,6 +60,27 @@ describe( 'Autocomplete', () => {
autocomplete.instance().search( { target: { value: search } } );
autocomplete.update();
expect( autocomplete.find( '.' + suggestionClassname ).length ).toBe( 1 );
expect( autocomplete.find( Button ).filter( '.' + suggestionClassname ).length ).toBe( 1 );
} );
it( 'trims spaces from input', () => {
const autocomplete = mount(
<Autocomplete
children={ () => null }
completer={ {
className: suggestionClassname,
} }
/>
);
autocomplete.setState( {
options,
query: {},
search,
} );
autocomplete.instance().search( { target: { value: ' ' + search + ' ' } } );
autocomplete.update();
expect( autocomplete.find( Button ).filter( '.' + suggestionClassname ).length ).toBe( 2 );
} );
} );