zware/awx
1
0
Fork 0
mirror of https://github.com/ZwareBear/awx.git synced 2026-04-20 15:01:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

use labels in chips for select based filters

Browse Source
This commit is contained in:
John Mitchell
2020-04-24 12:24:50 -04:00
parent 72de660ea1
commit 6f80e5b67b
3 changed files with 153 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
awx/ui_next/src/components/Search/Search.test.jsx
View File

@@ -3,7 +3,9 @@ import {
DataToolbar,
DataToolbarContent,
} from '@patternfly/react-core/dist/umd/experimental';
import { createMemoryHistory } from 'history';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import { act } from 'react-dom/test-utils';
import Search from './Search';
describe('<Search />', () => {
@@ -141,4 +143,129 @@ describe('<Search />', () => {
expect(onSearch).toHaveBeenCalledTimes(1);
expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
});
test('filter keys are properly labeled', () => {
const columns = [
{ name: 'Name', key: 'name', isDefault: true },
{ name: 'Type', key: 'type', options: [['foo', 'Foo Bar!']] },
{ name: 'Description', key: 'description' },
];
const query =
'?organization.or__type=foo&organization.name=bar&item.page_size=10';
const history = createMemoryHistory({
initialEntries: [`/organizations/${query}`],
});
const wrapper = mountWithContexts(
<DataToolbar
id={`${QS_CONFIG.namespace}-list-toolbar`}
clearAllFilters={() => {}}
collapseListedFiltersBreakpoint="md"
>
<DataToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} />
</DataToolbarContent>
</DataToolbar>,
{ context: { router: { history } } }
);
const typeFilterWrapper = wrapper.find(
'DataToolbarFilter[categoryName="Type"]'
);
expect(typeFilterWrapper.prop('chips')[0].key).toEqual('or__type:foo');
const nameFilterWrapper = wrapper.find(
'DataToolbarFilter[categoryName="Name"]'
);
expect(nameFilterWrapper.prop('chips')[0].key).toEqual('name:bar');
});
test('should test handle remove of option-based key', async () => {
const qsConfigNew = {
namespace: 'item',
defaultParams: { page: 1, page_size: 5, order_by: '-type' },
integerFields: [],
};
const columns = [
{
name: 'type',
key: 'type',
options: [['foo', 'Foo Bar!']],
isDefault: true,
},
];
const query = '?item.or__type=foo&item.page_size=10';
const history = createMemoryHistory({
initialEntries: [`/organizations/1/teams${query}`],
});
const onRemove = jest.fn();
const wrapper = mountWithContexts(
<DataToolbar
id={`${qsConfigNew.namespace}-list-toolbar`}
clearAllFilters={() => {}}
collapseListedFiltersBreakpoint="md"
>
<DataToolbarContent>
<Search
qsConfig={qsConfigNew}
columns={columns}
onRemove={onRemove}
/>
</DataToolbarContent>
</DataToolbar>,
{ context: { router: { history } } }
);
expect(history.location.search).toEqual(query);
// click remove button on chip
await act(async () => {
wrapper
.find('.pf-c-chip button[aria-label="close"]')
.at(0)
.simulate('click');
});
expect(onRemove).toBeCalledWith('or__type', 'foo');
});
test('should test handle remove of option-based with empty string value', async () => {
const qsConfigNew = {
namespace: 'item',
defaultParams: { page: 1, page_size: 5, order_by: '-type' },
integerFields: [],
};
const columns = [
{
name: 'type',
key: 'type',
options: [['', 'manual']],
isDefault: true,
},
];
const query = '?item.or__type=&item.page_size=10';
const history = createMemoryHistory({
initialEntries: [`/organizations/1/teams${query}`],
});
const onRemove = jest.fn();
const wrapper = mountWithContexts(
<DataToolbar
id={`${qsConfigNew.namespace}-list-toolbar`}
clearAllFilters={() => {}}
collapseListedFiltersBreakpoint="md"
>
<DataToolbarContent>
<Search
qsConfig={qsConfigNew}
columns={columns}
onRemove={onRemove}
/>
</DataToolbarContent>
</DataToolbar>,
{ context: { router: { history } } }
);
expect(history.location.search).toEqual(query);
// click remove button on chip
await act(async () => {
wrapper
.find('.pf-c-chip button[aria-label="close"]')
.at(0)
.simulate('click');
});
expect(onRemove).toBeCalledWith('or__type', '');
});
});