add header toolbar component and move About modal control to App

__tests__/App.test.jsx

@@ -1,61 +1,111 @@
 import React from 'react';
-import { HashRouter as Router } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
 
-import { shallow, mount } from 'enzyme';
-import App from '../src/App';
-import api from '../src/api';
-import { API_LOGOUT } from '../src/endpoints';
-
-import Dashboard from '../src/pages/Dashboard';
+import { mount, shallow } from 'enzyme';
 import { asyncFlush } from '../jest.setup';
 
-const DEFAULT_ACTIVE_GROUP = 'views_group';
-const DEFAULT_ACTIVE_ITEM = 'views_group_dashboard';
+import App from '../src/App';
 
-const routeGroups = [{
-  groupId: DEFAULT_ACTIVE_GROUP,
-  title: 'test',
-  routes: [{ path: '/home', title: 'Dashboard', component:  Dashboard }],
-}];
+const DEFAULT_ACTIVE_GROUP = 'views_group';
 
 describe('<App />', () => {
-  test('renders without crashing', () => {
-    const appWrapper = shallow(<App />);
+  test('expected content is rendered', () => {
+    const appWrapper = mount(
+      <HashRouter>
+        <I18nProvider>
+          <App
+            routeGroups={[
+              {
+                title: 'Group One',
+                groupId: 'group_one',
+                routes: [
+                  { title: 'Foo', path: '/foo' },
+                  { title: 'Bar', path: '/bar' },
+                ],
+              },
+              {
+                title: 'Group Two',
+                groupId: 'group_two',
+                routes: [
+                  { title: 'Fiz', path: '/fiz' },
+                ]
+              }
+            ]}
+            render={({ routeGroups }) => (
+              routeGroups.map(({ groupId }) => (<div key={groupId} id={groupId} />))
+            )}
+          />
+        </I18nProvider>
+      </HashRouter>
+    );
+
+    // page components
     expect(appWrapper.length).toBe(1);
+    expect(appWrapper.find('PageHeader').length).toBe(1);
+    expect(appWrapper.find('PageSidebar').length).toBe(1);
+
+    // sidebar groups and route links
+    expect(appWrapper.find('NavExpandableGroup').length).toBe(2);
+    expect(appWrapper.find('a[href="/#/foo"]').length).toBe(1);
+    expect(appWrapper.find('a[href="/#/bar"]').length).toBe(1);
+    expect(appWrapper.find('a[href="/#/fiz"]').length).toBe(1);
+
+    // inline render
+    expect(appWrapper.find('#group_one').length).toBe(1);
+    expect(appWrapper.find('#group_two').length).toBe(1);
   });
 
   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);
+    const { onNavToggle } = appWrapper.instance();
+
+    [true, false, true, false, true].forEach(expected => {
+      expect(appWrapper.state().isNavOpen).toBe(expected);
+      onNavToggle();
+    });
   });
 
   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().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
   });
 
