update tests for org add/edit refactor

__tests__/pages/Organizations/components/OrganizationForm.test.jsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
+import { ConfigContext } from '../../../../src/context';
+import OrganizationForm from '../../../../src/pages/Organizations/components/OrganizationForm';
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('<OrganizationForm />', () => {
+  let api;
+
+  const mockData = {
+    id: 1,
+    name: 'Foo',
+    description: 'Bar',
+    custom_virtualenv: 'Fizz',
+    related: {
+      instance_groups: '/api/v2/organizations/1/instance_groups'
+    }
+  };
+
+  beforeEach(() => {
+    api = {
+      getInstanceGroups: jest.fn(),
+    };
+  });
+
+  test('should request related instance groups from api', () => {
+    const mockInstanceGroups = [
+      { name: 'One', id: 1 },
+      { name: 'Two', id: 2 }
+    ];
+    api.getOrganizationInstanceGroups = jest.fn(() => (
+      Promise.resolve({ data: { results: mockInstanceGroups } })
+    ));
+    mount(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+          <OrganizationForm
+            api={api}
+            organization={mockData}
+            handleSubmit={jest.fn()}
+            handleCancel={jest.fn()}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    ).find('OrganizationForm');
+
+    expect(api.getOrganizationInstanceGroups).toHaveBeenCalledTimes(1);
+  });
+
+  test('componentDidMount should set instanceGroups to state', async () => {
+    const mockInstanceGroups = [
+      { name: 'One', id: 1 },
+      { name: 'Two', id: 2 }
+    ];
+    api.getOrganizationInstanceGroups = jest.fn(() => (
+      Promise.resolve({ data: { results: mockInstanceGroups } })
+    ));
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+          <OrganizationForm
+            organization={mockData}
+            api={api}
+            handleSubmit={jest.fn()}
+            handleCancel={jest.fn()}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    ).find('OrganizationForm');
+
+    await wrapper.instance().componentDidMount();
+    expect(wrapper.state().instanceGroups).toEqual(mockInstanceGroups);
+  });
+
+  test('changing instance group successfully sets instanceGroups state', () => {
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <OrganizationForm
+            organization={mockData}
+            api={api}
+            handleSubmit={jest.fn()}
+            handleCancel={jest.fn()}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('OrganizationForm');
+
+    const lookup = wrapper.find('InstanceGroupsLookup');
+    expect(lookup.length).toBe(1);
+
+    lookup.prop('onChange')([
+      {
+        id: 1,
+        name: 'foo'
+      }
+    ], 'instanceGroups');
+    expect(wrapper.state().instanceGroups).toEqual([
+      {
+        id: 1,
+        name: 'foo'
+      }
+    ]);
+  });
+
+  test('changing inputs should update form values', () => {
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <OrganizationForm
+            organization={mockData}
+            api={api}
+            handleSubmit={jest.fn()}
+            handleCancel={jest.fn()}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('OrganizationForm');
+
+    const form = wrapper.find('Formik');
+    wrapper.find('input#edit-org-form-name').simulate('change', {
+      target: { value: 'new foo', name: 'name' }
+    });
+    expect(form.state('values').name).toEqual('new foo');
+    wrapper.find('input#edit-org-form-description').simulate('change', {
+      target: { value: 'new bar', name: 'description' }
+    });
+    expect(form.state('values').description).toEqual('new bar');
+  });
+
+  test('AnsibleSelect component renders if there are virtual environments', () => {
+    const config = {
+      custom_virtualenvs: ['foo', 'bar'],
+    };
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <ConfigContext.Provider value={config}>
+            <OrganizationForm
+              organization={mockData}
+              api={api}
+              handleSubmit={jest.fn()}
+              handleCancel={jest.fn()}
+            />
+          </ConfigContext.Provider>
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    expect(wrapper.find('FormSelect')).toHaveLength(1);
+    expect(wrapper.find('FormSelectOption')).toHaveLength(2);
+  });
+
+  test('calls handleSubmit when form submitted', async () => {
+    const handleSubmit = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <OrganizationForm
+            organization={mockData}
+            api={api}
+            handleSubmit={handleSubmit}
+            handleCancel={jest.fn()}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    ).find('OrganizationForm');
+    expect(wrapper.prop('handleSubmit')).not.toHaveBeenCalled();
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(1);
+    expect(handleSubmit).toHaveBeenCalledWith({
+      name: 'Foo',
+      description: 'Bar',
+      custom_virtualenv: 'Fizz',
+    }, [], []);
+  });
+
+  test('handleSubmit associates and disassociates instance groups', async () => {
+    const mockInstanceGroups = [
+      { name: 'One', id: 1 },
+      { name: 'Two', id: 2 }
+    ];
+    api.getOrganizationInstanceGroups = jest.fn(() => (
+      Promise.resolve({ data: { results: mockInstanceGroups } })
+    ));
+    const mockDataForm = {
+      name: 'Foo',
+      description: 'Bar',
+      custom_virtualenv: 'Fizz',
+    };
+    const handleSubmit = jest.fn();
+    api.updateOrganizationDetails = jest.fn().mockResolvedValue(1, mockDataForm);
+    api.associateInstanceGroup = jest.fn().mockResolvedValue('done');
+    api.disassociate = jest.fn().mockResolvedValue('done');
+    const wrapper = mount(
+      <I18nProvider>
+        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
+          <OrganizationForm
+            organization={mockData}
+            api={api}
+            handleSubmit={handleSubmit}
+            handleCancel={jest.fn()}
+          />
+        </MemoryRouter>
+      </I18nProvider>
+    ).find('OrganizationForm');
+
+    await wrapper.instance().componentDidMount();
+
+    wrapper.find('InstanceGroupsLookup').prop('onChange')([
+      { name: 'One', id: 1 },
+      { name: 'Three', id: 3 }
+    ], 'instanceGroups');
+
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
+    expect(handleSubmit).toHaveBeenCalledWith(mockDataForm, [3], [2]);
+  });
+
+  test('calls "handleCancel" when Cancel button is clicked', () => {
+    const handleCancel = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <OrganizationForm
+            organization={mockData}
+            api={api}
+            handleSubmit={jest.fn()}
+            handleCancel={handleCancel}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    expect(handleCancel).not.toHaveBeenCalled();
+    wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+    expect(handleCancel).toBeCalled();
+  });
+});

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
-import { ConfigContext } from '../../../../../src/context';
+import OrganizationEdit, { OrganizationEditNoRouter } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
-import OrganizationEdit from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('<OrganizationEdit />', () => {
   let api;
@@ -21,226 +22,90 @@ describe('<OrganizationEdit />', () => {
   beforeEach(() => {
     api = {
       getInstanceGroups: jest.fn(),
+      updateOrganizationDetails: jest.fn(),
+      associateInstanceGroup: jest.fn(),
+      disassociate: jest.fn(),
     };
   });
 
-  test('should request related instance groups from api', () => {
+  test('handleSubmit should call api update', () => {
-    const mockInstanceGroups = [
-      { name: 'One', id: 1 },
-      { name: 'Two', id: 2 }
-    ];
-    api.getOrganizationInstanceGroups = jest.fn(() => (
-      Promise.resolve({ data: { results: mockInstanceGroups } })
-    ));
-    mount(
-      <I18nProvider>
-        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationEdit
-            match={{ params: { id: '1' } }}
-            api={api}
-            organization={mockData}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationEdit');
-
-    expect(api.getOrganizationInstanceGroups).toHaveBeenCalledTimes(1);
-  });
-
-  test('componentDidMount should set instanceGroups to state', async () => {
-    const mockInstanceGroups = [
-      { name: 'One', id: 1 },
-      { name: 'Two', id: 2 }
-    ];
-    api.getOrganizationInstanceGroups = jest.fn(() => (
-      Promise.resolve({ data: { results: mockInstanceGroups } })
-    ));
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationEdit
-            match={{
-              path: '/organizations/:id',
-              url: '/organizations/1',
-              params: { id: '1' }
-            }}
-            organization={mockData}
-            api={api}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationEdit');
-
-    await wrapper.instance().componentDidMount();
-    expect(wrapper.state().form.instanceGroups.value).toEqual(mockInstanceGroups);
-  });
-
-  test('changing instance group successfully sets instanceGroups state', () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
           <OrganizationEdit
             organization={mockData}
             api={api}
-            match={{ path: '/organizations/:id/edit', url: '/organizations/1/edit' }}
-          />
-        </I18nProvider>
-      </MemoryRouter>
-    ).find('OrganizationEdit');
-
-    const lookup = wrapper.find('InstanceGroupsLookup');
-    expect(lookup.length).toBe(1);
-
-    lookup.prop('onChange')([
-      {
-        id: 1,
-        name: 'foo'
-      }
-    ], 'instanceGroups');
-    expect(wrapper.state().form.instanceGroups.value).toEqual([
-      {
-        id: 1,
-        name: 'foo'
-      }
-    ]);
-  });
-
-  test('calls "handleFieldChange" when input values change', () => {
-    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleFieldChange');
-    const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <OrganizationEdit
-            organization={mockData}
-            api={api}
-            match={{ path: '/organizations/:id/edit', url: '/organizations/1/edit' }}
-          />
-        </I18nProvider>
-      </MemoryRouter>
-    ).find('OrganizationEdit');
-
-    expect(spy).not.toHaveBeenCalled();
-    wrapper.instance().handleFieldChange('foo', { target: { name: 'name' } });
-    wrapper.instance().handleFieldChange('bar', { target: { name: 'description' } });
-    expect(spy).toHaveBeenCalledTimes(2);
-  });
-
-  test('AnsibleSelect component renders if there are virtual environments', () => {
-    const config = {
-      custom_virtualenvs: ['foo', 'bar'],
-    };
-    const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <ConfigContext.Provider value={config}>
-            <OrganizationEdit
-              match={{
-                path: '/organizations/:id',
-                url: '/organizations/1',
-                params: { id: '1' }
-              }}
-              organization={mockData}
-              api={api}
-            />
-          </ConfigContext.Provider>
-        </I18nProvider>
-      </MemoryRouter>
-    );
-    expect(wrapper.find('FormSelect')).toHaveLength(1);
-    expect(wrapper.find('FormSelectOption')).toHaveLength(2);
-  });
-
-  test('calls handleSubmit when Save button is clicked', () => {
-    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleSubmit');
-    const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <OrganizationEdit
-            match={{
-              path: '/organizations/:id',
-              url: '/organizations/1',
-              params: { id: '1' }
-            }}
-            organization={mockData}
-            api={api}
           />
         </I18nProvider>
       </MemoryRouter>
     );
-    expect(spy).not.toHaveBeenCalled();
+
-    wrapper.find('button[aria-label="Save"]').prop('onClick')();
+    const updatedOrgData = {
-    expect(spy).toBeCalled();
+      name: 'new name',
+      description: 'new description',
+      custom_virtualenv: 'Buzz',
+    };
+    wrapper.find('OrganizationForm').prop('handleSubmit')(updatedOrgData, [], []);
+
+    expect(api.updateOrganizationDetails).toHaveBeenCalledWith(
+      1,
+      updatedOrgData
+    );
   });
 
   test('handleSubmit associates and disassociates instance groups', async () => {
-    const mockInstanceGroups = [
-      { name: 'One', id: 1 },
-      { name: 'Two', id: 2 }
-    ];
-    api.getOrganizationInstanceGroups = jest.fn(() => (
-      Promise.resolve({ data: { results: mockInstanceGroups } })
-    ));
-    const mockDataForm = {
-      name: 'Foo',
-      description: 'Bar',
-      custom_virtualenv: 'Fizz',
-    };
-    api.updateOrganizationDetails = jest.fn().mockResolvedValue(1, mockDataForm);
-    api.associateInstanceGroup = jest.fn().mockResolvedValue('done');
-    api.disassociate = jest.fn().mockResolvedValue('done');
-    const wrapper = mount(
-      <I18nProvider>
-        <MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
-          <OrganizationEdit
-            match={{
-              path: '/organizations/:id',
-              url: '/organizations/1',
-              params: { id: '1' }
-            }}
-            organization={mockData}
-            api={api}
-          />
-        </MemoryRouter>
-      </I18nProvider>
-    ).find('OrganizationEdit');
-
-    await wrapper.instance().componentDidMount();
-
-    wrapper.find('InstanceGroupsLookup').prop('onChange')([
-      { name: 'One', id: 1 },
-      { name: 'Three', id: 3 }
-    ], 'instanceGroups');
-
-    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);
-    expect(api.associateInstanceGroup).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 2);
-
-    expect(api.disassociate).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 2);
-    expect(api.disassociate).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
-    expect(api.disassociate).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 3);
-  });
-
-  test('calls "handleCancel" when Cancel button is clicked', () => {
-    const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'handleCancel');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
           <OrganizationEdit
-            match={{
-              path: '/organizations/:id',
-              url: '/organizations/1',
-              params: { id: '1' }
-            }}
             organization={mockData}
             api={api}
           />
         </I18nProvider>
       </MemoryRouter>
     );
