[Ingest pipelines] Clean up component integration tests (#78838)

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

@@ -3,38 +3,42 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { act } from 'react-dom/test-utils';
+
 import { TestBed } from '../../../../../test_utils';
 
 export const getFormActions = (testBed: TestBed) => {
-  const { find, form } = testBed;
+  const { find, form, component } = testBed;
 
   // User actions
-  const clickSubmitButton = () => {
-    find('submitButton').simulate('click');
-  };
+  const clickSubmitButton = async () => {
+    await act(async () => {
+      find('submitButton').simulate('click');
+    });
 
-  const clickAddDocumentsButton = () => {
-    find('addDocumentsButton').simulate('click');
+    component.update();
   };
 
-  const clickShowRequestLink = () => {
-    find('showRequestLink').simulate('click');
+  const clickShowRequestLink = async () => {
+    await act(async () => {
+      find('showRequestLink').simulate('click');
+    });
+
+    component.update();
   };
 
   const toggleVersionSwitch = () => {
-    form.toggleEuiSwitch('versionToggle');
-  };
+    act(() => {
+      form.toggleEuiSwitch('versionToggle');
+    });
 
-  const toggleOnFailureSwitch = () => {
-    form.toggleEuiSwitch('onFailureToggle');
+    component.update();
   };
 
   return {
     clickSubmitButton,
     clickShowRequestLink,
     toggleVersionSwitch,
-    toggleOnFailureSwitch,
-    clickAddDocumentsButton,
   };
 };
 

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

@@ -11,7 +11,6 @@ import {
   TestBed,
   TestBedConfig,
   findTestSubject,
-  nextTick,
 } from '../../../../../test_utils';
 import { PipelinesList } from '../../../public/application/sections/pipelines_list';
 import { WithAppDependencies } from './setup_environment';
@@ -32,13 +31,17 @@ export type PipelineListTestBed = TestBed<PipelineListTestSubjects> & {
 };
 
 const createActions = (testBed: TestBed) => {
-  const { find } = testBed;
-
   /**
    * User Actions
    */
-  const clickReloadButton = () => {
-    find('reloadButton').simulate('click');
+  const clickReloadButton = async () => {
+    const { component, find } = testBed;
+
+    await act(async () => {
+      find('reloadButton').simulate('click');
+    });
+
+    component.update();
   };
 
   const clickPipelineAt = async (index: number) => {
@@ -49,16 +52,19 @@ const createActions = (testBed: TestBed) => {
     await act(async () => {
       const { href } = pipelineLink.props();
       router.navigateTo(href!);
-      await nextTick();
-      component.update();
     });
+    component.update();
   };
 
   const clickActionMenu = (pipelineName: string) => {
     const { component } = testBed;
 
-    // When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
-    component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
+    act(() => {
+      // When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
+      component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
+    });
+
+    component.update();
   };
 
   const clickPipelineAction = (pipelineName: string, action: 'edit' | 'clone' | 'delete') => {
@@ -67,7 +73,11 @@ const createActions = (testBed: TestBed) => {
 
     clickActionMenu(pipelineName);
 
-    component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
+    act(() => {
+      component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
+    });
+
+    component.update();
   };
 
   return {

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

@@ -4,20 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
+import axios from 'axios';
+import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 import { LocationDescriptorObject } from 'history';
+import { HttpSetup } from 'kibana/public';
+
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import {
   notificationServiceMock,
-  fatalErrorsServiceMock,
   docLinksServiceMock,
-  injectedMetadataServiceMock,
   scopedHistoryMock,
 } from '../../../../../../src/core/public/mocks';
 
 import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks';
 
-import { HttpService } from '../../../../../../src/core/public/http';
-
 import {
   breadcrumbService,
   documentationService,
@@ -27,10 +27,7 @@ import {
 
 import { init as initHttpRequests } from './http_requests';
 
-const httpServiceSetupMock = new HttpService().setup({
-  injectedMetadata: injectedMetadataServiceMock.createSetupContract(),
-  fatalErrors: fatalErrorsServiceMock.createSetupContract(),
-});
+const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
 
 const history = scopedHistoryMock.create();
 history.createHref.mockImplementation((location: LocationDescriptorObject) => {
@@ -53,7 +50,7 @@ const appServices = {
 
 export const setupEnvironment = () => {
   uiMetricService.setup(usageCollectionPluginMock.createSetupContract());
-  apiService.setup(httpServiceSetupMock, uiMetricService);
+  apiService.setup((mockHttpClient as unknown) as HttpSetup, uiMetricService);
   documentationService.setup(docLinksServiceMock.createStartContract());
   breadcrumbService.setup(() => {});
 

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

@@ -28,8 +28,7 @@ jest.mock('@elastic/eui', () => {
   };
 });
 
-// FLAKY: https://github.com/elastic/kibana/issues/66856
-describe.skip('<PipelinesClone />', () => {
+describe('<PipelinesClone />', () => {
   let testBed: PipelinesCloneTestBed;
 
   const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -38,13 +37,14 @@ describe.skip('<PipelinesClone />', () => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
+  httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
 
+  beforeEach(async () => {
     await act(async () => {
       testBed = await setup();
-      await testBed.waitFor('pipelineForm');
     });
+
+    testBed.component.update();
   });
 
   test('should render the correct page header', () => {
@@ -61,12 +61,9 @@ describe.skip('<PipelinesClone />', () => {
 
   describe('form submission', () => {
     it('should send the correct payload', async () => {
-      const { actions, waitFor } = testBed;
+      const { actions } = testBed;
 
-      await act(async () => {
-        actions.clickSubmitButton();
-        await waitFor('pipelineForm', 0);
-      });
+      await actions.clickSubmitButton();
 
       const latestRequest = server.requests[server.requests.length - 1];
 
@@ -75,7 +72,7 @@ describe.skip('<PipelinesClone />', () => {
         name: `${PIPELINE_TO_CLONE.name}-copy`,
       };
 
-      expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+      expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
     });
   });
 });

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { setupEnvironment, pageHelpers, nextTick } from './helpers';
+import { setupEnvironment, pageHelpers } from './helpers';
 import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers';
 
 import { nestedProcessorsErrorFixture } from './fixtures';
@@ -43,8 +43,9 @@ describe('<PipelinesCreate />', () => {
     beforeEach(async () => {
       await act(async () => {
         testBed = await setup();
-        await testBed.waitFor('pipelineForm');
       });
+
+      testBed.component.update();
     });
 
     test('should render the correct page header', () => {
@@ -60,28 +61,20 @@ describe('<PipelinesCreate />', () => {
     });
 
     test('should toggle the version field', async () => {
-      const { actions, component, exists } = testBed;
+      const { actions, exists } = testBed;
 
       // Version field should be hidden by default
       expect(exists('versionField')).toBe(false);
 
-      await act(async () => {
-        actions.toggleVersionSwitch();
-        await nextTick();
-        component.update();
-      });
+      actions.toggleVersionSwitch();
 
       expect(exists('versionField')).toBe(true);
     });
 
     test('should show the request flyout', async () => {
-      const { actions, component, find, exists } = testBed;
+      const { actions, find, exists } = testBed;
 
-      await act(async () => {
-        actions.clickShowRequestLink();
-        await nextTick();
-        component.update();
-      });
+      await actions.clickShowRequestLink();
 
       // Verify request flyout opens
       expect(exists('requestFlyout')).toBe(true);
@@ -92,23 +85,18 @@ describe('<PipelinesCreate />', () => {
       test('should prevent form submission if required fields are missing', async () => {
         const { form, actions, component, find } = testBed;
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await nextTick();
-          component.update();
-        });
+        await actions.clickSubmitButton();
 
         expect(form.getErrorsMessages()).toEqual(['Name is required.']);
         expect(find('submitButton').props().disabled).toEqual(true);
 
-        // Add required fields and verify button is enabled again
-        form.setInputValue('nameField.input', 'my_pipeline');
-
         await act(async () => {
-          await nextTick();
-          component.update();
+          // Add required fields and verify button is enabled again
+          form.setInputValue('nameField.input', 'my_pipeline');
         });
 
+        component.update();
+
         expect(find('submitButton').props().disabled).toEqual(false);
       });
     });
@@ -117,23 +105,27 @@ describe('<PipelinesCreate />', () => {
       beforeEach(async () => {
         await act(async () => {
           testBed = await setup();
+        });
 
-          const { waitFor, form } = testBed;
+        testBed.component.update();
+
+        await act(async () => {
+          testBed.form.setInputValue('nameField.input', 'my_pipeline');
+        });
 
-          await waitFor('pipelineForm');
+        testBed.component.update();
 
-          form.setInputValue('nameField.input', 'my_pipeline');
-          form.setInputValue('descriptionField.input', 'pipeline description');
+        await act(async () => {
+          testBed.form.setInputValue('descriptionField.input', 'pipeline description');
         });
+
+        testBed.component.update();
       });
 
       test('should send the correct payload', async () => {
-        const { actions, waitFor } = testBed;
+        const { actions } = testBed;
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await waitFor('pipelineForm', 0);
-        });
+        await actions.clickSubmitButton();
 
         const latestRequest = server.requests[server.requests.length - 1];
 
@@ -143,11 +135,11 @@ describe('<PipelinesCreate />', () => {
           processors: [],
         };
 
-        expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
+        expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
       });
 
       test('should surface API errors from the request', async () => {
-        const { actions, find, exists, waitFor } = testBed;
+        const { actions, find, exists } = testBed;
 
         const error = {
           status: 409,
@@ -157,29 +149,29 @@ describe('<PipelinesCreate />', () => {
 
         httpRequestsMockHelpers.setCreatePipelineResponse(undefined, { body: error });
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await waitFor('savePipelineError');
-        });
+        await actions.clickSubmitButton();
 
         expect(exists('savePipelineError')).toBe(true);
         expect(find('savePipelineError').text()).toContain(error.message);
       });
 
       test('displays nested pipeline errors as a flat list', async () => {
-        const { actions, find, exists, waitFor } = testBed;
+        const { actions, find, exists, component } = testBed;
         httpRequestsMockHelpers.setCreatePipelineResponse(undefined, {
           body: nestedProcessorsErrorFixture,
         });
 
-        await act(async () => {
-          actions.clickSubmitButton();
-          await waitFor('savePipelineError');
-        });
+        await actions.clickSubmitButton();
 
         expect(exists('savePipelineError')).toBe(true);
         expect(exists('savePipelineError.showErrorsButton')).toBe(true);
-        find('savePipelineError.showErrorsButton').simulate('click');
+
+        await act(async () => {
+          find('savePipelineError.showErrorsButton').simulate('click');
+        });
+
+        component.update();
+
         expect(exists('savePipelineError.hideErrorsButton')).toBe(true);
         expect(exists('savePipelineError.showErrorsButton')).toBe(false);
         expect(find('savePipelineError').find('li').length).toBe(8);