add more tests for header toolbar

__tests__/components/PageHeaderToolbar.test.jsx

@@ -1,16 +1,48 @@
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 
 import { I18nProvider } from '@lingui/react';
 import PageHeaderToolbar from '../../src/components/PageHeaderToolbar';
 
 describe('PageHeaderToolbar', () => {
-  test('renders the expected content', () => {
+  const pageHelpDropdownSelector = 'Dropdown QuestionCircleIcon';
-  const wrapper = mount(
+  const pageUserDropdownSelector = 'Dropdown UserIcon';
-    <I18nProvider>
+
-      <PageHeaderToolbar />
+  test('expected content is rendered on initialization', () => {
-    </I18nProvider>
+    const wrapper = mount(<I18nProvider><PageHeaderToolbar/></I18nProvider>);
-  );
+
-  expect(wrapper.find('Toolbar')).toHaveLength(1);
+    expect(wrapper.find(pageHelpDropdownSelector)).toHaveLength(1);
+    expect(wrapper.find(pageUserDropdownSelector)).toHaveLength(1);
+  });
+
+  test('dropdowns have expected items and callbacks', () => {
+    const onAboutClick = jest.fn();
+    const onLogoutClick = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <PageHeaderToolbar
+            onAboutClick={onAboutClick}
+            onLogoutClick={onLogoutClick}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    expect(wrapper.find('DropdownItem')).toHaveLength(0);
+    wrapper.find(pageHelpDropdownSelector).simulate('click');
+    expect(wrapper.find('DropdownItem')).toHaveLength(2);
+
+    const about = wrapper.find('DropdownItem li button');
+    about.simulate('click');
+    expect(onAboutClick).toHaveBeenCalled();
+
+    expect(wrapper.find('DropdownItem')).toHaveLength(0);
+    wrapper.find(pageUserDropdownSelector).simulate('click');
+    expect(wrapper.find('DropdownItem')).toHaveLength(2);
+
+    const logout = wrapper.find('DropdownItem li button');
+    logout.simulate('click');
+    expect(onLogoutClick).toHaveBeenCalled();
   });
 });

src/components/PageHeaderToolbar.jsx

@@ -18,7 +18,6 @@ import {
 } from '@patternfly/react-icons';
 
 const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html';
-const KEY_ENTER = 13;
 
 class PageHeaderToolbar extends Component {
   constructor (props) {
@@ -27,19 +26,10 @@ class PageHeaderToolbar extends Component {
 
     this.onHelpSelect = this.onHelpSelect.bind(this);
     this.onHelpToggle = this.onHelpToggle.bind(this);
-    this.onLogoutKeyDown = this.onLogoutKeyDown.bind(this);
     this.onUserSelect = this.onUserSelect.bind(this);
     this.onUserToggle = this.onUserToggle.bind(this);
   }
 
-  onLogoutKeyDown ({ keyCode }) {
-    const { onLogoutClick } = this.props;
-
-    if (keyCode === KEY_ENTER) {
-      onLogoutClick();
-    }
-  }
-
   onHelpSelect () {
     const { isHelpOpen } = this.state;
 
@@ -122,7 +112,6 @@ class PageHeaderToolbar extends Component {
                       key="logout"
                       component="button"
                       onClick={onLogoutClick}
-                      onKeyDown={this.onLogoutKeyDown}
                     >
                       {i18n._(t`Logout`)}
                     </DropdownItem>