Merge pull request #57 from jlmitch5/updateComponentTests

Update component tests and bump back up coverage

__tests__/App.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HashRouter as Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { shallow, mount } from 'enzyme';
 import App from '../src/App';
 import api from '../src/api';
@@ -7,10 +7,6 @@ import { API_LOGOUT } from '../src/endpoints';
 
 import Dashboard from '../src/pages/Dashboard';
 import Login from '../src/pages/Login';
-import { asyncFlush } from '../jest.setup';
-
-const DEFAULT_ACTIVE_GROUP = 'views_group';
-const DEFAULT_ACTIVE_ITEM = 'views_group_dashboard';
 
 describe('<App />', () => {
   test('renders without crashing', () => {
@@ -22,7 +18,7 @@ describe('<App />', () => {
     api.isAuthenticated = jest.fn();
     api.isAuthenticated.mockReturnValue(false);
 
-    const appWrapper = mount(<Router><App /></Router>);
+    const appWrapper = mount(<MemoryRouter><App /></MemoryRouter>);
 
     const login = appWrapper.find(Login);
     expect(login.length).toBe(1);
@@ -34,7 +30,7 @@ describe('<App />', () => {
     api.isAuthenticated = jest.fn();
     api.isAuthenticated.mockReturnValue(true);
 
-    const appWrapper = mount(<Router><App /></Router>);
+    const appWrapper = mount(<MemoryRouter><App /></MemoryRouter>);
 
     const dashboard = appWrapper.find(Dashboard);
     expect(dashboard.length).toBe(1);
@@ -49,24 +45,15 @@ describe('<App />', () => {
     expect(appWrapper.state().isNavOpen).toBe(false);
   });
 
-  test('onLogoClick sets selected nav back to defaults', () => {
-    const appWrapper = shallow(<App.WrappedComponent />);
-    appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
-    expect(appWrapper.state().activeItem).toBe('bar');
-    expect(appWrapper.state().activeGroup).toBe('foo');
-    appWrapper.instance().onLogoClick();
-    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
-  });
-
   test('api.logout called from logout button', async () => {
+    const logOutButtonSelector = 'button[aria-label="Logout"]';
     api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
-    const appWrapper = shallow(<App.WrappedComponent />);
+    const appWrapper = mount(<MemoryRouter><App /></MemoryRouter>);
-    appWrapper.instance().onDevLogout();
+    const logOutButton = appWrapper.find(logOutButtonSelector);
+    expect(logOutButton.length).toBe(1);
+    logOutButton.simulate('click');
     appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
     expect(api.get).toHaveBeenCalledTimes(1);
     expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
-    await asyncFlush();
-    expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
-    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
   });
 });

__tests__/components/DataListToolbar.test.jsx

@@ -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,166 @@ describe('<DataListToolbar />', () => {
     expect(onSearch).toHaveBeenCalledTimes(1);
     expect(onSearch).toBeCalledWith('test-321');
   });
+
+  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 },
+      { name: 'Bakery', key: 'bakery', isSortable: true },
+      { name: 'Baz', key: 'baz' }
+    ];
+
+    const onSearch = jest.fn();
+    const onSort = jest.fn();
+    const onSelectAll = jest.fn();
+
+    toolbar = mount(
+      <I18nProvider>
+        <DataListToolbar
+          isAllSelected={false}
+          sortedColumnKey="foo"
+          sortOrder="ascending"
+          columns={multipleColumns}
+          onSearch={onSearch}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+        />
+      </I18nProvider>
+    );
+    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(sortDropdownItemsSelector);
+    expect(sortDropdownItems.length).toBe(2);
+    
+    const mockedSortEvent = { target: { innerText: 'Bar' } };
+    sortDropdownItems.at(0).simulate('click', mockedSortEvent);
+    toolbar = mount(
+      <I18nProvider>
+        <DataListToolbar
+          isAllSelected={false}
+          sortedColumnKey="foo"
+          sortOrder="descending"
+          columns={multipleColumns}
+          onSearch={onSearch}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+        />
+      </I18nProvider>
+    );
+    toolbar.update();
+    
+    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(sortDropdownItemsSelector);
+    expect(sortDropdownItemsDescending.length).toBe(2);
+    
+    const mockedSortEventDescending = { target: { innerText: 'Bar' } };
+    sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
+    toolbar.update();
+    
+    const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
+    expect(searchDropdownToggle.length).toBe(1);
+    searchDropdownToggle.at(0).simulate('click');
+    toolbar.update();
+    
+    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(
+      <I18nProvider>
+        <DataListToolbar
+          isAllSelected={false}
+          sortedColumnKey="id"
+          sortOrder="descending"
+          columns={numericColumns}
+          onSearch={onSearch}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+        />
+      </I18nProvider>
+    );
+
+    const downNumericIcon = toolbar.find(downNumericIconSelector);
+    expect(downNumericIcon.length).toBe(1);
+
+    toolbar = mount(
+      <I18nProvider>
+        <DataListToolbar
+          isAllSelected={false}
+          sortedColumnKey="id"
+          sortOrder="ascending"
+          columns={numericColumns}
+          onSearch={onSearch}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+        />
+      </I18nProvider>
+    );
+
+    const upNumericIcon = toolbar.find(upNumericIconSelector);
+    expect(upNumericIcon.length).toBe(1);
+
+    toolbar = mount(
+      <I18nProvider>
+        <DataListToolbar
+          isAllSelected={false}
+          sortedColumnKey="name"
+          sortOrder="descending"
+          columns={alphaColumns}
+          onSearch={onSearch}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+        />
+      </I18nProvider>
+    );
+
+    const downAlphaIcon = toolbar.find(downAlphaIconSelector);
+    expect(downAlphaIcon.length).toBe(1);
+
+    toolbar = mount(
+      <I18nProvider>
+        <DataListToolbar
+          isAllSelected={false}
+          sortedColumnKey="name"
+          sortOrder="ascending"
+          columns={alphaColumns}
+          onSearch={onSearch}
+          onSort={onSort}
+          onSelectAll={onSelectAll}
+        />
+      </I18nProvider>
+    );
+
+    const upAlphaIcon = toolbar.find(upAlphaIconSelector);
+    expect(upAlphaIcon.length).toBe(1);
+  });
 });

