finish updating tests for Formik 2.x

This commit is contained in:
Keith Grant
2020-01-16 16:21:35 -08:00
parent 8ef5a6b0e1
commit 14990f7e98
4 changed files with 96 additions and 78 deletions

View File

@@ -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({

View File

@@ -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'
);

View File

@@ -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);

View File

@@ -146,6 +146,7 @@ class JobTemplateForm extends Component {
setFieldValue,
i18n,
template,
values,
} = this.props;
const jobTypeOptions = [
{