[Remote clusters] Refactor tests (#82517) (#82718)

elastic · Nov 5, 2020 · 5fbe4f0 · 5fbe4f0
1 parent cb0bc2f
commit 5fbe4f0
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 82 deletions.
diff --git a/...ck/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.js b/...ck/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.helpers.js
@@ -3,10 +3,10 @@
  * 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 { registerTestBed } from '../../../../../test_utils';
 
-/* eslint-disable @kbn/eslint/no-restricted-paths */
 import { RemoteClusterAdd } from '../../../public/application/sections/remote_cluster_add';
 import { createRemoteClustersStore } from '../../../public/application/store';
 import { registerRouter } from '../../../public/application/services/routing';
@@ -24,8 +24,12 @@ export const setup = (props) => {
   const testBed = initTestBed(props);
 
   // User actions
-  const clickSaveForm = () => {
-    testBed.find('remoteClusterFormSaveButton').simulate('click');
+  const clickSaveForm = async () => {
+    await act(async () => {
+      testBed.find('remoteClusterFormSaveButton').simulate('click');
+    });
+
+    testBed.component.update();
   };
 
   return {

diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.js b/x-pack/plugins/remote_clusters/__jest__/client_integration/add/remote_clusters_add.test.js
@@ -3,8 +3,9 @@
  * 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 { nextTick, setupEnvironment } from '../helpers';
+import { setupEnvironment } from '../helpers';
 import { NON_ALPHA_NUMERIC_CHARS, ACCENTED_CHARS } from './special_characters';
 import { setup } from './remote_clusters_add.helpers';
 
@@ -15,6 +16,7 @@ describe('Create Remote cluster', () => {
     let actions;
     let form;
     let server;
+    let component;
 
     beforeAll(() => {
       ({ server } = setupEnvironment());
@@ -24,8 +26,11 @@ describe('Create Remote cluster', () => {
       server.restore();
     });
 
-    beforeEach(() => {
-      ({ form, exists, find, actions } = setup());
+    beforeEach(async () => {
+      await act(async () => {
+        ({ form, exists, find, actions, component } = setup());
+      });
+      component.update();
     });
 
     test('should have the title of the page set correctly', () => {
@@ -45,7 +50,11 @@ describe('Create Remote cluster', () => {
         false
       );
 
-      form.toggleEuiSwitch('remoteClusterFormSkipUnavailableFormToggle');
+      act(() => {
+        form.toggleEuiSwitch('remoteClusterFormSkipUnavailableFormToggle');
+      });
+
+      component.update();
 
       expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(true);
     });
@@ -56,16 +65,20 @@ describe('Create Remote cluster', () => {
       // By default it should be set to "false"
       expect(find('remoteClusterFormConnectionModeToggle').props()['aria-checked']).toBe(false);
 
-      form.toggleEuiSwitch('remoteClusterFormConnectionModeToggle');
+      act(() => {
+        form.toggleEuiSwitch('remoteClusterFormConnectionModeToggle');
+      });
+
+      component.update();
 
       expect(find('remoteClusterFormConnectionModeToggle').props()['aria-checked']).toBe(true);
     });
 
-    test('should display errors and disable the save button when clicking "save" without filling the form', () => {
+    test('should display errors and disable the save button when clicking "save" without filling the form', async () => {
       expect(exists('remoteClusterFormGlobalError')).toBe(false);
       expect(find('remoteClusterFormSaveButton').props().disabled).toBe(false);
 
-      actions.clickSaveForm();
+      await actions.clickSaveForm();
 
       expect(exists('remoteClusterFormGlobalError')).toBe(true);
       expect(form.getErrorsMessages()).toEqual([
@@ -83,26 +96,30 @@ describe('Create Remote cluster', () => {
       let form;
 
       beforeEach(async () => {
-        ({ component, form, actions } = setup());
+        await act(async () => {
+          ({ component, form, actions } = setup());
+        });
 
-        await nextTick();
         component.update();
       });
 
-      test('should not allow spaces', () => {
+      test('should not allow spaces', async () => {
         form.setInputValue('remoteClusterFormNameInput', 'with space');
-        actions.clickSaveForm();
+
+        await actions.clickSaveForm();
+
         expect(form.getErrorsMessages()).toContain('Spaces are not allowed in the name.');
       });
 
-      test('should only allow alpha-numeric characters, "-" (dash) and "_" (underscore)', () => {
+      test('should only allow alpha-numeric characters, "-" (dash) and "_" (underscore)', async () => {
         const expectInvalidChar = (char) => {
           if (char === '-' || char === '_') {
             return;
           }
 
           try {
             form.setInputValue('remoteClusterFormNameInput', `with${char}`);
+
             expect(form.getErrorsMessages()).toContain(
               `Remove the character ${char} from the name.`
             );
@@ -111,7 +128,7 @@ describe('Create Remote cluster', () => {
           }
         };
 
-        actions.clickSaveForm(); // display form errors
+        await actions.clickSaveForm(); // display form errors
 
         [...NON_ALPHA_NUMERIC_CHARS, ...ACCENTED_CHARS].forEach(expectInvalidChar);
       });
@@ -120,13 +137,20 @@ describe('Create Remote cluster', () => {
     describe('seeds', () => {
       let actions;
       let form;
+      let component;
 
       beforeEach(async () => {
-        ({ form, actions } = setup());
+        await act(async () => {
+          ({ form, actions, component } = setup());
+        });
+
+        component.update();
+
+        form.setInputValue('remoteClusterFormNameInput', 'remote_cluster_test');
       });
 
-      test('should only allow alpha-numeric characters and "-" (dash) in the node "host" part', () => {
-        actions.clickSaveForm(); // display form errors
+      test('should only allow alpha-numeric characters and "-" (dash) in the node "host" part', async () => {
+        await actions.clickSaveForm(); // display form errors
 
         const notInArray = (array) => (value) => array.indexOf(value) < 0;
 
@@ -142,8 +166,8 @@ describe('Create Remote cluster', () => {
           .forEach(expectInvalidChar);
       });
 
-      test('should require a numeric "port" to be set', () => {
-        actions.clickSaveForm();
+      test('should require a numeric "port" to be set', async () => {
+        await actions.clickSaveForm();
 
         form.setComboBoxValue('remoteClusterFormSeedsInput', '192.168.1.1');
         expect(form.getErrorsMessages()).toContain('A port is required.');
@@ -156,16 +180,25 @@ describe('Create Remote cluster', () => {
     describe('proxy address', () => {
       let actions;
       let form;
+      let component;
 
       beforeEach(async () => {
-        ({ form, actions } = setup());
+        await act(async () => {
+          ({ form, actions, component } = setup());
+        });
 
-        // Enable "proxy" mode
-        form.toggleEuiSwitch('remoteClusterFormConnectionModeToggle');
+        component.update();
+
+        act(() => {
+          // Enable "proxy" mode
+          form.toggleEuiSwitch('remoteClusterFormConnectionModeToggle');
+        });
+
+        component.update();
       });
 
-      test('should only allow alpha-numeric characters and "-" (dash) in the proxy address "host" part', () => {
-        actions.clickSaveForm(); // display form errors
+      test('should only allow alpha-numeric characters and "-" (dash) in the proxy address "host" part', async () => {
+        await actions.clickSaveForm(); // display form errors
 
         const notInArray = (array) => (value) => array.indexOf(value) < 0;
 
@@ -181,8 +214,8 @@ describe('Create Remote cluster', () => {
           .forEach(expectInvalidChar);
       });
 
-      test('should require a numeric "port" to be set', () => {
-        actions.clickSaveForm();
+      test('should require a numeric "port" to be set', async () => {
+        await actions.clickSaveForm();
 
         form.setInputValue('remoteClusterFormProxyAddressInput', '192.168.1.1');
         expect(form.getErrorsMessages()).toContain('A port is required.');

diff --git a/.../plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.helpers.js b/.../plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.helpers.js
@@ -6,7 +6,6 @@
 
 import { registerTestBed } from '../../../../../test_utils';
 
-/* eslint-disable @kbn/eslint/no-restricted-paths */
 import { RemoteClusterEdit } from '../../../public/application/sections/remote_cluster_edit';
 import { createRemoteClustersStore } from '../../../public/application/store';
 import { registerRouter } from '../../../public/application/services/routing';

diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.test.js b/x-pack/plugins/remote_clusters/__jest__/client_integration/edit/remote_clusters_edit.test.js
@@ -16,28 +16,23 @@ import {
 } from './remote_clusters_edit.helpers';
 
 describe('Edit Remote cluster', () => {
-  let server;
-  let httpRequestsMockHelpers;
   let component;
   let find;
   let exists;
-  let waitFor;
 
-  beforeAll(() => {
-    ({ server, httpRequestsMockHelpers } = setupEnvironment());
-  });
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
 
   afterAll(() => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadRemoteClustersResponse([REMOTE_CLUSTER_EDIT]);
+  httpRequestsMockHelpers.setLoadRemoteClustersResponse([REMOTE_CLUSTER_EDIT]);
 
+  beforeEach(async () => {
     await act(async () => {
-      ({ component, find, exists, waitFor } = setup());
-      await waitFor('remoteClusterForm');
+      ({ component, find, exists } = setup());
     });
+    component.update();
   });
 
   test('should have the title of the page set correctly', () => {
@@ -59,9 +54,10 @@ describe('Edit Remote cluster', () => {
 
     await act(async () => {
       addRemoteClusterTestBed = setupRemoteClustersAdd();
-      addRemoteClusterTestBed.waitFor('remoteClusterAddPage');
     });
 
+    addRemoteClusterTestBed.component.update();
+
     const formEdit = component.find(RemoteClusterForm);
     const formAdd = addRemoteClusterTestBed.component.find(RemoteClusterForm);
 

diff --git a/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.js b/x-pack/plugins/remote_clusters/__jest__/client_integration/helpers/setup_environment.js
@@ -3,20 +3,17 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import axios from 'axios';
+import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 
 import {
   notificationServiceMock,
   fatalErrorsServiceMock,
   docLinksServiceMock,
-  injectedMetadataServiceMock,
 } from '../../../../../../src/core/public/mocks';
 
 import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks';
 
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { HttpService } from '../../../../../../src/core/public/http';
-
-/* eslint-disable @kbn/eslint/no-restricted-paths */
 import { init as initBreadcrumb } from '../../../public/application/services/breadcrumb';
 import { init as initHttp } from '../../../public/application/services/http';
 import { init as initNotification } from '../../../public/application/services/notification';
@@ -25,10 +22,10 @@ import { init as initDocumentation } from '../../../public/application/services/
 import { init as initHttpRequests } from './http_requests';
 
 export const setupEnvironment = () => {
-  const httpServiceSetupMock = new HttpService().setup({
-    injectedMetadata: injectedMetadataServiceMock.createSetupContract(),
-    fatalErrors: fatalErrorsServiceMock.createSetupContract(),
-  });
+  // axios has a similar interface to HttpSetup, but we
+  // flatten out the response.
+  const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });
+  mockHttpClient.interceptors.response.use(({ data }) => data);
 
   initBreadcrumb(() => {});
   initDocumentation(docLinksServiceMock.createStartContract());
@@ -37,7 +34,7 @@ export const setupEnvironment = () => {
     notificationServiceMock.createSetupContract().toasts,
     fatalErrorsServiceMock.createSetupContract()
   );
-  initHttp(httpServiceSetupMock);
+  initHttp(mockHttpClient);
 
   const { server, httpRequestsMockHelpers } = initHttpRequests();