fix InventoriesLookup on new JT form; add DataListRadio tests

awx/ui_next/src/components/DataListRadio/DataListRadio.jsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { string, bool, func } from 'prop-types';
-import styled from 'styled-components';
 
 function DataListRadio({
   className = '',
@@ -17,7 +16,7 @@ function DataListRadio({
         <input
           {...props}
           type="radio"
-          onChange={event => onChange(event.currentTarget.checked, event)}
+          onChange={event => onChange(event.currentTarget.checked, event) }
           aria-invalid={!isValid}
           disabled={isDisabled}
           checked={isChecked || checked}
@@ -43,6 +42,6 @@ DataListRadio.defaultProps = {
   checked: false,
   onChange: () => {},
   'aria-labelledby': '',
-}
+};
 
 export default DataListRadio;

awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import DataListRadio from './DataListRadio';
+
+describe('DataListRadio', () => {
+  test('should call onChange', () => {
+    const onChange = jest.fn();
+    const wrapper = mountWithContexts(<DataListRadio onChange={onChange} />);
+    wrapper.find('input[type="radio"]').prop('onChange')({
+      currentTarget: { checked: true },
+    });
+    expect(onChange).toHaveBeenCalledWith(true, {
+      currentTarget: { checked: true },
+    });
+  });
+
+  test('should pass props to correct children', () => {
+    const onChange = jest.fn();
+    const wrapper = mountWithContexts(
+      <DataListRadio
+        onChange={onChange}
+        className="foo"
+        isValid
+        isDisabled
+        checked
+      />
+    );
+    const div = wrapper.find('.pf-c-data-list__item-control');
+    const input = wrapper.find('input[type="radio"]');
+
+    expect(div.prop('className')).toEqual('pf-c-data-list__item-control foo');
+    expect(input.prop('disabled')).toBe(true);
+    expect(input.prop('checked')).toBe(true);
+    expect(input.prop('aria-invalid')).toBe(false);
+  });
+});

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -41,11 +41,13 @@ class Lookup extends React.Component {
     super(props);
 
     this.assertCorrectValueType();
+    let lookupSelectedItems = [];
+    if (props.value) {
+      lookupSelectedItems = props.multiple ? [...props.value] : [props.value];
+    }
     this.state = {
       isModalOpen: false,
-      lookupSelectedItems: props.multiple
-        ? [...props.value] || []
-        : [props.value],
+      lookupSelectedItems,
       results: [],
       count: 0,
       error: null,
@@ -144,9 +146,11 @@ class Lookup extends React.Component {
     // This handles the case where the user closes/cancels the modal and
     // opens it again
     if (!isModalOpen) {
-      this.setState({
-        lookupSelectedItems: multiple ? [...value] : [value],
-      });
+      let lookupSelectedItems = [];
+      if (value) {
+        lookupSelectedItems = multiple ? [...value] : [value];
+      }
+      this.setState({ lookupSelectedItems });
     }
     this.setState(prevState => ({
       isModalOpen: !prevState.isModalOpen,
@@ -156,7 +160,9 @@ class Lookup extends React.Component {
   saveModal() {
     const { onLookupSave, name, multiple } = this.props;
     const { lookupSelectedItems } = this.state;
-    const value = multiple ? lookupSelectedItems : lookupSelectedItems[0];
+    const value = multiple
+      ? lookupSelectedItems
+      : lookupSelectedItems[0] || null;
     onLookupSave(value, name);
     this.handleModalToggle();
   }

awx/ui_next/src/components/Lookup/Lookup.test.jsx

@@ -225,18 +225,24 @@ describe('<Lookup />', () => {
         onLookupSave={onLookupSaveFn}
         getItems={() => ({
           data: {
-            results: [ mockData ],
+            results: [mockData],
             count: 1,
-          }
+          },
         })}
         sortedColumnKey="name"
       />
     );
-    wrapper.find('Lookup').instance().toggleSelected({
-      id: 1,
-      name: 'foo',
-    });
-    wrapper.find('Lookup').instance().saveModal();
+    wrapper
+      .find('Lookup')
+      .instance()
+      .toggleSelected({
+        id: 1,
+        name: 'foo',
+      });
+    wrapper
+      .find('Lookup')
+      .instance()
+      .saveModal();
     expect(onLookupSaveFn).toHaveBeenCalledWith(
       {
         id: 1,

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

@@ -29,9 +29,7 @@ describe('<JobTemplateAdd />', () => {
     expect(wrapper.find('input#template-description').text()).toBe(
       defaultProps.description
     );
-    expect(wrapper.find('InventoriesLookup').prop('value')).toBe(
-      defaultProps.inventory
-    );
+    expect(wrapper.find('InventoriesLookup').prop('value')).toBe(null);
     expect(wrapper.find('AnsibleSelect[name="job_type"]').props().value).toBe(
       defaultProps.job_type
     );

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

@@ -34,7 +34,9 @@ class JobTemplateForm extends Component {
       job_type: 'run',
       project: '',
       playbook: '',
-      summary_fields: {},
+      summary_fields: {
+        inventory: null,
+      },
     },
   };
 

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

@@ -61,7 +61,7 @@ describe('<JobTemplateForm />', () => {
     expect(form.state('values').job_type).toEqual('new job type');
     wrapper.find('InventoriesLookup').prop('onChange')({
       id: 3,
-      name: 'inventory'
+      name: 'inventory',
     });
     expect(form.state('values').inventory).toEqual(3);
     wrapper.find('input#template-project').simulate('change', {

awx/ui_next/src/util/strings.js

@@ -2,7 +2,7 @@
 export function pluralize(str) {
   const lastChar = str[str.length - 1];
   if (lastChar === 's') {
-    return `${str}es`
+    return `${str}es`;
   }
   if (lastChar === 'y') {
     return `${str.substr(0, str.length - 1)}ies`;