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

View File

@ -92,4 +92,53 @@ describe('<Search />', () => {
.handleDropdownSelect({ target: { innerText: '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');
});
});