update tests for CredentialLookup, OrgLookup, ProjectLookup

awx/ui_next/src/components/Lookup/CredentialLookup.jsx

@@ -46,7 +46,7 @@ function CredentialLookup({
         }
       }
     })();
-  });
+  }, [credentialTypeId, history.location.search]);
 
   return (
     <FormGroup
@@ -63,6 +63,7 @@ function CredentialLookup({
         onBlur={onBlur}
         onChange={onChange}
         required={required}
+        qsConfig={QS_CONFIG}
         renderOptionsList={({ state, dispatch, canDelete }) => (
           <OptionsList
             value={state.selectedItems}

awx/ui_next/src/components/Lookup/CredentialLookup.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import CredentialLookup, { _CredentialLookup } from './CredentialLookup';
 import { CredentialsAPI } from '@api';
@@ -9,19 +10,48 @@ describe('CredentialLookup', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mountWithContexts(
+    CredentialsAPI.read.mockResolvedValueOnce({
-      <CredentialLookup credentialTypeId={1} label="Foo" onChange={() => {}} />
+      data: {
-    );
+        results: [
+          { id: 1, kind: 'cloud', name: 'Cred 1', url: 'www.google.com' },
+          { id: 2, kind: 'ssh', name: 'Cred 2', url: 'www.google.com' },
+          { id: 3, kind: 'Ansible', name: 'Cred 3', url: 'www.google.com' },
+          { id: 4, kind: 'Machine', name: 'Cred 4', url: 'www.google.com' },
+          { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' },
+        ],
+        count: 5,
+      },
+    });
   });
 
   afterEach(() => {
     jest.clearAllMocks();
+    wrapper.unmount();
   });
 
-  test('initially renders successfully', () => {
+  test('should render successfully', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <CredentialLookup
+          credentialTypeId={1}
+          label="Foo"
+          onChange={() => {}}
+        />
+      );
+    });
     expect(wrapper.find('CredentialLookup')).toHaveLength(1);
   });
-  test('should fetch credentials', () => {
+
+  test('should fetch credentials', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <CredentialLookup
+          credentialTypeId={1}
+          label="Foo"
+          onChange={() => {}}
+        />
+      );
+    });
     expect(CredentialsAPI.read).toHaveBeenCalledTimes(1);
     expect(CredentialsAPI.read).toHaveBeenCalledWith({
       credential_type: 1,
@@ -30,11 +60,31 @@ describe('CredentialLookup', () => {
       page_size: 5,
     });
   });
-  test('should display label', () => {
+
+  test('should display label', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <CredentialLookup
+          credentialTypeId={1}
+          label="Foo"
+          onChange={() => {}}
+        />
+      );
+    });
     const title = wrapper.find('FormGroup .pf-c-form__label-text');
     expect(title.text()).toEqual('Foo');
   });
-  test('should define default value for function props', () => {
+
+  test('should define default value for function props', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <CredentialLookup
+          credentialTypeId={1}
+          label="Foo"
+          onChange={() => {}}
+        />
+      );
+    });
     expect(_CredentialLookup.defaultProps.onBlur).toBeInstanceOf(Function);
     expect(_CredentialLookup.defaultProps.onBlur).not.toThrow();
   });

awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import { sleep } from '@testUtils/testUtils';
 import MultiCredentialsLookup from './MultiCredentialsLookup';
 import { CredentialsAPI, CredentialTypesAPI } from '@api';
 

awx/ui_next/src/components/Lookup/OrganizationLookup.jsx

@@ -11,7 +11,11 @@ import Lookup from './Lookup';
 import OptionsList from './shared/OptionsList';
 import LookupErrorMessage from './shared/LookupErrorMessage';
 
-const QS_CONFIG = getQSConfig('organizations', {});
+const QS_CONFIG = getQSConfig('organizations', {
+  page: 1,
+  page_size: 5,
+  order_by: 'name',
+});
 
 function OrganizationLookup({
   helperTextInvalid,

awx/ui_next/src/components/Lookup/OrganizationLookup.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import OrganizationLookup, { _OrganizationLookup } from './OrganizationLookup';
 import { OrganizationsAPI } from '@api';
@@ -8,18 +9,22 @@ jest.mock('@api');
 describe('OrganizationLookup', () => {
   let wrapper;
 
-  beforeEach(() => {
-    wrapper = mountWithContexts(<OrganizationLookup onChange={() => {}} />);
-  });
-
   afterEach(() => {
     jest.clearAllMocks();
+    wrapper.unmount();
   });
 
-  test('initially renders successfully', () => {
+  test('should render successfully', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationLookup onChange={() => {}} />);
+    });
     expect(wrapper).toHaveLength(1);
   });
-  test('should fetch organizations', () => {
+
+  test('should fetch organizations', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationLookup onChange={() => {}} />);
+    });
     expect(OrganizationsAPI.read).toHaveBeenCalledTimes(1);
     expect(OrganizationsAPI.read).toHaveBeenCalledWith({
       order_by: 'name',
@@ -27,11 +32,19 @@ describe('OrganizationLookup', () => {
       page_size: 5,
     });
   });
-  test('should display "Organization" label', () => {
+
+  test('should display "Organization" label', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationLookup onChange={() => {}} />);
+    });
     const title = wrapper.find('FormGroup .pf-c-form__label-text');
     expect(title.text()).toEqual('Organization');
   });
-  test('should define default value for function props', () => {
+
+  test('should define default value for function props', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationLookup onChange={() => {}} />);
+    });
     expect(_OrganizationLookup.defaultProps.onBlur).toBeInstanceOf(Function);
     expect(_OrganizationLookup.defaultProps.onBlur).not.toThrow();
   });

awx/ui_next/src/components/Lookup/ProjectLookup.jsx

@@ -40,6 +40,9 @@ function ProjectLookup({
         const { data } = await ProjectsAPI.read(params);
         setProjects(data.results);
         setCount(data.count);
+        if (data.count === 1) {
+          onChange(data.results[0]);
+        }
       } catch (err) {
         setError(err);
       }

awx/ui_next/src/components/Lookup/ProjectLookup.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import { sleep } from '@testUtils/testUtils';
 import { ProjectsAPI } from '@api';
@@ -15,9 +16,11 @@ describe('<ProjectLookup />', () => {
       },
     });
     const onChange = jest.fn();
-    mountWithContexts(<ProjectLookup onChange={onChange} />);
+    await act(async () => {
+      mountWithContexts(<ProjectLookup onChange={onChange} />);
+    });
     await sleep(0);
-    expect(onChange).toHaveBeenCalledWith({ id: 1 }, 'project');
+    expect(onChange).toHaveBeenCalledWith({ id: 1 });
   });
 
   test('should not auto-select project when multiple available', async () => {
@@ -28,7 +31,9 @@ describe('<ProjectLookup />', () => {
       },
     });
     const onChange = jest.fn();
-    mountWithContexts(<ProjectLookup onChange={onChange} />);
+    await act(async () => {
+      mountWithContexts(<ProjectLookup onChange={onChange} />);
+    });
     await sleep(0);
     expect(onChange).not.toHaveBeenCalled();
   });