Improve tests

x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx

@@ -339,32 +339,20 @@ export const AllCases = React.memo<AllCasesProps>(
 
     const TableWrap = useMemo(() => (isModal ? 'span' : Panel), [isModal]);
 
-    const onTableRowClick = useMemo(
-      () =>
-        memoize<(theCase: Case) => () => void>((theCase) => () => {
+    const tableRowProps = useCallback(
+      (theCase: Case) => {
+        const onTableRowClick = memoize(() => {
           if (onRowClick) {
             onRowClick(theCase);
           }
-        }),
-      [onRowClick]
-    );
+        });
 
-    const tableRowProps = useCallback(
-      (item) => {
-        const rowProps = {
-          'data-test-subj': `cases-table-row-${item.id}`,
+        return {
+          'data-test-subj': `cases-table-row-${theCase.id}`,
+          ...(isModal ? { onClick: onTableRowClick } : {}),
         };
-
-        if (isModal) {
-          return {
-            ...rowProps,
-            onClick: onTableRowClick(item),
-          };
-        }
-
-        return rowProps;
       },
-      [isModal, onTableRowClick]
+      [isModal, onRowClick]
     );
 
     return (

x-pack/plugins/security_solution/public/cases/components/timeline_actions/add_to_case_action.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo, useState, useCallback } from 'react';
+import React, { memo, useState, useCallback, useMemo } from 'react';
 import {
   EuiPopover,
   EuiButtonIcon,
@@ -89,41 +89,47 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({ ecsRowData,
     openAllCaseModal();
   }, [openAllCaseModal, closePopover]);
 
-  const items = [
-    <EuiContextMenuItem
-      key="add-new-case-menu-item"
-      onClick={addNewCaseClick}
-      aria-label={i18n.ACTION_ADD_NEW_CASE}
-      data-test-subj="add-new-case-item"
-      disabled={disabled}
-    >
-      <EuiText size="m">{i18n.ACTION_ADD_NEW_CASE}</EuiText>
-    </EuiContextMenuItem>,
-    <EuiContextMenuItem
-      key="add-existing-case-menu-item"
-      onClick={addExistingCaseClick}
-      aria-label={i18n.ACTION_ADD_EXISTING_CASE}
-      data-test-subj="add-existing-case-menu-item"
-      disabled={disabled}
-    >
-      <EuiText size="m">{i18n.ACTION_ADD_EXISTING_CASE}</EuiText>
-    </EuiContextMenuItem>,
-  ];
-
-  const button = (
-    <EuiToolTip
-      data-test-subj="attach-alert-to-case-tooltip"
-      content={i18n.ACTION_ADD_TO_CASE_TOOLTIP}
-    >
-      <EuiButtonIcon
-        aria-label={i18n.ACTION_ADD_TO_CASE_ARIA_LABEL}
-        data-test-subj="attach-alert-to-case-button"
-        size="s"
-        iconType="folderClosed"
-        onClick={openPopover}
+  const items = useMemo(
+    () => [
+      <EuiContextMenuItem
+        key="add-new-case-menu-item"
+        onClick={addNewCaseClick}
+        aria-label={i18n.ACTION_ADD_NEW_CASE}
+        data-test-subj="add-new-case-item"
         disabled={disabled}
-      />
-    </EuiToolTip>
+      >
+        <EuiText size="m">{i18n.ACTION_ADD_NEW_CASE}</EuiText>
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem
+        key="add-existing-case-menu-item"
+        onClick={addExistingCaseClick}
+        aria-label={i18n.ACTION_ADD_EXISTING_CASE}
+        data-test-subj="add-existing-case-menu-item"
+        disabled={disabled}
+      >
+        <EuiText size="m">{i18n.ACTION_ADD_EXISTING_CASE}</EuiText>
+      </EuiContextMenuItem>,
+    ],
+    [addExistingCaseClick, addNewCaseClick, disabled]
+  );
+
+  const button = useMemo(
+    () => (
+      <EuiToolTip
+        data-test-subj="attach-alert-to-case-tooltip"
+        content={i18n.ACTION_ADD_TO_CASE_TOOLTIP}
+      >
+        <EuiButtonIcon
+          aria-label={i18n.ACTION_ADD_TO_CASE_ARIA_LABEL}
+          data-test-subj="attach-alert-to-case-button"
+          size="s"
+          iconType="folderClosed"
+          onClick={openPopover}
+          disabled={disabled}
+        />
+      </EuiToolTip>
+    ),
+    [disabled, openPopover]
   );
 
   return (

x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/all_cases_modal.test.tsx

@@ -3,17 +3,28 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
+/* eslint-disable react/display-name */
 import { mount } from 'enzyme';
 import React from 'react';
 import '../../../common/mock/match_media';
 import { AllCasesModal } from './all_cases_modal';
 import { TestProviders } from '../../../common/mock';
 
 jest.mock('../all_cases', () => {
-  const AllCases = () => {
-    return <></>;
+  return {
+    AllCases: ({ onRowClick }: { onRowClick: ({ id }: { id: string }) => void }) => {
+      return (
+        <button
+          type="button"
+          data-test-subj="all-cases-row"
+          onClick={() => onRowClick({ id: 'case-id' })}
+        >
+          {'case-row'}
+        </button>
+      );
+    },
   };
-  return { AllCases };
 });
 
 jest.mock('../../../common/lib/kibana', () => {
@@ -82,4 +93,15 @@ describe('AllCasesModal', () => {
       isModal: true,
     });
   });
+
+  it('onRowClick called when row is clicked', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <AllCasesModal {...defaultProps} />
+      </TestProviders>
+    );
+
+    wrapper.find(`[data-test-subj='all-cases-row']`).first().simulate('click');
+    expect(onRowClick).toHaveBeenCalledWith({ id: 'case-id' });
+  });
 });

x-pack/plugins/security_solution/public/cases/components/use_all_cases_modal/index.test.tsx

@@ -5,7 +5,6 @@
  */
 
 /* eslint-disable react/display-name */
-
 import React from 'react';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { render, screen } from '@testing-library/react';
@@ -29,9 +28,9 @@ jest.mock('react-redux', () => {
 jest.mock('../../../common/lib/kibana');
 jest.mock('../all_cases', () => {
   return {
-    AllCases: ({ onRowClick }: { onRowClick: (id: string, title: string) => void }) => {
+    AllCases: ({ onRowClick }: { onRowClick: ({ id }: { id: string }) => void }) => {
       return (
-        <button type="button" onClick={() => onRowClick('case-id', 'case title')}>
+        <button type="button" onClick={() => onRowClick({ id: 'case-id' })}>
           {'case-row'}
         </button>
       );
@@ -130,6 +129,6 @@ describe('useAllCasesModal', () => {
     });
 
     expect(result.current.isModalOpen).toBe(false);
-    expect(onRowClick).toHaveBeenCalledWith('case-id', 'case title');
+    expect(onRowClick).toHaveBeenCalledWith({ id: 'case-id' });
   });
 });

x-pack/plugins/security_solution/public/cases/containers/use_post_comment.tsx

@@ -81,8 +81,7 @@ export const usePostComment = (): UsePostComment => {
         cancel = true;
       };
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [dispatchToaster]
   );
 
   return { ...state, postComment: postMyComment };

x-pack/plugins/security_solution/public/timelines/components/flyout/add_to_case_button/index.test.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { useKibana } from '../../../../common/lib/kibana';
+import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
+import { mockTimelineModel, TestProviders } from '../../../../common/mock';
+import { useAllCasesModal } from '../../../../cases/components/use_all_cases_modal';
+import { AddToCaseButton } from '.';
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => {
+  const original = jest.requireActual('react-redux');
+  return {
+    ...original,
+    useDispatch: () => mockDispatch,
+  };
+});
+
+jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/hooks/use_selector');
+jest.mock('../../../../cases/components/use_all_cases_modal');
+
+const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
+const useAllCasesModalMock = useAllCasesModal as jest.Mock;
+
+describe('EventColumnView', () => {
+  const navigateToApp = jest.fn();
+
+  beforeEach(() => {
+    useKibanaMock().services.application.navigateToApp = navigateToApp;
+    (useDeepEqualSelector as jest.Mock).mockReturnValue(mockTimelineModel);
+  });
+
+  it('navigates to the correct path without id', async () => {
+    useAllCasesModalMock.mockImplementation(({ onRowClick }) => {
+      onRowClick();
+
+      return {
+        modal: <>{'test'}</>,
+        openModal: jest.fn(),
+        isModalOpen: true,
+        closeModal: jest.fn(),
+      };
+    });
+
+    mount(
+      <TestProviders>
+        <AddToCaseButton timelineId={'timeline-1'} />
+      </TestProviders>
+    );
+
+    expect(navigateToApp).toHaveBeenCalledWith('securitySolution:case', { path: '/create' });
+  });
+
+  it('navigates to the correct path with id', async () => {
+    useAllCasesModalMock.mockImplementation(({ onRowClick }) => {
+      onRowClick({ id: 'case-id' });
+
+      return {
+        modal: <>{'test'}</>,
+        openModal: jest.fn(),
+        isModalOpen: true,
+        closeModal: jest.fn(),
+      };
+    });
+
+    mount(
+      <TestProviders>
+        <AddToCaseButton timelineId={'timeline-1'} />
+      </TestProviders>
+    );
+
+    expect(navigateToApp).toHaveBeenCalledWith('securitySolution:case', { path: '/case-id' });
+  });
+});