update datelisttoolbar test

This commit is contained in:
John Mitchell
2018-12-11 16:53:33 -05:00
committed by Jake McDermott
parent e25dcb2448
commit e48c734925

View File

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