Fix searching for a blank string creates a blank search filter

Fix searching for a blank string creates a blank search filter. Also,
add unit-test to the related changes.

closes: https://github.com/ansible/awx/issues/6511
This commit is contained in:
nixocio
2020-04-19 11:35:27 -04:00
parent 37ee95314a
commit 2a86a3e05b
2 changed files with 69 additions and 15 deletions

View File

@@ -80,17 +80,19 @@ class Search extends React.Component {
const { searchKey, searchValue } = this.state; const { searchKey, searchValue } = this.state;
const { onSearch, qsConfig } = this.props; const { onSearch, qsConfig } = this.props;
const isNonStringField = if (searchValue) {
qsConfig.integerFields.find(field => field === searchKey) || const isNonStringField =
qsConfig.dateFields.find(field => field === searchKey); qsConfig.integerFields.find(field => field === searchKey) ||
qsConfig.dateFields.find(field => field === searchKey);
const actualSearchKey = isNonStringField const actualSearchKey = isNonStringField
? searchKey ? searchKey
: `${searchKey}__icontains`; : `${searchKey}__icontains`;
onSearch(actualSearchKey, searchValue); onSearch(actualSearchKey, searchValue);
this.setState({ searchValue: '' }); this.setState({ searchValue: '' });
}
} }
handleSearchInputChange(searchValue) { handleSearchInputChange(searchValue) {
@@ -276,13 +278,16 @@ class Search extends React.Component {
onChange={this.handleSearchInputChange} onChange={this.handleSearchInputChange}
onKeyDown={this.handleTextKeyDown} onKeyDown={this.handleTextKeyDown}
/> />
<Button <div css={!searchValue && `cursor:not-allowed`}>
variant={ButtonVariant.control} <Button
aria-label={i18n._(t`Search submit button`)} variant={ButtonVariant.control}
onClick={this.handleSearch} isDisabled={!searchValue}
> aria-label={i18n._(t`Search submit button`)}
<SearchIcon /> onClick={this.handleSearch}
</Button> >
<SearchIcon />
</Button>
</div>
</InputGroup> </InputGroup>
)} )}
</DataToolbarFilter> </DataToolbarFilter>

View File

@@ -92,4 +92,53 @@ describe('<Search />', () => {
.handleDropdownSelect({ target: { innerText: 'Description' } }); .handleDropdownSelect({ target: { innerText: 'Description' } });
expect(wrapper.state('searchKey')).toEqual('description'); expect(wrapper.state('searchKey')).toEqual('description');
}); });
test('attempt to search with empty string', () => {
const searchButton = 'button[aria-label="Search submit button"]';
const searchTextInput = 'input[aria-label="Search text input"]';
const columns = [{ name: 'Name', key: 'name', isDefault: true }];
const onSearch = jest.fn();
const wrapper = mountWithContexts(
<DataToolbar
id={`${QS_CONFIG.namespace}-list-toolbar`}
clearAllFilters={() => {}}
collapseListedFiltersBreakpoint="md"
>
<DataToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
</DataToolbarContent>
</DataToolbar>
);
wrapper.find(searchTextInput).instance().value = '';
wrapper.find(searchTextInput).simulate('change');
wrapper.find(searchButton).simulate('click');
expect(onSearch).toHaveBeenCalledTimes(0);
});
test('search with a valid string', () => {
const searchButton = 'button[aria-label="Search submit button"]';
const searchTextInput = 'input[aria-label="Search text input"]';
const columns = [{ name: 'Name', key: 'name', isDefault: true }];
const onSearch = jest.fn();
const wrapper = mountWithContexts(
<DataToolbar
id={`${QS_CONFIG.namespace}-list-toolbar`}
clearAllFilters={() => {}}
collapseListedFiltersBreakpoint="md"
>
<DataToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
</DataToolbarContent>
</DataToolbar>
);
wrapper.find(searchTextInput).instance().value = 'test-321';
wrapper.find(searchTextInput).simulate('change');
wrapper.find(searchButton).simulate('click');
expect(onSearch).toHaveBeenCalledTimes(1);
expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
});
}); });