Add help dropdown and about modal

__tests__/components/About.test.jsx

@@ -1,15 +1,41 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import api from '../../src/api';
+import { API_CONFIG } from '../../src/endpoints';
 import About from '../../src/components/About';
 
-let aboutWrapper;
-let headerElem;
-
 describe('<About />', () => {
+  let aboutWrapper;
+  let closeButton;
+
   test('initially renders without crashing', () => {
-    aboutWrapper = mount(<About />);
-    headerElem = aboutWrapper.find('h2');
+    aboutWrapper = mount(<About isOpen />);
     expect(aboutWrapper.length).toBe(1);
-    expect(headerElem.length).toBe(1);
+    aboutWrapper.unmount();
+  });
+
+  test('close button calls onAboutModalClose', () => {
+    const onAboutModalClose = jest.fn();
+    aboutWrapper = mount(<About isOpen onAboutModalClose={onAboutModalClose} />);
+    closeButton = aboutWrapper.find('AboutModalBoxCloseButton Button');
+    closeButton.simulate('click');
+    expect(onAboutModalClose).toBeCalled();
+    aboutWrapper.unmount();
+  });
+
+  test('sets error on api request failure', async () => {
+    api.get = jest.fn().mockImplementation(() => {
+      const err = new Error('404 error');
+      err.response = { status: 404, message: 'problem' };
+      return Promise.reject(err);
+    });
+    aboutWrapper = mount(<About isOpen />);
+    await aboutWrapper.instance().componentDidMount();
+    expect(aboutWrapper.state('error').response.status).toBe(404);
+    aboutWrapper.unmount();
+  });
+
+  test('API Config endpoint is valid', () => {
+    expect(API_CONFIG).toBeDefined();
   });
 });

__tests__/components/HelpDropdown.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import HelpDropdown from '../../src/components/HelpDropdown';
+
+let questionCircleIcon;
+let dropdownWrapper;
+let dropdownToggle;
+let dropdownItems;
+let dropdownItem;
+
+beforeEach(() => {
+  dropdownWrapper = mount(<HelpDropdown />);
+});
+
+afterEach(() => {
+  dropdownWrapper.unmount();
+});
+
+describe('<HelpDropdown />', () => {
+  test('initially renders without crashing', () => {
+    expect(dropdownWrapper.length).toBe(1);
+    expect(dropdownWrapper.state('isOpen')).toEqual(false);
+    expect(dropdownWrapper.state('showAboutModal')).toEqual(false);
+    questionCircleIcon = dropdownWrapper.find('QuestionCircleIcon');
+    expect(questionCircleIcon.length).toBe(1);
+  });
+
+  test('renders two dropdown items', () => {
+    dropdownWrapper.setState({ isOpen: true });
+    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', () => {
+    dropdownWrapper.setState({ isOpen: true });
+    dropdownToggle = dropdownWrapper.find('DropdownToggle > DropdownToggle');
+    dropdownToggle.simulate('click');
+    expect(dropdownWrapper.state('isOpen')).toEqual(false);
+  });
+
+  test('about dropdown item sets state.showAboutModal to true', () => {
+    dropdownWrapper.setState({ isOpen: true });
+    dropdownItem = dropdownWrapper.find('DropdownItem a').at(1);
+    dropdownItem.simulate('click');
+    expect(dropdownWrapper.state('showAboutModal')).toEqual(true);
+  });
+
+  test('onAboutModalClose sets state.showAboutModal to false', () => {
+    dropdownWrapper.setState({ showAboutModal: true });
+    const aboutModal = dropdownWrapper.find('AboutModal');
+    aboutModal.find('AboutModalBoxCloseButton Button').simulate('click');
+    expect(dropdownWrapper.state('showAboutModal')).toEqual(false);
+  });
+});
+