update App.jsx and improve coverage

abstract LogoutButton to component

__tests__/App.test.jsx

@@ -5,6 +5,9 @@ import api from '../src/api';
 import Dashboard from '../src/pages/Dashboard';
 import Login from '../src/pages/Login';
 
+const DEFAULT_ACTIVE_GROUP = 'views_group';
+const DEFAULT_ACTIVE_ITEM = 'views_group_dashboard';
+
 describe('<App />', () => {
   test('renders without crashing', () => {
     const appWrapper = shallow(<App />);
@@ -34,4 +37,36 @@ describe('<App />', () => {
     const login = appWrapper.find(Login);
     expect(login.length).toBe(0);
   });
+
+  test('onNavSelect sets state.activeItem and state.activeGroup', () => {
+    const appWrapper = shallow(<App />);
+    appWrapper.instance().onNavSelect({ itemId: 'foo', groupId: 'bar' });
+    expect(appWrapper.state().activeItem).toBe('foo');
+    expect(appWrapper.state().activeGroup).toBe('bar');
+  });
+
+  test('onNavToggle sets state.isNavOpen to opposite', () => {
+    const appWrapper = shallow(<App />);
+    expect(appWrapper.state().isNavOpen).toBe(true);
+    appWrapper.instance().onNavToggle();
+    expect(appWrapper.state().isNavOpen).toBe(false);
+  });
+
+  test('onLogoClick sets selected nav back to defaults', () => {
+    const appWrapper = shallow(<App />);
+    appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
+    expect(appWrapper.state().activeItem).toBe('bar');
+    expect(appWrapper.state().activeGroup).toBe('foo');
+    appWrapper.instance().onLogoClick();
+    expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
+    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
+  });
+
+  test('api.logout called from logout button', () => {
+    api.logout = jest.fn();
+    const appWrapper = mount(<App />);
+    const logoutButton = appWrapper.find('LogoutButton');
+    logoutButton.props().onDevLogout();
+    expect(api.logout).toHaveBeenCalledTimes(1);
+  });
 });

__tests__/components/LogoutButton.test.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import LogoutButton from '../../src/components/LogoutButton';
+
+let buttonWrapper;
+let buttonElem;
+let userIconElem;
+
+const findChildren = () => {
+  buttonElem = buttonWrapper.find('Button');
+  userIconElem = buttonWrapper.find('UserIcon');
+};
+
+describe('<LogoutButton />', () => {
+  test('initially renders without crashing', () => {
+    const onDevLogout = jest.fn();
+    buttonWrapper = mount(<LogoutButton onDevLogout={onDevLogout} />);
+    findChildren();
+    expect(buttonWrapper.length).toBe(1);
+    expect(buttonElem.length).toBe(1);
+    expect(userIconElem.length).toBe(1);
+    buttonElem.simulate('keyDown', { keyCode: 40, which: 40 });
+    expect(onDevLogout).toHaveBeenCalledTimes(0);
+    buttonElem.simulate('keyDown', { keyCode: 13, which: 13 });
+    expect(onDevLogout).toHaveBeenCalledTimes(1);
+  });
+});

src/App.jsx

@@ -8,8 +8,6 @@ import {
 import {
   BackgroundImage,
   BackgroundImageSrc,
-  Button,
-  ButtonVariant,
   Nav,
   NavExpandable,
   NavList,
@@ -18,12 +16,12 @@ import {
   PageHeader,
   PageSidebar
 } from '@patternfly/react-core';
-import { UserIcon } from '@patternfly/react-icons';
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
 
 import api from './api';
 
 // import About from './components/About';
+import LogoutButton from './components/LogoutButton';
 import TowerLogo from './components/TowerLogo';
 import ConditionalRedirect from './components/ConditionalRedirect';
 
@@ -78,13 +76,6 @@ class App extends React.Component {
     this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
   }
 
-  onDevLogout = () => {
-    api.logout()
-      .then(() => {
-        this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
-      });
-  }
-
   render () {
     const { activeItem, activeGroup, isNavOpen } = this.state;
     const { logo, loginInfo } = this.props;
@@ -112,7 +103,7 @@ class App extends React.Component {
                 header={(
                   <PageHeader
                     logo={<TowerLogo onClick={this.onLogoClick} />}
-                    avatar={<Button id="button-logout" aria-label="Logout" variant={ButtonVariant.plain} onClick={this.onDevLogout} onKeyDown={event => { if (event.keycode === 13) { this.onDevLogout(); } }}><UserIcon /></Button>}
+                    avatar={<LogoutButton onDevLogout={api.logout} />}
                     showNavToggle
                     onNavToggle={this.onNavToggle}
                   />

src/components/LogoutButton.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  Button,
+  ButtonVariant
+} from '@patternfly/react-core';
+
+import { UserIcon } from '@patternfly/react-icons';
+
+const LogoutButton = ({ onDevLogout }) => (
+  <Button
+    id="button-logout"
+    aria-label="Logout"
+    variant={ButtonVariant.plain}
+    onClick={onDevLogout}
+    onKeyDown={event => {
+      if (event.keyCode === 13) {
+        onDevLogout();
+      }
+    }}
+  >
+    <UserIcon />
+  </Button>
+);
+
+export default LogoutButton;