diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
index 86059f3629..0bf40cb419 100644
--- a/__mocks__/fileMock.js
+++ b/__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))};`;
+ },
+};
diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx
index e6c7057b88..01e216659d 100644
--- a/__tests__/App.test.jsx
+++ b/__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('', () => {
test('renders without crashing', () => {
@@ -34,4 +38,40 @@ describe('', () => {
const login = appWrapper.find(Login);
expect(login.length).toBe(0);
});
+
+ test('onNavSelect sets state.activeItem and state.activeGroup', () => {
+ const appWrapper = shallow();
+ 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();
+ 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();
+ 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();
+ 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);
+ });
});
diff --git a/__tests__/components/About.test.jsx b/__tests__/components/About.test.jsx
new file mode 100644
index 0000000000..336b9a7141
--- /dev/null
+++ b/__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('', () => {
+ test('initially renders without crashing', () => {
+ aboutWrapper = mount();
+ headerElem = aboutWrapper.find('h2');
+ expect(aboutWrapper.length).toBe(1);
+ expect(headerElem.length).toBe(1);
+ });
+});
diff --git a/__tests__/ConditionalRedirect.test.jsx b/__tests__/components/ConditionalRedirect.test.jsx
similarity index 93%
rename from __tests__/ConditionalRedirect.test.jsx
rename to __tests__/components/ConditionalRedirect.test.jsx
index f96c80bd80..c437ae6971 100644
--- a/__tests__/ConditionalRedirect.test.jsx
+++ b/__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('', () => {
test('renders Redirect when shouldRedirect is passed truthy func', () => {
diff --git a/__tests__/components/LogoutButton.test.jsx b/__tests__/components/LogoutButton.test.jsx
new file mode 100644
index 0000000000..e185193321
--- /dev/null
+++ b/__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('', () => {
+ test('initially renders without crashing', () => {
+ const onDevLogout = jest.fn();
+ buttonWrapper = mount();
+ 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);
+ });
+});
diff --git a/__tests__/components/TowerLogo.test.jsx b/__tests__/components/TowerLogo.test.jsx
new file mode 100644
index 0000000000..5a6561ff42
--- /dev/null
+++ b/__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('', () => {
+ test('initially renders without crashing', () => {
+ logoWrapper = mount();
+ 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();
+ 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();
+ 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();
+ 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');
+ });
+});
diff --git a/jest.config.js b/jest.config.js
index cf3d1a6f92..c3730195c8 100644
--- a/jest.config.js
+++ b/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)$': '/__mocks__/fileMock.js',
'\\.(css|scss|less)$': '/__mocks__/styleMock.js'
},
setupTestFrameworkScriptFile: '/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)$': '/__mocks__/fileMock.js',
},
transformIgnorePatterns: [
'[/\\\\]node_modules[/\\\\].+\\.(?!(axios)/)(js|jsx)$'
diff --git a/src/App.jsx b/src/App.jsx
index 1d9a3beae9..cabdf6ddfa 100644
--- a/src/App.jsx
+++ b/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={(
}
- avatar={}
+ avatar={ this.onDevLogout()} />}
showNavToggle
onNavToggle={this.onNavToggle}
/>
diff --git a/src/components/LogoutButton.jsx b/src/components/LogoutButton.jsx
new file mode 100644
index 0000000000..71bdf020eb
--- /dev/null
+++ b/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 }) => (
+
+);
+
+export default LogoutButton;
diff --git a/src/components/TowerLogo/TowerLogo.jsx b/src/components/TowerLogo/TowerLogo.jsx
index 242e77864c..113e405453 100644
--- a/src/components/TowerLogo/TowerLogo.jsx
+++ b/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;
}