Address PR feedback

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

@@ -14,13 +14,13 @@ import JobTemplateForm from '../shared/JobTemplateForm';
 import { JobTemplatesAPI } from '@api';
 
 function JobTemplateAdd({ history, i18n }) {
-  const [error, setError] = useState('');
+  const [error, setError] = useState(null);
 
   const handleSubmit = async values => {
+    setError(null);
     try {
-      const data = await JobTemplatesAPI.create(values);
-      const { response } = data;
-      history.push(`/templates/${response.type}/${response.id}/details`);
+      const { data } = await JobTemplatesAPI.create(values);
+      history.push(`/templates/${data.type}/${data.id}/details`);
     } catch (err) {
       setError(err);
     }

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

@@ -1,17 +1,18 @@
 import React from 'react';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import JobTemplateAdd from './JobTemplateAdd';
+import { JobTemplatesAPI } from '../../../api';
 
 jest.mock('@api');
 
 describe('<JobTemplateAdd />', () => {
   const defaultProps = {
     description: '',
-    inventory: 0,
+    inventory: '',
     job_type: 'run',
     name: '',
     playbook: '',
-    project: 0,
+    project: '',
   };
 
   afterEach(() => {
@@ -25,26 +26,84 @@ describe('<JobTemplateAdd />', () => {
 
   test('should render Job Template Form with default values', () => {
     const wrapper = mountWithContexts(<JobTemplateAdd />);
-    expect(wrapper.find('input#template-description').props().value).toBe(
+    expect(wrapper.find('input#template-description').text()).toBe(
       defaultProps.description
     );
-    expect(wrapper.find('input#template-inventory').props().value).toBe(
+    expect(wrapper.find('input#template-inventory').text()).toBe(
       defaultProps.inventory
     );
     expect(wrapper.find('AnsibleSelect[name="job_type"]').props().value).toBe(
       defaultProps.job_type
     );
-    expect(wrapper.find('input#template-name').props().value).toBe(
-      defaultProps.name
-    );
-    expect(wrapper.find('input#template-playbook').props().value).toBe(
+    expect(
+      wrapper
+        .find('AnsibleSelect[name="job_type"]')
+        .containsAllMatchingElements([
+          <option>Choose a job type</option>,
+          <option>Run</option>,
+          <option>Check</option>,
+        ])
+    ).toEqual(true);
+    expect(wrapper.find('input#template-name').text()).toBe(defaultProps.name);
+    expect(wrapper.find('input#template-playbook').text()).toBe(
       defaultProps.playbook
     );
-    expect(wrapper.find('input#template-project').props().value).toBe(
+    expect(wrapper.find('input#template-project').text()).toBe(
       defaultProps.project
     );
   });
 
+  test('handleSubmit should post to api', async done => {
+    const jobTemplateData = {
+      description: 'Baz',
+      inventory: 1,
+      job_type: 'run',
+      name: 'Foo',
+      playbook: 'Bar',
+      project: 2,
+    };
+    JobTemplatesAPI.create.mockResolvedValueOnce({
+      data: {
+        id: 1,
+        ...jobTemplateData,
+      },
+    });
+    const wrapper = mountWithContexts(<JobTemplateAdd />);
+    await wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+    expect(JobTemplatesAPI.create).toHaveBeenCalledWith(jobTemplateData);
+    done();
+  });
+
+  test('should navigate to job template detail after form submission', async done => {
+    const history = {
+      push: jest.fn(),
+    };
+    const jobTemplateData = {
+      description: 'Baz',
+      inventory: 1,
+      job_type: 'run',
+      name: 'Foo',
+      playbook: 'Bar',
+      project: 2,
+    };
+    JobTemplatesAPI.create.mockResolvedValueOnce({
+      data: {
+        id: 1,
+        type: 'job_template',
+        ...jobTemplateData,
+      },
+    });
+    const wrapper = mountWithContexts(<JobTemplateAdd />, {
+      context: { router: { history } },
+    });
+
+    await wrapper.find('JobTemplateForm').prop('handleSubmit')(jobTemplateData);
+    expect(history.push).toHaveBeenCalledWith(
+      '/templates/job_template/1/details'
+    );
+    done();
+  });
+
   test('should navigate to templates list when cancel is clicked', () => {
     const history = {
       push: jest.fn(),

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

@@ -29,9 +29,9 @@ class JobTemplateForm extends Component {
     template: {
       name: '',
       description: '',
-      inventory: 0,
+      inventory: '',
       job_type: 'run',
-      project: 0,
+      project: '',
       playbook: '',
     },
   };

awx/ui_next/src/types.js

@@ -1,4 +1,12 @@
-import { shape, arrayOf, number, string, bool, oneOf } from 'prop-types';
+import {
+  shape,
+  arrayOf,
+  number,
+  string,
+  bool,
+  oneOf,
+  oneOfType,
+} from 'prop-types';
 
 export const Role = shape({
   descendent_roles: arrayOf(string),
@@ -57,8 +65,8 @@ export const QSConfig = shape({
 export const JobTemplate = shape({
   name: string.isRequired,
   description: string,
-  inventory: number.isRequired,
+  inventory: oneOfType([number, string]).isRequired,
   job_type: oneOf(['run', 'check']),
   playbook: string.isRequired,
-  project: number.isRequired,
+  project: oneOfType([number, string]).isRequired,
 });