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; }