External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

Hook up Cancel button

Browse Source 
- Update unit tests.
- Add basic error handling for API requests in Add Orgs component.
This commit is contained in:
kialam 2018-12-17 13:44:13 -05:00
parent 656e6d4f6a
commit ff0015e21d
No known key found for this signature in database
GPG Key ID: 2D0E60E4B8C7EA0F
2 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
__tests__/pages/Organizations/views/Organization.add.test.jsx
View File

@ -1,39 +1,60 @@
import React from 'react';
import { mount } from 'enzyme';
import OrganizationAdd from '../../../../src/pages/Organizations/views/Organization.add';
import { MemoryRouter } from 'react-router-dom';
describe('<OrganizationAdd />', () => {
test('initially renders succesfully', () => {
mount(
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
<MemoryRouter>
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
</MemoryRouter>
);
});
test('calls "handleChange" when input values change', () => {
const spy = jest.spyOn(OrganizationAdd.prototype, 'handleChange');
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleChange');
const wrapper = mount(
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
<MemoryRouter>
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
</MemoryRouter>
);
expect(spy).not.toHaveBeenCalled();
wrapper.find('input#add-org-form-name').simulate('change', {target: {value: 'foo'}});
wrapper.find('input#add-org-form-description').simulate('change', {target: {value: 'bar'}});
wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
wrapper.find('input#add-org-form-description').simulate('change', { target: { value: 'bar' } });
expect(spy).toHaveBeenCalledTimes(2);
});
test('calls "onSubmit" when Save button is clicked', () => {
const spy = jest.spyOn(OrganizationAdd.prototype, 'onSubmit');
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
const wrapper = mount(
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
<MemoryRouter>
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
</MemoryRouter>
);
expect(spy).not.toHaveBeenCalled();
wrapper.find('button.at-C-SubmitButton').prop('onClick')();
expect(spy).toBeCalled();
});
test('calls "onCancel" when Cancel button is clicked', () => {
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
const wrapper = mount(
<MemoryRouter>
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
</MemoryRouter>
);
expect(spy).not.toHaveBeenCalled();
wrapper.find('button.at-C-CancelButton').prop('onClick')();
expect(spy).toBeCalled();
});
});

26
src/pages/Organizations/views/Organization.add.jsx
View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import { Trans } from '@lingui/macro';
import {
PageSection,
@ -29,6 +30,7 @@ class OrganizationAdd extends React.Component {
this.onSelectChange = this.onSelectChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.resetForm = this.resetForm.bind(this);
this.onCancel = this.onCancel.bind(this);
}
state = {
@ -38,6 +40,7 @@ class OrganizationAdd extends React.Component {
custom_virtualenv: '',
custom_virtualenvs: [],
hideAnsibleSelect: true,
error:'',
};
onSelectChange(value, _) {
@ -62,13 +65,22 @@ class OrganizationAdd extends React.Component {
this.resetForm();
}
onCancel() {
this.props.history.push('/organizations');
}
async componentDidMount() {
const { data } = await api.get(API_CONFIG);
this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
if (this.state.custom_virtualenvs.length > 1) {
// Show dropdown if we have more than one ansible environment
this.setState({ hideAnsibleSelect: !this.state.hideAnsibleSelect });
try {
const { data } = await api.get(API_CONFIG);
this.setState({ custom_virtualenvs: [...data.custom_virtualenvs] });
if (this.state.custom_virtualenvs.length > 1) {
// Show dropdown if we have more than one ansible environment
this.setState({ hideAnsibleSelect: !this.state.hideAnsibleSelect });
}
} catch (error) {
this.setState({ error })
}
}
render() {
const { name } = this.state;
@ -130,7 +142,7 @@ class OrganizationAdd extends React.Component {
<Button className="at-C-SubmitButton" variant="primary" onClick={this.onSubmit} isDisabled={!enabled}>Save</Button>
</ToolbarGroup>
<ToolbarGroup>
<Button variant="secondary">Cancel</Button>
<Button className="at-C-CancelButton" variant="secondary" onClick={this.onCancel}>Cancel</Button>
</ToolbarGroup>
</Toolbar>
</ActionGroup>
@ -143,4 +155,4 @@ class OrganizationAdd extends React.Component {
}
}
export default OrganizationAdd;
export default withRouter(OrganizationAdd);