[React18] Migrate test suites to account for testing library upgrades security-defend-workflows

x-pack/plugins/osquery/public/shared_components/osquery_action/use_is_osquery_available_simple.test.ts

@@ -6,7 +6,7 @@
  */
 import { useKibana } from '../../common/lib/kibana';
 import { useIsOsqueryAvailableSimple } from './use_is_osquery_available_simple';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { createStartServicesMock } from '@kbn/triggers-actions-ui-plugin/public/common/lib/kibana/kibana_react.mock';
 import { OSQUERY_INTEGRATION_NAME } from '../../../common';
 import { httpServiceMock } from '@kbn/core/public/mocks';
@@ -41,15 +41,13 @@ describe('UseIsOsqueryAvailableSimple', () => {
     });
   });
   it('should expect response from API and return enabled flag', async () => {
-    const { result, waitForValueToChange } = renderHook(() =>
+    const { result } = renderHook(() =>
       useIsOsqueryAvailableSimple({
         agentId: '3242332',
       })
     );
 
     expect(result.current).toBe(false);
-    await waitForValueToChange(() => result.current);
-
-    expect(result.current).toBe(true);
+    await waitFor(() => expect(result.current).toBe(true));
   });
 });

x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/from_alerts/use_host_isolation_action.test.tsx

@@ -4,7 +4,8 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
+import type React from 'react';
+import { act } from '@testing-library/react';
 import type { UseHostIsolationActionProps } from './use_host_isolation_action';
 import { useHostIsolationAction } from './use_host_isolation_action';
 import type { AppContextTestRender, UserPrivilegesMockSetter } from '../../../../mock/endpoint';
@@ -15,7 +16,6 @@ import type { AlertTableContextMenuItem } from '../../../../../detections/compon
 import type { ResponseActionsApiCommandNames } from '../../../../../../common/endpoint/service/response_actions/constants';
 import { agentStatusMocks } from '../../../../../../common/endpoint/service/response_actions/mocks/agent_status.mocks';
 import { ISOLATE_HOST, UNISOLATE_HOST } from './translations';
-import type React from 'react';
 import {
   HOST_ENDPOINT_UNENROLLED_TOOLTIP,
   LOADING_ENDPOINT_DATA_TOOLTIP,
@@ -87,20 +87,22 @@ describe('useHostIsolationAction', () => {
         });
       }
 
-      const { result, waitForValueToChange } = render();
-      await waitForValueToChange(() => result.current);
+      const { result } = render();
 
