mirror of
https://github.com/ansible/awx.git
synced 2026-03-13 23:17:32 -02:30
finish updating tests for Formik 2.x
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mount } from 'enzyme';
|
||||
import { Formik } from 'formik';
|
||||
import { sleep } from '../../../testUtils/testUtils';
|
||||
@@ -23,7 +24,7 @@ describe('VariablesField', () => {
|
||||
expect(codemirror.prop('value')).toEqual(value);
|
||||
});
|
||||
|
||||
it('should render yaml/json toggles', () => {
|
||||
it('should render yaml/json toggles', async () => {
|
||||
const value = '---\n';
|
||||
const wrapper = mount(
|
||||
<Formik
|
||||
@@ -37,19 +38,22 @@ describe('VariablesField', () => {
|
||||
expect(buttons).toHaveLength(2);
|
||||
expect(buttons.at(0).prop('variant')).toEqual('primary');
|
||||
expect(buttons.at(1).prop('variant')).toEqual('secondary');
|
||||
|
||||
buttons.at(1).simulate('click');
|
||||
wrapper.update(0);
|
||||
await act(async () => {
|
||||
buttons.at(1).simulate('click');
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript');
|
||||
const buttons2 = wrapper.find('Button');
|
||||
expect(buttons2.at(0).prop('variant')).toEqual('secondary');
|
||||
expect(buttons2.at(1).prop('variant')).toEqual('primary');
|
||||
buttons2.at(0).simulate('click');
|
||||
wrapper.update(0);
|
||||
await act(async () => {
|
||||
buttons2.at(0).simulate('click');
|
||||
});
|
||||
wrapper.update();
|
||||
expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('yaml');
|
||||
});
|
||||
|
||||
it('should set Formik error if yaml is invalid', () => {
|
||||
it('should set Formik error if yaml is invalid', async () => {
|
||||
const value = '---\nfoo bar\n';
|
||||
const wrapper = mount(
|
||||
<Formik
|
||||
@@ -87,10 +91,12 @@ describe('VariablesField', () => {
|
||||
)}
|
||||
/>
|
||||
);
|
||||
wrapper.find('CodeMirrorInput').prop('onChange')('---\nnewval: changed');
|
||||
wrapper.find('form').simulate('submit');
|
||||
await sleep(1);
|
||||
await sleep(1);
|
||||
await act(async () => {
|
||||
wrapper.find('CodeMirrorInput').invoke('onChange')(
|
||||
'---\nnewval: changed'
|
||||
);
|
||||
wrapper.find('form').simulate('submit');
|
||||
});
|
||||
|
||||
expect(handleSubmit).toHaveBeenCalled();
|
||||
expect(handleSubmit.mock.calls[0][0]).toEqual({
|
||||
|
||||
@@ -100,25 +100,37 @@ describe('<JobTemplateAdd />', () => {
|
||||
wrapper = mountWithContexts(<JobTemplateAdd />);
|
||||
});
|
||||
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
|
||||
const formik = wrapper.find('Formik').instance();
|
||||
await act(async () => {
|
||||
const changeState = new Promise(resolve => {
|
||||
formik.setState(
|
||||
{
|
||||
values: {
|
||||
...jobTemplateData,
|
||||
labels: [],
|
||||
instanceGroups: [],
|
||||
},
|
||||
},
|
||||
() => resolve()
|
||||
);
|
||||
act(() => {
|
||||
wrapper.find('input#template-name').simulate('change', {
|
||||
target: { value: 'Foo', name: 'name' },
|
||||
});
|
||||
await changeState;
|
||||
wrapper.find('AnsibleSelect#template-job-type').invoke('onChange')('run');
|
||||
wrapper.find('InventoryLookup').invoke('onChange')({
|
||||
id: 1,
|
||||
organization: 1,
|
||||
});
|
||||
wrapper.find('ProjectLookup').invoke('onChange')({
|
||||
id: 2,
|
||||
name: 'project',
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper
|
||||
.find('PlaybookSelect')
|
||||
.prop('field')
|
||||
.onChange({
|
||||
target: { value: 'Bar', name: 'playbook' },
|
||||
});
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper.find('form').simulate('submit');
|
||||
});
|
||||
wrapper.update();
|
||||
expect(JobTemplatesAPI.create).toHaveBeenCalledWith({
|
||||
...jobTemplateData,
|
||||
description: '',
|
||||
become_enabled: false,
|
||||
});
|
||||
wrapper.find('form').simulate('submit');
|
||||
await sleep(1);
|
||||
expect(JobTemplatesAPI.create).toHaveBeenCalledWith(jobTemplateData);
|
||||
});
|
||||
|
||||
test('should navigate to job template detail after form submission', async () => {
|
||||
@@ -136,36 +148,34 @@ describe('<JobTemplateAdd />', () => {
|
||||
context: { router: { history } },
|
||||
});
|
||||
});
|
||||
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
|
||||
act(() => {
|
||||
wrapper.find('input#template-name').simulate('change', {
|
||||
target: { value: 'Foo', name: 'name' },
|
||||
});
|
||||
wrapper.find('AnsibleSelect#template-job-type').invoke('onChange')('run');
|
||||
wrapper.find('InventoryLookup').invoke('onChange')({
|
||||
id: 1,
|
||||
organization: 1,
|
||||
});
|
||||
wrapper.find('ProjectLookup').invoke('onChange')({
|
||||
id: 2,
|
||||
name: 'project',
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper
|
||||
.find('PlaybookSelect')
|
||||
.prop('field')
|
||||
.onChange({
|
||||
target: { value: 'Bar', name: 'playbook' },
|
||||
});
|
||||
});
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper.find('form').simulate('submit');
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
const updatedTemplateData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
job_type: 'check',
|
||||
};
|
||||
const labels = [
|
||||
{ id: 3, name: 'Foo', isNew: true },
|
||||
{ id: 4, name: 'Bar', isNew: true },
|
||||
{ id: 5, name: 'Maple' },
|
||||
{ id: 6, name: 'Tree' },
|
||||
];
|
||||
JobTemplatesAPI.update.mockResolvedValue({
|
||||
data: { ...updatedTemplateData },
|
||||
});
|
||||
const formik = wrapper.find('Formik').instance();
|
||||
const changeState = new Promise(resolve => {
|
||||
const values = {
|
||||
...jobTemplateData,
|
||||
...updatedTemplateData,
|
||||
labels,
|
||||
instanceGroups: [],
|
||||
};
|
||||
formik.setState({ values }, () => resolve());
|
||||
});
|
||||
await changeState;
|
||||
await wrapper.find('JobTemplateForm').invoke('handleSubmit')(
|
||||
jobTemplateData
|
||||
);
|
||||
await sleep(0);
|
||||
expect(history.location.pathname).toEqual(
|
||||
'/templates/job_template/1/details'
|
||||
);
|
||||
|
||||
@@ -184,11 +184,9 @@ describe('<JobTemplateEdit />', () => {
|
||||
<JobTemplateEdit template={mockJobTemplate} />
|
||||
);
|
||||
});
|
||||
await waitForElement(wrapper, 'JobTemplateForm', e => e.length === 1);
|
||||
const updatedTemplateData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
job_type: 'check',
|
||||
inventory: 1,
|
||||
};
|
||||
const labels = [
|
||||
{ id: 3, name: 'Foo', isNew: true },
|
||||
@@ -196,32 +194,35 @@ describe('<JobTemplateEdit />', () => {
|
||||
{ id: 5, name: 'Maple' },
|
||||
{ id: 6, name: 'Tree' },
|
||||
];
|
||||
JobTemplatesAPI.update.mockResolvedValue({
|
||||
data: { ...updatedTemplateData },
|
||||
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
|
||||
act(() => {
|
||||
wrapper.find('input#template-name').simulate('change', {
|
||||
target: { value: 'new name', name: 'name' },
|
||||
});
|
||||
wrapper.find('AnsibleSelect#template-job-type').invoke('onChange')(
|
||||
'check'
|
||||
);
|
||||
wrapper.find('InventoryLookup').invoke('onChange')({
|
||||
id: 1,
|
||||
organization: 1,
|
||||
});
|
||||
wrapper.find('LabelSelect').invoke('onChange')(labels);
|
||||
});
|
||||
const formik = wrapper.find('Formik').instance();
|
||||
const changeState = await act(
|
||||
() =>
|
||||
new Promise(resolve => {
|
||||
const values = {
|
||||
...mockJobTemplate,
|
||||
...updatedTemplateData,
|
||||
labels,
|
||||
instanceGroups: [],
|
||||
};
|
||||
formik.setState({ values }, () => resolve());
|
||||
})
|
||||
);
|
||||
await changeState;
|
||||
wrapper.update();
|
||||
await act(async () => {
|
||||
wrapper.find('button[aria-label="Save"]').simulate('click');
|
||||
});
|
||||
await sleep(0);
|
||||
|
||||
expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, {
|
||||
const expected = {
|
||||
...mockJobTemplate,
|
||||
...updatedTemplateData,
|
||||
});
|
||||
become_enabled: false,
|
||||
};
|
||||
delete expected.summary_fields;
|
||||
delete expected.id;
|
||||
delete expected.type;
|
||||
expect(JobTemplatesAPI.update).toHaveBeenCalledWith(1, expected);
|
||||
expect(JobTemplatesAPI.disassociateLabel).toHaveBeenCalledTimes(2);
|
||||
expect(JobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
|
||||
expect(JobTemplatesAPI.generateLabel).toHaveBeenCalledTimes(2);
|
||||
|
||||
@@ -146,6 +146,7 @@ class JobTemplateForm extends Component {
|
||||
setFieldValue,
|
||||
i18n,
|
||||
template,
|
||||
values,
|
||||
} = this.props;
|
||||
const jobTypeOptions = [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user