mirror of
https://github.com/ansible/awx.git
synced 2026-05-19 23:07:42 -02:30
update datelisttoolbar test
This commit is contained in:
committed by
Jake McDermott
parent
e25dcb2448
commit
e48c734925
@@ -58,6 +58,11 @@ describe('<DataListToolbar />', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('dropdown items sortable columns work', () => {
|
test('dropdown items sortable columns work', () => {
|
||||||
|
const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button';
|
||||||
|
const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item';
|
||||||
|
const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle';
|
||||||
|
const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item';
|
||||||
|
|
||||||
const multipleColumns = [
|
const multipleColumns = [
|
||||||
{ name: 'Foo', key: 'foo', isSortable: true },
|
{ name: 'Foo', key: 'foo', isSortable: true },
|
||||||
{ name: 'Bar', key: 'bar', isSortable: true },
|
{ name: 'Bar', key: 'bar', isSortable: true },
|
||||||
@@ -68,115 +73,149 @@ describe('<DataListToolbar />', () => {
|
|||||||
const onSearch = jest.fn();
|
const onSearch = jest.fn();
|
||||||
const onSort = jest.fn();
|
const onSort = jest.fn();
|
||||||
const onSelectAll = jest.fn();
|
const onSelectAll = jest.fn();
|
||||||
|
|
||||||
toolbar = mount(
|
toolbar = mount(
|
||||||
<DataListToolbar
|
<I18nProvider>
|
||||||
isAllSelected={false}
|
<DataListToolbar
|
||||||
sortedColumnKey="foo"
|
isAllSelected={false}
|
||||||
sortOrder="ascending"
|
sortedColumnKey="foo"
|
||||||
columns={multipleColumns}
|
sortOrder="ascending"
|
||||||
onSearch={onSearch}
|
columns={multipleColumns}
|
||||||
onSort={onSort}
|
onSearch={onSearch}
|
||||||
onSelectAll={onSelectAll}
|
onSort={onSort}
|
||||||
/>
|
onSelectAll={onSelectAll}
|
||||||
|
/>
|
||||||
|
</I18nProvider>
|
||||||
);
|
);
|
||||||
const sortdropdownToggle = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button');
|
const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
|
||||||
expect(sortdropdownToggle.length).toBe(2);
|
expect(sortDropdownToggle.length).toBe(2);
|
||||||
sortdropdownToggle.at(1).simulate('click');
|
sortDropdownToggle.at(1).simulate('click');
|
||||||
sortdropdownToggle.at(0).simulate('click');
|
sortDropdownToggle.at(0).simulate('click');
|
||||||
toolbar.update();
|
toolbar.update();
|
||||||
const sortDropdownItems = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item');
|
|
||||||
|
const sortDropdownItems = toolbar.find(sortDropdownItemsSelector);
|
||||||
expect(sortDropdownItems.length).toBe(2);
|
expect(sortDropdownItems.length).toBe(2);
|
||||||
|
|
||||||
const mockedSortEvent = { target: { innerText: 'Bar' } };
|
const mockedSortEvent = { target: { innerText: 'Bar' } };
|
||||||
sortDropdownItems.at(0).simulate('click', mockedSortEvent);
|
sortDropdownItems.at(0).simulate('click', mockedSortEvent);
|
||||||
toolbar = mount(
|
toolbar = mount(
|
||||||
<DataListToolbar
|
<I18nProvider>
|
||||||
isAllSelected={false}
|
<DataListToolbar
|
||||||
sortedColumnKey="foo"
|
isAllSelected={false}
|
||||||
sortOrder="descending"
|
sortedColumnKey="foo"
|
||||||
columns={multipleColumns}
|
sortOrder="descending"
|
||||||
onSearch={onSearch}
|
columns={multipleColumns}
|
||||||
onSort={onSort}
|
onSearch={onSearch}
|
||||||
onSelectAll={onSelectAll}
|
onSort={onSort}
|
||||||
/>
|
onSelectAll={onSelectAll}
|
||||||
|
/>
|
||||||
|
</I18nProvider>
|
||||||
);
|
);
|
||||||
toolbar.update();
|
toolbar.update();
|
||||||
const sortdropdownToggleDescending = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button');
|
|
||||||
expect(sortdropdownToggleDescending.length).toBe(2);
|
const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
|
||||||
sortdropdownToggleDescending.at(1).simulate('click');
|
expect(sortDropdownToggleDescending.length).toBe(2);
|
||||||
sortdropdownToggleDescending.at(0).simulate('click');
|
sortDropdownToggleDescending.at(1).simulate('click');
|
||||||
|
sortDropdownToggleDescending.at(0).simulate('click');
|
||||||
toolbar.update();
|
toolbar.update();
|
||||||
const sortDropdownItemsDescending = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item');
|
|
||||||
|
const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector);
|
||||||
expect(sortDropdownItemsDescending.length).toBe(2);
|
expect(sortDropdownItemsDescending.length).toBe(2);
|
||||||
|
|
||||||
const mockedSortEventDescending = { target: { innerText: 'Bar' } };
|
const mockedSortEventDescending = { target: { innerText: 'Bar' } };
|
||||||
sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
|
sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
|
||||||
toolbar.update();
|
toolbar.update();
|
||||||
const searchDropdownToggle = toolbar.find('.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__toggle');
|
|
||||||
|
const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
|
||||||
expect(searchDropdownToggle.length).toBe(1);
|
expect(searchDropdownToggle.length).toBe(1);
|
||||||
searchDropdownToggle.at(0).simulate('click');
|
searchDropdownToggle.at(0).simulate('click');
|
||||||
toolbar.update();
|
toolbar.update();
|
||||||
const searchDropdownItems = toolbar.find('.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item');
|
|
||||||
|
const searchDropdownItems = toolbar.find(searchDropdownItemsSelector);
|
||||||
expect(searchDropdownItems.length).toBe(3);
|
expect(searchDropdownItems.length).toBe(3);
|
||||||
|
|
||||||
const mockedSearchEvent = { target: { innerText: 'Bar' } };
|
const mockedSearchEvent = { target: { innerText: 'Bar' } };
|
||||||
searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
|
searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('it displays correct sort icon', () => {
|
test('it displays correct sort icon', () => {
|
||||||
|
const downNumericIconSelector = 'SortNumericDownIcon';
|
||||||
|
const upNumericIconSelector = 'SortNumericUpIcon';
|
||||||
|
const downAlphaIconSelector = 'SortAlphaDownIcon';
|
||||||
|
const upAlphaIconSelector = 'SortAlphaUpIcon';
|
||||||
|
|
||||||
const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }];
|
const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }];
|
||||||
const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
|
const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
|
||||||
const onSearch = jest.fn();
|
const onSearch = jest.fn();
|
||||||
const onSort = jest.fn();
|
const onSort = jest.fn();
|
||||||
const onSelectAll = jest.fn();
|
const onSelectAll = jest.fn();
|
||||||
|
|
||||||
toolbar = mount(
|
toolbar = mount(
|
||||||
<DataListToolbar
|
<I18nProvider>
|
||||||
isAllSelected={false}
|
<DataListToolbar
|
||||||
sortedColumnKey="id"
|
isAllSelected={false}
|
||||||
sortOrder="descending"
|
sortedColumnKey="id"
|
||||||
columns={numericColumns}
|
sortOrder="descending"
|
||||||
onSearch={onSearch}
|
columns={numericColumns}
|
||||||
onSort={onSort}
|
onSearch={onSearch}
|
||||||
onSelectAll={onSelectAll}
|
onSort={onSort}
|
||||||
/>
|
onSelectAll={onSelectAll}
|
||||||
|
/>
|
||||||
|
</I18nProvider>
|
||||||
);
|
);
|
||||||
const downNumericIcon = toolbar.find('SortNumericDownIcon');
|
|
||||||
|
const downNumericIcon = toolbar.find(downNumericIconSelector);
|
||||||
expect(downNumericIcon.length).toBe(1);
|
expect(downNumericIcon.length).toBe(1);
|
||||||
|
|
||||||
toolbar = mount(
|
toolbar = mount(
|
||||||
<DataListToolbar
|
<I18nProvider>
|
||||||
isAllSelected={false}
|
<DataListToolbar
|
||||||
sortedColumnKey="id"
|
isAllSelected={false}
|
||||||
sortOrder="ascending"
|
sortedColumnKey="id"
|
||||||
columns={numericColumns}
|
sortOrder="ascending"
|
||||||
onSearch={onSearch}
|
columns={numericColumns}
|
||||||
onSort={onSort}
|
onSearch={onSearch}
|
||||||
onSelectAll={onSelectAll}
|
onSort={onSort}
|
||||||
/>
|
onSelectAll={onSelectAll}
|
||||||
|
/>
|
||||||
|
</I18nProvider>
|
||||||
);
|
);
|
||||||
const upNumericIcon = toolbar.find('SortNumericUpIcon');
|
|
||||||
|
const upNumericIcon = toolbar.find(upNumericIconSelector);
|
||||||
expect(upNumericIcon.length).toBe(1);
|
expect(upNumericIcon.length).toBe(1);
|
||||||
|
|
||||||
toolbar = mount(
|
toolbar = mount(
|
||||||
<DataListToolbar
|
<I18nProvider>
|
||||||
isAllSelected={false}
|
<DataListToolbar
|
||||||
sortedColumnKey="name"
|
isAllSelected={false}
|
||||||
sortOrder="descending"
|
sortedColumnKey="name"
|
||||||
columns={alphaColumns}
|
sortOrder="descending"
|
||||||
onSearch={onSearch}
|
columns={alphaColumns}
|
||||||
onSort={onSort}
|
onSearch={onSearch}
|
||||||
onSelectAll={onSelectAll}
|
onSort={onSort}
|
||||||
/>
|
onSelectAll={onSelectAll}
|
||||||
|
/>
|
||||||
|
</I18nProvider>
|
||||||
);
|
);
|
||||||
const downAlphaIcon = toolbar.find('SortAlphaDownIcon');
|
|
||||||
|
const downAlphaIcon = toolbar.find(downAlphaIconSelector);
|
||||||
expect(downAlphaIcon.length).toBe(1);
|
expect(downAlphaIcon.length).toBe(1);
|
||||||
|
|
||||||
toolbar = mount(
|
toolbar = mount(
|
||||||
<DataListToolbar
|
<I18nProvider>
|
||||||
isAllSelected={false}
|
<DataListToolbar
|
||||||
sortedColumnKey="name"
|
isAllSelected={false}
|
||||||
sortOrder="ascending"
|
sortedColumnKey="name"
|
||||||
columns={alphaColumns}
|
sortOrder="ascending"
|
||||||
onSearch={onSearch}
|
columns={alphaColumns}
|
||||||
onSort={onSort}
|
onSearch={onSearch}
|
||||||
onSelectAll={onSelectAll}
|
onSort={onSort}
|
||||||
/>
|
onSelectAll={onSelectAll}
|
||||||
|
/>
|
||||||
|
</I18nProvider>
|
||||||
);
|
);
|
||||||
const upAlphaIcon = toolbar.find('SortAlphaUpIcon');
|
|
||||||
|
const upAlphaIcon = toolbar.find(upAlphaIconSelector);
|
||||||
expect(upAlphaIcon.length).toBe(1);
|
expect(upAlphaIcon.length).toBe(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user