diff --git a/awx/ui_next/src/components/DataListRadio/DataListRadio.jsx b/awx/ui_next/src/components/DataListRadio/DataListRadio.jsx index c498f42b55..d358e6c134 100644 --- a/awx/ui_next/src/components/DataListRadio/DataListRadio.jsx +++ b/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({ 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; diff --git a/awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx b/awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx new file mode 100644 index 0000000000..b8fa2e4135 --- /dev/null +++ b/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(); + 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( + + ); + 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); + }); +}); diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index 99da673316..f4ab3e1f61 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/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(); } diff --git a/awx/ui_next/src/components/Lookup/Lookup.test.jsx b/awx/ui_next/src/components/Lookup/Lookup.test.jsx index c84e2d63fd..0729d537c2 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.test.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.test.jsx @@ -225,18 +225,24 @@ describe('', () => { 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, 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 caebbd7fdd..859e327663 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx @@ -29,9 +29,7 @@ describe('', () => { 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 ); diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index 3f1a292e4c..daebb1770f 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/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, + }, }, }; diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx index 94e9f9ff83..2aaae29d12 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx @@ -61,7 +61,7 @@ describe('', () => { 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', { diff --git a/awx/ui_next/src/util/strings.js b/awx/ui_next/src/util/strings.js index ea08d10655..b3c96bad53 100644 --- a/awx/ui_next/src/util/strings.js +++ b/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`;