__tests__/components/Pagination.test.jsx

@@ -72,4 +72,97 @@ describe('<Pagination />', () => {
     expect(onSetPage).toHaveBeenCalledTimes(2);
     expect(onSetPage).toBeCalledWith(1, 5);
   });
+
+  test('previous button does not work on page 1', () => {
+    const previous = 'button[aria-label="First"]';
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={21}
+          page={1}
+          pageCount={5}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    pagination.find(previous).simulate('click');
+    expect(onSetPage).toHaveBeenCalledTimes(0);
+  });
+
+  test('changing pageSize works', () => {
+    const pageSizeDropdownToggleSelector = 'DropdownToggle DropdownToggle[className="togglePageSize"]';
+    const pageSizeDropdownItemsSelector = 'DropdownItem';
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={21}
+          page={1}
+          pageCount={5}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const pageSizeDropdownToggle = pagination.find(pageSizeDropdownToggleSelector);
+    expect(pageSizeDropdownToggle.length).toBe(1);
+    pageSizeDropdownToggle.at(0).simulate('click');
+
+    const pageSizeDropdownItems = pagination.find(pageSizeDropdownItemsSelector);
+    expect(pageSizeDropdownItems.length).toBe(3);
+    pageSizeDropdownItems.at(1).simulate('click');
+  });
+
+  test('submit a new page by typing in input works', () => {
+    const textInputSelector = '.pf-l-split__item.pf-m-main .pf-c-form-control';
+    const submitFormSelector = '.pf-l-split__item.pf-m-main form';
+
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={21}
+          page={1}
+          pageCount={5}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+      </I18nProvider>
+    );
+    const textInput = pagination.find(textInputSelector);
+    expect(textInput.length).toBe(1);
+    textInput.simulate('change');
+    pagination.setProps({ page: 2 });
+
+    const submitForm = pagination.find(submitFormSelector);
+    expect(submitForm.length).toBe(1);
+    submitForm.simulate('submit');
+    pagination.setState({ value: 'invalid' });
+    submitForm.simulate('submit');
+  });
+
+  test('text input page change is disabled when only 1 page', () => {
+    const onSetPage = jest.fn();
+
+    pagination = mount(
+      <I18nProvider>
+        <Pagination
+          count={4}
+          page={1}
+          pageCount={1}
+          page_size={5}
+          pageSizeOptions={[5, 10, 25, 50]}
+          onSetPage={onSetPage}
+        />
+        </I18nProvider>
+    );
+  });
 });

