rename onX methods to handleX

__tests__/pages/Organizations/screens/Organization/OrganizationEdit.test.jsx

@@ -75,7 +75,7 @@ describe('<OrganizationEdit />', () => {
     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(
       <MemoryRouter>
         <I18nProvider>
@@ -88,7 +88,10 @@ describe('<OrganizationEdit />', () => {
       </MemoryRouter>
     ).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('<OrganizationEdit />', () => {
     ]);
   });
 
-  test('calls "onFieldChange" when input values change', () => {
+  test('calls "handleFieldChange" when input values change', () => {
-    // const api = new APIClient();
+    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleFieldChange');
-    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onFieldChange');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
@@ -118,8 +120,8 @@ describe('<OrganizationEdit />', () => {
     ).find('OrganizationEdit');
 
     expect(spy).not.toHaveBeenCalled();
-    wrapper.instance().onFieldChange('foo', { target: { name: 'name' } });
+    wrapper.instance().handleFieldChange('foo', { target: { name: 'name' } });
-    wrapper.instance().onFieldChange('bar', { target: { name: 'description' } });
+    wrapper.instance().handleFieldChange('bar', { target: { name: 'description' } });
     expect(spy).toHaveBeenCalledTimes(2);
   });
 
@@ -148,8 +150,8 @@ describe('<OrganizationEdit />', () => {
     expect(wrapper.find('FormSelectOption')).toHaveLength(2);
   });
 
-  test('calls onSubmit when Save button is clicked', () => {
+  test('calls handleSubmit when Save button is clicked', () => {
-    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onSubmit');
+    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleSubmit');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
@@ -170,7 +172,7 @@ describe('<OrganizationEdit />', () => {
     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('<OrganizationEdit />', () => {
 
     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('<OrganizationEdit />', () => {
     expect(api.disassociate).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 3);
   });
 
-  test('calls "onCancel" when Cancel button is clicked', () => {
+  test('calls "handleCancel" when Cancel button is clicked', () => {
-    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onCancel');
+    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleCancel');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>

__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx

@@ -28,8 +28,8 @@ describe('<OrganizationAdd />', () => {
     );
   });
 
-  test('calls "onFieldChange" when input values change', () => {
+  test('calls "handleFieldChange" when input values change', () => {
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onFieldChange');
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleFieldChange');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
@@ -47,8 +47,8 @@ describe('<OrganizationAdd />', () => {
     expect(spy).toHaveBeenCalledTimes(2);
   });
 
-  test('calls "onSubmit" when Save button is clicked', () => {
+  test('calls "handleSubmit" when Save button is clicked', () => {
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleSubmit');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
@@ -65,8 +65,8 @@ describe('<OrganizationAdd />', () => {
     expect(spy).toBeCalled();
   });
 
-  test('calls "onCancel" when Cancel button is clicked', () => {
+  test('calls "handleCancel" when Cancel button is clicked', () => {
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleCancel');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
@@ -83,7 +83,7 @@ describe('<OrganizationAdd />', () => {
     expect(spy).toBeCalled();
   });
 
-  test('calls "onCancel" when close button (x) is clicked', () => {
+  test('calls "handleCancel" when close button (x) is clicked', () => {
     const wrapper = mount(
       <MemoryRouter initialEntries={['/organizations/add']} initialIndex={0}>
         <I18nProvider>
@@ -104,7 +104,7 @@ describe('<OrganizationAdd />', () => {
   });
 
   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('<OrganizationAdd />', () => {
     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(
       <MemoryRouter>
         <I18nProvider>
@@ -130,7 +130,8 @@ describe('<OrganizationAdd />', () => {
         </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationAdd');
-    wrapper.instance().onLookupSave([
+
+    wrapper.find('InstanceGroupsLookup').prop('onChange')([
       {
         id: 1,
         name: 'foo'
@@ -144,7 +145,7 @@ describe('<OrganizationAdd />', () => {
     ]);
   });
 
-  test('onFieldChange successfully sets custom_virtualenv state', () => {
+  test('handleFieldChange successfully sets custom_virtualenv state', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
@@ -152,11 +153,11 @@ describe('<OrganizationAdd />', () => {
         </I18nProvider>
       </MemoryRouter>
     ).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('<OrganizationAdd />', () => {
         name: 'foo'
       }]
     });
-    await wrapper.instance().onSubmit();
+    await wrapper.instance().handleSubmit();
     expect(api.createOrganization).toHaveBeenCalledWith({
       custom_virtualenv: '',
       description: '',

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.handleFieldChange = this.handleFieldChange.bind(this);
-    this.onLookupSave = this.onLookupSave.bind(this);
+    this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.postInstanceGroups = this.postInstanceGroups.bind(this);
-    this.onCancel = this.onCancel.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
-    this.onSuccess = this.onSuccess.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 || ''}
                   />
                 </FormGroup>
@@ -213,7 +213,7 @@ class OrganizationEdit extends Component {
                   <TextInput
                     id="edit-org-form-description"
                     name="description"
-                    onChange={this.onFieldChange}
+                    onChange={this.handleFieldChange}
                     value={description.value || ''}
                   />
                 </FormGroup>
@@ -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 || ''}
                         />
                       </FormGroup>
@@ -240,11 +240,11 @@ class OrganizationEdit extends Component {
               <InstanceGroupsLookup
                 api={api}
                 value={instanceGroups.value}
-                onChange={this.onLookupSave}
+                onChange={this.handleInstanceGroupsChange}
               />
               <FormActionGroup
-                onCancel={this.onCancel}
+                onCancel={this.handleCancel}
-                onSubmit={this.onSubmit}
+                onSubmit={this.handleSubmit}
                 submitDisabled={!formIsValid}
               />
               { error ? <div>error</div> : '' }

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.handleFieldChange = this.handleFieldChange.bind(this);
-    this.onLookupSave = this.onLookupSave.bind(this);
+    this.handleInstanceGroupsChange = this.handleInstanceGroupsChange.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
-    this.onCancel = this.onCancel.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
-    this.onSuccess = this.onSuccess.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 {
                   <Button
                     variant="plain"
                     aria-label={i18n._(t`Close`)}
-                    onClick={this.onCancel}
+                    onClick={this.handleCancel}
                   >
                     <TimesIcon />
                   </Button>
@@ -131,7 +131,7 @@ class OrganizationAdd extends React.Component {
                         id="add-org-form-name"
                         name="name"
                         value={name}
-                        onChange={this.onFieldChange}
+                        onChange={this.handleFieldChange}
                       />
                     </FormGroup>
                     <FormGroup label={i18n._(t`Description`)} fieldId="add-org-form-description">
@@ -139,13 +139,13 @@ class OrganizationAdd extends React.Component {
                         id="add-org-form-description"
                         name="description"
                         value={description}
-                        onChange={this.onFieldChange}
+                        onChange={this.handleFieldChange}
                       />
                     </FormGroup>
                     <InstanceGroupsLookup
                       api={api}
                       value={instanceGroups}
-                      onChange={this.onLookupSave}
+                      onChange={this.handleInstanceGroupsChange}
                     />
                     <ConfigContext.Consumer>
                       {({ 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 {
                     </ConfigContext.Consumer>
                   </Gallery>
                   <FormActionGroup
-                    onSubmit={this.onSubmit}
+                    onSubmit={this.handleSubmit}
                     submitDisabled={!enabled}
-                    onCancel={this.onCancel}
+                    onCancel={this.handleCancel}
                   />
                   {error ? <div>error</div> : ''}
                 </Form>