clean up act() errors in form tests after Lookup changes

This commit is contained in:
Keith Grant
2019-12-04 10:36:25 -08:00
parent 75b7d74f91
commit 6e64b5c070
7 changed files with 261 additions and 186 deletions

View File

@@ -25,7 +25,7 @@ class AnsibleSelect extends React.Component {
} }
render() { render() {
const { id, data, i18n, isValid, onBlur, value } = this.props; const { id, data, i18n, isValid, onBlur, value, className } = this.props;
return ( return (
<FormSelect <FormSelect
@@ -35,6 +35,7 @@ class AnsibleSelect extends React.Component {
onBlur={onBlur} onBlur={onBlur}
aria-label={i18n._(t`Select Input`)} aria-label={i18n._(t`Select Input`)}
isValid={isValid} isValid={isValid}
className={className}
> >
{data.map(option => ( {data.map(option => (
<FormSelectOption <FormSelectOption
@@ -60,6 +61,7 @@ AnsibleSelect.defaultProps = {
data: [], data: [],
isValid: true, isValid: true,
onBlur: () => {}, onBlur: () => {},
className: '',
}; };
AnsibleSelect.propTypes = { AnsibleSelect.propTypes = {
@@ -69,6 +71,7 @@ AnsibleSelect.propTypes = {
onBlur: func, onBlur: func,
onChange: func.isRequired, onChange: func.isRequired,
value: oneOfType([string, number]).isRequired, value: oneOfType([string, number]).isRequired,
className: string,
}; };
export { AnsibleSelect as _AnsibleSelect }; export { AnsibleSelect as _AnsibleSelect };

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 HostAdd from './HostAdd'; import HostAdd from './HostAdd';
@@ -7,8 +8,11 @@ import { HostsAPI } from '@api';
jest.mock('@api'); jest.mock('@api');
describe('<HostAdd />', () => { describe('<HostAdd />', () => {
test('handleSubmit should post to api', () => { test('handleSubmit should post to api', async () => {
const wrapper = mountWithContexts(<HostAdd />); let wrapper;
await act(async () => {
wrapper = mountWithContexts(<HostAdd />);
});
const updatedHostData = { const updatedHostData = {
name: 'new name', name: 'new name',
description: 'new description', description: 'new description',
@@ -19,21 +23,27 @@ describe('<HostAdd />', () => {
expect(HostsAPI.create).toHaveBeenCalledWith(updatedHostData); expect(HostsAPI.create).toHaveBeenCalledWith(updatedHostData);
}); });
test('should navigate to hosts list when cancel is clicked', () => { test('should navigate to hosts list when cancel is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
const wrapper = mountWithContexts(<HostAdd />, { let wrapper;
context: { router: { history } }, await act(async () => {
wrapper = mountWithContexts(<HostAdd />, {
context: { router: { history } },
});
}); });
wrapper.find('button[aria-label="Cancel"]').prop('onClick')(); wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
expect(history.location.pathname).toEqual('/hosts'); expect(history.location.pathname).toEqual('/hosts');
}); });
test('should navigate to hosts list when close (x) is clicked', () => { test('should navigate to hosts list when close (x) is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
const wrapper = mountWithContexts(<HostAdd />, { let wrapper;
context: { router: { history } }, await act(async () => {
wrapper = mountWithContexts(<HostAdd />, {
context: { router: { history } },
});
}); });
wrapper.find('button[aria-label="Close"]').prop('onClick')(); wrapper.find('button[aria-label="Close"]').invoke('onClick')();
expect(history.location.pathname).toEqual('/hosts'); expect(history.location.pathname).toEqual('/hosts');
}); });
@@ -51,11 +61,14 @@ describe('<HostAdd />', () => {
...hostData, ...hostData,
}, },
}); });
const wrapper = mountWithContexts(<HostAdd />, { let wrapper;
context: { router: { history } }, await act(async () => {
wrapper = mountWithContexts(<HostAdd />, {
context: { router: { history } },
});
}); });
await waitForElement(wrapper, 'button[aria-label="Save"]'); await waitForElement(wrapper, 'button[aria-label="Save"]');
await wrapper.find('HostForm').prop('handleSubmit')(hostData); await wrapper.find('HostForm').invoke('handleSubmit')(hostData);
expect(history.location.pathname).toEqual('/hosts/5'); expect(history.location.pathname).toEqual('/hosts/5');
}); });
}); });

View File

@@ -9,6 +9,10 @@ jest.mock('@api');
describe('<OrganizationAdd />', () => { describe('<OrganizationAdd />', () => {
test('handleSubmit should post to api', async () => { test('handleSubmit should post to api', async () => {
let wrapper;
await act(async () => {
wrapper = mountWithContexts(<OrganizationAdd />);
});
const updatedOrgData = { const updatedOrgData = {
name: 'new name', name: 'new name',
description: 'new description', description: 'new description',
@@ -27,22 +31,24 @@ describe('<OrganizationAdd />', () => {
test('should navigate to organizations list when cancel is clicked', async () => { test('should navigate to organizations list when cancel is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
let wrapper;
await act(async () => { await act(async () => {
const wrapper = mountWithContexts(<OrganizationAdd />, { wrapper = mountWithContexts(<OrganizationAdd />, {
context: { router: { history } }, context: { router: { history } },
}); });
wrapper.find('button[aria-label="Cancel"]').prop('onClick')(); wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
}); });
expect(history.location.pathname).toEqual('/organizations'); expect(history.location.pathname).toEqual('/organizations');
}); });
test('should navigate to organizations list when close (x) is clicked', async () => { test('should navigate to organizations list when close (x) is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
let wrapper;
await act(async () => { await act(async () => {
const wrapper = mountWithContexts(<OrganizationAdd />, { wrapper = mountWithContexts(<OrganizationAdd />, {
context: { router: { history } }, context: { router: { history } },
}); });
wrapper.find('button[aria-label="Close"]').prop('onClick')(); wrapper.find('button[aria-label="Close"]').invoke('onClick')();
}); });
expect(history.location.pathname).toEqual('/organizations'); expect(history.location.pathname).toEqual('/organizations');
}); });
@@ -63,8 +69,9 @@ describe('<OrganizationAdd />', () => {
...orgData, ...orgData,
}, },
}); });
let wrapper;
await act(async () => { await act(async () => {
const wrapper = mountWithContexts(<OrganizationAdd />, { wrapper = mountWithContexts(<OrganizationAdd />, {
context: { router: { history } }, context: { router: { history } },
}); });
await waitForElement(wrapper, 'button[aria-label="Save"]'); await waitForElement(wrapper, 'button[aria-label="Save"]');
@@ -92,23 +99,27 @@ describe('<OrganizationAdd />', () => {
...orgData, ...orgData,
}, },
}); });
let wrapper;
await act(async () => { await act(async () => {
const wrapper = mountWithContexts(<OrganizationAdd />); wrapper = mountWithContexts(<OrganizationAdd />);
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(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(5, 3); expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(5, 3);
}); });
test('AnsibleSelect component renders if there are virtual environments', async () => { test('AnsibleSelect component renders if there are virtual environments', async () => {
const config = {
custom_virtualenvs: ['foo', 'bar'],
};
let wrapper; let wrapper;
await act(async () => { await act(async () => {
wrapper = mountWithContexts(<OrganizationAdd />, { 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);
@@ -122,10 +133,13 @@ describe('<OrganizationAdd />', () => {
}); });
test('AnsibleSelect component does not render if there are 0 virtual environments', async () => { test('AnsibleSelect component does not render if there are 0 virtual environments', async () => {
const config = {
custom_virtualenvs: [],
};
let wrapper; let wrapper;
await act(async () => { await act(async () => {
wrapper = mountWithContexts(<OrganizationAdd />, { 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);

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 { OrganizationsAPI } from '@api'; import { OrganizationsAPI } from '@api';
import { mountWithContexts } from '@testUtils/enzymeHelpers'; import { mountWithContexts } from '@testUtils/enzymeHelpers';
@@ -19,10 +20,11 @@ describe('<OrganizationEdit />', () => {
}, },
}; };
test('handleSubmit should call api update', () => { test('handleSubmit should call api update', async () => {
const wrapper = mountWithContexts( let wrapper;
<OrganizationEdit organization={mockData} /> await act(async () => {
); wrapper = mountWithContexts(<OrganizationEdit organization={mockData} />);
});
const updatedOrgData = { const updatedOrgData = {
name: 'new name', name: 'new name',
@@ -39,21 +41,23 @@ describe('<OrganizationEdit />', () => {
}); });
test('handleSubmit associates and disassociates instance groups', async () => { test('handleSubmit associates and disassociates instance groups', async () => {
const wrapper = mountWithContexts( let wrapper;
<OrganizationEdit organization={mockData} /> await act(async () => {
); wrapper = mountWithContexts(<OrganizationEdit organization={mockData} />);
});
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, wrapper.find('OrganizationForm').invoke('handleSubmit')(
[3, 4], updatedOrgData,
[2] [3, 4],
); [2]
await sleep(1); );
});
expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(1, 3); expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(1, 3);
expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(1, 4); expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(1, 4);
@@ -63,14 +67,17 @@ describe('<OrganizationEdit />', () => {
); );
}); });
test('should navigate to organization detail when cancel is clicked', () => { test('should navigate to organization detail when cancel is clicked', async () => {
const history = createMemoryHistory({}); const history = createMemoryHistory({});
const wrapper = mountWithContexts( let wrapper;
<OrganizationEdit organization={mockData} />, await act(async () => {
{ context: { router: { history } } } wrapper = mountWithContexts(
); <OrganizationEdit organization={mockData} />,
{ context: { router: { history } } }
);
});
wrapper.find('button[aria-label="Cancel"]').prop('onClick')(); wrapper.find('button[aria-label="Cancel"]').invoke('onClick')();
expect(history.location.pathname).toEqual('/organizations/1/details'); expect(history.location.pathname).toEqual('/organizations/1/details');
}); });

View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '@testUtils/enzymeHelpers'; import { mountWithContexts } from '@testUtils/enzymeHelpers';
import { sleep } from '@testUtils/testUtils'; import { sleep } from '@testUtils/testUtils';
import { OrganizationsAPI } from '@api'; import { OrganizationsAPI } from '@api';
@@ -30,18 +30,20 @@ describe('<OrganizationForm />', () => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
test('should request related instance groups from api', () => { test('should request related instance groups from api', async () => {
mountWithContexts( await act(async () => {
<OrganizationForm mountWithContexts(
organization={mockData} <OrganizationForm
handleSubmit={jest.fn()} organization={mockData}
handleCancel={jest.fn()} handleSubmit={jest.fn()}
me={meConfig.me} handleCancel={jest.fn()}
/>, me={meConfig.me}
{ />,
context: { network }, {
} context: { network },
); }
);
});
expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalledTimes(1); expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalledTimes(1);
}); });
@@ -53,34 +55,39 @@ describe('<OrganizationForm />', () => {
results: mockInstanceGroups, results: mockInstanceGroups,
}, },
}); });
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={jest.fn()} <OrganizationForm
handleCancel={jest.fn()} organization={mockData}
me={meConfig.me} handleSubmit={jest.fn()}
/>, handleCancel={jest.fn()}
{ me={meConfig.me}
context: { network }, />,
} {
); context: { network },
}
);
});
await sleep(0);
expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalled(); expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalled();
expect(wrapper.find('OrganizationForm').state().instanceGroups).toEqual( expect(wrapper.find('OrganizationForm').state().instanceGroups).toEqual(
mockInstanceGroups mockInstanceGroups
); );
}); });
test('changing instance group successfully sets instanceGroups state', () => { test('changing instance group successfully sets instanceGroups state', async () => {
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={jest.fn()} <OrganizationForm
handleCancel={jest.fn()} organization={mockData}
me={meConfig.me} handleSubmit={jest.fn()}
/> handleCancel={jest.fn()}
); me={meConfig.me}
/>
);
});
const lookup = wrapper.find('InstanceGroupsLookup'); const lookup = wrapper.find('InstanceGroupsLookup');
expect(lookup.length).toBe(1); expect(lookup.length).toBe(1);
@@ -102,15 +109,18 @@ describe('<OrganizationForm />', () => {
]); ]);
}); });
test('changing inputs should update form values', () => { test('changing inputs should update form values', async () => {
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={jest.fn()} <OrganizationForm
handleCancel={jest.fn()} organization={mockData}
me={meConfig.me} handleSubmit={jest.fn()}
/> handleCancel={jest.fn()}
); me={meConfig.me}
/>
);
});
const form = wrapper.find('Formik'); const form = wrapper.find('Formik');
wrapper.find('input#org-name').simulate('change', { wrapper.find('input#org-name').simulate('change', {
@@ -127,21 +137,24 @@ describe('<OrganizationForm />', () => {
expect(form.state('values').max_hosts).toEqual('134'); expect(form.state('values').max_hosts).toEqual('134');
}); });
test('AnsibleSelect component renders if there are virtual environments', () => { test('AnsibleSelect component renders if there are virtual environments', async () => {
const config = { const config = {
custom_virtualenvs: ['foo', 'bar'], custom_virtualenvs: ['foo', 'bar'],
}; };
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={jest.fn()} <OrganizationForm
handleCancel={jest.fn()} organization={mockData}
me={meConfig.me} handleSubmit={jest.fn()}
/>, handleCancel={jest.fn()}
{ me={meConfig.me}
context: { config }, />,
} {
); context: { config },
}
);
});
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(
@@ -154,14 +167,17 @@ describe('<OrganizationForm />', () => {
test('calls handleSubmit when form submitted', async () => { test('calls handleSubmit when form submitted', async () => {
const handleSubmit = jest.fn(); const handleSubmit = jest.fn();
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={handleSubmit} <OrganizationForm
handleCancel={jest.fn()} organization={mockData}
me={meConfig.me} handleSubmit={handleSubmit}
/> handleCancel={jest.fn()}
); me={meConfig.me}
/>
);
});
expect(handleSubmit).not.toHaveBeenCalled(); expect(handleSubmit).not.toHaveBeenCalled();
wrapper.find('button[aria-label="Save"]').simulate('click'); wrapper.find('button[aria-label="Save"]').simulate('click');
await sleep(1); await sleep(1);
@@ -194,18 +210,20 @@ describe('<OrganizationForm />', () => {
OrganizationsAPI.update.mockResolvedValue(1, mockDataForm); OrganizationsAPI.update.mockResolvedValue(1, mockDataForm);
OrganizationsAPI.associateInstanceGroup.mockResolvedValue('done'); OrganizationsAPI.associateInstanceGroup.mockResolvedValue('done');
OrganizationsAPI.disassociateInstanceGroup.mockResolvedValue('done'); OrganizationsAPI.disassociateInstanceGroup.mockResolvedValue('done');
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={handleSubmit} <OrganizationForm
handleCancel={jest.fn()} organization={mockData}
me={meConfig.me} handleSubmit={handleSubmit}
/>, handleCancel={jest.fn()}
{ me={meConfig.me}
context: { network }, />,
} {
); context: { network },
await sleep(0); }
);
});
wrapper.find('InstanceGroupsLookup').prop('onChange')( wrapper.find('InstanceGroupsLookup').prop('onChange')(
[{ name: 'One', id: 1 }, { name: 'Three', id: 3 }], [{ name: 'One', id: 1 }, { name: 'Three', id: 3 }],
'instanceGroups' 'instanceGroups'
@@ -219,15 +237,17 @@ describe('<OrganizationForm />', () => {
test('handleSubmit is called with max_hosts value if it is in range', async () => { test('handleSubmit is called with max_hosts value if it is in range', async () => {
const handleSubmit = jest.fn(); const handleSubmit = jest.fn();
// normal mount let wrapper;
const wrapper = mountWithContexts( await act(async () => {
<OrganizationForm wrapper = mountWithContexts(
organization={mockData} <OrganizationForm
handleSubmit={handleSubmit} organization={mockData}
handleCancel={jest.fn()} handleSubmit={handleSubmit}
me={meConfig.me} handleCancel={jest.fn()}
/> me={meConfig.me}
); />
);
});
wrapper.find('button[aria-label="Save"]').simulate('click'); wrapper.find('button[aria-label="Save"]').simulate('click');
await sleep(0); await sleep(0);
expect(handleSubmit).toHaveBeenCalledWith( expect(handleSubmit).toHaveBeenCalledWith(
@@ -245,32 +265,38 @@ describe('<OrganizationForm />', () => {
test('handleSubmit does not get called if max_hosts value is out of range', async () => { test('handleSubmit does not get called if max_hosts value is out of range', async () => {
const handleSubmit = jest.fn(); const handleSubmit = jest.fn();
// not mount with Negative value // mount with negative value
let wrapper1;
const mockDataNegative = JSON.parse(JSON.stringify(mockData)); const mockDataNegative = JSON.parse(JSON.stringify(mockData));
mockDataNegative.max_hosts = -5; mockDataNegative.max_hosts = -5;
const wrapper1 = mountWithContexts( await act(async () => {
<OrganizationForm wrapper1 = mountWithContexts(
organization={mockDataNegative} <OrganizationForm
handleSubmit={handleSubmit} organization={mockDataNegative}
handleCancel={jest.fn()} handleSubmit={handleSubmit}
me={meConfig.me} handleCancel={jest.fn()}
/> me={meConfig.me}
); />
);
});
wrapper1.find('button[aria-label="Save"]').simulate('click'); wrapper1.find('button[aria-label="Save"]').simulate('click');
await sleep(0); await sleep(0);
expect(handleSubmit).not.toHaveBeenCalled(); expect(handleSubmit).not.toHaveBeenCalled();
// not mount with Out of Range value // mount with out of range value
let wrapper2;
const mockDataOoR = JSON.parse(JSON.stringify(mockData)); const mockDataOoR = JSON.parse(JSON.stringify(mockData));
mockDataOoR.max_hosts = 999999999999; mockDataOoR.max_hosts = 999999999999;
const wrapper2 = mountWithContexts( await act(async () => {
<OrganizationForm wrapper2 = mountWithContexts(
organization={mockDataOoR} <OrganizationForm
handleSubmit={handleSubmit} organization={mockDataOoR}
handleCancel={jest.fn()} handleSubmit={handleSubmit}
me={meConfig.me} handleCancel={jest.fn()}
/> me={meConfig.me}
); />
);
});
wrapper2.find('button[aria-label="Save"]').simulate('click'); wrapper2.find('button[aria-label="Save"]').simulate('click');
await sleep(0); await sleep(0);
expect(handleSubmit).not.toHaveBeenCalled(); expect(handleSubmit).not.toHaveBeenCalled();
@@ -282,14 +308,17 @@ describe('<OrganizationForm />', () => {
// mount with String value (default to zero) // mount with String value (default to zero)
const mockDataString = JSON.parse(JSON.stringify(mockData)); const mockDataString = JSON.parse(JSON.stringify(mockData));
mockDataString.max_hosts = 'Bee'; mockDataString.max_hosts = 'Bee';
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockDataString} wrapper = mountWithContexts(
handleSubmit={handleSubmit} <OrganizationForm
handleCancel={jest.fn()} organization={mockDataString}
me={meConfig.me} handleSubmit={handleSubmit}
/> handleCancel={jest.fn()}
); me={meConfig.me}
/>
);
});
wrapper.find('button[aria-label="Save"]').simulate('click'); wrapper.find('button[aria-label="Save"]').simulate('click');
await sleep(0); await sleep(0);
expect(handleSubmit).toHaveBeenCalledWith( expect(handleSubmit).toHaveBeenCalledWith(
@@ -304,17 +333,20 @@ describe('<OrganizationForm />', () => {
); );
}); });
test('calls "handleCancel" when Cancel button is clicked', () => { test('calls "handleCancel" when Cancel button is clicked', async () => {
const handleCancel = jest.fn(); const handleCancel = jest.fn();
const wrapper = mountWithContexts( let wrapper;
<OrganizationForm await act(async () => {
organization={mockData} wrapper = mountWithContexts(
handleSubmit={jest.fn()} <OrganizationForm
handleCancel={handleCancel} organization={mockData}
me={meConfig.me} handleSubmit={jest.fn()}
/> handleCancel={handleCancel}
); me={meConfig.me}
/>
);
});
expect(handleCancel).not.toHaveBeenCalled(); expect(handleCancel).not.toHaveBeenCalled();
wrapper.find('button[aria-label="Cancel"]').prop('onClick')(); wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
expect(handleCancel).toBeCalled(); expect(handleCancel).toBeCalled();

View File

@@ -144,8 +144,8 @@ describe('<ProjectEdit />', () => {
wrapper = mountWithContexts(<ProjectEdit project={projectData} />, { wrapper = mountWithContexts(<ProjectEdit project={projectData} />, {
context: { router: { history } }, context: { router: { history } },
}); });
wrapper.find('CardCloseButton').simulate('click');
}); });
wrapper.find('CardCloseButton').simulate('click');
expect(history.location.pathname).toEqual('/projects/123/details'); expect(history.location.pathname).toEqual('/projects/123/details');
}); });
@@ -157,7 +157,9 @@ describe('<ProjectEdit />', () => {
}); });
}); });
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0); await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
wrapper.find('ProjectEdit button[aria-label="Cancel"]').simulate('click'); await act(async () => {
wrapper.find('ProjectEdit button[aria-label="Cancel"]').simulate('click');
});
expect(history.location.pathname).toEqual('/projects/123/details'); expect(history.location.pathname).toEqual('/projects/123/details');
}); });
}); });

View File

@@ -30,15 +30,17 @@ describe('<TeamForm />', () => {
jest.clearAllMocks(); jest.clearAllMocks();
}); });
test('changing inputs should update form values', () => { test('changing inputs should update form values', async () => {
wrapper = mountWithContexts( await act(async () => {
<TeamForm wrapper = mountWithContexts(
team={mockData} <TeamForm
handleSubmit={jest.fn()} team={mockData}
handleCancel={jest.fn()} handleSubmit={jest.fn()}
me={meConfig.me} handleCancel={jest.fn()}
/> me={meConfig.me}
); />
);
});
const form = wrapper.find('Formik'); const form = wrapper.find('Formik');
wrapper.find('input#team-name').simulate('change', { wrapper.find('input#team-name').simulate('change', {
@@ -78,17 +80,19 @@ describe('<TeamForm />', () => {
expect(handleSubmit).toBeCalled(); expect(handleSubmit).toBeCalled();
}); });
test('calls handleCancel when Cancel button is clicked', () => { test('calls handleCancel when Cancel button is clicked', async () => {
const handleCancel = jest.fn(); const handleCancel = jest.fn();
wrapper = mountWithContexts( await act(async () => {
<TeamForm wrapper = mountWithContexts(
team={mockData} <TeamForm
handleSubmit={jest.fn()} team={mockData}
handleCancel={handleCancel} handleSubmit={jest.fn()}
me={meConfig.me} handleCancel={handleCancel}
/> me={meConfig.me}
); />
);
});
expect(handleCancel).not.toHaveBeenCalled(); expect(handleCancel).not.toHaveBeenCalled();
wrapper.find('button[aria-label="Cancel"]').prop('onClick')(); wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
expect(handleCancel).toBeCalled(); expect(handleCancel).toBeCalled();