Add template edit and form tests

src/screens/Template/TemplateEdit/TemplateEdit.test.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { JobTemplatesAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import TemplateEdit from './TemplateEdit';
+
+jest.mock('@api');
+
+describe('<TemplateEdit />', () => {
+  const mockData = {
+    id: 1,
+    name: 'Foo',
+    description: 'Bar',
+    job_type: 'run',
+    inventory: 2,
+    project: 3,
+    playbook: 'Baz',
+    type: 'job_template'
+  };
+
+  test('initially renders successfully', () => {
+    mountWithContexts(
+      <TemplateEdit
+        template={mockData}
+        hasPermissions
+      />
+    );
+  });
+
+  test('handleSubmit should call api update', () => {
+    const wrapper = mountWithContexts(
+      <TemplateEdit
+        template={mockData}
+        hasPermissions
+      />
+    );
+    const updatedTemplateData = {
+      name: 'new name',
+      description: 'new description',
+      job_type: 'check',
+    };
+
+    wrapper.find('TemplateForm').prop('handleSubmit')(updatedTemplateData);
+    expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, updatedTemplateData);
+  });
+
+  test('should navigate to job template detail when cancel is clicked', () => {
+    const history = {
+      push: jest.fn(),
+    };
+    const wrapper = mountWithContexts(
+      <TemplateEdit
+        template={mockData}
+        hasPermissions
+      />,
+      { context: { router: { history } } }
+    );
+
+    expect(history.push).not.toHaveBeenCalled();
+    wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+    expect(history.push).toHaveBeenCalledWith('/templates/job_template/1/details');
+  });
+});

src/screens/Template/TemplateList/TemplatesList.test.jsx

@@ -80,7 +80,7 @@ describe('<TemplatesList />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders succesfully', () => {
+  test('initially renders successfully', () => {
     mountWithContexts(
       <TemplatesList
         match={{ path: '/templates', url: '/templates' }}

src/screens/Template/shared/TemplateForm.test.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { sleep } from '@testUtils/testUtils';
+import TemplateForm from './TemplateForm';
+
+jest.mock('@api');
+
+describe('<TemplateForm />', () => {
+  const mockData = {
+    id: 1,
+    name: 'Foo',
+    description: 'Bar',
+    job_type: 'run',
+    inventory: 2,
+    project: 3,
+    playbook: 'Baz',
+    type: 'job_template'
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('initially renders successfully', () => {
+    mountWithContexts(
+      <TemplateForm
+        template={mockData}
+        handleSubmit={jest.fn()}
+        handleCancel={jest.fn()}
+      />
+    );
+  });
+
+  test('should update form values on input changes', () => {
+    const wrapper = mountWithContexts(
+      <TemplateForm
+        template={mockData}
+        handleSubmit={jest.fn()}
+        handleCancel={jest.fn()}
+      />
+    );
+
+    const form = wrapper.find('Formik');
+    wrapper.find('input#template-name').simulate('change', {
+      target: { value: 'new foo', name: 'name' }
+    });
+    expect(form.state('values').name).toEqual('new foo');
+    wrapper.find('input#template-description').simulate('change', {
+      target: { value: 'new bar', name: 'description' }
+    });
+    expect(form.state('values').description).toEqual('new bar');
+    wrapper.find('AnsibleSelect[name="job_type"]').simulate('change', {
+      target: { value: 'new job type', name: 'job_type' }
+    });
+    expect(form.state('values').job_type).toEqual('new job type');
+    wrapper.find('input#template-inventory').simulate('change', {
+      target: { value: 3, name: 'inventory' }
+    });
+    expect(form.state('values').inventory).toEqual(3);
+    wrapper.find('input#template-project').simulate('change', {
+      target: { value: 4, name: 'project' }
+    });
+    expect(form.state('values').project).toEqual(4);
+    wrapper.find('input#template-playbook').simulate('change', {
+      target: { value: 'new baz type', name: 'playbook' }
+    });
+    expect(form.state('values').playbook).toEqual('new baz type');
+  });
+
+  test('should call handleSubmit when Submit button is clicked', async () => {
+    const handleSubmit = jest.fn();
+    const wrapper = mountWithContexts(
+      <TemplateForm
+        template={mockData}
+        handleSubmit={handleSubmit}
+        handleCancel={jest.fn()}
+      />
+    );
+
+    expect(handleSubmit).not.toHaveBeenCalled();
+    wrapper.find('button[aria-label="Save"]').simulate('click');
+    await sleep(1);
+    expect(handleSubmit).toBeCalled();
+  });
+
+  test('should call handleCancel when Cancel button is clicked', () => {
+    const handleCancel = jest.fn();
+    const wrapper = mountWithContexts(
+      <TemplateForm
+        template={mockData}
+        handleSubmit={jest.fn()}
+        handleCancel={handleCancel}
+      />
+    );
+    expect(handleCancel).not.toHaveBeenCalled();
+    wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
+    expect(handleCancel).toBeCalled();
+  });
+});