Merge pull request #16 from jlmitch5/indexJsxTestsAndRestructure

finish unit test coverage

__mocks__/fileMock.js

@@ -1 +1,7 @@
-module.exports = 'test-file-stub';
+const path = require('path');
+
+module.exports = {
+  process (src, filename) {
+    return `module.exports=${JSON.stringify(path.basename(filename))};`;
+  },
+};

__tests__/App.test.jsx

@@ -4,6 +4,10 @@ import App from '../src/App';
 import api from '../src/api';
 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', () => {
@@ -34,4 +38,40 @@ 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', async () => {
+    api.logout = jest.fn().mockImplementation(() => Promise.resolve({}));
+    const appWrapper = mount(<App />);
+    const logoutButton = appWrapper.find('LogoutButton');
+    logoutButton.props().onDevLogout();
+    appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
+    expect(api.logout).toHaveBeenCalledTimes(1);
+    await asyncFlush();
+    expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
+    expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
+  });
 });

__tests__/components/About.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import About from '../../src/components/About';
+
+let aboutWrapper;
+let headerElem;
+
+describe('<About />', () => {
+  test('initially renders without crashing', () => {
+    aboutWrapper = mount(<About />);
+    headerElem = aboutWrapper.find('h2');
+    expect(aboutWrapper.length).toBe(1);
+    expect(headerElem.length).toBe(1);
+  });
+});

__tests__/components/ConditionalRedirect.test.jsx

@@ -4,7 +4,7 @@ import {
   Redirect
 } from 'react-router-dom';
 import { shallow } from 'enzyme';
-import ConditionalRedirect from '../src/components/ConditionalRedirect';
+import ConditionalRedirect from '../../src/components/ConditionalRedirect';
 
 describe('<ConditionalRedirect />', () => {
   test('renders Redirect when shouldRedirect is passed truthy func', () => {

__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);
+  });
+});

__tests__/components/TowerLogo.test.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { mount } from 'enzyme';
+import TowerLogo from '../../src/components/TowerLogo';
+
+let logoWrapper;
+let towerLogoElem;
+let brandElem;
+
+const findChildren = () => {
+  towerLogoElem = logoWrapper.find('TowerLogo');
+  brandElem = logoWrapper.find('Brand');
+};
+
+describe('<TowerLogo />', () => {
+  test('initially renders without crashing', () => {
+    logoWrapper = mount(<MemoryRouter><TowerLogo /></MemoryRouter>);
+    findChildren();
+    expect(logoWrapper.length).toBe(1);
+    expect(towerLogoElem.length).toBe(1);
+    expect(brandElem.length).toBe(1);
+  });
+
+  test('adds navigation to route history on click', () => {
+    const onLogoClick = jest.fn();
+    logoWrapper = mount(<MemoryRouter><TowerLogo onClick={onLogoClick} /></MemoryRouter>);
+    findChildren();
+    expect(towerLogoElem.props().history.length).toBe(1);
+    logoWrapper.simulate('click');
+    expect(towerLogoElem.props().history.length).toBe(2);
+  });
+
+  test('gracefully handles not being passed click handler', () => {
+    logoWrapper = mount(<MemoryRouter><TowerLogo /></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(<MemoryRouter><TowerLogo onClick={onLogoClick} /></MemoryRouter>);
+    findChildren();
+    findChildren();
+    expect(brandElem.props().src).toBe('tower-logo-header.svg');
+    brandElem.props().onMouseOver();
+    expect(towerLogoElem.state().hover).toBe(true);
+    logoWrapper.update();
+    findChildren();
+    expect(brandElem.props().src).toBe('tower-logo-header-hover.svg');
+    brandElem.props().onMouseOut();
+    expect(towerLogoElem.state().hover).toBe(false);
+    logoWrapper.update();
+    findChildren();
+    expect(brandElem.props().src).toBe('tower-logo-header.svg');
+  });
+});

jest.config.js

@@ -3,7 +3,6 @@ module.exports = {
     'src/**/*.{js,jsx}'
   ],
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|scss|less)$': '<rootDir>/__mocks__/styleMock.js'
   },
   setupTestFrameworkScriptFile: '<rootDir>/jest.setup.js',
@@ -13,7 +12,8 @@ module.exports = {
   testEnvironment: 'jsdom',
   testURL: 'http://127.0.0.1:3001',
   transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest'
+    '^.+\\.(js|jsx)$': 'babel-jest',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(?!(axios)/)(js|jsx)$'

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';
 
@@ -112,7 +110,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={() => this.onDevLogout()} />}
                     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;

src/components/TowerLogo/TowerLogo.jsx

@@ -13,13 +13,13 @@ class TowerLogo extends Component {
   }
 
   onClick = () => {
-    if (!this.props.onClick) return;
+    const { history, onClick: handleClick } = this.props;
 
-    const { history } = this.props;
+    if (!handleClick) return;
 
     history.push('/');
 
-    this.props.onClick();
+    handleClick();
   };
 
   onHover = () => {
@@ -30,10 +30,11 @@ class TowerLogo extends Component {
 
   render () {
     const { hover } = this.state;
+    const { onClick: handleClick } = this.props;
 
     let src = TowerLogoHeader;
 
-    if (hover && this.props.onClick) {
+    if (hover && handleClick) {
       src = TowerLogoHeaderHover;
     }