Fix broken tests due to JobTemplateForm changes

awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx

@@ -164,6 +164,7 @@ class OrganizationForm extends Component {
                           label={i18n._(t`Ansible Environment`)}
                         >
                           <AnsibleSelect
+                            id="org-custom-virtualenv"
                             data={[
                               defaultVenv,
                               ...custom_virtualenvs

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { sleep } from '@testUtils/testUtils';
 import JobTemplateAdd from './JobTemplateAdd';
 import { JobTemplatesAPI, LabelsAPI } from '@api';
 
@@ -54,8 +55,8 @@ describe('<JobTemplateAdd />', () => {
     ).toEqual(true);
 
     expect(wrapper.find('input#template-name').text()).toBe(defaultProps.name);
-    expect(wrapper.find('input#template-playbook').text()).toBe(
+    expect(wrapper.find('AnsibleSelect[name="playbook"]').text()).toBe(
-      defaultProps.playbook
+      'Choose a playbook'
     );
     expect(wrapper.find('ProjectLookup').prop('value')).toBe(null);
     done();
@@ -78,7 +79,18 @@ describe('<JobTemplateAdd />', () => {
     });
     const wrapper = mountWithContexts(<JobTemplateAdd />);
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
-    wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+    const formik = wrapper.find('Formik').instance();
+    const changeState = new Promise(resolve => {
+      formik.setState(
+        {
+          values: jobTemplateData,
+        },
+        () => resolve()
+      );
+    });
+    await changeState;
+    wrapper.find('form').simulate('submit');
+    await sleep(1);
     expect(JobTemplatesAPI.create).toHaveBeenCalledWith(jobTemplateData);
     done();
   });
@@ -107,6 +119,7 @@ describe('<JobTemplateAdd />', () => {
     });
 
     await wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+    await sleep(0);
     expect(history.push).toHaveBeenCalledWith(
       '/templates/job_template/1/details'
     );

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx

@@ -106,13 +106,14 @@ class JobTemplateEdit extends Component {
       template: { id },
       history,
     } = this.props;
+    const { newLabels, removedLabels } = values;
+    delete values.newLabels;
+    delete values.removedLabels;
 
     this.setState({ formSubmitError: null });
     try {
-      await JobTemplatesAPI.update(id, { ...values });
+      await JobTemplatesAPI.update(id, values);
-      await Promise.all([
+      await Promise.all([this.submitLabels(newLabels, removedLabels)]);
-        this.submitLabels(values.newLabels, values.removedLabels),
-      ]);
       history.push(this.detailsUrl);
     } catch (formSubmitError) {
       this.setState({ formSubmitError });

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { JobTemplatesAPI, LabelsAPI } from '@api';
+import { sleep } from '@testUtils/testUtils';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { JobTemplatesAPI, LabelsAPI, ProjectsAPI } from '@api';
 import JobTemplateEdit from './JobTemplateEdit';
 
 jest.mock('@api');
@@ -74,9 +75,29 @@ const mockRelatedCredentials = {
   ],
 };
 
+const mockRelatedProjectPlaybooks = [
+  'check.yml',
+  'debug-50.yml',
+  'debug.yml',
+  'debug2.yml',
+  'debug_extra_vars.yml',
+  'dynamic_inventory.yml',
+  'environ_test.yml',
+  'fail_unless.yml',
+  'pass_unless.yml',
+  'pause.yml',
+  'ping-20.yml',
+  'ping.yml',
+  'setfact_50.yml',
+  'vault.yml',
+];
+
 JobTemplatesAPI.readCredentials.mockResolvedValue({
   data: mockRelatedCredentials,
 });
+ProjectsAPI.readPlaybooks.mockResolvedValue({
+  data: mockRelatedProjectPlaybooks,
+});
 LabelsAPI.read.mockResolvedValue({ data: { results: [] } });
 
 describe('<JobTemplateEdit />', () => {
@@ -101,20 +122,38 @@ describe('<JobTemplateEdit />', () => {
     const newLabels = [
       { associate: true, id: 3 },
       { associate: true, id: 3 },
-      { name: 'Mapel', organization: 1 },
+      { name: 'Maple', organization: 1 },
       { name: 'Tree', organization: 1 },
     ];
     const removedLabels = [
       { disassociate: true, id: 1 },
       { disassociate: true, id: 2 },
     ];
+    JobTemplatesAPI.update.mockResolvedValue({
+      data: { ...updatedTemplateData },
+    });
+    const formik = wrapper.find('Formik').instance();
+    const changeState = new Promise(resolve => {
+      formik.setState(
+        {
+          values: {
+            ...mockJobTemplate,
+            ...updatedTemplateData,
+            newLabels,
+            removedLabels,
+          },
+        },
+        () => resolve()
+      );
+    });
+    await changeState;
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(0);
 
-    await wrapper.find('JobTemplateForm').prop('handleSubmit')(
+    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, {
-      updatedTemplateData,
+      ...mockJobTemplate,
-      newLabels,
+      ...updatedTemplateData,
-      removedLabels
+    });
-    );
-    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, updatedTemplateData);
     expect(JobTemplatesAPI.disassociateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.generateLabel).toHaveBeenCalledTimes(2);

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -427,7 +427,7 @@ const FormikApp = withFormik({
     const {
       name = '',
       description = '',
-      job_type = '',
+      job_type = 'run',
       inventory = '',
       playbook = '',
       project = '',

awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import { sleep } from '@testUtils/testUtils';
-import { shallow } from 'enzyme';
 import JobTemplateForm, { _JobTemplateForm } from './JobTemplateForm';
 import { LabelsAPI } from '@api';
 
@@ -42,13 +41,11 @@ describe('<JobTemplateForm />', () => {
 
   test('initially renders successfully', async done => {
     const wrapper = mountWithContexts(
-      shallow(
+      <JobTemplateForm
-        <JobTemplateForm
+        template={mockData}
-          template={mockData}
+        handleSubmit={jest.fn()}
-          handleSubmit={jest.fn()}
+        handleCancel={jest.fn()}
-          handleCancel={jest.fn()}
+      />
-        />
-      ).get(0)
     );
 
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
@@ -64,14 +61,13 @@ describe('<JobTemplateForm />', () => {
 
   test('should update form values on input changes', async done => {
     const wrapper = mountWithContexts(
-      shallow(
+      <JobTemplateForm
-        <JobTemplateForm
+        template={mockData}
-          template={mockData}
+        handleSubmit={jest.fn()}
-          handleSubmit={jest.fn()}
+        handleCancel={jest.fn()}
-          handleCancel={jest.fn()}
+      />
-        />
-      ).get(0)
     );
+
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     const form = wrapper.find('Formik');
     wrapper.find('input#template-name').simulate('change', {
@@ -136,6 +132,27 @@ describe('<JobTemplateForm />', () => {
     done();
   });
 
+  test('should call loadRelatedProjectPlaybooks when project value changes', async done => {
+    const loadRelatedProjectPlaybooks = jest.spyOn(
+      _JobTemplateForm.prototype,
+      'loadRelatedProjectPlaybooks'
+    );
+    const wrapper = mountWithContexts(
+      <JobTemplateForm
+        template={mockData}
+        handleSubmit={jest.fn()}
+        handleCancel={jest.fn()}
+      />
+    );
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+    wrapper.find('ProjectLookup').prop('onChange')({
+      id: 10,
+      name: 'project',
+    });
+    expect(loadRelatedProjectPlaybooks).toHaveBeenCalledWith(10);
+    done();
+  });
+
   test('handleNewLabel should arrange new labels properly', async done => {
     const handleNewLabel = jest.spyOn(
       _JobTemplateForm.prototype,