diff --git a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
index 0727033c21..aed7c7687f 100644
--- a/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
+++ b/__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx
@@ -75,7 +75,7 @@ describe('', () => {
expect(wrapper.state().form.instanceGroups.value).toEqual(mockInstanceGroups);
});
- test('onLookupSave successfully sets instanceGroups state', () => {
+ test('changing instance group successfully sets instanceGroups state', () => {
const wrapper = mount(
@@ -88,7 +88,10 @@ describe('', () => {
).find('OrganizationEdit');
- wrapper.instance().onLookupSave([
+ const lookup = wrapper.find('InstanceGroupsLookup');
+ expect(lookup.length).toBe(1);
+
+ lookup.prop('onChange')([
{
id: 1,
name: 'foo'
@@ -102,9 +105,8 @@ describe('', () => {
]);
});
- test('calls "onFieldChange" when input values change', () => {
- // const api = new APIClient();
- const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onFieldChange');
+ test('calls "handleFieldChange" when input values change', () => {
+ const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleFieldChange');
const wrapper = mount(
@@ -118,8 +120,8 @@ describe('', () => {
).find('OrganizationEdit');
expect(spy).not.toHaveBeenCalled();
- wrapper.instance().onFieldChange('foo', { target: { name: 'name' } });
- wrapper.instance().onFieldChange('bar', { target: { name: 'description' } });
+ wrapper.instance().handleFieldChange('foo', { target: { name: 'name' } });
+ wrapper.instance().handleFieldChange('bar', { target: { name: 'description' } });
expect(spy).toHaveBeenCalledTimes(2);
});
@@ -148,8 +150,8 @@ describe('', () => {
expect(wrapper.find('FormSelectOption')).toHaveLength(2);
});
- test('calls onSubmit when Save button is clicked', () => {
- const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onSubmit');
+ test('calls handleSubmit when Save button is clicked', () => {
+ const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleSubmit');
const wrapper = mount(
@@ -170,7 +172,7 @@ describe('', () => {
expect(spy).toBeCalled();
});
- test('onSubmit associates and disassociates instance groups', async () => {
+ test('handleSubmit associates and disassociates instance groups', async () => {
const mockInstanceGroups = [
{ name: 'One', id: 1 },
{ name: 'Two', id: 2 }
@@ -204,12 +206,12 @@ describe('', () => {
await wrapper.instance().componentDidMount();
- wrapper.instance().onLookupSave([
+ wrapper.find('InstanceGroupsLookup').prop('onChange')([
{ name: 'One', id: 1 },
{ name: 'Three', id: 3 }
], 'instanceGroups');
- await wrapper.instance().onSubmit();
+ await wrapper.instance().handleSubmit();
expect(api.updateOrganizationDetails).toHaveBeenCalledWith(1, mockDataForm);
expect(api.associateInstanceGroup).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 3);
expect(api.associateInstanceGroup).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
@@ -220,8 +222,8 @@ describe('', () => {
expect(api.disassociate).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 3);
});
- test('calls "onCancel" when Cancel button is clicked', () => {
- const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onCancel');
+ test('calls "handleCancel" when Cancel button is clicked', () => {
+ const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleCancel');
const wrapper = mount(
diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
index eb3c6de07b..954fa1f2fa 100644
--- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
+++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
@@ -28,8 +28,8 @@ describe('', () => {
);
});
- test('calls "onFieldChange" when input values change', () => {
- const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onFieldChange');
+ test('calls "handleFieldChange" when input values change', () => {
+ const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleFieldChange');
const wrapper = mount(
@@ -47,8 +47,8 @@ describe('', () => {
expect(spy).toHaveBeenCalledTimes(2);
});
- test('calls "onSubmit" when Save button is clicked', () => {
- const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
+ test('calls "handleSubmit" when Save button is clicked', () => {
+ const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleSubmit');
const wrapper = mount(
@@ -65,8 +65,8 @@ describe('', () => {
expect(spy).toBeCalled();
});
- test('calls "onCancel" when Cancel button is clicked', () => {
- const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
+ test('calls "handleCancel" when Cancel button is clicked', () => {
+ const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleCancel');
const wrapper = mount(
@@ -83,7 +83,7 @@ describe('', () => {
expect(spy).toBeCalled();
});
- test('calls "onCancel" when close button (x) is clicked', () => {
+ test('calls "handleCancel" when close button (x) is clicked', () => {
const wrapper = mount(
@@ -104,7 +104,7 @@ describe('', () => {
});
test('Successful form submission triggers redirect', (done) => {
- const onSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess');
+ const handleSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleSuccess');
const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } };
api.createOrganization = jest.fn().mockResolvedValue(mockedResp); api.associateInstanceGroup = jest.fn().mockResolvedValue('done');
const wrapper = mount(
@@ -117,12 +117,12 @@ describe('', () => {
wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
wrapper.find('button[aria-label="Save"]').prop('onClick')();
setImmediate(() => {
- expect(onSuccess).toHaveBeenCalled();
+ expect(handleSuccess).toHaveBeenCalled();
done();
});
});
- test('onLookupSave successfully sets instanceGroups state', () => {
+ test('changing instance groups successfully sets instanceGroups state', () => {
const wrapper = mount(
@@ -130,7 +130,8 @@ describe('', () => {
).find('OrganizationAdd');
- wrapper.instance().onLookupSave([
+
+ wrapper.find('InstanceGroupsLookup').prop('onChange')([
{
id: 1,
name: 'foo'
@@ -144,7 +145,7 @@ describe('', () => {
]);
});
- test('onFieldChange successfully sets custom_virtualenv state', () => {
+ test('handleFieldChange successfully sets custom_virtualenv state', () => {
const wrapper = mount(
@@ -152,11 +153,11 @@ describe('', () => {
).find('OrganizationAdd');
- wrapper.instance().onFieldChange('fooBar', { target: { name: 'custom_virtualenv' } });
+ wrapper.instance().handleFieldChange('fooBar', { target: { name: 'custom_virtualenv' } });
expect(wrapper.state('custom_virtualenv')).toBe('fooBar');
});
- test('onSubmit posts instance groups from selectedInstanceGroups', async () => {
+ test('handleSubmit posts instance groups from selectedInstanceGroups', async () => {
api.createOrganization = jest.fn().mockResolvedValue({
data: {
id: 1,
@@ -181,7 +182,7 @@ describe('', () => {
name: 'foo'
}]
});
- await wrapper.instance().onSubmit();
+ await wrapper.instance().handleSubmit();
expect(api.createOrganization).toHaveBeenCalledWith({
custom_virtualenv: '',
description: '',
diff --git a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
index 70d620c075..c8e22a4542 100644
--- a/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
+++ b/src/pages/Organizations/screens/Organization/OrganizationEdit.jsx
@@ -21,12 +21,12 @@ class OrganizationEdit extends Component {
this.getRelatedInstanceGroups = this.getRelatedInstanceGroups.bind(this);
this.checkValidity = this.checkValidity.bind(this);
- this.onFieldChange = this.onFieldChange.bind(this);
- this.onLookupSave = this.onLookupSave.bind(this);
- this.onSubmit = this.onSubmit.bind(this);
+ this.handleFieldChange = this.handleFieldChange.bind(this);
+ this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
this.postInstanceGroups = this.postInstanceGroups.bind(this);
- this.onCancel = this.onCancel.bind(this);
- this.onSuccess = this.onSuccess.bind(this);
+ this.handleCancel = this.handleCancel.bind(this);
+ this.handleSuccess = this.handleSuccess.bind(this);
this.state = {
form: {
@@ -73,7 +73,24 @@ class OrganizationEdit extends Component {
this.setState({ form: formData });
}
- onFieldChange (val, evt) {
+ async getRelatedInstanceGroups () {
+ const {
+ api,
+ organization: { id }
+ } = this.props;
+ const { data } = await api.getOrganizationInstanceGroups(id);
+ const { results } = data;
+ return results;
+ }
+
+ checkValidity = (value, validation) => {
+ const isValid = (validation.required)
+ ? (value.trim() !== '') : true;
+
+ return isValid;
+ }
+
+ handleFieldChange (val, evt) {
const targetName = evt.target.name;
const value = val;
@@ -91,14 +108,14 @@ class OrganizationEdit extends Component {
this.setState({ form: updatedForm, formIsValid });
}
- onLookupSave (val, targetName) {
+ handleInstanceGroupsChange (val, targetName) {
const { form: updatedForm } = this.state;
updatedForm[targetName].value = val;
this.setState({ form: updatedForm });
}
- async onSubmit () {
+ async handleSubmit () {
const { api, organization } = this.props;
const { form: { name, description, custom_virtualenv } } = this.state;
const formData = { name, description, custom_virtualenv };
@@ -115,37 +132,20 @@ class OrganizationEdit extends Component {
} catch (err) {
this.setState({ error: err });
} finally {
- this.onSuccess();
+ this.handleSuccess();
}
}
- onCancel () {
+ handleCancel () {
const { organization: { id }, history } = this.props;
history.push(`/organizations/${id}`);
}
- onSuccess () {
+ handleSuccess () {
const { organization: { id }, history } = this.props;
history.push(`/organizations/${id}`);
}
- async getRelatedInstanceGroups () {
- const {
- api,
- organization: { id }
- } = this.props;
- const { data } = await api.getOrganizationInstanceGroups(id);
- const { results } = data;
- return results;
- }
-
- checkValidity = (value, validation) => {
- const isValid = (validation.required)
- ? (value.trim() !== '') : true;
-
- return isValid;
- }
-
async postInstanceGroups () {
const { api, organization } = this.props;
const { form: { instanceGroups } } = this.state;
@@ -202,7 +202,7 @@ class OrganizationEdit extends Component {
isRequired
isValid={name.isValid}
name="name"
- onChange={this.onFieldChange}
+ onChange={this.handleFieldChange}
value={name.value || ''}
/>
@@ -213,7 +213,7 @@ class OrganizationEdit extends Component {
@@ -229,7 +229,7 @@ class OrganizationEdit extends Component {
defaultSelected={custom_virtualenv.defaultEnv}
label={i18n._(t`Ansible Environment`)}
name="custom_virtualenv"
- onChange={this.onFieldChange}
+ onChange={this.handleFieldChange}
value={custom_virtualenv.value || ''}
/>
@@ -240,11 +240,11 @@ class OrganizationEdit extends Component {
{ error ? error
: '' }
diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx
index 2766a96d05..f00e118b1c 100644
--- a/src/pages/Organizations/screens/OrganizationAdd.jsx
+++ b/src/pages/Organizations/screens/OrganizationAdd.jsx
@@ -26,11 +26,11 @@ class OrganizationAdd extends React.Component {
constructor (props) {
super(props);
- this.onFieldChange = this.onFieldChange.bind(this);
- this.onLookupSave = this.onLookupSave.bind(this);
- this.onSubmit = this.onSubmit.bind(this);
- this.onCancel = this.onCancel.bind(this);
- this.onSuccess = this.onSuccess.bind(this);
+ this.handleFieldChange = this.handleFieldChange.bind(this);
+ this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleCancel = this.handleCancel.bind(this);
+ this.handleSuccess = this.handleSuccess.bind(this);
this.state = {
name: '',
@@ -42,15 +42,15 @@ class OrganizationAdd extends React.Component {
};
}
- onFieldChange (val, evt) {
+ handleFieldChange (val, evt) {
this.setState({ [evt.target.name]: val || evt.target.value });
}
- onLookupSave (val, targetName) {
+ handleInstanceGroupsChange (val, targetName) {
this.setState({ [targetName]: val });
}
- async onSubmit () {
+ async handleSubmit () {
const { api } = this.props;
const { name, description, custom_virtualenv, instanceGroups } = this.state;
const data = {
@@ -70,19 +70,19 @@ class OrganizationAdd extends React.Component {
} catch (err) {
this.setState({ error: err });
} finally {
- this.onSuccess(response.id);
+ this.handleSuccess(response.id);
}
} catch (err) {
this.setState({ error: err });
}
}
- onCancel () {
+ handleCancel () {
const { history } = this.props;
history.push('/organizations');
}
- onSuccess (id) {
+ handleSuccess (id) {
const { history } = this.props;
history.push(`/organizations/${id}`);
}
@@ -112,7 +112,7 @@ class OrganizationAdd extends React.Component {
@@ -131,7 +131,7 @@ class OrganizationAdd extends React.Component {
id="add-org-form-name"
name="name"
value={name}
- onChange={this.onFieldChange}
+ onChange={this.handleFieldChange}
/>
@@ -139,13 +139,13 @@ class OrganizationAdd extends React.Component {
id="add-org-form-description"
name="description"
value={description}
- onChange={this.onFieldChange}
+ onChange={this.handleFieldChange}
/>
{({ custom_virtualenvs }) => (
@@ -169,7 +169,7 @@ class OrganizationAdd extends React.Component {
label={i18n._(t`Ansible Environment`)}
name="custom_virtualenv"
value={custom_virtualenv}
- onChange={this.onFieldChange}
+ onChange={this.handleFieldChange}
data={custom_virtualenvs}
defaultSelected={defaultEnv}
/>
@@ -179,9 +179,9 @@ class OrganizationAdd extends React.Component {
{error ? error
: ''}