diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx index 07a9772118..675212c023 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx +++ b/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( { expect(buttons).toHaveLength(2); expect(buttons.at(0).prop('variant')).toEqual('primary'); expect(buttons.at(1).prop('variant')).toEqual('secondary'); - - buttons.at(1).simulate('click'); - wrapper.update(0); + await act(async () => { + buttons.at(1).simulate('click'); + }); + 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'); - wrapper.update(0); + await act(async () => { + 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( { )} /> ); - wrapper.find('CodeMirrorInput').prop('onChange')('---\nnewval: changed'); - wrapper.find('form').simulate('submit'); - await sleep(1); - await sleep(1); + await act(async () => { + wrapper.find('CodeMirrorInput').invoke('onChange')( + '---\nnewval: changed' + ); + wrapper.find('form').simulate('submit'); + }); expect(handleSubmit).toHaveBeenCalled(); expect(handleSubmit.mock.calls[0][0]).toEqual({ diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx index bedb63e678..9073e07a84 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx @@ -100,25 +100,37 @@ describe('', () => { wrapper = mountWithContexts(); }); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); - const formik = wrapper.find('Formik').instance(); - await act(async () => { - const changeState = new Promise(resolve => { - formik.setState( - { - values: { - ...jobTemplateData, - labels: [], - instanceGroups: [], - }, - }, - () => resolve() - ); + act(() => { + wrapper.find('input#template-name').simulate('change', { + target: { value: 'Foo', name: 'name' }, }); - 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('', () => { 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' ); diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx index fb8f1435a8..e7750e2a87 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx @@ -184,11 +184,9 @@ describe('', () => { ); }); - await waitForElement(wrapper, 'JobTemplateForm', e => e.length === 1); const updatedTemplateData = { name: 'new name', - description: 'new description', - job_type: 'check', + inventory: 1, }; const labels = [ { id: 3, name: 'Foo', isNew: true }, @@ -196,32 +194,35 @@ describe('', () => { { id: 5, name: 'Maple' }, { id: 6, name: 'Tree' }, ]; - JobTemplatesAPI.update.mockResolvedValue({ - data: { ...updatedTemplateData }, + await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); + 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(); - const changeState = await act( - () => - new Promise(resolve => { - const values = { - ...mockJobTemplate, - ...updatedTemplateData, - labels, - instanceGroups: [], - }; - formik.setState({ values }, () => resolve()); - }) - ); - await changeState; + wrapper.update(); 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); diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index 68aff316f0..1b2b25df11 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/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 = [ {