External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

update DataListToolbar component and tests

Browse Source
This commit is contained in:
John Mitchell 2018-12-11 12:58:08 -05:00 committed by Jake McDermott
parent 7f1c3c8c6a
commit ebd09883fe
No known key found for this signature in database
GPG Key ID: 9A6F084352C3A0B7
2 changed files with 127 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
__tests__/components/DataListToolbar.test.jsx
View File

@ -4,7 +4,6 @@ import { I18nProvider } from '@lingui/react';
import DataListToolbar from '../../src/components/DataListToolbar';
describe('<DataListToolbar />', () => {
const columns = [{ name: 'Name', key: 'name', isSortable: true }];
let toolbar;
afterEach(() => {
@ -15,6 +14,8 @@ describe('<DataListToolbar />', () => {
});
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('<DataListToolbar />', () => {
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(
<DataListToolbar
isAllSelected={false}
sortedColumnKey="foo"
sortOrder="ascending"
columns={multipleColumns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
/>
);
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(
<DataListToolbar
isAllSelected={false}
sortedColumnKey="foo"
sortOrder="descending"
columns={multipleColumns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
/>
);
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(
<DataListToolbar
isAllSelected={false}
sortedColumnKey="id"
sortOrder="descending"
columns={numericColumns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
/>
);
const downNumericIcon = toolbar.find('SortNumericDownIcon');
expect(downNumericIcon.length).toBe(1);
toolbar = mount(
<DataListToolbar
isAllSelected={false}
sortedColumnKey="id"
sortOrder="ascending"
columns={numericColumns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
/>
);
const upNumericIcon = toolbar.find('SortNumericUpIcon');
expect(upNumericIcon.length).toBe(1);
toolbar = mount(
<DataListToolbar
isAllSelected={false}
sortedColumnKey="name"
sortOrder="descending"
columns={alphaColumns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
/>
);
const downAlphaIcon = toolbar.find('SortAlphaDownIcon');
expect(downAlphaIcon.length).toBe(1);
toolbar = mount(
<DataListToolbar
isAllSelected={false}
sortedColumnKey="name"
sortOrder="ascending"
columns={alphaColumns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
/>
);
const upAlphaIcon = toolbar.find('SortAlphaUpIcon');
expect(upAlphaIcon.length).toBe(1);
});
});

3
src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -152,6 +152,7 @@ class DataListToolbar extends React.Component {
<ToolbarItem>
<div className="pf-c-input-group">
<Dropdown
className="searchKeyDropdown"
onToggle={this.onSearchDropdownToggle}
onSelect={this.onSearchDropdownSelect}
direction={up}
@ -181,7 +182,7 @@ class DataListToolbar extends React.Component {
</div>
</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarGroup className="sortDropdownGroup">
<ToolbarItem>
<Dropdown
onToggle={this.onSortDropdownToggle}