1
0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00

Add tests for Organization add view plus code refactoring.

This commit is contained in:
kialam 2018-12-10 15:03:33 -05:00
parent 9400bad990
commit 27e13ca082
No known key found for this signature in database
GPG Key ID: 2D0E60E4B8C7EA0F
2 changed files with 57 additions and 14 deletions

View File

@ -11,4 +11,41 @@ describe('<OrganizationAdd />', () => {
/>
);
});
test('calls "onSelectChange" on dropdown select change', () => {
const spy = jest.spyOn(OrganizationAdd.prototype, 'onSelectChange');
const wrapper = mount(
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
);
expect(spy).not.toHaveBeenCalled();
wrapper.find('select').simulate('change');
expect(spy).toHaveBeenCalled();
});
test('calls "handleChange" when input values change', () => {
const spy = jest.spyOn(OrganizationAdd.prototype, 'handleChange');
const wrapper = mount(
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
);
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'}});
expect(spy).toHaveBeenCalledTimes(2);
});
test('calls "onSubmit" when Save button is clicked', () => {
const spy = jest.spyOn(OrganizationAdd.prototype, 'onSubmit');
const wrapper = mount(
<OrganizationAdd
match={{ path: '/organizations/add', url: '/organizations/add' }}
location={{ search: '', pathname: '/organizations/add' }}
/>
);
expect(spy).not.toHaveBeenCalled();
wrapper.find('button.at-C-SubmitButton').prop('onClick')();
expect(spy).toBeCalled();
});
});

View File

@ -22,7 +22,14 @@ import api from '../../../api';
const { light } = PageSectionVariants;
class OrganizationAdd extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.onSelectChange = this.onSelectChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.resetForm = this.resetForm.bind(this);
}
state = {
name: '',
description: '',
@ -31,31 +38,30 @@ class OrganizationAdd extends React.Component {
post_endpoint: API_ORGANIZATIONS,
};
onSelectChange = (value, _) => {
onSelectChange (value, _) {
this.setState({ ansible_environment: value });
};
envs = [ // Placeholder for Ansible Environment Dropdown
{ ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
{ ansible_environment: '1', label: '1', disabled: false },
{ ansible_environment: '2', label: '2', disabled: false },
{ ansible_environment: '3', label: '3', disabled: false }
];
resetForm = () => {
resetForm() {
this.setState({
...this.state,
name: '',
description: ''
})
}
handleChange = (_, evt) => {
handleChange(_, evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
onSubmit = async () => {
async onSubmit() {
const data = Object.assign({}, { ...this.state });
await api.post(API_ORGANIZATIONS, data);
this.resetForm();
}
envs = [ // Placeholder for Ansible Environment Dropdown
{ ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
{ ansible_environment: '1', label: '1', disabled: false },
{ ansible_environment: '2', label: '2', disabled: false },
{ ansible_environment: '3', label: '3', disabled: false }
];
render() {
const { name } = this.state;
const enabled = name.length > 0; // TODO: add better form validation
@ -101,9 +107,9 @@ class OrganizationAdd extends React.Component {
/>
</FormGroup>
<FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
<Select value={this.state.value} onChange={this.onSelectChange} aria-label="Select Input">
<Select value={this.state.ansible_environment} onChange={this.onSelectChange} aria-label="Select Input">
{this.envs.map((env, index) => (
<SelectOption isDisabled={env.disabled} key={index} value={env.value} label={env.label} />
<SelectOption isDisabled={env.disabled} key={index} value={env.ansible_environment} label={env.label} />
))}
</Select>
</FormGroup>
@ -111,7 +117,7 @@ class OrganizationAdd extends React.Component {
<ActionGroup className="at-align-right">
<Toolbar>
<ToolbarGroup>
<Button variant="primary" onClick={this.onSubmit} isDisabled={!enabled}>Save</Button>
<Button className="at-C-SubmitButton" variant="primary" onClick={this.onSubmit} isDisabled={!enabled}>Save</Button>
</ToolbarGroup>
<ToolbarGroup>
<Button variant="secondary">Cancel</Button>