Skip to content

Commit 8e04db6

Browse files
alisonelizabethalisonelizabeth
committed
remove nextTick and waitFor from tests
1 parent b412b68 commit 8e04db6

7 files changed

Lines changed: 120 additions & 136 deletions

File tree

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,42 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6+
import { act } from 'react-dom/test-utils';
7+
68
import { TestBed } from '../../../../../test_utils';
79

810
export const getFormActions = (testBed: TestBed) => {
9-
const { find, form } = testBed;
11+
const { find, form, component } = testBed;
1012

1113
// User actions
12-
const clickSubmitButton = () => {
13-
find('submitButton').simulate('click');
14-
};
14+
const clickSubmitButton = async () => {
15+
await act(async () => {
16+
find('submitButton').simulate('click');
17+
});
1518

16-
const clickAddDocumentsButton = () => {
17-
find('addDocumentsButton').simulate('click');
19+
component.update();
1820
};
1921

20-
const clickShowRequestLink = () => {
21-
find('showRequestLink').simulate('click');
22+
const clickShowRequestLink = async () => {
23+
await act(async () => {
24+
find('showRequestLink').simulate('click');
25+
});
26+
27+
component.update();
2228
};
2329

2430
const toggleVersionSwitch = () => {
25-
form.toggleEuiSwitch('versionToggle');
26-
};
31+
act(() => {
32+
form.toggleEuiSwitch('versionToggle');
33+
});
2734

28-
const toggleOnFailureSwitch = () => {
29-
form.toggleEuiSwitch('onFailureToggle');
35+
component.update();
3036
};
3137

3238
return {
3339
clickSubmitButton,
3440
clickShowRequestLink,
3541
toggleVersionSwitch,
36-
toggleOnFailureSwitch,
37-
clickAddDocumentsButton,
3842
};
3943
};
4044

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
TestBed,
1212
TestBedConfig,
1313
findTestSubject,
14-
nextTick,
1514
} from '../../../../../test_utils';
1615
import { PipelinesList } from '../../../public/application/sections/pipelines_list';
1716
import { WithAppDependencies } from './setup_environment';
@@ -32,13 +31,17 @@ export type PipelineListTestBed = TestBed<PipelineListTestSubjects> & {
3231
};
3332

3433
const createActions = (testBed: TestBed) => {
35-
const { find } = testBed;
36-
3734
/**
3835
* User Actions
3936
*/
40-
const clickReloadButton = () => {
41-
find('reloadButton').simulate('click');
37+
const clickReloadButton = async () => {
38+
const { component, find } = testBed;
39+
40+
await act(async () => {
41+
find('reloadButton').simulate('click');
42+
});
43+
44+
component.update();
4245
};
4346

4447
const clickPipelineAt = async (index: number) => {
@@ -49,16 +52,19 @@ const createActions = (testBed: TestBed) => {
4952
await act(async () => {
5053
const { href } = pipelineLink.props();
5154
router.navigateTo(href!);
52-
await nextTick();
53-
component.update();
5455
});
56+
component.update();
5557
};
5658

5759
const clickActionMenu = (pipelineName: string) => {
5860
const { component } = testBed;
5961

60-
// When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
61-
component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
62+
act(() => {
63+
// When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
64+
component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
65+
});
66+
67+
component.update();
6268
};
6369

6470
const clickPipelineAction = (pipelineName: string, action: 'edit' | 'clone' | 'delete') => {
@@ -67,7 +73,11 @@ const createActions = (testBed: TestBed) => {
6773

6874
clickActionMenu(pipelineName);
6975

70-
component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
76+
act(() => {
77+
component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
78+
});
79+
80+
component.update();
7181
};
7282

7383
return {

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66
import React from 'react';
7+
import axios from 'axios';
8+
import axiosXhrAdapter from 'axios/lib/adapters/xhr';
79
import { LocationDescriptorObject } from 'history';
10+
import { HttpSetup } from 'kibana/public';
11+
812
import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
913
import {
1014
notificationServiceMock,
11-
fatalErrorsServiceMock,
1215
docLinksServiceMock,
13-
injectedMetadataServiceMock,
1416
scopedHistoryMock,
1517
} from '../../../../../../src/core/public/mocks';
1618

1719
import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks';
1820

19-
import { HttpService } from '../../../../../../src/core/public/http';
20-
2121
import {
2222
breadcrumbService,
2323
documentationService,
@@ -27,10 +27,7 @@ import {
2727

2828
import { init as initHttpRequests } from './http_requests';
2929

30-
const httpServiceSetupMock = new HttpService().setup({
31-
injectedMetadata: injectedMetadataServiceMock.createSetupContract(),
32-
fatalErrors: fatalErrorsServiceMock.createSetupContract(),
33-
});
30+
const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
3431

3532
const history = scopedHistoryMock.create();
3633
history.createHref.mockImplementation((location: LocationDescriptorObject) => {
@@ -53,7 +50,7 @@ const appServices = {
5350

5451
export const setupEnvironment = () => {
5552
uiMetricService.setup(usageCollectionPluginMock.createSetupContract());
56-
apiService.setup(httpServiceSetupMock, uiMetricService);
53+
apiService.setup((mockHttpClient as unknown) as HttpSetup, uiMetricService);
5754
documentationService.setup(docLinksServiceMock.createStartContract());
5855
breadcrumbService.setup(() => {});
5956

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ jest.mock('@elastic/eui', () => {
2828
};
2929
});
3030

31-
// FLAKY: https://github.com/elastic/kibana/issues/66856
32-
describe.skip('<PipelinesClone />', () => {
31+
describe('<PipelinesClone />', () => {
3332
let testBed: PipelinesCloneTestBed;
3433

3534
const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -38,13 +37,14 @@ describe.skip('<PipelinesClone />', () => {
3837
server.restore();
3938
});
4039

41-
beforeEach(async () => {
42-
httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
40+
httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
4341

42+
beforeEach(async () => {
4443
await act(async () => {
4544
testBed = await setup();
46-
await testBed.waitFor('pipelineForm');
4745
});
46+
47+
testBed.component.update();
4848
});
4949

5050
test('should render the correct page header', () => {
@@ -61,12 +61,9 @@ describe.skip('<PipelinesClone />', () => {
6161

6262
describe('form submission', () => {
6363
it('should send the correct payload', async () => {
64-
const { actions, waitFor } = testBed;
64+
const { actions } = testBed;
6565

66-
await act(async () => {
67-
actions.clickSubmitButton();
68-
await waitFor('pipelineForm', 0);
69-
});
66+
await actions.clickSubmitButton();
7067

7168
const latestRequest = server.requests[server.requests.length - 1];
7269

@@ -75,7 +72,7 @@ describe.skip('<PipelinesClone />', () => {
7572
name: `${PIPELINE_TO_CLONE.name}-copy`,
7673
};
7774

78-
expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
75+
expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
7976
});
8077
});
8178
});

‎x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx‎

Lines changed: 37 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import React from 'react';
77
import { act } from 'react-dom/test-utils';
88

9-
import { setupEnvironment, pageHelpers, nextTick } from './helpers';
9+
import { setupEnvironment, pageHelpers } from './helpers';
1010
import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers';
1111

1212
import { nestedProcessorsErrorFixture } from './fixtures';
@@ -43,8 +43,9 @@ describe('<PipelinesCreate />', () => {
4343
beforeEach(async () => {
4444
await act(async () => {
4545
testBed = await setup();
46-
await testBed.waitFor('pipelineForm');
4746
});
47+
48+
testBed.component.update();
4849
});
4950

5051
test('should render the correct page header', () => {
@@ -60,28 +61,20 @@ describe('<PipelinesCreate />', () => {
6061
});
6162

6263
test('should toggle the version field', async () => {
63-
const { actions, component, exists } = testBed;
64+
const { actions, exists } = testBed;
6465

6566
// Version field should be hidden by default
6667
expect(exists('versionField')).toBe(false);
6768

68-
await act(async () => {
69-
actions.toggleVersionSwitch();
70-
await nextTick();
71-
component.update();
72-
});
69+
actions.toggleVersionSwitch();
7370

7471
expect(exists('versionField')).toBe(true);
7572
});
7673

7774
test('should show the request flyout', async () => {
78-
const { actions, component, find, exists } = testBed;
75+
const { actions, find, exists } = testBed;
7976

80-
await act(async () => {
81-
actions.clickShowRequestLink();
82-
await nextTick();
83-
component.update();
84-
});
77+
await actions.clickShowRequestLink();
8578

8679
// Verify request flyout opens
8780
expect(exists('requestFlyout')).toBe(true);
@@ -92,23 +85,18 @@ describe('<PipelinesCreate />', () => {
9285
test('should prevent form submission if required fields are missing', async () => {
9386
const { form, actions, component, find } = testBed;
9487

95-
await act(async () => {
96-
actions.clickSubmitButton();
97-
await nextTick();
98-
component.update();
99-
});
88+
await actions.clickSubmitButton();
10089

10190
expect(form.getErrorsMessages()).toEqual(['Name is required.']);
10291
expect(find('submitButton').props().disabled).toEqual(true);
10392

104-
// Add required fields and verify button is enabled again
105-
form.setInputValue('nameField.input', 'my_pipeline');
106-
10793
await act(async () => {
108-
await nextTick();
109-
component.update();
94+
// Add required fields and verify button is enabled again
95+
form.setInputValue('nameField.input', 'my_pipeline');
11096
});
11197

98+
component.update();
99+
112100
expect(find('submitButton').props().disabled).toEqual(false);
113101
});
114102
});
@@ -117,23 +105,27 @@ describe('<PipelinesCreate />', () => {
117105
beforeEach(async () => {
118106
await act(async () => {
119107
testBed = await setup();
108+
});
120109

121-
const { waitFor, form } = testBed;
110+
testBed.component.update();
111+
112+
await act(async () => {
113+
testBed.form.setInputValue('nameField.input', 'my_pipeline');
114+
});
122115

123-
await waitFor('pipelineForm');
116+
testBed.component.update();
124117

125-
form.setInputValue('nameField.input', 'my_pipeline');
126-
form.setInputValue('descriptionField.input', 'pipeline description');
118+
await act(async () => {
119+
testBed.form.setInputValue('descriptionField.input', 'pipeline description');
127120
});
121+
122+
testBed.component.update();
128123
});
129124

130125
test('should send the correct payload', async () => {
131-
const { actions, waitFor } = testBed;
126+
const { actions } = testBed;
132127

133-
await act(async () => {
134-
actions.clickSubmitButton();
135-
await waitFor('pipelineForm', 0);
136-
});
128+
await actions.clickSubmitButton();
137129

138130
const latestRequest = server.requests[server.requests.length - 1];
139131

@@ -143,11 +135,11 @@ describe('<PipelinesCreate />', () => {
143135
processors: [],
144136
};
145137

146-
expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
138+
expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
147139
});
148140

149141
test('should surface API errors from the request', async () => {
150-
const { actions, find, exists, waitFor } = testBed;
142+
const { actions, find, exists } = testBed;
151143

152144
const error = {
153145
status: 409,
@@ -157,29 +149,29 @@ describe('<PipelinesCreate />', () => {
157149

158150
httpRequestsMockHelpers.setCreatePipelineResponse(undefined, { body: error });
159151

160-
await act(async () => {
161-
actions.clickSubmitButton();
162-
await waitFor('savePipelineError');
163-
});
152+
await actions.clickSubmitButton();
164153

165154
expect(exists('savePipelineError')).toBe(true);
166155
expect(find('savePipelineError').text()).toContain(error.message);
167156
});
168157

169158
test('displays nested pipeline errors as a flat list', async () => {
170-
const { actions, find, exists, waitFor } = testBed;
159+
const { actions, find, exists, component } = testBed;
171160
httpRequestsMockHelpers.setCreatePipelineResponse(undefined, {
172161
body: nestedProcessorsErrorFixture,
173162
});
174163

175-
await act(async () => {
176-
actions.clickSubmitButton();
177-
await waitFor('savePipelineError');
178-
});
164+
await actions.clickSubmitButton();
179165

180166
expect(exists('savePipelineError')).toBe(true);
181167
expect(exists('savePipelineError.showErrorsButton')).toBe(true);
182-
find('savePipelineError.showErrorsButton').simulate('click');
168+
169+
await act(async () => {
170+
find('savePipelineError.showErrorsButton').simulate('click');
171+
});
172+
173+
component.update();
174+
183175
expect(exists('savePipelineError.hideErrorsButton')).toBe(true);
184176
expect(exists('savePipelineError.showErrorsButton')).toBe(false);
185177
expect(find('savePipelineError').find('li').length).toBe(8);

0 commit comments

Comments
 (0)