mirror of
https://github.com/ansible/awx.git
synced 2026-04-04 17:55:06 -02:30
Remove calling setState from render
This commit is contained in:
@@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
88
src/App.jsx
88
src/App.jsx
@@ -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'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user