-    expect(spy).not.toHaveBeenCalled();
+
+    const updatedOrgData = {
+      name: 'new name',
+      description: 'new description',
+      custom_virtualenv: 'Buzz',
+    };
+    wrapper.find('OrganizationForm').prop('handleSubmit')(updatedOrgData, [3, 4], [2]);
+    await sleep(1);
+
+    expect(api.associateInstanceGroup).toHaveBeenCalledWith(
+      '/api/v2/organizations/1/instance_groups',
+      3
+    );
+    expect(api.associateInstanceGroup).toHaveBeenCalledWith(
+      '/api/v2/organizations/1/instance_groups',
+      4
+    );
+    expect(api.disassociate).toHaveBeenCalledWith(
+      '/api/v2/organizations/1/instance_groups',
+      2
+    );
+  });
+
+  test('should navigate to organization detail when cancel is clicked', () => {
+    const history = {
+      push: jest.fn(),
+    };
+    const wrapper = mount(
+      <MemoryRouter>
+        <I18nProvider>
+          <OrganizationEditNoRouter
+            history={history}
+            organization={mockData}
+            api={api}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+
+    expect(history.push).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
-    expect(spy).toBeCalled();
+
+    expect(history.push).toHaveBeenCalledWith('/organizations/1');
   });
 });

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { MemoryRouter, Router } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 import { ConfigContext } from '../../../../src/context';
-import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
+import OrganizationAdd, { OrganizationAddNoRouter } from '../../../../src/pages/Organizations/screens/OrganizationAdd';
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('<OrganizationAdd />', () => {
   let api;
@@ -11,184 +13,140 @@ describe('<OrganizationAdd />', () => {
   beforeEach(() => {
     api = {
       getInstanceGroups: jest.fn(),
+      createOrganization: jest.fn(),
+      associateInstanceGroup: jest.fn(),
+      disassociate: jest.fn(),
     };
   });
 
-  test('initially renders succesfully', () => {
+  test('handleSubmit should post to api', () => {
-    mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <OrganizationAdd
-            api={api}
-            match={{ path: '/organizations/add', url: '/organizations/add' }}
-            location={{ search: '', pathname: '/organizations/add' }}
-          />
-        </I18nProvider>
-      </MemoryRouter>
-    );
-  });
-
-  test('calls "handleFieldChange" when input values change', () => {
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleFieldChange');
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
           <OrganizationAdd
             api={api}
-            match={{ path: '/organizations/add', url: '/organizations/add' }}
-            location={{ search: '', pathname: '/organizations/add' }}
           />
         </I18nProvider>
       </MemoryRouter>
     );
-    expect(spy).not.toHaveBeenCalled();
+
-    wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
+    const updatedOrgData = {
-    wrapper.find('input#add-org-form-description').simulate('change', { target: { value: 'bar' } });
+      name: 'new name',
-    expect(spy).toHaveBeenCalledTimes(2);
+      description: 'new description',
+      custom_virtualenv: 'Buzz',
+    };
+    wrapper.find('OrganizationForm').prop('handleSubmit')(updatedOrgData, [], []);
+
+    expect(api.createOrganization).toHaveBeenCalledWith(updatedOrgData);
   });
 
-  test('calls "handleSubmit" when Save button is clicked', () => {
+  test('should navigate to organizations list when cancel is clicked', () => {
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleSubmit');
+    const history = {
+      push: jest.fn(),
+    };
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationAdd
+          <OrganizationAddNoRouter
+            history={history}
             api={api}
-            match={{ path: '/organizations/add', url: '/organizations/add' }}
-            location={{ search: '', pathname: '/organizations/add' }}
           />
         </I18nProvider>
       </MemoryRouter>
     );
-    expect(spy).not.toHaveBeenCalled();
-    wrapper.find('button[aria-label="Save"]').prop('onClick')();
-    expect(spy).toBeCalled();
-  });
 
-  test('calls "handleCancel" when Cancel button is clicked', () => {
+    expect(history.push).not.toHaveBeenCalled();
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleCancel');
-    const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <OrganizationAdd
-            api={api}
-            match={{ path: '/organizations/add', url: '/organizations/add' }}
-            location={{ search: '', pathname: '/organizations/add' }}
-          />
-        </I18nProvider>
-      </MemoryRouter>
-    );
-    expect(spy).not.toHaveBeenCalled();
     wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
-    expect(spy).toBeCalled();
+
+    expect(history.push).toHaveBeenCalledWith('/organizations');
   });
 
-  test('calls "handleCancel" when close button (x) is clicked', () => {
+  test('should navigate to organizations list when close (x) is clicked', () => {
+    const history = {
+      push: jest.fn(),
+    };
     const wrapper = mount(
-      <MemoryRouter initialEntries={['/organizations/add']} initialIndex={0}>
+      <MemoryRouter>
         <I18nProvider>
-          <OrganizationAdd
+          <OrganizationAddNoRouter
+            history={history}
             api={api}
-            match={{ path: '/organizations/add', url: '/organizations/add' }}
-            location={{ search: '', pathname: '/organizations/add' }}
           />
         </I18nProvider>
       </MemoryRouter>
     );
-    const history = wrapper.find(Router).prop('history');
+
-    expect(history.length).toBe(1);
+    expect(history.push).not.toHaveBeenCalled();
-    expect(history.location.pathname).toEqual('/organizations/add');
     wrapper.find('button[aria-label="Close"]').prop('onClick')();
-    expect(history.length).toBe(2);
+
-    expect(history.location.pathname).toEqual('/organizations');
+    expect(history.push).toHaveBeenCalledWith('/organizations');
   });
 
-  test('Successful form submission triggers redirect', (done) => {
+  test('successful form submission should trigger redirect', async () => {
-    const handleSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleSuccess');
+    const history = {
-    const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } };
+      push: jest.fn(),
-    api.createOrganization = jest.fn().mockResolvedValue(mockedResp); api.associateInstanceGroup = jest.fn().mockResolvedValue('done');
+    };
+    const orgData = {
+      name: 'new name',
+      description: 'new description',
+      custom_virtualenv: 'Buzz',
+    };
+    api.createOrganization.mockReturnValueOnce({
+      data: {
+        id: 5,
+        related: {
+          instance_groups: '/bar',
+        },
+        ...orgData,
+      }
+    });
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationAdd api={api} />
+          <OrganizationAddNoRouter
+            history={history}
+            api={api}
+          />
         </I18nProvider>
       </MemoryRouter>
     );
-    wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
+
-    wrapper.find('button[aria-label="Save"]').prop('onClick')();
+    wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [], []);
-    setImmediate(() => {
+    await sleep(0);
-      expect(handleSuccess).toHaveBeenCalled();
+
-      done();
+    expect(history.push).toHaveBeenCalledWith('/organizations/5');
-    });
   });
 
-  test('changing instance groups successfully sets instanceGroups state', () => {
+  test('handleSubmit should post instance groups', async () => {
     const wrapper = mount(
       <MemoryRouter>
         <I18nProvider>
-          <OrganizationAdd api={api} />
+          <OrganizationAdd
+            api={api}
+          />
         </I18nProvider>
       </MemoryRouter>
-    ).find('OrganizationAdd');
+    );
 
-    wrapper.find('InstanceGroupsLookup').prop('onChange')([
+    const orgData = {
-      {
+      name: 'new name',
-        id: 1,
+      description: 'new description',
-        name: 'foo'
+      custom_virtualenv: 'Buzz',
-      }
+    };
-    ], 'instanceGroups');
+    api.createOrganization.mockReturnValueOnce({
-    expect(wrapper.state('instanceGroups')).toEqual([
-      {
-        id: 1,
-        name: 'foo'
-      }
-    ]);
-  });
-
-  test('handleFieldChange successfully sets custom_virtualenv state', () => {
-    const wrapper = mount(
-      <MemoryRouter>
-        <I18nProvider>
-          <OrganizationAdd api={api} />
-        </I18nProvider>
-      </MemoryRouter>
-    ).find('OrganizationAdd');
-    wrapper.instance().handleFieldChange('fooBar', { target: { name: 'custom_virtualenv' } });
-    expect(wrapper.state('custom_virtualenv')).toBe('fooBar');
-  });
-
-  test('handleSubmit posts instance groups from selectedInstanceGroups', async () => {
-    api.createOrganization = jest.fn().mockResolvedValue({
       data: {
-        id: 1,
+        id: 5,
-        name: 'mock org',
         related: {
-          instance_groups: '/api/v2/organizations/1/instance_groups'
+          instance_groups: '/api/v2/organizations/5/instance_groups',
-        }
+        },
+        ...orgData,
       }
     });
-    api.associateInstanceGroup = jest.fn().mockResolvedValue('done');
+    wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
-    const wrapper = mount(
+    await sleep(0);
-      <MemoryRouter>
+
-        <I18nProvider>
+    expect(api.associateInstanceGroup)
-          <OrganizationAdd api={api} />
+      .toHaveBeenCalledWith('/api/v2/organizations/5/instance_groups', 3);
-        </I18nProvider>
-      </MemoryRouter>
-    ).find('OrganizationAdd');
-    wrapper.setState({
-      name: 'mock org',
-      instanceGroups: [{
-        id: 1,
-        name: 'foo'
-      }]
-    });
-    await wrapper.instance().handleSubmit();
-    expect(api.createOrganization).toHaveBeenCalledWith({
-      custom_virtualenv: '',
-      description: '',
-      name: 'mock org'
-    });
-    expect(api.associateInstanceGroup).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
   });
 
   test('AnsibleSelect component renders if there are virtual environments', () => {

__tests__/util/validators.test.js

@@ -0,0 +1,34 @@
+import { required, maxLength } from '../../src/util/validators';
+
+describe('validators', () => {
+  test('required returns undefined if value given', () => {
+    expect(required()('some value')).toBeUndefined();
+    expect(required('oops')('some value')).toBeUndefined();
+  });
+
+  test('required returns default message if value missing', () => {
+    expect(required()('')).toEqual('This field must not be blank');
+  });
+
+  test('required returns custom message if value missing', () => {
+    expect(required('oops')('')).toEqual('oops');
+  });
+
+  test('required interprets white space as empty value', () => {
+    expect(required()(' ')).toEqual('This field must not be blank');
+    expect(required()('\t')).toEqual('This field must not be blank');
+  });
+
+  test('maxLength accepts value below max', () => {
+    expect(maxLength(10)('snazzy')).toBeUndefined();
+  });
+
+  test('maxLength accepts value equal to max', () => {
+    expect(maxLength(10)('abracadbra')).toBeUndefined();
+  });
+
+  test('maxLength rejects value above max', () => {
+    expect(maxLength(8)('abracadbra'))
+      .toEqual('This field must not exceed 8 characters');
+  });
+});

src/pages/Organizations/components/OrganizationForm.jsx

@@ -65,7 +65,7 @@ class OrganizationForm extends Component {
     this.setState({ instanceGroups });
   }
 
-  async handleSubmit (values) {
+  handleSubmit (values) {
     const { handleSubmit } = this.props;
     const { instanceGroups, initialInstanceGroups } = this.state;
 

src/pages/Organizations/screens/Organization/OrganizationEdit.jsx

@@ -85,4 +85,5 @@ OrganizationEdit.contextTypes = {
   custom_virtualenvs: PropTypes.arrayOf(PropTypes.string)
 };
 
+export { OrganizationEdit as OrganizationEditNoRouter };
 export default withRouter(OrganizationEdit);

src/pages/Organizations/screens/OrganizationAdd.jsx

@@ -19,8 +19,6 @@ class OrganizationAdd extends React.Component {
   constructor (props) {
     super(props);
 
-    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);
@@ -30,14 +28,6 @@ class OrganizationAdd extends React.Component {
     };
   }
 
-  handleFieldChange (val, evt) {
-    this.setState({ [evt.target.name]: val || evt.target.value });
-  }
-
-  handleInstanceGroupsChange (val, targetName) {
-    this.setState({ [targetName]: val });
-  }
-
   async handleSubmit (values, groupsToAssociate) {
     const { api } = this.props;
     try {
@@ -114,4 +104,5 @@ OrganizationAdd.contextTypes = {
   custom_virtualenvs: PropTypes.arrayOf(PropTypes.string)
 };
 
+export { OrganizationAdd as OrganizationAddNoRouter };
 export default withRouter(OrganizationAdd);

src/util/validators.js

@@ -11,7 +11,8 @@ export function required (message) {
 
 export function maxLength (max) {
   return value => {
-    if (value.trim() > max) {
+    if (value.trim().length
+     > max) {
       return i18nMark(`This field must not exceed ${max} characters`);
     }
     return undefined;