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
: ''}