Merge pull request #57 from jlmitch5/updateComponentTests

Update component tests and bump back up coverage
2026-01-17 20:51:21 -03:30 · 2019-01-03 13:52:28 -05:00 · 2019-01-03 13:52:28 -05:00 · f678e158f8
commit f678e158f8
parent 7f1c3c8c6a 11583dbff0
8 changed files with 278 additions and 63 deletions
--- a/tests/App.test.jsx
+++ b/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 />);
-    appWrapper.instance().onDevLogout();
+    const appWrapper = mount(<MemoryRouter><App /></MemoryRouter>);
+    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);
  });
 });
--- 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('<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);
+  });
 });
--- a/tests/components/Pagination.test.jsx
+++ b/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>
+    );
+  });
 });
--- a/tests/components/TowerLogo.test.jsx
+++ b/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(
--- a/src/App.jsx
+++ b/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}
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/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}
--- a/src/components/Pagination/Pagination.jsx
+++ b/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
-                      onToggle={this.onTogglePageSize}>
+                    <DropdownToggle className="togglePageSize" 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">
--- a/src/components/TowerLogo/TowerLogo.jsx
+++ b/src/components/TowerLogo/TowerLogo.jsx
@ -15,13 +15,8 @@ class TowerLogo extends Component {
  }

  onClick = () => {
-    const { history, onClick: handleClick } = this.props;
-
-    if (!handleClick) return;
-
+    const { history } = this.props;
    history.push('/');
-
-    handleClick();
  };

  onHover = () => {