__tests__/components/TowerLogo.test.jsx

@@ -43,20 +43,6 @@ describe('<TowerLogo />', () => {
     expect(towerLogoElem.props().history.length).toBe(2);
   });
 
-  test('gracefully handles not being passed click handler', () => {
-    logoWrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <TowerLogo />
-        </I18nProvider>
-      </MemoryRouter>
-    );
-    findChildren();
-    expect(towerLogoElem.props().history.length).toBe(1);
-    logoWrapper.simulate('click');
-    expect(towerLogoElem.props().history.length).toBe(1);
-  });
-
   test('handles mouse over and out state.hover changes', () => {
     const onLogoClick = jest.fn();
     logoWrapper = mount(

src/App.jsx

@@ -81,13 +81,8 @@ class App extends React.Component {
     this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen }));
   };
 
-  onLogoClick = () => {
-    this.setState({ activeGroup: 'views_group' });
-  }
-
   onDevLogout = async () => {
     await api.get(API_LOGOUT);
-    this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
   }
 
   render () {
@@ -134,7 +129,7 @@ class App extends React.Component {
               <Page
                 header={(
                   <PageHeader
-                    logo={<TowerLogo onClick={this.onLogoClick} />}
+                    logo={<TowerLogo />}
                     toolbar={PageToolbar}
                     showNavToggle
                     onNavToggle={this.onNavToggle}

src/components/DataListToolbar/DataListToolbar.jsx

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

src/components/Pagination/Pagination.jsx

@@ -7,14 +7,9 @@ import {
   DropdownDirection,
   DropdownItem,
   DropdownToggle,
-  Form,
-  FormGroup,
   Level,
   LevelItem,
   TextInput,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
@@ -32,7 +27,7 @@ class Pagination extends Component {
     const { page } = this.props;
 
     if (prevProps.page !== page) {
-      this.setState({ value: page });
+      this.onPageChange(page);
     }
   }
 
@@ -51,13 +46,13 @@ class Pagination extends Component {
 
     if (isValid) {
       onSetPage(value, page_size);
-    } else{
+    } else {
       this.setState({ value: page });
     }
   };
 
   onFirst = () => {
-    const { onSetPage, page_size} = this.props;
+    const { onSetPage, page_size } = this.props;
 
     onSetPage(1, page_size);
   };
@@ -67,7 +62,7 @@ class Pagination extends Component {
     const previousPage = page - 1;
 
     if (previousPage >= 1) {
-      onSetPage(previousPage, page_size)
+      onSetPage(previousPage, page_size);
     }
   };
 
@@ -76,7 +71,7 @@ class Pagination extends Component {
     const nextPage = page + 1;
 
     if (nextPage <= pageCount) {
-      onSetPage(nextPage, page_size)
+      onSetPage(nextPage, page_size);
     }
   };
 
@@ -139,18 +134,18 @@ class Pagination extends Component {
                   direction={up}
                   isOpen={isOpen}
                   toggle={(
-                    <DropdownToggle
+                    <DropdownToggle className="togglePageSize" onToggle={this.onTogglePageSize}>
-                      onToggle={this.onTogglePageSize}>
                       { page_size }
                     </DropdownToggle>
-                  )}>
+                  )}
+                >
                   {opts.map(option => (
                     <DropdownItem key={option} component="button">
                       { option }
                     </DropdownItem>
                   ))}
                 </Dropdown>
-                <Trans>Per Page</Trans>
+                <Trans> Per Page</Trans>
               </LevelItem>
               <LevelItem>
                 <Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">

src/components/TowerLogo/TowerLogo.jsx

@@ -15,13 +15,8 @@ class TowerLogo extends Component {
   }
 
   onClick = () => {
-    const { history, onClick: handleClick } = this.props;
+    const { history } = this.props;
-
-    if (!handleClick) return;
-
     history.push('/');
-
-    handleClick();
   };
 
   onHover = () => {