diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx
index e4e5591e60..1c1a3d8b04 100644
--- a/__tests__/components/DataListToolbar.test.jsx
+++ b/__tests__/components/DataListToolbar.test.jsx
@@ -58,6 +58,11 @@ describe('', () => {
});
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 = [
{ name: 'Foo', key: 'foo', isSortable: true },
{ name: 'Bar', key: 'bar', isSortable: true },
@@ -68,115 +73,149 @@ describe('', () => {
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
+
toolbar = mount(
-
+
+
+
);
- const sortdropdownToggle = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button');
- expect(sortdropdownToggle.length).toBe(2);
- sortdropdownToggle.at(1).simulate('click');
- sortdropdownToggle.at(0).simulate('click');
+ const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
+ expect(sortDropdownToggle.length).toBe(2);
+ sortDropdownToggle.at(1).simulate('click');
+ sortDropdownToggle.at(0).simulate('click');
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);
+
const mockedSortEvent = { target: { innerText: 'Bar' } };
sortDropdownItems.at(0).simulate('click', mockedSortEvent);
toolbar = mount(
-
+
+
+
);
toolbar.update();
- const sortdropdownToggleDescending = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button');
- expect(sortdropdownToggleDescending.length).toBe(2);
- sortdropdownToggleDescending.at(1).simulate('click');
- sortdropdownToggleDescending.at(0).simulate('click');
+
+ const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
+ expect(sortDropdownToggleDescending.length).toBe(2);
+ sortDropdownToggleDescending.at(1).simulate('click');
+ sortDropdownToggleDescending.at(0).simulate('click');
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);
+
const mockedSortEventDescending = { target: { innerText: 'Bar' } };
sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
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);
searchDropdownToggle.at(0).simulate('click');
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);
+
const mockedSearchEvent = { target: { innerText: 'Bar' } };
searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
});
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 alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
+
toolbar = mount(
-
+
+
+
);
- const downNumericIcon = toolbar.find('SortNumericDownIcon');
+
+ const downNumericIcon = toolbar.find(downNumericIconSelector);
expect(downNumericIcon.length).toBe(1);
+
toolbar = mount(
-
+
+
+
);
- const upNumericIcon = toolbar.find('SortNumericUpIcon');
+
+ const upNumericIcon = toolbar.find(upNumericIconSelector);
expect(upNumericIcon.length).toBe(1);
+
toolbar = mount(
-
+
+
+
);
- const downAlphaIcon = toolbar.find('SortAlphaDownIcon');
+
+ const downAlphaIcon = toolbar.find(downAlphaIconSelector);
expect(downAlphaIcon.length).toBe(1);
+
toolbar = mount(
-
+
+
+
);
- const upAlphaIcon = toolbar.find('SortAlphaUpIcon');
+
+ const upAlphaIcon = toolbar.find(upAlphaIconSelector);
expect(upAlphaIcon.length).toBe(1);
});
});