diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx
index c1c3a4e3af..e4e5591e60 100644
--- a/__tests__/components/DataListToolbar.test.jsx
+++ b/__tests__/components/DataListToolbar.test.jsx
@@ -4,7 +4,6 @@ import { I18nProvider } from '@lingui/react';
import DataListToolbar from '../../src/components/DataListToolbar';
describe('', () => {
- const columns = [{ name: 'Name', key: 'name', isSortable: true }];
let toolbar;
afterEach(() => {
@@ -15,6 +14,8 @@ describe('', () => {
});
test('it triggers the expected callbacks', () => {
+ const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+
const search = 'button[aria-label="Search"]';
const searchTextInput = 'input[aria-label="Search text input"]';
const selectAll = 'input[aria-label="Select all"]';
@@ -55,4 +56,127 @@ describe('', () => {
expect(onSearch).toHaveBeenCalledTimes(1);
expect(onSearch).toBeCalledWith('test-321');
});
+
+ test('dropdown items sortable columns work', () => {
+ const multipleColumns = [
+ { name: 'Foo', key: 'foo', isSortable: true },
+ { name: 'Bar', key: 'bar', isSortable: true },
+ { name: 'Bakery', key: 'bakery', isSortable: true },
+ { name: 'Baz', key: 'baz' }
+ ];
+
+ 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');
+ toolbar.update();
+ const sortDropdownItems = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item');
+ 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');
+ toolbar.update();
+ const sortDropdownItemsDescending = toolbar.find('.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item');
+ 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');
+ 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');
+ expect(searchDropdownItems.length).toBe(3);
+ const mockedSearchEvent = { target: { innerText: 'Bar' } };
+ searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
+ });
+
+ test('it displays correct sort icon', () => {
+ 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');
+ expect(downNumericIcon.length).toBe(1);
+ toolbar = mount(
+
+ );
+ const upNumericIcon = toolbar.find('SortNumericUpIcon');
+ expect(upNumericIcon.length).toBe(1);
+ toolbar = mount(
+
+ );
+ const downAlphaIcon = toolbar.find('SortAlphaDownIcon');
+ expect(downAlphaIcon.length).toBe(1);
+ toolbar = mount(
+
+ );
+ const upAlphaIcon = toolbar.find('SortAlphaUpIcon');
+ expect(upAlphaIcon.length).toBe(1);
+ });
});
diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index e1d2ea6842..51bf9f782c 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -152,6 +152,7 @@ class DataListToolbar extends React.Component {
-
+