-      expect(result.current).toEqual([
-        buildExpectedMenuItemResult({
-          ...(command === 'unisolate' ? { name: UNISOLATE_HOST } : {}),
-        }),
-      ]);
+      await appContextMock.waitFor(() =>
+        expect(result.current).toEqual([
+          buildExpectedMenuItemResult({
+            ...(command === 'unisolate' ? { name: UNISOLATE_HOST } : {}),
+          }),
+        ])
+      );
     }
   );
 
   it('should call `closePopover` callback when menu item `onClick` is called', async () => {
-    const { result, waitForValueToChange } = render();
-    await waitForValueToChange(() => result.current);
+    const { result } = render();
+    await appContextMock.waitFor(() => expect(result.current[0].onClick).toBeDefined());
+
     result.current[0].onClick!({} as unknown as React.MouseEvent);
 
     expect(hookProps.closePopover).toHaveBeenCalled();
@@ -135,12 +137,14 @@ describe('useHostIsolationAction', () => {
   it('should return disabled menu item while loading agent status', async () => {
     const { result } = render();
 
-    expect(result.current).toEqual([
-      buildExpectedMenuItemResult({
-        disabled: true,
-        toolTipContent: LOADING_ENDPOINT_DATA_TOOLTIP,
-      }),
-    ]);
+    await appContextMock.waitFor(() =>
+      expect(result.current).toEqual([
+        buildExpectedMenuItemResult({
+          disabled: true,
+          toolTipContent: LOADING_ENDPOINT_DATA_TOOLTIP,
+        }),
+      ])
+    );
   });
 
   it.each(['endpoint', 'non-endpoint'])(
@@ -156,37 +160,51 @@ describe('useHostIsolationAction', () => {
       if (type === 'non-endpoint') {
         hookProps.detailsData = endpointAlertDataMock.generateSentinelOneAlertDetailsItemData();
       }
-      const { result, waitForValueToChange } = render();
-      await waitForValueToChange(() => result.current);
-
-      expect(result.current).toEqual([
-        buildExpectedMenuItemResult({
-          disabled: true,
-          toolTipContent:
-            type === 'endpoint' ? HOST_ENDPOINT_UNENROLLED_TOOLTIP : NOT_FROM_ENDPOINT_HOST_TOOLTIP,
-        }),
-      ]);
+      const { result } = render();
+      await appContextMock.waitFor(() =>
+        expect(result.current).toEqual([
+          buildExpectedMenuItemResult({
+            disabled: true,
+            toolTipContent:
+              type === 'endpoint'
+                ? HOST_ENDPOINT_UNENROLLED_TOOLTIP
+                : NOT_FROM_ENDPOINT_HOST_TOOLTIP,
+          }),
+        ])
+      );
     }
   );
 
   it('should call isolate API when agent is currently NOT isolated', async () => {
-    const { result, waitForValueToChange } = render();
-    await waitForValueToChange(() => result.current);
+    const { result } = render();
+    await appContextMock.waitFor(() => expect(result.current[0].onClick).toBeDefined());
     result.current[0].onClick!({} as unknown as React.MouseEvent);
 
     expect(hookProps.onAddIsolationStatusClick).toHaveBeenCalledWith('isolateHost');
   });
 
   it('should call un-isolate API when agent is currently isolated', async () => {
-    apiMock.responseProvider.getAgentStatus.mockReturnValue(
-      agentStatusMocks.generateAgentStatusApiResponse({
-        data: { 'abfe4a35-d5b4-42a0-a539-bd054c791769': { isolated: true } },
-      })
-    );
-    const { result, waitForValueToChange } = render();
-    await waitForValueToChange(() => result.current);
-    result.current[0].onClick!({} as unknown as React.MouseEvent);
+    apiMock.responseProvider.getAgentStatus.mockImplementation(({ query }) => {
+      const agentId = (query!.agentIds as string[])[0];
+
+      return agentStatusMocks.generateAgentStatusApiResponse({
+        data: { [agentId]: { isolated: true } },
+      });
+    });
+
+    const { result } = render();
+
+    await appContextMock.waitFor(() => {
+      expect(apiMock.responseProvider.getAgentStatus).toHaveBeenCalled();
+      expect(result.current[0].onClick).toBeDefined();
+    });
+
+    act(() => {
+      result.current[0].onClick!({} as unknown as React.MouseEvent);
+    });
 
-    expect(hookProps.onAddIsolationStatusClick).toHaveBeenCalledWith('unisolateHost');
+    await appContextMock.waitFor(() =>
+      expect(hookProps.onAddIsolationStatusClick).toHaveBeenCalledWith('unisolateHost')
+    );
   });
 });

x-pack/plugins/security_solution/public/common/components/endpoint/responder/from_alerts/use_responder_action_data.test.ts

@@ -25,7 +25,8 @@ import type { AppContextTestRender } from '../../../../mock/endpoint';
 import { createAppRootMockRenderer, endpointAlertDataMock } from '../../../../mock/endpoint';
 import { HOST_METADATA_LIST_ROUTE } from '../../../../../../common/endpoint/constants';
 import { endpointMetadataHttpMocks } from '../../../../../management/pages/endpoint_hosts/mocks';
-import type { RenderHookResult } from '@testing-library/react-hooks/src/types';
+import type { RenderHookResult } from '@testing-library/react';
+import { waitFor, act } from '@testing-library/react';
 import { createHttpFetchError } from '@kbn/core-http-browser-mocks';
 import { HostStatus } from '../../../../../../common/endpoint/types';
 import {
@@ -61,17 +62,14 @@ describe('use responder action data hooks', () => {
 
   describe('useWithResponderActionDataFromAlert() hook', () => {
     let renderHook: () => RenderHookResult<
-      UseWithResponderActionDataFromAlertProps,
-      ResponderActionData
+      ResponderActionData,
+      UseWithResponderActionDataFromAlertProps
     >;
     let alertDetailItemData: TimelineEventsDetailsItem[];
 
     beforeEach(() => {
       renderHook = () => {
-        return appContextMock.renderHook<
-          UseWithResponderActionDataFromAlertProps,
-          ResponderActionData
-        >(() =>
+        return appContextMock.renderHook(() =>
           useWithResponderActionDataFromAlert({
             eventData: alertDetailItemData,
             onClick: onClickMock,
@@ -95,15 +93,19 @@ describe('use responder action data hooks', () => {
       it('should call `onClick()` function prop when is pass to the hook', () => {
         alertDetailItemData = endpointAlertDataMock.generateSentinelOneAlertDetailsItemData();
         const { result } = renderHook();
-        result.current.handleResponseActionsClick();
+        act(() => {
+          result.current.handleResponseActionsClick();
+        });
 
         expect(onClickMock).toHaveBeenCalled();
       });
 
       it('should NOT call `onClick` if the action is disabled', () => {
         alertDetailItemData = endpointAlertDataMock.generateAlertDetailsItemDataForAgentType('foo');
         const { result } = renderHook();
-        result.current.handleResponseActionsClick();
+        act(() => {
+          result.current.handleResponseActionsClick();
+        });
 
         expect(onClickMock).not.toHaveBeenCalled();
       });
@@ -169,8 +171,8 @@ describe('use responder action data hooks', () => {
       });
 
       it('should show action enabled if host metadata was retrieved and host is enrolled', async () => {
-        const { result, waitForValueToChange } = renderHook();
-        await waitForValueToChange(() => result.current.isDisabled);
+        const { result } = renderHook();
+        await waitFor(() => expect(result.current.isDisabled).toBe(false));
 
         expect(result.current).toEqual(getExpectedResponderActionData());
       });
@@ -181,8 +183,10 @@ describe('use responder action data hooks', () => {
             statusCode: 404,
           });
         });
-        const { result, waitForValueToChange } = renderHook();
-        await waitForValueToChange(() => result.current.tooltip);
+
+        const { result } = renderHook();
+
+        await waitFor(() => expect(result.current.tooltip).not.toEqual('Loading'));
 
         expect(result.current).toEqual(
           getExpectedResponderActionData({
@@ -199,8 +203,8 @@ describe('use responder action data hooks', () => {
         };
         metadataApiMocks.responseProvider.metadataDetails.mockReturnValue(hostMetadata);
 
-        const { result, waitForValueToChange } = renderHook();
-        await waitForValueToChange(() => result.current.tooltip);
+        const { result } = renderHook();
+        await waitFor(() => expect(result.current.tooltip).not.toEqual('Loading'));
 
         expect(result.current).toEqual(
           getExpectedResponderActionData({
@@ -216,8 +220,8 @@ describe('use responder action data hooks', () => {
             statusCode: 500,
           });
         });
-        const { result, waitForValueToChange } = renderHook();
-        await waitForValueToChange(() => result.current.tooltip);
+        const { result } = renderHook();
+        await waitFor(() => expect(result.current.tooltip).not.toEqual('Loading'));
 
         expect(result.current).toEqual(
           getExpectedResponderActionData({
@@ -231,7 +235,7 @@ describe('use responder action data hooks', () => {
 
   describe('useResponderActionData() hook', () => {
     let hookProps: UseResponderActionDataProps;
-    let renderHook: () => RenderHookResult<UseResponderActionDataProps, ResponderActionData>;
+    let renderHook: () => RenderHookResult<ResponderActionData, UseResponderActionDataProps>;
 
     beforeEach(() => {
       endpointMetadataHttpMocks(appContextMock.coreStart.http);
@@ -241,15 +245,13 @@ describe('use responder action data hooks', () => {
         onClick: onClickMock,
       };
       renderHook = () => {
-        return appContextMock.renderHook<UseResponderActionDataProps, ResponderActionData>(() =>
-          useResponderActionData(hookProps)
-        );
+        return appContextMock.renderHook(() => useResponderActionData(hookProps));
       };
     });
 
     it('should show action enabled when agentType is Endpoint and host is enabled', async () => {
-      const { result, waitForValueToChange } = renderHook();
-      await waitForValueToChange(() => result.current.isDisabled);
+      const { result } = renderHook();
+      await waitFor(() => expect(result.current.isDisabled).toBe(false));
 
       expect(result.current).toEqual(getExpectedResponderActionData());
     });
@@ -266,17 +268,24 @@ describe('use responder action data hooks', () => {
     });
 
     it('should call `onClick` prop when action is enabled', async () => {
-      const { result, waitForValueToChange } = renderHook();
-      await waitForValueToChange(() => result.current.isDisabled);
-      result.current.handleResponseActionsClick();
+      const { result } = renderHook();
+
+      await waitFor(() => expect(result.current.isDisabled).toBe(false));
+
+      act(() => {
+        result.current.handleResponseActionsClick();
+      });
 
       expect(onClickMock).toHaveBeenCalled();
     });
 
     it('should not call `onCLick` prop when action is disabled', () => {
       hookProps.agentType = 'sentinel_one';
       const { result } = renderHook();
-      result.current.handleResponseActionsClick();
+
+      act(() => {
+        result.current.handleResponseActionsClick();
+      });
 
       expect(onClickMock).not.toHaveBeenCalled();
     });