From a670a73fd019d03090e93cb4ab9a0603d0cc5efb Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 2 Nov 2018 16:32:51 -0400 Subject: [PATCH 1/6] update file mock to return file name --- __mocks__/fileMock.js | 8 +++++++- jest.config.js | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) 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/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)$' From 07f6508402f7421efc11c28378deb324bc04eb16 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 2 Nov 2018 16:33:40 -0400 Subject: [PATCH 2/6] move ConditionalRedirect test to components subfolder --- __tests__/{ => components}/ConditionalRedirect.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename __tests__/{ => components}/ConditionalRedirect.test.jsx (93%) 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', () => { From 96b8ab47c4d1773d15342354df80890151833729 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 2 Nov 2018 16:34:02 -0400 Subject: [PATCH 3/6] add TowerLogo tests --- __tests__/components/TowerLogo.test.jsx | 58 +++++++++++++++++++++++++ src/components/TowerLogo/TowerLogo.jsx | 9 ++-- 2 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 __tests__/components/TowerLogo.test.jsx 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/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; } From 08d2718f5ec7054826a721cb292247084a8a7a2a Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 2 Nov 2018 17:46:43 -0400 Subject: [PATCH 4/6] add about page tests --- __tests__/components/About.test.jsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 __tests__/components/About.test.jsx 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); + }); +}); From 7b099578c880b29385b2709b92f00cc7c535d0e0 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 2 Nov 2018 17:47:59 -0400 Subject: [PATCH 5/6] update App.jsx and improve coverage abstract LogoutButton to component --- __tests__/App.test.jsx | 35 ++++++++++++++++++++++ __tests__/components/LogoutButton.test.jsx | 27 +++++++++++++++++ src/App.jsx | 13 ++------ src/components/LogoutButton.jsx | 26 ++++++++++++++++ 4 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 __tests__/components/LogoutButton.test.jsx create mode 100644 src/components/LogoutButton.jsx diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx index e6c7057b88..0a9a9dd58b 100644 --- a/__tests__/App.test.jsx +++ b/__tests__/App.test.jsx @@ -5,6 +5,9 @@ import api from '../src/api'; import Dashboard from '../src/pages/Dashboard'; import Login from '../src/pages/Login'; +const DEFAULT_ACTIVE_GROUP = 'views_group'; +const DEFAULT_ACTIVE_ITEM = 'views_group_dashboard'; + describe('', () => { test('renders without crashing', () => { const appWrapper = shallow(); @@ -34,4 +37,36 @@ 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', () => { + api.logout = jest.fn(); + const appWrapper = mount(); + const logoutButton = appWrapper.find('LogoutButton'); + logoutButton.props().onDevLogout(); + expect(api.logout).toHaveBeenCalledTimes(1); + }); }); 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/src/App.jsx b/src/App.jsx index 1d9a3beae9..3852933e6e 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'; @@ -78,13 +76,6 @@ class App extends React.Component { this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); } - onDevLogout = () => { - api.logout() - .then(() => { - this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); - }); - } - render () { const { activeItem, activeGroup, isNavOpen } = this.state; const { logo, loginInfo } = this.props; @@ -112,7 +103,7 @@ class App extends React.Component { header={( } - avatar={} + avatar={} 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; From df57b144c499d5a445a078b988285c8c228fe602 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Tue, 6 Nov 2018 12:25:36 -0500 Subject: [PATCH 6/6] fix logout in App.jsx and update test --- __tests__/App.test.jsx | 9 +++++++-- src/App.jsx | 9 ++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/__tests__/App.test.jsx b/__tests__/App.test.jsx index 0a9a9dd58b..01e216659d 100644 --- a/__tests__/App.test.jsx +++ b/__tests__/App.test.jsx @@ -4,6 +4,7 @@ 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'; @@ -62,11 +63,15 @@ describe('', () => { expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP); }); - test('api.logout called from logout button', () => { - api.logout = jest.fn(); + 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/src/App.jsx b/src/App.jsx index 3852933e6e..cabdf6ddfa 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -76,6 +76,13 @@ class App extends React.Component { this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); } + onDevLogout = () => { + api.logout() + .then(() => { + this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); + }); + } + render () { const { activeItem, activeGroup, isNavOpen } = this.state; const { logo, loginInfo } = this.props; @@ -103,7 +110,7 @@ class App extends React.Component { header={( } - avatar={} + avatar={ this.onDevLogout()} />} showNavToggle onNavToggle={this.onNavToggle} />