feature: display only 5 results in filter search (#96)
* feature: display only 5 results in filter search * feature: Display laoding in a dropdown item * test: use testid insread of text
This commit is contained in:
@ -65,7 +65,11 @@ export function FilterDropdownButton<FilterProperties>({
|
|||||||
selectedFilter: FilterType<FilterProperties>,
|
selectedFilter: FilterType<FilterProperties>,
|
||||||
) => {
|
) => {
|
||||||
if (filterSearchResults.loading) {
|
if (filterSearchResults.loading) {
|
||||||
return 'LOADING';
|
return (
|
||||||
|
<DropdownButton.StyledDropdownItem data-testid="loading-search-results">
|
||||||
|
Loading
|
||||||
|
</DropdownButton.StyledDropdownItem>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return filterSearchResults.results.map((value, index) => (
|
return filterSearchResults.results.map((value, index) => (
|
||||||
<DropdownButton.StyledDropdownItem
|
<DropdownButton.StyledDropdownItem
|
||||||
|
|||||||
@ -48,6 +48,7 @@ const mocks = [
|
|||||||
{ lastname: { _ilike: '%%' } },
|
{ lastname: { _ilike: '%%' } },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
limit: 5,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
result: {
|
result: {
|
||||||
@ -66,6 +67,7 @@ const mocks = [
|
|||||||
{ lastname: { _ilike: '%Jane%' } },
|
{ lastname: { _ilike: '%Jane%' } },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
limit: 5,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
result: {
|
result: {
|
||||||
|
|||||||
@ -84,7 +84,7 @@ it('Checks the selection of top option for Doesnot include', async () => {
|
|||||||
|
|
||||||
it('Calls the filters when typing a new name', async () => {
|
it('Calls the filters when typing a new name', async () => {
|
||||||
const setFilters = jest.fn();
|
const setFilters = jest.fn();
|
||||||
const { getByText, getByPlaceholderText, queryByText } = render(
|
const { getByText, getByPlaceholderText, queryByText, getByTestId } = render(
|
||||||
<RegularFilterDropdownButton setFilter={setFilters} />,
|
<RegularFilterDropdownButton setFilter={setFilters} />,
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -100,7 +100,7 @@ it('Calls the filters when typing a new name', async () => {
|
|||||||
fireEvent.change(filterSearch, { target: { value: 'Jane' } });
|
fireEvent.change(filterSearch, { target: { value: 'Jane' } });
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
const loadingDiv = getByText('LOADING');
|
const loadingDiv = getByTestId('loading-search-results');
|
||||||
expect(loadingDiv).toBeDefined();
|
expect(loadingDiv).toBeDefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -72,6 +72,7 @@ export const useSearch = (): [
|
|||||||
{
|
{
|
||||||
variables: {
|
variables: {
|
||||||
where,
|
where,
|
||||||
|
limit: 5,
|
||||||
},
|
},
|
||||||
skip: !filter,
|
skip: !filter,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user