Remove calling setState from render

This commit is contained in:
Marliana Lara
2018-12-05 07:56:53 -05:00
parent 00c9ae1376
commit a31ef24be6
2 changed files with 78 additions and 41 deletions

View File

@@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import { HashRouter as Router } from 'react-router-dom'; import { HashRouter as Router } from 'react-router-dom';
import { shallow, mount } from 'enzyme'; import { shallow, mount } from 'enzyme';
import { createMemoryHistory } from 'history'
import App from '../src/App'; import App from '../src/App';
import api from '../src/api'; import api from '../src/api';
import { API_LOGOUT } from '../src/endpoints'; import { API_LOGOUT } from '../src/endpoints';
@@ -44,27 +42,15 @@ describe('<App />', () => {
expect(login.length).toBe(0); expect(login.length).toBe(0);
}); });
test('onNavSelect sets state.activeItem and state.activeGroup', () => {
const history = createMemoryHistory('/jobs');
const appWrapper = shallow(<App.WrappedComponent history={history} />);
appWrapper.instance().onNavSelect({ groupId: 'bar' });
expect(appWrapper.state().activeGroup).toBe('bar');
});
test('onNavToggle sets state.isNavOpen to opposite', () => { test('onNavToggle sets state.isNavOpen to opposite', () => {
const history = createMemoryHistory('/jobs'); const appWrapper = shallow(<App.WrappedComponent />);
const appWrapper = shallow(<App.WrappedComponent history={history} />);
expect(appWrapper.state().isNavOpen).toBe(true); expect(appWrapper.state().isNavOpen).toBe(true);
appWrapper.instance().onNavToggle(); appWrapper.instance().onNavToggle();
expect(appWrapper.state().isNavOpen).toBe(false); expect(appWrapper.state().isNavOpen).toBe(false);
}); });
test('onLogoClick sets selected nav back to defaults', () => { test('onLogoClick sets selected nav back to defaults', () => {
const history = createMemoryHistory('/jobs'); const appWrapper = shallow(<App.WrappedComponent />);
const appWrapper = shallow(<App.WrappedComponent history={history} />);
appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' }); appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
expect(appWrapper.state().activeItem).toBe('bar'); expect(appWrapper.state().activeItem).toBe('bar');
expect(appWrapper.state().activeGroup).toBe('foo'); expect(appWrapper.state().activeGroup).toBe('foo');
@@ -74,18 +60,13 @@ describe('<App />', () => {
test('api.logout called from logout button', async () => { test('api.logout called from logout button', async () => {
api.get = jest.fn().mockImplementation(() => Promise.resolve({})); api.get = jest.fn().mockImplementation(() => Promise.resolve({}));
let appWrapper = mount(<Router><App /></Router>); const appWrapper = shallow(<App.WrappedComponent />);
let logoutButton = appWrapper.find('LogoutButton'); appWrapper.instance().onDevLogout();
logoutButton.props().onDevLogout();
appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' }); appWrapper.setState({ activeGroup: 'foo', activeItem: 'bar' });
await asyncFlush();
expect(api.get).toHaveBeenCalledTimes(1); expect(api.get).toHaveBeenCalledTimes(1);
expect(api.get).toHaveBeenCalledWith(API_LOGOUT); expect(api.get).toHaveBeenCalledWith(API_LOGOUT);
await asyncFlush();
console.log(appWrapper.state()); expect(appWrapper.state().activeItem).toBe(DEFAULT_ACTIVE_ITEM);
expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP); expect(appWrapper.state().activeGroup).toBe(DEFAULT_ACTIVE_GROUP);
}); });
}); });

View File

@@ -54,7 +54,7 @@ import Templates from './pages/Templates';
import Users from './pages/Users'; import Users from './pages/Users';
const SideNavItems = ({ items, history }) => { const SideNavItems = ({ items, history }) => {
const currentPath = history.location.pathname.replace(/^\//, ''); const currentPath = history.location.pathname.split('/')[1];
let activeGroup; let activeGroup;
if (currentPath !== '') { if (currentPath !== '') {
[{ groupName: activeGroup }] = items [{ groupName: activeGroup }] = items
@@ -108,24 +108,10 @@ class App extends React.Component {
} }
onDevLogout = async () => { onDevLogout = async () => {
console.log('called')
await api.get(API_LOGOUT); await api.get(API_LOGOUT);
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
console.log(this.state);
} }
expand = (path, group) => {
const { history } = this.props;
const { activeGroup } = this.state;
const currentPath = history.location.pathname.split('/')[1];
if ((path === currentPath) && (group !== activeGroup)) {
this.setState({ activeGroup: group });
}
return (path === currentPath);
};
render () { render () {
const { isNavOpen } = this.state; const { isNavOpen } = this.state;
const { logo, loginInfo, history } = this.props; const { logo, loginInfo, history } = this.props;
@@ -197,7 +183,7 @@ class App extends React.Component {
}, },
{ {
path: 'portal', path: 'portal',
title: 'Portal' title: 'Portal Mode'
}, },
] ]
}, },
@@ -226,6 +212,76 @@ class App extends React.Component {
title: 'Inventory Scripts' title: 'Inventory Scripts'
} }
] ]
},
{
groupName: 'access',
title: 'Access',
routes: [
{
path: 'organizations',
title: 'Organizations'
},
{
path: 'users',
title: 'Users'
},
{
path: 'teams',
title: 'Teams'
}
]
},
{
groupName: 'administration',
title: 'Administration',
routes: [
{
path: 'credential_types',
title: 'Credential Types',
},
{
path: 'notification_templates',
title: 'Notifications'
},
{
path: 'management_jobs',
title: 'Management Jobs'
},
{
path: 'instance_groups',
title: 'Instance Groups'
},
{
path: 'applications',
title: 'Integrations'
}
]
},
{
groupName: 'settings',
title: 'Settings',
routes: [
{
path: 'auth_settings',
title: 'Authentication',
},
{
path: 'jobs_settings',
title: 'Jobs'
},
{
path: 'system_settings',
title: 'System'
},
{
path: 'ui_settings',
title: 'User Interface'
},
{
path: 'license',
title: 'License'
}
]
} }
]} ]}
/> />