[Watcher] Re-enable jest tests (#162592)

.buildkite/disabled_jest_configs.json

@@ -1,3 +1 @@
-[
+[]
-  "x-pack/plugins/watcher/jest.config.js"
-]

x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_create_json_page.helpers.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { act } from 'react-dom/test-utils';
+
 import { registerTestBed, TestBed, AsyncTestBedConfig } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
 
@@ -24,32 +26,45 @@ const testBedConfig: AsyncTestBedConfig = {
 
 export interface WatchCreateJsonTestBed extends TestBed<WatchCreateJsonTestSubjects> {
   actions: {
-    selectTab: (tab: 'edit' | 'simulate') => void;
+    selectTab: (tab: 'edit' | 'simulate') => Promise<void>;
-    clickSubmitButton: () => void;
+    clickSubmitButton: () => Promise<void>;
-    clickSimulateButton: () => void;
+    clickSimulateButton: () => Promise<void>;
   };
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchCreateJsonTestBed> => {
   const initTestBed = registerTestBed(WithAppDependencies(WatchEditPage, httpSetup), testBedConfig);
   const testBed = await initTestBed();
+  const { find, component } = testBed;
 
   /**
    * User Actions
    */
 
-  const selectTab = (tab: 'edit' | 'simulate') => {
+  const selectTab = async (tab: 'edit' | 'simulate') => {
     const tabs = ['edit', 'simulate'];
 
-    testBed.find('tab').at(tabs.indexOf(tab)).simulate('click');
+    await act(async () => {
+      find('tab').at(tabs.indexOf(tab)).simulate('click');
+    });
+
+    component.update();
   };
 
-  const clickSubmitButton = () => {
+  const clickSubmitButton = async () => {
-    testBed.find('saveWatchButton').simulate('click');
+    await act(async () => {
+      testBed.find('saveWatchButton').simulate('click');
+    });
+
+    component.update();
   };
 
-  const clickSimulateButton = () => {
+  const clickSimulateButton = async () => {
-    testBed.find('simulateWatchButton').simulate('click');
+    await act(async () => {
+      testBed.find('simulateWatchButton').simulate('click');
+    });
+
+    component.update();
   };
 
   return {

x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_create_threshold_page.helpers.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { act } from 'react-dom/test-utils';
+
 import { registerTestBed, TestBed, AsyncTestBedConfig } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
 
@@ -24,39 +26,56 @@ const testBedConfig: AsyncTestBedConfig = {
 
 export interface WatchCreateThresholdTestBed extends TestBed<WatchCreateThresholdTestSubjects> {
   actions: {
-    clickSubmitButton: () => void;
+    clickSubmitButton: () => Promise<void>;
-    clickAddActionButton: () => void;
+    clickAddActionButton: () => Promise<void>;
     clickActionLink: (
       actionType: 'logging' | 'email' | 'webhook' | 'index' | 'slack' | 'jira' | 'pagerduty'
-    ) => void;
+    ) => Promise<void>;
-    clickSimulateButton: () => void;
+    clickSimulateButton: () => Promise<void>;
   };
 }
 
 export const setup = async (httpSetup: HttpSetup): Promise<WatchCreateThresholdTestBed> => {
   const initTestBed = registerTestBed(WithAppDependencies(WatchEditPage, httpSetup), testBedConfig);
   const testBed = await initTestBed();
+  const { find, component } = testBed;
 
   /**
    * User Actions
    */
 
-  const clickSubmitButton = () => {
+  const clickSubmitButton = async () => {
-    testBed.find('saveWatchButton').simulate('click');
+    await act(async () => {
+      find('saveWatchButton').simulate('click');
+    });
+
+    component.update();
   };
 
-  const clickAddActionButton = () => {
+  const clickAddActionButton = async () => {
-    testBed.find('addWatchActionButton').simulate('click');
+    await act(async () => {
+      find('addWatchActionButton').simulate('click');
+    });
+
+    component.update();
   };
 
-  const clickSimulateButton = () => {
+  const clickSimulateButton = async () => {
-    testBed.find('simulateActionButton').simulate('click');
+    await act(async () => {
+      find('simulateActionButton').simulate('click');
+    });
+
+    component.update();
   };
 
-  const clickActionLink = (
+  const clickActionLink = async (
     actionType: 'logging' | 'email' | 'webhook' | 'index' | 'slack' | 'jira' | 'pagerduty'
   ) => {
-    testBed.find(`${actionType}ActionButton`).simulate('click');
+    await act(async () => {
+      find(`${actionType}ActionButton`).simulate('click');
+    });
+
+    component.update();
   };
 
   return {

x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_edit_page.helpers.ts

@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { act } from 'react-dom/test-utils';
 
 import { registerTestBed, TestBed, AsyncTestBedConfig } from '@kbn/test-jest-helpers';
 import { HttpSetup } from '@kbn/core/public';
@@ -25,7 +26,7 @@ const testBedConfig: AsyncTestBedConfig = {
 
 export interface WatchEditTestBed extends TestBed<WatchEditSubjects> {
   actions: {
-    clickSubmitButton: () => void;
+    clickSubmitButton: () => Promise<void>;
   };
 }
 
@@ -37,8 +38,12 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchEditTestBed> =>
    * User Actions
    */
 
-  const clickSubmitButton = () => {
+  const clickSubmitButton = async () => {
-    testBed.find('saveWatchButton').simulate('click');
+    await act(async () => {
+      testBed.find('saveWatchButton').simulate('click');
+    });
+
+    testBed.component.update();
   };
 
   return {

x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_list_page.helpers.ts

@@ -27,9 +27,9 @@ const testBedConfig: AsyncTestBedConfig = {
 
 export interface WatchListTestBed extends TestBed<WatchListTestSubjects> {
   actions: {
-    selectWatchAt: (index: number) => void;
+    selectWatchAt: (index: number) => Promise<void>;
-    clickWatchActionAt: (index: number, action: 'delete' | 'edit') => void;
+    clickWatchActionAt: (index: number, action: 'delete' | 'edit') => Promise<void>;
-    searchWatches: (term: string) => void;
+    searchWatches: (term: string) => Promise<void>;
     advanceTimeToTableRefresh: () => Promise<void>;
   };
 }
@@ -42,11 +42,15 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchListTestBed> =>
    * User Actions
    */
 
-  const selectWatchAt = (index: number) => {
+  const selectWatchAt = async (index: number) => {
     const { rows } = testBed.table.getMetaData('watchesTable');
     const row = rows[index];
     const checkBox = row.reactWrapper.find('input').hostNodes();
-    checkBox.simulate('change', { target: { checked: true } });
+
+    await act(async () => {
+      checkBox.simulate('change', { target: { checked: true } });
+    });
+    testBed.component.update();
   };
 
   const clickWatchActionAt = async (index: number, action: 'delete' | 'edit') => {
@@ -58,18 +62,21 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchListTestBed> =>
 
     await act(async () => {
       button.simulate('click');
-      component.update();
     });
+    component.update();
   };
 
-  const searchWatches = (term: string) => {
+  const searchWatches = async (term: string) => {
     const { find, component } = testBed;
     const searchInput = find('watchesTableContainer').find('.euiFieldSearch');
 
     // Enter input into the search box
     // @ts-ignore
     searchInput.instance().value = term;
-    searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
+
+    await act(async () => {
+      searchInput.simulate('keyup', { key: 'Enter', keyCode: 13, which: 13 });
+    });
 
     component.update();
   };

x-pack/plugins/watcher/__jest__/client_integration/helpers/watch_status_page.helpers.ts

@@ -32,11 +32,11 @@ const testBedConfig: AsyncTestBedConfig = {
 
 export interface WatchStatusTestBed extends TestBed<WatchStatusTestSubjects> {
   actions: {
-    selectTab: (tab: 'execution history' | 'action statuses') => void;
+    selectTab: (tab: 'execution history' | 'action statuses') => Promise<void>;
-    clickToggleActivationButton: () => void;
+    clickToggleActivationButton: () => Promise<void>;
-    clickAcknowledgeButton: (index: number) => void;
+    clickAcknowledgeButton: (index: number) => Promise<void>;
-    clickDeleteWatchButton: () => void;
+    clickDeleteWatchButton: () => Promise<void>;
-    clickWatchExecutionAt: (index: number, tableCellText: string) => void;
+    clickWatchExecutionAt: (index: number, tableCellText: string) => Promise<void>;
   };
 }
 
@@ -51,10 +51,14 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchStatusTestBed> =
    * User Actions
    */
 
-  const selectTab = (tab: 'execution history' | 'action statuses') => {
+  const selectTab = async (tab: 'execution history' | 'action statuses') => {
+    const { component, find } = testBed;
     const tabs = ['execution history', 'action statuses'];
 
-    testBed.find('tab').at(tabs.indexOf(tab)).simulate('click');
+    await act(async () => {
+      find('tab').at(tabs.indexOf(tab)).simulate('click');
+    });
+    component.update();
   };
 
   const clickToggleActivationButton = async () => {
@@ -63,8 +67,8 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchStatusTestBed> =
 
     await act(async () => {
       button.simulate('click');
-      component.update();
     });
+    component.update();
   };
 
   const clickAcknowledgeButton = async (index: number) => {
@@ -76,8 +80,8 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchStatusTestBed> =
 
     await act(async () => {
       button.simulate('click');
-      component.update();
     });
+    component.update();
   };
 
   const clickDeleteWatchButton = async () => {
@@ -86,8 +90,8 @@ export const setup = async (httpSetup: HttpSetup): Promise<WatchStatusTestBed> =
 
     await act(async () => {
       button.simulate('click');
-      component.update();
     });
+    component.update();
   };
 
   const clickWatchExecutionAt = async (index: number, tableCellText: string) => {

x-pack/plugins/watcher/__jest__/client_integration/watch_create_json_page.test.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { getExecuteDetails } from '../../__fixtures__';
@@ -16,12 +17,29 @@ import { WATCH } from './helpers/jest_constants';
 
 const { setup } = pageHelpers.watchCreateJsonPage;
 
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+  };
+});
+
 describe('<JsonWatchEditPage /> create route', () => {
   const { httpSetup, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: WatchCreateJsonTestBed;
 
   beforeAll(() => {
-    jest.useFakeTimers({ legacyFakeTimers: true });
+    jest.useFakeTimers();
   });
 
   afterAll(() => {
@@ -30,7 +48,10 @@ describe('<JsonWatchEditPage /> create route', () => {
 
   describe('on component mount', () => {
     beforeEach(async () => {
-      testBed = await setup(httpSetup);
+      await act(async () => {
+        testBed = await setup(httpSetup);
+      });
+
       testBed.component.update();
     });
 
@@ -47,13 +68,13 @@ describe('<JsonWatchEditPage /> create route', () => {
         expect(find('tab').map((t) => t.text())).toEqual(['Edit', 'Simulate']);
       });
 
-      test('should navigate to the "Simulate" tab', () => {
+      test('should navigate to the "Simulate" tab', async () => {
         const { exists, actions } = testBed;
 
         expect(exists('jsonWatchForm')).toBe(true);
         expect(exists('jsonWatchSimulateForm')).toBe(false);
 
-        actions.selectTab('simulate');
+        await actions.selectTab('simulate');
 
         expect(exists('jsonWatchForm')).toBe(false);
         expect(exists('jsonWatchSimulateForm')).toBe(true);
@@ -62,19 +83,19 @@ describe('<JsonWatchEditPage /> create route', () => {
 
     describe('create', () => {
       describe('form validation', () => {
-        test('should not allow empty ID field', () => {
+        test('should not allow empty ID field', async () => {
           const { form, actions } = testBed;
           form.setInputValue('idInput', '');
 
-          actions.clickSubmitButton();
+          await actions.clickSubmitButton();
 
           expect(form.getErrorsMessages()).toContain('ID is required');
         });
-        test('should not allow invalid characters for ID field', () => {
+        test('should not allow invalid characters for ID field', async () => {
           const { form, actions } = testBed;
           form.setInputValue('idInput', 'invalid$id*field/');
 
-          actions.clickSubmitButton();
+          await actions.clickSubmitButton();
 
           expect(form.getErrorsMessages()).toContain(
             'ID can only contain letters, underscores, dashes, periods and numbers.'
@@ -90,9 +111,7 @@ describe('<JsonWatchEditPage /> create route', () => {
           form.setInputValue('nameInput', watch.name);
           form.setInputValue('idInput', watch.id);
 
-          await act(async () => {
+          await actions.clickSubmitButton();
-            actions.clickSubmitButton();
-          });
 
           const DEFAULT_LOGGING_ACTION_ID = 'logging_1';
           const DEFAULT_LOGGING_ACTION_TYPE = 'logging';
@@ -125,7 +144,7 @@ describe('<JsonWatchEditPage /> create route', () => {
         });
 
         test('should surface the API errors from the "save" HTTP request', async () => {
-          const { form, actions, component, exists, find } = testBed;
+          const { form, actions, exists, find } = testBed;
           const { watch } = WATCH;
 
           form.setInputValue('nameInput', watch.name);
@@ -140,10 +159,7 @@ describe('<JsonWatchEditPage /> create route', () => {
 
           httpRequestsMockHelpers.setSaveWatchResponse(watch.id, undefined, error);
 
-          await act(async () => {
+          await actions.clickSubmitButton();
-            actions.clickSubmitButton();
-          });
-          component.update();
 
           expect(exists('sectionError')).toBe(true);
           expect(find('sectionError').text()).toContain(error.message);
@@ -152,12 +168,13 @@ describe('<JsonWatchEditPage /> create route', () => {
     });
 
     describe('simulate', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         const { actions, form } = testBed;
 
         // Set watch id (required field) and switch to simulate tab
         form.setInputValue('idInput', WATCH.watch.id);
-        actions.selectTab('simulate');
+
+        await actions.selectTab('simulate');
       });
 
       describe('form payload & API errors', () => {
@@ -167,9 +184,7 @@ describe('<JsonWatchEditPage /> create route', () => {
             watch: { id, type },
           } = WATCH;
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const actionModes = Object.keys(defaultWatch.actions).reduce(
             (actionAccum: any, action) => {
@@ -202,7 +217,7 @@ describe('<JsonWatchEditPage /> create route', () => {
         });
 
         test('should execute a watch with a valid payload', async () => {
-          const { actions, form, find, exists, component } = testBed;
+          const { actions, form, find, exists } = testBed;
           const {
             watch: { id, type },
           } = WATCH;
@@ -228,10 +243,7 @@ describe('<JsonWatchEditPage /> create route', () => {
             },
           });
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
-          component.update();
 
           const actionModes = Object.keys(defaultWatch.actions).reduce(
             (actionAccum: any, action) => {
@@ -303,7 +315,7 @@ describe('<JsonWatchEditPage /> create route', () => {
                 conditionMet ? 'when the condition is met' : 'when the condition is not met',
                 () => {
                   beforeEach(async () => {
-                    const { actions, component, form } = testBed;
+                    const { actions, form } = testBed;
                     form.setInputValue('actionModesSelect', actionMode);
 
                     httpRequestsMockHelpers.setLoadExecutionResultResponse({
@@ -335,10 +347,7 @@ describe('<JsonWatchEditPage /> create route', () => {
                       },
                     });
 
-                    await act(async () => {
+                    await actions.clickSimulateButton();
-                      actions.clickSimulateButton();
-                    });
-                    component.update();
                   });
 
                   test('should set the correct condition met status', () => {

x-pack/plugins/watcher/__jest__/client_integration/watch_create_threshold_page.test.tsx

@@ -23,16 +23,6 @@ const MATCH_INDICES = ['index1'];
 
 const ES_FIELDS = [{ name: '@timestamp', type: 'date' }];
 
-// Since watchID's are dynamically created, we have to mock
-// the function that generates them in order to be able to match
-// against it.
-jest.mock('uuid', () => ({
-  v4: () => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    return require('./helpers/jest_constants').WATCH_ID;
-  },
-}));
-
 const SETTINGS = {
   action_types: {
     email: { enabled: true },
@@ -55,6 +45,37 @@ const WATCH_VISUALIZE_DATA = {
   },
 };
 
+// Since watchID's are dynamically created, we have to mock
+// the function that generates them in order to be able to match
+// against it.
+jest.mock('uuid', () => ({
+  v4: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('./helpers/jest_constants').WATCH_ID;
+  },
+  v1: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require('./helpers/jest_constants').WATCH_ID;
+  },
+}));
+
+jest.mock('@kbn/kibana-react-plugin/public', () => {
+  const original = jest.requireActual('@kbn/kibana-react-plugin/public');
+  return {
+    ...original,
+    // Mocking CodeEditor, which uses React Monaco under the hood
+    CodeEditor: (props: any) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
+        data-currentvalue={props.value}
+        onChange={(e: any) => {
+          props.onChange(e.jsonContent);
+        }}
+      />
+    ),
+  };
+});
+
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
 
@@ -82,22 +103,27 @@ describe('<ThresholdWatchEditPage /> create route', () => {
   let testBed: WatchCreateThresholdTestBed;
 
   beforeAll(() => {
-    jest.useFakeTimers({ legacyFakeTimers: true });
+    jest.useFakeTimers();
   });
 
   afterAll(() => {
     jest.useRealTimers();
   });
 
-  describe('on component mount', () => {
+  httpRequestsMockHelpers.setLoadMatchingIndicesResponse({ indices: MATCH_INDICES });
-    beforeEach(async () => {
+  httpRequestsMockHelpers.setLoadEsFieldsResponse({ fields: ES_FIELDS });
-      await act(async () => {
+  httpRequestsMockHelpers.setLoadSettingsResponse(SETTINGS);
-        testBed = await setup(httpSetup);
+  httpRequestsMockHelpers.setLoadWatchVisualizeResponse(WATCH_VISUALIZE_DATA);
-      });
 
-      testBed.component.update();
+  beforeEach(async () => {
+    await act(async () => {
+      testBed = await setup(httpSetup);
     });
 
+    testBed.component.update();
+  });
+
+  describe('on component mount', () => {
     test('should set the correct page title', () => {
       const { find } = testBed;
 
@@ -105,13 +131,6 @@ describe('<ThresholdWatchEditPage /> create route', () => {
     });
 
     describe('create', () => {
-      beforeEach(async () => {
-        httpRequestsMockHelpers.setLoadMatchingIndicesResponse({ indices: MATCH_INDICES });
-        httpRequestsMockHelpers.setLoadEsFieldsResponse({ fields: ES_FIELDS });
-        httpRequestsMockHelpers.setLoadSettingsResponse(SETTINGS);
-        httpRequestsMockHelpers.setLoadWatchVisualizeResponse(WATCH_VISUALIZE_DATA);
-      });
-
       describe('form validation', () => {
         test('should not allow empty name field', () => {
           const { form } = testBed;
@@ -216,14 +235,21 @@ describe('<ThresholdWatchEditPage /> create route', () => {
 
       describe('actions', () => {
         beforeEach(async () => {
+          await act(async () => {
+            testBed = await setup(httpSetup);
+          });
+
           const { form, find, component } = testBed;
 
+          component.update();
+
           // Set up valid fields needed for actions component to render
           await act(async () => {
             form.setInputValue('nameInput', WATCH_NAME);
             find('indicesComboBox').simulate('change', [{ label: 'index1', value: 'index1' }]);
             form.setInputValue('watchTimeFieldSelect', WATCH_TIME_FIELD);
           });
+
           component.update();
         });
 
@@ -232,8 +258,8 @@ describe('<ThresholdWatchEditPage /> create route', () => {
 
           const LOGGING_MESSAGE = 'test log message';
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('logging');
+          await actions.clickActionLink('logging');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
@@ -246,9 +272,7 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           // Next, provide valid field and verify
           form.setInputValue('loggingTextInput', LOGGING_MESSAGE);
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -300,17 +324,15 @@ describe('<ThresholdWatchEditPage /> create route', () => {
         test('should simulate an index action', async () => {
           const { form, actions, exists } = testBed;
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('index');
+          await actions.clickActionLink('index');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
           // Verify an empty index is allowed
           form.setInputValue('indexInput', '');
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -363,16 +385,14 @@ describe('<ThresholdWatchEditPage /> create route', () => {
 
           const SLACK_MESSAGE = 'test slack message';
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('slack');
+          await actions.clickActionLink('slack');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
           form.setInputValue('slackMessageTextarea', SLACK_MESSAGE);
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -430,8 +450,8 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           const EMAIL_SUBJECT = 'test email subject';
           const EMAIL_BODY = 'this is a test email body';
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('email');
+          await actions.clickActionLink('email');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
@@ -442,9 +462,7 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           form.setInputValue('emailSubjectInput', EMAIL_SUBJECT);
           form.setInputValue('emailBodyInput', EMAIL_BODY);
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -510,8 +528,8 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           const USERNAME = 'test_user';
           const PASSWORD = 'test_password';
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('webhook');
+          await actions.clickActionLink('webhook');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
@@ -534,9 +552,7 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           form.setInputValue('webhookUsernameInput', USERNAME);
           form.setInputValue('webhookPasswordInput', PASSWORD);
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -600,14 +616,18 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           const ISSUE_TYPE = 'Bug';
           const SUMMARY = 'test Jira summary';
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('jira');
+          await actions.clickActionLink('jira');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
-          // First, provide invalid fields and verify
+          // Set issue type value and clear it to trigger required error message
-          form.setInputValue('jiraProjectKeyInput', '');
+          form.setInputValue('jiraIssueTypeInput', 'myissue');
           form.setInputValue('jiraIssueTypeInput', '');
+          // Set project type value and clear it to trigger required error message
+          form.setInputValue('jiraProjectKeyInput', 'my key');
+          form.setInputValue('jiraProjectKeyInput', '');
+          // Clear default summary to trigger required error message
           form.setInputValue('jiraSummaryInput', '');
 
           expect(form.getErrorsMessages()).toEqual([
@@ -622,9 +642,7 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           form.setInputValue('jiraIssueTypeInput', ISSUE_TYPE);
           form.setInputValue('jiraSummaryInput', SUMMARY);
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -688,8 +706,8 @@ describe('<ThresholdWatchEditPage /> create route', () => {
 
           const DESCRIPTION = 'test pagerduty description';
 
-          actions.clickAddActionButton();
+          await actions.clickAddActionButton();
-          actions.clickActionLink('pagerduty');
+          await actions.clickActionLink('pagerduty');
 
           expect(exists('watchActionAccordion')).toBe(true);
 
@@ -702,9 +720,7 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           // Next, provide valid fields and verify
           form.setInputValue('pagerdutyDescriptionInput', DESCRIPTION);
 
-          await act(async () => {
+          await actions.clickSimulateButton();
-            actions.clickSimulateButton();
-          });
 
           const thresholdWatch = {
             id: WATCH_ID,
@@ -757,7 +773,6 @@ describe('<ThresholdWatchEditPage /> create route', () => {
       describe('watch visualize data payload', () => {
         test('should send the correct payload', async () => {
           const { form, find, component } = testBed;
-
           // Set up required fields
           await act(async () => {
             form.setInputValue('nameInput', WATCH_NAME);
@@ -807,9 +822,7 @@ describe('<ThresholdWatchEditPage /> create route', () => {
           });
           component.update();
 
-          await act(async () => {
+          await actions.clickSubmitButton();
-            actions.clickSubmitButton();
-          });
 
           expect(httpSetup.put).toHaveBeenLastCalledWith(
             `${API_BASE_PATH}/watch/${WATCH_ID}`,

x-pack/plugins/watcher/__jest__/client_integration/watch_edit_page.test.tsx

@@ -39,7 +39,7 @@ describe('<WatchEditPage />', () => {
   let testBed: WatchEditTestBed;
 
   beforeAll(() => {
-    jest.useFakeTimers({ legacyFakeTimers: true });
+    jest.useFakeTimers();
   });
 
   afterAll(() => {
@@ -50,7 +50,10 @@ describe('<WatchEditPage />', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setLoadWatchResponse(WATCH_ID, WATCH);
 
-      testBed = await setup(httpSetup);
+      await act(async () => {
+        testBed = await setup(httpSetup);
+      });
+
       testBed.component.update();
     });
 
@@ -82,9 +85,7 @@ describe('<WatchEditPage />', () => {
 
         form.setInputValue('nameInput', EDITED_WATCH_NAME);
 
-        await act(async () => {
+        await actions.clickSubmitButton();
-          actions.clickSubmitButton();
-        });
 
         const DEFAULT_LOGGING_ACTION_ID = 'logging_1';
         const DEFAULT_LOGGING_ACTION_TYPE = 'logging';
@@ -137,7 +138,10 @@ describe('<WatchEditPage />', () => {
     beforeEach(async () => {
       httpRequestsMockHelpers.setLoadWatchResponse(WATCH_ID, { watch });
 
-      testBed = await setup(httpSetup);
+      await act(async () => {
+        testBed = await setup(httpSetup);
+      });
+
       testBed.component.update();
     });
 
@@ -162,9 +166,7 @@ describe('<WatchEditPage />', () => {
 
         form.setInputValue('nameInput', EDITED_WATCH_NAME);
 
-        await act(async () => {
+        await actions.clickSubmitButton();
-          actions.clickSubmitButton();
-        });
 
         const {
           id,

x-pack/plugins/watcher/__jest__/client_integration/watch_list_page.test.ts

@@ -18,7 +18,7 @@ describe('<WatchListPage />', () => {
   let testBed: WatchListTestBed;
 
   beforeAll(() => {
-    jest.useFakeTimers({ legacyFakeTimers: true });
+    jest.useFakeTimers();
   });
 
   afterAll(() => {
@@ -79,7 +79,7 @@ describe('<WatchListPage />', () => {
         test('should show error callout if search is invalid', async () => {
           const { exists, actions } = testBed;
 
-          actions.searchWatches('or');
+          await actions.searchWatches('or');
 
           expect(exists('watcherListSearchError')).toBe(true);
         });
@@ -87,7 +87,7 @@ describe('<WatchListPage />', () => {
         test('should retain the search query', async () => {
           const { table, actions } = testBed;
 
-          actions.searchWatches(watch1.name);
+          await actions.searchWatches(watch1.name);
 
           const { tableCellsValues } = table.getMetaData('watchesTable');
 

x-pack/plugins/watcher/__jest__/client_integration/watch_status_page.test.ts

@@ -45,7 +45,7 @@ describe('<WatchStatusPage />', () => {
   let testBed: WatchStatusTestBed;
 
   beforeAll(() => {
-    jest.useFakeTimers({ legacyFakeTimers: true });
+    jest.useFakeTimers();
   });
 
   afterAll(() => {
@@ -57,7 +57,9 @@ describe('<WatchStatusPage />', () => {
       httpRequestsMockHelpers.setLoadWatchResponse(WATCH_ID, { watch });
       httpRequestsMockHelpers.setLoadWatchHistoryResponse(WATCH_ID, watchHistoryItems);
 
-      testBed = await setup(httpSetup);
+      await act(async () => {
+        testBed = await setup(httpSetup);
+      });
       testBed.component.update();
     });
 
@@ -75,13 +77,13 @@ describe('<WatchStatusPage />', () => {
         expect(find('tab').map((t) => t.text())).toEqual(['Execution history', 'Action statuses']);
       });
 
-      test('should navigate to the "Action statuses" tab', () => {
+      test('should navigate to the "Action statuses" tab', async () => {
         const { exists, actions } = testBed;
 
         expect(exists('watchHistorySection')).toBe(true);
         expect(exists('watchDetailSection')).toBe(false);
 
-        actions.selectTab('action statuses');
+        await actions.selectTab('action statuses');
 
         expect(exists('watchHistorySection')).toBe(false);
         expect(exists('watchDetailSection')).toBe(true);
@@ -222,10 +224,10 @@ describe('<WatchStatusPage />', () => {
     });
 
     describe('action statuses', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         const { actions } = testBed;
 
-        actions.selectTab('action statuses');
+        await actions.selectTab('action statuses');
       });
 
       test('should list the watch actions in a table', () => {