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); }); });