finish updating tests for Formik 2.x

awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import { Formik } from 'formik';
 import { sleep } from '../../../testUtils/testUtils';
@@ -23,7 +24,7 @@ describe('VariablesField', () => {
     expect(codemirror.prop('value')).toEqual(value);
   });
 
-  it('should render yaml/json toggles', () => {
+  it('should render yaml/json toggles', async () => {
     const value = '---\n';
     const wrapper = mount(
       <Formik
@@ -37,19 +38,22 @@ describe('VariablesField', () => {
     expect(buttons).toHaveLength(2);
     expect(buttons.at(0).prop('variant')).toEqual('primary');
     expect(buttons.at(1).prop('variant')).toEqual('secondary');
-
+    await act(async () => {
-    buttons.at(1).simulate('click');
+      buttons.at(1).simulate('click');
-    wrapper.update(0);
+    });
+    wrapper.update();
     expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript');
     const buttons2 = wrapper.find('Button');
     expect(buttons2.at(0).prop('variant')).toEqual('secondary');
     expect(buttons2.at(1).prop('variant')).toEqual('primary');
-    buttons2.at(0).simulate('click');
+    await act(async () => {
-    wrapper.update(0);
+      buttons2.at(0).simulate('click');
+    });
+    wrapper.update();
     expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('yaml');
   });
 
-  it('should set Formik error if yaml is invalid', () => {
+  it('should set Formik error if yaml is invalid', async () => {
     const value = '---\nfoo bar\n';
     const wrapper = mount(
       <Formik
@@ -87,10 +91,12 @@ describe('VariablesField', () => {
         )}
       />
     );
-    wrapper.find('CodeMirrorInput').prop('onChange')('---\nnewval: changed');
+    await act(async () => {
-    wrapper.find('form').simulate('submit');
+      wrapper.find('CodeMirrorInput').invoke('onChange')(
-    await sleep(1);
+        '---\nnewval: changed'
-    await sleep(1);
+      );
+      wrapper.find('form').simulate('submit');
+    });
 
     expect(handleSubmit).toHaveBeenCalled();
     expect(handleSubmit.mock.calls[0][0]).toEqual({

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

@@ -100,25 +100,37 @@ describe('<JobTemplateAdd />', () => {
       wrapper = mountWithContexts(<JobTemplateAdd />);
     });
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
-    const formik = wrapper.find('Formik').instance();
+    act(() => {
-    await act(async () => {
+      wrapper.find('input#template-name').simulate('change', {
-      const changeState = new Promise(resolve => {
+        target: { value: 'Foo', name: 'name' },
-        formik.setState(
-          {
-            values: {
-              ...jobTemplateData,
-              labels: [],
-              instanceGroups: [],
-            },
-          },
-          () => resolve()
-        );
       });
-      await changeState;
+      wrapper.find('AnsibleSelect#template-job-type').invoke('onChange')('run');
+      wrapper.find('InventoryLookup').invoke('onChange')({
+        id: 1,
+        organization: 1,
+      });
+      wrapper.find('ProjectLookup').invoke('onChange')({
+        id: 2,
+        name: 'project',
+      });
+      wrapper.update();
+      wrapper
+        .find('PlaybookSelect')
+        .prop('field')
+        .onChange({
+          target: { value: 'Bar', name: 'playbook' },
+        });
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+    expect(JobTemplatesAPI.create).toHaveBeenCalledWith({
+      ...jobTemplateData,
+      description: '',
+      become_enabled: false,
     });
-    wrapper.find('form').simulate('submit');
-    await sleep(1);
-    expect(JobTemplatesAPI.create).toHaveBeenCalledWith(jobTemplateData);
   });
 
   test('should navigate to job template detail after form submission', async () => {
@@ -136,36 +148,34 @@ describe('<JobTemplateAdd />', () => {
         context: { router: { history } },
       });
     });
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
+    act(() => {
+      wrapper.find('input#template-name').simulate('change', {
+        target: { value: 'Foo', name: 'name' },
+      });
+      wrapper.find('AnsibleSelect#template-job-type').invoke('onChange')('run');
+      wrapper.find('InventoryLookup').invoke('onChange')({
+        id: 1,
+        organization: 1,
+      });
+      wrapper.find('ProjectLookup').invoke('onChange')({
+        id: 2,
+        name: 'project',
+      });
+      wrapper.update();
+      wrapper
+        .find('PlaybookSelect')
+        .prop('field')
+        .onChange({
+          target: { value: 'Bar', name: 'playbook' },
+        });
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
 
-    const updatedTemplateData = {
-      name: 'new name',
-      description: 'new description',
-      job_type: 'check',
-    };
-    const labels = [
-      { id: 3, name: 'Foo', isNew: true },
-      { id: 4, name: 'Bar', isNew: true },
-      { id: 5, name: 'Maple' },
-      { id: 6, name: 'Tree' },
-    ];
-    JobTemplatesAPI.update.mockResolvedValue({
-      data: { ...updatedTemplateData },
-    });
-    const formik = wrapper.find('Formik').instance();
-    const changeState = new Promise(resolve => {
-      const values = {
-        ...jobTemplateData,
-        ...updatedTemplateData,
-        labels,
-        instanceGroups: [],
-      };
-      formik.setState({ values }, () => resolve());
-    });
-    await changeState;
-    await wrapper.find('JobTemplateForm').invoke('handleSubmit')(
-      jobTemplateData
-    );
-    await sleep(0);
     expect(history.location.pathname).toEqual(
       '/templates/job_template/1/details'
     );

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

@@ -184,11 +184,9 @@ describe('<JobTemplateEdit />', () => {
         <JobTemplateEdit template={mockJobTemplate} />
       );
     });
-    await waitForElement(wrapper, 'JobTemplateForm', e => e.length === 1);
     const updatedTemplateData = {
       name: 'new name',
-      description: 'new description',
+      inventory: 1,
-      job_type: 'check',
     };
     const labels = [
       { id: 3, name: 'Foo', isNew: true },
@@ -196,32 +194,35 @@ describe('<JobTemplateEdit />', () => {
       { id: 5, name: 'Maple' },
       { id: 6, name: 'Tree' },
     ];
-    JobTemplatesAPI.update.mockResolvedValue({
+    await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
-      data: { ...updatedTemplateData },
+    act(() => {
+      wrapper.find('input#template-name').simulate('change', {
+        target: { value: 'new name', name: 'name' },
+      });
+      wrapper.find('AnsibleSelect#template-job-type').invoke('onChange')(
+        'check'
+      );
+      wrapper.find('InventoryLookup').invoke('onChange')({
+        id: 1,
+        organization: 1,
+      });
+      wrapper.find('LabelSelect').invoke('onChange')(labels);
     });
-    const formik = wrapper.find('Formik').instance();
+    wrapper.update();
-    const changeState = await act(
-      () =>
-        new Promise(resolve => {
-          const values = {
-            ...mockJobTemplate,
-            ...updatedTemplateData,
-            labels,
-            instanceGroups: [],
-          };
-          formik.setState({ values }, () => resolve());
-        })
-    );
-    await changeState;
     await act(async () => {
       wrapper.find('button[aria-label="Save"]').simulate('click');
     });
     await sleep(0);
 
-    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, {
+    const expected = {
       ...mockJobTemplate,
       ...updatedTemplateData,
-    });
+      become_enabled: false,
+    };
+    delete expected.summary_fields;
+    delete expected.id;
+    delete expected.type;
+    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, expected);
     expect(JobTemplatesAPI.disassociateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
     expect(JobTemplatesAPI.generateLabel).toHaveBeenCalledTimes(2);

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

@@ -146,6 +146,7 @@ class JobTemplateForm extends Component {
       setFieldValue,
       i18n,
       template,
+      values,
     } = this.props;
     const jobTypeOptions = [
       {