External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-01 08:48:46 -03:30
Code Issues Packages Projects Releases Wiki Activity

Migrate organization add to functional component

Browse Source
This commit is contained in:
Jake McDermott
2019-12-06 14:54:29 -05:00
parent 01161c7afd
commit e34c7acdc4
2 changed files with 86 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
@@ -14,19 +14,12 @@ import {
import { OrganizationsAPI } from '@api'; import { OrganizationsAPI } from '@api';
import { Config } from '@contexts/Config'; import { Config } from '@contexts/Config';
import CardCloseButton from '@components/CardCloseButton'; import CardCloseButton from '@components/CardCloseButton';
import OrganizationForm from '../shared/OrganizationForm'; import OrganizationForm from '../shared/OrganizationForm';
class OrganizationAdd extends React.Component { function OrganizationAdd({ history, i18n }) {
constructor(props) { const [formError, setFormError] = useState(null);
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.state = { error: '' };
}
async handleSubmit(values, groupsToAssociate) { const handleSubmit = async (values, groupsToAssociate) => {
const { history } = this.props;
try { try {
const { data: response } = await OrganizationsAPI.create(values); const { data: response } = await OrganizationsAPI.create(values);
await Promise.all( await Promise.all(
@@ -36,43 +29,37 @@ class OrganizationAdd extends React.Component {
); );
history.push(`/organizations/${response.id}`); history.push(`/organizations/${response.id}`);
} catch (error) { } catch (error) {
this.setState({ error }); setFormError(error);
} }
} };
handleCancel() { const handleCancel = () => {
const { history } = this.props;
history.push('/organizations'); history.push('/organizations');
} };
render() { return (
const { error } = this.state; <PageSection>
const { i18n } = this.props; <Card>
<CardHeader className="at-u-textRight">
return ( <Tooltip content={i18n._(t`Close`)} position="top">
<PageSection> <CardCloseButton onClick={handleCancel} />
<Card> </Tooltip>
<CardHeader className="at-u-textRight"> </CardHeader>
<Tooltip content={i18n._(t`Close`)} position="top"> <CardBody>
<CardCloseButton onClick={this.handleCancel} /> <Config>
</Tooltip> {({ me }) => (
</CardHeader> <OrganizationForm
<CardBody> handleSubmit={handleSubmit}
<Config> handleCancel={handleCancel}
{({ me }) => ( me={me || {}}
<OrganizationForm />
handleSubmit={this.handleSubmit} )}
handleCancel={this.handleCancel} </Config>
me={me || {}} {formError ? <div>error</div> : ''}
/> </CardBody>
)} </Card>
</Config> </PageSection>
{error ? <div>error</div> : ''} );
</CardBody>
</Card>
</PageSection>
);
}
} }
OrganizationAdd.contextTypes = { OrganizationAdd.contextTypes = {

99
awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx
View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { act } from 'react-dom/test-utils';
import { createMemoryHistory } from 'history'; import { createMemoryHistory } from 'history';
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers'; import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
import OrganizationAdd from './OrganizationAdd'; import OrganizationAdd from './OrganizationAdd';
@@ -7,36 +8,42 @@ import { OrganizationsAPI } from '@api';
jest.mock('@api'); jest.mock('@api');
describe('<OrganizationAdd />', () => { describe('<OrganizationAdd />', () => {
test('handleSubmit should post to api', () => { test('handleSubmit should post to api', async () => {
const wrapper = mountWithContexts(<OrganizationAdd />);
const updatedOrgData = { const updatedOrgData = {
name: 'new name', name: 'new name',
description: 'new description', description: 'new description',
custom_virtualenv: 'Buzz', custom_virtualenv: 'Buzz',
}; };
wrapper.find('OrganizationForm').prop('handleSubmit')( await act(async () => {
updatedOrgData, const wrapper = mountWithContexts(<OrganizationAdd />);
[], wrapper.find('OrganizationForm').prop('handleSubmit')(
[] updatedOrgData,
); [],
[]
);
});
expect(OrganizationsAPI.create).toHaveBeenCalledWith(updatedOrgData); expect(OrganizationsAPI.create).toHaveBeenCalledWith(updatedOrgData);
}); });
test('should navigate to organizations list when cancel is clicked', () => { test('should navigate to organizations list when cancel is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
const wrapper = mountWithContexts(<OrganizationAdd />, { await act(async () => {
context: { router: { history } }, const wrapper = mountWithContexts(<OrganizationAdd />, {
context: { router: { history } },
});
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
}); });
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
expect(history.location.pathname).toEqual('/organizations'); expect(history.location.pathname).toEqual('/organizations');
}); });
test('should navigate to organizations list when close (x) is clicked', () => { test('should navigate to organizations list when close (x) is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
const wrapper = mountWithContexts(<OrganizationAdd />, { await act(async () => {
context: { router: { history } }, const wrapper = mountWithContexts(<OrganizationAdd />, {
context: { router: { history } },
});
wrapper.find('button[aria-label="Close"]').prop('onClick')();
}); });
wrapper.find('button[aria-label="Close"]').prop('onClick')();
expect(history.location.pathname).toEqual('/organizations'); expect(history.location.pathname).toEqual('/organizations');
}); });
@@ -56,15 +63,17 @@ describe('<OrganizationAdd />', () => {
...orgData, ...orgData,
}, },
}); });
const wrapper = mountWithContexts(<OrganizationAdd />, { await act(async () => {
context: { router: { history } }, const wrapper = mountWithContexts(<OrganizationAdd />, {
context: { router: { history } },
});
await waitForElement(wrapper, 'button[aria-label="Save"]');
await wrapper.find('OrganizationForm').prop('handleSubmit')(
orgData,
[3],
[]
);
}); });
await waitForElement(wrapper, 'button[aria-label="Save"]');
await wrapper.find('OrganizationForm').prop('handleSubmit')(
orgData,
[3],
[]
);
expect(history.location.pathname).toEqual('/organizations/5'); expect(history.location.pathname).toEqual('/organizations/5');
}); });
@@ -83,23 +92,25 @@ describe('<OrganizationAdd />', () => {
...orgData, ...orgData,
}, },
}); });
const wrapper = mountWithContexts(<OrganizationAdd />); await act(async () => {
await waitForElement(wrapper, 'button[aria-label="Save"]'); const wrapper = mountWithContexts(<OrganizationAdd />);
await wrapper.find('OrganizationForm').prop('handleSubmit')( await waitForElement(wrapper, 'button[aria-label="Save"]');
orgData, await wrapper.find('OrganizationForm').prop('handleSubmit')(
[3], orgData,
[] [3],
); []
);
});
expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(5, 3); expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(5, 3);
}); });
test('AnsibleSelect component renders if there are virtual environments', () => { test('AnsibleSelect component renders if there are virtual environments', async () => {
const config = { let wrapper;
custom_virtualenvs: ['foo', 'bar'], await act(async () => {
}; wrapper = mountWithContexts(<OrganizationAdd />, {
const wrapper = mountWithContexts(<OrganizationAdd />, { context: { config: { custom_virtualenvs: ['foo', 'bar'] } },
context: { config }, }).find('AnsibleSelect');
}).find('AnsibleSelect'); });
expect(wrapper.find('FormSelect')).toHaveLength(1); expect(wrapper.find('FormSelect')).toHaveLength(1);
expect(wrapper.find('FormSelectOption')).toHaveLength(3); expect(wrapper.find('FormSelectOption')).toHaveLength(3);
expect( expect(
@@ -110,13 +121,13 @@ describe('<OrganizationAdd />', () => {
).toEqual('/venv/ansible/'); ).toEqual('/venv/ansible/');
}); });
test('AnsibleSelect component does not render if there are 0 virtual environments', () => { test('AnsibleSelect component does not render if there are 0 virtual environments', async () => {
const config = { let wrapper;
custom_virtualenvs: [], await act(async () => {
}; wrapper = mountWithContexts(<OrganizationAdd />, {
const wrapper = mountWithContexts(<OrganizationAdd />, { context: { config: { custom_virtualenvs: [] } },
context: { config }, }).find('AnsibleSelect');
}).find('AnsibleSelect'); });
expect(wrapper.find('FormSelect')).toHaveLength(0); expect(wrapper.find('FormSelect')).toHaveLength(0);
}); });
}); });