Merge remote-tracking branch 'origin/master' into add-select-default-option

__tests__/components/AnsibleSelect.test.jsx

@@ -8,19 +8,22 @@ describe('<AnsibleSelect />', () => {
   test('initially renders succesfully', async () => {
     mount(
       <AnsibleSelect
-        selected="foo"
-        selectChange={() => { }}
+        value="foo"
+        name="bar"
+        onChange={() => { }}
         labelName={label}
         data={mockData}
       />
     );
   });
+
   test('calls "onSelectChange" on dropdown select change', () => {
     const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
     const wrapper = mount(
       <AnsibleSelect
-        selected="foo"
-        selectChange={() => { }}
+        value="foo"
+        name="bar"
+        onChange={() => { }}
         labelName={label}
         data={mockData}
       />
@@ -29,11 +32,13 @@ describe('<AnsibleSelect />', () => {
     wrapper.find('select').simulate('change');
     expect(spy).toHaveBeenCalled();
   });
+
   test('content not rendered when data property is falsey', () => {
     const wrapper = mount(
       <AnsibleSelect
-        selected="foo"
-        selectChange={() => { }}
+        value="foo"
+        name="bar"
+        onChange={() => { }}
         labelName={label}
         data={null}
       />

__tests__/components/Lookup.test.jsx

@@ -7,14 +7,35 @@ let mockData = [{ name: 'foo', id: 1, isChecked: false }];
 describe('<Lookup />', () => {
   test('initially renders succesfully', () => {
     mount(
-      <Lookup
-        lookup_header="Foo Bar"
-        onLookupSave={() => { }}
-        data={mockData}
-        selected={[]}
-      />
+      <I18nProvider>
+        <Lookup
+          lookup_header="Foo Bar"
+          name="fooBar"
+          value={mockData}
+          onLookupSave={() => { }}
+          getItems={() => { }}
+        />
+      </I18nProvider>
     );
   });
+  test('API response is formatted properly', (done) => {
+    const wrapper = mount(
+      <I18nProvider>
+        <Lookup
+          lookup_header="Foo Bar"
+          name="fooBar"
+          value={mockData}
+          onLookupSave={() => { }}
+          getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
+        />
+      </I18nProvider>
+    ).find('Lookup');
+
+    setImmediate(() => {
+      expect(wrapper.state().results).toEqual([{ id: 1, name: 'test instance' }]);
+      done();
+    });
+  });
   test('Opens modal when search icon is clicked', () => {
     const spy = jest.spyOn(Lookup.prototype, 'handleModalToggle');
     const mockSelected = [{ name: 'foo', id: 1 }];
@@ -22,9 +43,10 @@ describe('<Lookup />', () => {
       <I18nProvider>
         <Lookup
           lookup_header="Foo Bar"
+          name="fooBar"
+          value={mockSelected}
           onLookupSave={() => { }}
-          data={mockData}
-          selected={mockSelected}
+          getItems={() => { }}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -39,34 +61,39 @@ describe('<Lookup />', () => {
     }]);
     expect(wrapper.state('isModalOpen')).toEqual(true);
   });
-  test('calls "toggleSelected" when a user changes a checkbox', () => {
+  test('calls "toggleSelected" when a user changes a checkbox', (done) => {
     const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
+    const mockSelected = [{ name: 'foo', id: 1 }];
     const wrapper = mount(
       <I18nProvider>
         <Lookup
           lookup_header="Foo Bar"
+          name="fooBar"
+          value={mockSelected}
           onLookupSave={() => { }}
-          data={mockData}
-          selected={[]}
+          getItems={() => ({ data: { results: [{ name: 'test instance', id: 1 }] } })}
         />
       </I18nProvider>
     );
-    const searchItem = wrapper.find('.pf-c-input-group__text#search');
-    searchItem.first().simulate('click');
-    wrapper.find('input[type="checkbox"]').simulate('change');
-    expect(spy).toHaveBeenCalled();
+    setImmediate(() => {
+      const searchItem = wrapper.find('.pf-c-input-group__text#search');
+      searchItem.first().simulate('click');
+      wrapper.find('input[type="checkbox"]').simulate('change');
+      expect(spy).toHaveBeenCalled();
+      done();
+    });
   });
   test('calls "toggleSelected" when remove icon is clicked', () => {
     const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
     mockData = [{ name: 'foo', id: 1, isChecked: false }, { name: 'bar', id: 2, isChecked: true }];
-    const mockSelected = [{ name: 'foo', id: 1 }, { name: 'bar', id: 2 }];
     const wrapper = mount(
       <I18nProvider>
         <Lookup
           lookup_header="Foo Bar"
+          name="fooBar"
+          value={mockData}
           onLookupSave={() => { }}
-          data={mockData}
-          selected={mockSelected}
+          getItems={() => { }}
         />
       </I18nProvider>
     );
@@ -124,9 +151,10 @@ describe('<Lookup />', () => {
       <I18nProvider>
         <Lookup
           lookup_header="Foo Bar"
+          name="fooBar"
+          value={mockData}
           onLookupSave={onLookupSaveFn}
-          data={mockData}
-          selected={[]}
+          getItems={() => { }}
         />
       </I18nProvider>
     ).find('Lookup');
@@ -142,6 +170,6 @@ describe('<Lookup />', () => {
     expect(onLookupSaveFn).toHaveBeenCalledWith([{
       id: 1,
       name: 'foo'
-    }]);
+    }], 'fooBar');
   });
 });

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

@@ -1,27 +1,32 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@lingui/react';
 import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
 
 describe('<OrganizationAdd />', () => {
   test('initially renders succesfully', () => {
     mount(
       <MemoryRouter>
-        <OrganizationAdd
-          match={{ path: '/organizations/add', url: '/organizations/add' }}
-          location={{ search: '', pathname: '/organizations/add' }}
-        />
+        <I18nProvider>
+          <OrganizationAdd
+            match={{ path: '/organizations/add', url: '/organizations/add' }}
+            location={{ search: '', pathname: '/organizations/add' }}
+          />
+        </I18nProvider>
       </MemoryRouter>
     );
   });
-  test('calls "handleChange" when input values change', () => {
-    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'handleChange');
+  test('calls "onFieldChange" when input values change', () => {
+    const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onFieldChange');
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd
-          match={{ path: '/organizations/add', url: '/organizations/add' }}
-          location={{ search: '', pathname: '/organizations/add' }}
-        />
+        <I18nProvider>
+          <OrganizationAdd
+            match={{ path: '/organizations/add', url: '/organizations/add' }}
+            location={{ search: '', pathname: '/organizations/add' }}
+          />
+        </I18nProvider>
       </MemoryRouter>
     );
     expect(spy).not.toHaveBeenCalled();
@@ -33,79 +38,69 @@ describe('<OrganizationAdd />', () => {
     const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd
-          match={{ path: '/organizations/add', url: '/organizations/add' }}
-          location={{ search: '', pathname: '/organizations/add' }}
-        />
+        <I18nProvider>
+          <OrganizationAdd
+            match={{ path: '/organizations/add', url: '/organizations/add' }}
+            location={{ search: '', pathname: '/organizations/add' }}
+          />
+        </I18nProvider>
       </MemoryRouter>
     );
     expect(spy).not.toHaveBeenCalled();
-    wrapper.find('button.at-C-SubmitButton').prop('onClick')();
+    wrapper.find('button[aria-label="Save"]').prop('onClick')();
     expect(spy).toBeCalled();
   });
   test('calls "onCancel" when Cancel button is clicked', () => {
     const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd
-          match={{ path: '/organizations/add', url: '/organizations/add' }}
-          location={{ search: '', pathname: '/organizations/add' }}
-        />
+        <I18nProvider>
+          <OrganizationAdd
+            match={{ path: '/organizations/add', url: '/organizations/add' }}
+            location={{ search: '', pathname: '/organizations/add' }}
+          />
+        </I18nProvider>
       </MemoryRouter>
     );
     expect(spy).not.toHaveBeenCalled();
-    wrapper.find('button.at-C-CancelButton').prop('onClick')();
+    wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
     expect(spy).toBeCalled();
   });
 
-  test('API response is formatted properly', (done) => {
-    const mockedResp = { data: { results: [{ name: 'test instance', id: 1 }] } };
-    const api = { getInstanceGroups: jest.fn().mockResolvedValue(mockedResp) };
-    const wrapper = mount(
-      <MemoryRouter>
-        <OrganizationAdd api={api} />
-      </MemoryRouter>
-    );
-
-    setImmediate(() => {
-      const orgAddElem = wrapper.find('OrganizationAdd');
-      expect([{ id: 1, isChecked: false, name: 'test instance' }]).toEqual(orgAddElem.state().results);
-      done();
-    });
-  });
-
   test('Successful form submission triggers redirect', (done) => {
     const onSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess');
-    const resetForm = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'resetForm');
     const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } };
     const api = { createOrganization: jest.fn().mockResolvedValue(mockedResp), createInstanceGroups: jest.fn().mockResolvedValue('done') };
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd api={api} />
+        <I18nProvider>
+          <OrganizationAdd api={api} />
+        </I18nProvider>
       </MemoryRouter>
     );
     wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
-    wrapper.find('button.at-C-SubmitButton').prop('onClick')();
+    wrapper.find('button[aria-label="Save"]').prop('onClick')();
     setImmediate(() => {
       expect(onSuccess).toHaveBeenCalled();
-      expect(resetForm).toHaveBeenCalled();
       done();
     });
   });
 
-  test('updateSelectedInstanceGroups successfully sets selectedInstanceGroups state', () => {
+  test('onLookupSave successfully sets instanceGroups state', () => {
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd api={{}} />
+        <I18nProvider>
+          <OrganizationAdd api={{}} />
+        </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationAdd');
-    wrapper.instance().updateSelectedInstanceGroups([
+    wrapper.instance().onLookupSave([
       {
         id: 1,
         name: 'foo'
       }
-    ]);
-    expect(wrapper.state('selectedInstanceGroups')).toEqual([
+    ], 'instanceGroups');
+    expect(wrapper.state('instanceGroups')).toEqual([
       {
         id: 1,
         name: 'foo'
@@ -113,14 +108,16 @@ describe('<OrganizationAdd />', () => {
     ]);
   });
 
-  test('onSelectChange successfully sets custom_virtualenv state', () => {
+  test('onFieldChange successfully sets custom_virtualenv state', () => {
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd api={{}} />
+        <I18nProvider>
+          <OrganizationAdd api={{}} />
+        </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationAdd');
-    wrapper.instance().onSelectChange('foobar');
-    expect(wrapper.state('custom_virtualenv')).toBe('foobar');
+    wrapper.instance().onFieldChange('fooBar', { target: { name: 'custom_virtualenv' } });
+    expect(wrapper.state('custom_virtualenv')).toBe('fooBar');
   });
 
   test('onSubmit posts instance groups from selectedInstanceGroups', async () => {
@@ -140,12 +137,14 @@ describe('<OrganizationAdd />', () => {
     };
     const wrapper = mount(
       <MemoryRouter>
-        <OrganizationAdd api={api} />
+        <I18nProvider>
+          <OrganizationAdd api={api} />
+        </I18nProvider>
       </MemoryRouter>
     ).find('OrganizationAdd');
     wrapper.setState({
       name: 'mock org',
-      selectedInstanceGroups: [{
+      instanceGroups: [{
         id: 1,
         name: 'foo'
       }]