-  test('api.logout called from logout button', async () => {
-    api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
-    const appWrapper = shallow(<App />);
-    appWrapper.instance().onDevLogout();
-    appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
-    expect(api.get).toHaveBeenCalledTimes(1);
-    expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
+  test('logout button click triggers expected callback', async (done) => {
+    const logout = jest.fn(() => Promise.resolve());
+    const api = { logout };
+
+    const appWrapper = mount(
+      <HashRouter>
+        <I18nProvider>
+          <App api={api} />
+        </I18nProvider>
+      </HashRouter>
+    );
+
+    appWrapper.find('button[id="button-logout"]').simulate('click');
     await asyncFlush();
-    expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
-    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
+    expect(api.logout).toHaveBeenCalledTimes(1);
+
+    done();
   });
 
-  test('Componenet makes REST call to API_CONFIG endpoint when mounted', () => {
-    api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
-    const appWrapper = shallow(<App.WrappedComponent />);
+  test('Component makes expected call to api client when mounted', () => {
+    const getConfig = jest.fn().mockImplementation(() => Promise.resolve({}));
+    const api = { getConfig };
+    const appWrapper = mount(
+      <HashRouter>
+        <I18nProvider>
+          <App api={api} />
+        </I18nProvider>
+      </HashRouter>
+    );
     expect(api.get).toHaveBeenCalledTimes(1);
-    expect(api.get).toHaveBeenCalledWith(API_CONFIG);
   });
 });

__tests__/components/About.test.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { I18nProvider } from '@lingui/react';
-import api from '../../src/api';
-import { API_CONFIG } from '../../src/endpoints';
 import About from '../../src/components/About';
 
 describe('<About />', () => {
@@ -19,16 +17,16 @@ describe('<About />', () => {
     aboutWrapper.unmount();
   });
 
-  test('close button calls onAboutModalClose', () => {
-    const onAboutModalClose = jest.fn();
+  test('close button calls onClose handler', () => {
+    const onClose = jest.fn();
     aboutWrapper = mount(
       <I18nProvider>
-        <About isOpen onAboutModalClose={onAboutModalClose} />
+        <About isOpen onClose={onClose} />
       </I18nProvider>
     );
     closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button');
     closeButton.simulate('click');
-    expect(onAboutModalClose).toBeCalled();
+    expect(onClose).toBeCalled();
     aboutWrapper.unmount();
   });
 });

__tests__/components/HelpDropdown.test.jsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { I18nProvider } from '@lingui/react';
-import HelpDropdown from '../../src/components/HelpDropdown';
-
-let questionCircleIcon;
-let dropdownWrapper;
-let dropdownComponentInstance;
-let dropdownToggle;
-let dropdownItems;
-let dropdownItem;
-
-beforeEach(() => {
-  dropdownWrapper = mount(
-    <I18nProvider>
-      <HelpDropdown />
-    </I18nProvider>
-  );
-  dropdownComponentInstance = dropdownWrapper.find(HelpDropdown).instance();
-});
-
-afterEach(() => {
-  dropdownWrapper.unmount();
-});
-
-describe('<HelpDropdown />', () => {
-  test('initially renders without crashing', () => {
-    expect(dropdownWrapper.length).toBe(1);
-    expect(dropdownComponentInstance.state.isOpen).toEqual(false);
-    expect(dropdownComponentInstance.state.showAboutModal).toEqual(false);
-    questionCircleIcon = dropdownWrapper.find('QuestionCircleIcon');
-    expect(questionCircleIcon.length).toBe(1);
-  });
-
-  test('renders two dropdown items', () => {
-    dropdownComponentInstance.setState({ isOpen: true });
-    dropdownWrapper.update();
-    dropdownItems = dropdownWrapper.find('DropdownItem');
-    expect(dropdownItems.length).toBe(2);
-    const dropdownTexts = dropdownItems.map(item => item.text());
-    expect(dropdownTexts).toEqual(['Help', 'About']);
-  });
-
-  test('onToggle sets state.isOpen to opposite', () => {
-    dropdownComponentInstance.setState({ isOpen: true });
-    dropdownWrapper.update();
-    dropdownToggle = dropdownWrapper.find('DropdownToggle > DropdownToggle');
-    dropdownToggle.simulate('click');
-    expect(dropdownComponentInstance.state.isOpen).toEqual(false);
-  });
-
-  test('about dropdown item sets state.showAboutModal to true', () => {
-    dropdownComponentInstance.setState({ isOpen: true });
-    dropdownWrapper.update();
-    dropdownItem = dropdownWrapper.find('DropdownItem a').at(1);
-    dropdownItem.simulate('click');
-    expect(dropdownComponentInstance.state.showAboutModal).toEqual(true);
-  });
-
-  test('onAboutModalClose sets state.showAboutModal to false', () => {
-    dropdownComponentInstance.setState({ showAboutModal: true });
-    dropdownWrapper.update();
-    const aboutModal = dropdownWrapper.find('AboutModal');
-    aboutModal.find('AboutModalBoxCloseButton Button').simulate('click');
-    expect(dropdownComponentInstance.state.showAboutModal).toEqual(false);
-  });
-});
-

__tests__/components/LogoutButton.test.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { I18nProvider } from '@lingui/react';
-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(
-      <I18nProvider>
-        <LogoutButton onDevLogout={onDevLogout} />
-      </I18nProvider>
-    );
-    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);
-  });
-});