From f7d44b2b224da7e8c0c424e2ce4e026d488ec778 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 25 Apr 2023 10:32:41 +0200
Subject: [PATCH] tests: more of them + linting

---
 .../components/filter_group/buttons.tsx       |   8 +-
 .../components/filter_group/context_menu.tsx  |   4 +-
 .../{__tests__ => }/filter_group.test.tsx     | 156 ++++++++++++++----
 .../filter_group/filters_changed_banner.tsx   |   4 +-
 .../use_filters_sync_to_local_storage.test.ts |   2 +-
 .../{__tests__/mock.data.ts => mocks/data.ts} |   0
 .../components/filter_group/mocks/index.tsx   |   2 +-
 .../{__tests__ => }/utils.test.ts             |   4 +-
 8 files changed, 133 insertions(+), 47 deletions(-)
 rename x-pack/plugins/security_solution/public/common/components/filter_group/{__tests__ => }/filter_group.test.tsx (84%)
 rename x-pack/plugins/security_solution/public/common/components/filter_group/hooks/{__tests__ => }/use_filters_sync_to_local_storage.test.ts (97%)
 rename x-pack/plugins/security_solution/public/common/components/filter_group/{__tests__/mock.data.ts => mocks/data.ts} (100%)
 rename x-pack/plugins/security_solution/public/common/components/filter_group/{__tests__ => }/utils.test.ts (94%)

diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/buttons.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/buttons.tsx
index ad0a4df0700b3..71babb11c62e5 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/buttons.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/buttons.tsx
@@ -34,7 +34,7 @@ export const AddControl: FC<AddControlProps> = ({ onClick, ...rest }) => {
         data-test-subj={TEST_IDS.ADD_CONTROL}
         onClick={onClick}
         {...rest}
-        iconType={'plusInCircle'}
+        iconType="plusInCircle"
       />
     </EuiToolTip>
   );
@@ -60,8 +60,8 @@ export const SaveControls: FC<SaveControlsProps> = ({ onClick }) => {
           size="s"
           iconSize="m"
           display="base"
-          color={'primary'}
-          iconType={'save'}
+          color="primary"
+          iconType="save"
           data-test-subj={TEST_IDS.SAVE_CONTROL}
           onClick={onClick}
           onFocus={openPendingChangesPopover}
@@ -72,7 +72,7 @@ export const SaveControls: FC<SaveControlsProps> = ({ onClick }) => {
         />
       }
       isOpen={pendingChangesPopoverOpen}
-      anchorPosition={'upCenter'}
+      anchorPosition="upCenter"
       panelPaddingSize="none"
       closePopover={closePendingChangesPopover}
       panelProps={{
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/context_menu.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/context_menu.tsx
index 29a6bead584ae..bf672a5fabfa4 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/context_menu.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/context_menu.tsx
@@ -85,7 +85,7 @@ export const FilterGroupContextMenu = () => {
   const resetButton = useMemo(
     () => (
       <EuiContextMenuItem
-        key={'reset'}
+        key="reset"
         icon="eraser"
         aria-label={CONTEXT_MENU_RESET}
         onClick={withContextMenuAction(resetSelection)}
@@ -101,7 +101,7 @@ export const FilterGroupContextMenu = () => {
   const editControlsButton = useMemo(
     () => (
       <EuiContextMenuItem
-        key={'edit'}
+        key="edit"
         icon={isViewMode ? 'pencil' : 'minusInCircle'}
         aria-label={isViewMode ? EDIT_CONTROLS : DISCARD_CHANGES}
         onClick={
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/filter_group.test.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/filter_group.test.tsx
similarity index 84%
rename from x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/filter_group.test.tsx
rename to x-pack/plugins/security_solution/public/common/components/filter_group/filter_group.test.tsx
index bebbde8a0d86f..bdb01d2ad7e79 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/filter_group.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/filter_group.test.tsx
@@ -5,43 +5,50 @@
  * 2.0.
  */
 
-import { FilterGroup } from '..';
+import { FilterGroup } from '.';
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { DEFAULT_DETECTION_PAGE_FILTERS } from '../../../../../common/constants';
+import { act, render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { DEFAULT_DETECTION_PAGE_FILTERS } from '../../../../common/constants';
 import {
   createSecuritySolutionStorageMock,
   kibanaObservable,
   mockGlobalState,
   SUB_PLUGINS_REDUCER,
   TestProviders,
-} from '../../../mock';
+} from '../../mock';
 import type {
   ControlGroupOutput,
   ControlGroupInput,
   ControlGroupContainer,
 } from '@kbn/controls-plugin/public';
-import { initialInputData, sampleOutputData } from './mock.data';
-import { createStore } from '../../../store';
-import { useGetInitialUrlParamValue } from '../../../utils/global_query_string/helpers';
-import { TEST_IDS } from '../constants';
+import { OPTIONS_LIST_CONTROL } from '@kbn/controls-plugin/common';
+import { initialInputData, sampleOutputData } from './mocks/data';
+import { createStore } from '../../store';
+import { useGetInitialUrlParamValue } from '../../utils/global_query_string/helpers';
+import { TEST_IDS } from './constants';
 import {
   controlGroupFilterInputMock$,
   controlGroupFilterOutputMock$,
   getControlGroupMock,
-} from '../mocks/control_group';
-import { getMockedControlGroupRenderer } from '../mocks/control_group_renderer';
-import { URL_PARAM_ARRAY_EXCEPTION_MSG } from '../translations';
+} from './mocks/control_group';
+import { getMockedControlGroupRenderer } from './mocks/control_group_renderer';
+import { URL_PARAM_ARRAY_EXCEPTION_MSG } from './translations';
 
-jest.mock('../../../utils/global_query_string/helpers', () => {
+jest.mock('../../utils/global_query_string/helpers', () => {
   return {
-    ...jest.requireActual('../../../utils/global_query_string/helpers'),
+    ...jest.requireActual('../../utils/global_query_string/helpers'),
     useGetInitialUrlParamValue: jest.fn().mockImplementation(() => () => null),
   };
 });
 
-jest.mock('../../../hooks/use_space_id', () => {
+jest.mock('../../utils/global_query_string', () => {
+  return {
+    ...jest.requireActual('../../utils/global_query_string'),
+  };
+});
+
+jest.mock('../../hooks/use_space_id', () => {
   return {
     useSpaceId: jest.fn(() => 'test_space_id'),
   };
@@ -52,8 +59,10 @@ const LOCAL_STORAGE_KEY = 'securitySolution.test_space_id.pageFilters';
 const controlGroupMock = getControlGroupMock();
 
 const updateControlGroupInputMock = (newInput: ControlGroupInput) => {
-  controlGroupFilterInputMock$.next(newInput);
-  controlGroupMock.getInput.mockReturnValue(newInput);
+  act(() => {
+    controlGroupFilterInputMock$.next(newInput);
+    controlGroupMock.getInput.mockReturnValue(newInput);
+  });
 };
 
 const updateControlGroupOutputMock = (newOutput: ControlGroupOutput) => {
@@ -76,12 +85,6 @@ jest.mock('@kbn/controls-plugin/public/control_group/external_api/control_group_
   };
 });
 
-jest.mock('../../../utils/global_query_string', () => {
-  return {
-    ...jest.requireActual('../../../utils/global_query_string'),
-  };
-});
-
 const onFilterChangeMock = jest.fn();
 const onInitMock = jest.fn();
 
@@ -113,6 +116,10 @@ const openContextMenu = async () => {
 };
 
 describe(' Filter Group Component ', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.localStorage.clear();
+  });
   describe('Basic Functions ', () => {
     beforeEach(() => {
       jest.clearAllMocks();
@@ -216,6 +223,79 @@ describe(' Filter Group Component ', () => {
       });
     });
 
+    it('should call controlGroupTransform which returns object WITHOUT placeholder when type != OPTION_LIST_CONTROL on opening Flyout', async () => {
+      const returnValueWatcher = jest.fn();
+      controlGroupMock.openAddDataControlFlyout.mockImplementationOnce((fn) => {
+        if (fn) {
+          const returnValue = fn({}, 'NOT_OPTIONS_LIST_CONTROL');
+          returnValueWatcher(returnValue);
+        }
+      });
+
+      render(<TestComponent />);
+      // delete some panels
+      const newInputData = {
+        ...initialInputData,
+        panels: {
+          '0': initialInputData.panels['0'],
+        },
+      } as ControlGroupInput;
+
+      updateControlGroupInputMock(newInputData);
+      await openContextMenu();
+
+      fireEvent.click(screen.getByTestId(TEST_IDS.CONTEXT_MENU.EDIT));
+      await waitFor(() => {
+        // add button should be enabled now
+        expect(screen.getByTestId(TEST_IDS.ADD_CONTROL)).not.toBeDisabled();
+      });
+
+      fireEvent.click(screen.getByTestId(TEST_IDS.ADD_CONTROL));
+
+      expect(returnValueWatcher.mock.calls[0][0]).not.toMatchObject(
+        expect.objectContaining({
+          placeholder: '',
+        })
+      );
+    });
+
+    it('should call controlGroupTransform which returns object WITH correct placeholder value when type = OPTION_LIST_CONTROL on opening Flyout', async () => {
+      const returnValueWatcher = jest.fn();
+      controlGroupMock.openAddDataControlFlyout.mockImplementationOnce((fn) => {
+        if (fn) {
+          const returnValue = fn({}, OPTIONS_LIST_CONTROL);
+          returnValueWatcher(returnValue);
+        }
+      });
+
+      render(<TestComponent />);
+      // delete some panels
+      const newInputData = {
+        ...initialInputData,
+        panels: {
+          '0': initialInputData.panels['0'],
+        },
+      } as ControlGroupInput;
+
+      updateControlGroupInputMock(newInputData);
+
+      await openContextMenu();
+
+      fireEvent.click(screen.getByTestId(TEST_IDS.CONTEXT_MENU.EDIT));
+      await waitFor(() => {
+        // add button should be enabled now
+        expect(screen.getByTestId(TEST_IDS.ADD_CONTROL)).not.toBeDisabled();
+      });
+
+      fireEvent.click(screen.getByTestId(TEST_IDS.ADD_CONTROL));
+
+      expect(returnValueWatcher.mock.calls[0][0]).toMatchObject(
+        expect.objectContaining({
+          placeholder: '',
+        })
+      );
+    });
+
     it('should save controls successfully', async () => {
       render(<TestComponent />);
       updateControlGroupInputMock(initialInputData as ControlGroupInput);
@@ -402,7 +482,7 @@ describe(' Filter Group Component ', () => {
         })
       );
 
-      // should create only one control
+      // should create one control
       //
       render(<TestComponent />);
       expect(controlGroupMock.addOptionsListControl.mock.calls.length).toBe(1);
@@ -445,22 +525,19 @@ describe(' Filter Group Component ', () => {
   });
 
   describe('Filter Changed Banner', () => {
-    beforeAll(() => {
-      (useGetInitialUrlParamValue as jest.Mock).mockImplementation(() => {
-        return () => [
-          {
-            fieldName: 'abc',
-          },
-        ];
-      });
-    });
-
     beforeEach(() => {
       jest.clearAllMocks();
       global.localStorage.clear();
     });
 
     it('should show banner if url filter and stored filters are not same', async () => {
+      (useGetInitialUrlParamValue as jest.Mock).mockImplementationOnce(() => {
+        return () => [
+          {
+            fieldName: 'abc',
+          },
+        ];
+      });
       global.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(initialInputData));
 
       render(<TestComponent />);
@@ -471,6 +548,13 @@ describe(' Filter Group Component ', () => {
     });
 
     it('should use url filters if url and stored filters are not same', async () => {
+      (useGetInitialUrlParamValue as jest.Mock).mockImplementationOnce(() => {
+        return () => [
+          {
+            fieldName: 'abc',
+          },
+        ];
+      });
       global.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(initialInputData));
       render(<TestComponent />);
       updateControlGroupInputMock(initialInputData as ControlGroupInput);
@@ -497,13 +581,13 @@ describe(' Filter Group Component ', () => {
     });
 
     it('should ignore url params if there is an error in using them', async () => {
-      (useGetInitialUrlParamValue as jest.Mock).mockImplementation(() => {
+      (useGetInitialUrlParamValue as jest.Mock).mockImplementationOnce(() => {
         return () => ({
           fieldName: 'abc',
         });
       });
 
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementationOnce(jest.fn());
 
       render(<TestComponent />);
 
@@ -516,6 +600,7 @@ describe(' Filter Group Component ', () => {
     beforeEach(() => {
       jest.clearAllMocks();
       jest.useFakeTimers();
+      global.localStorage.clear();
     });
     it('should call onFilterChange when new filters have been published', async () => {
       render(<TestComponent />);
@@ -577,6 +662,7 @@ describe(' Filter Group Component ', () => {
   describe('Restore from local storage', () => {
     beforeEach(() => {
       jest.clearAllMocks();
+      global.localStorage.clear();
     });
     it('should restore from localstorage when one of the value is exists and exclude is false', async () => {
       const savedData = {
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/filters_changed_banner.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/filters_changed_banner.tsx
index fff768d72a179..98aeacf105347 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/filters_changed_banner.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/filters_changed_banner.tsx
@@ -31,12 +31,12 @@ export const FiltersChangedBanner: FC<FiltersChangesBanner> = ({
         <EuiCallOut
           data-test-subj={TEST_IDS.FILTERS_CHANGED_BANNER}
           title={FILTER_GROUP_BANNER_TITLE}
-          iconType={'iInCircle'}
+          iconType="iInCircle"
         >
           <p>{FILTER_GROUP_BANNER_MESSAGE}</p>
           <EuiButton
             data-test-subj="filter-group__save"
-            color={'primary'}
+            color="primary"
             onClick={saveChangesHandler}
           >
             {SAVE_CHANGES}
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/__tests__/use_filters_sync_to_local_storage.test.ts b/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters_sync_to_local_storage.test.ts
similarity index 97%
rename from x-pack/plugins/security_solution/public/common/components/filter_group/hooks/__tests__/use_filters_sync_to_local_storage.test.ts
rename to x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters_sync_to_local_storage.test.ts
index 703c0442b3086..66cedc5b0ebf5 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/__tests__/use_filters_sync_to_local_storage.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/hooks/use_filters_sync_to_local_storage.test.ts
@@ -7,7 +7,7 @@
 
 import type { ControlGroupInput } from '@kbn/controls-plugin/common';
 import { renderHook } from '@testing-library/react-hooks';
-import { useControlGroupSyncToLocalStorage } from '../use_control_group_sync_to_local_storage';
+import { useControlGroupSyncToLocalStorage } from './use_control_group_sync_to_local_storage';
 
 const TEST_STORAGE_KEY = 'test_key';
 const DEFAULT_STORED_VALUE = {
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/mock.data.ts b/x-pack/plugins/security_solution/public/common/components/filter_group/mocks/data.ts
similarity index 100%
rename from x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/mock.data.ts
rename to x-pack/plugins/security_solution/public/common/components/filter_group/mocks/data.ts
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/mocks/index.tsx b/x-pack/plugins/security_solution/public/common/components/filter_group/mocks/index.tsx
index 28c3e3fd0a53b..3fa2ff03318cb 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/mocks/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/mocks/index.tsx
@@ -26,7 +26,7 @@ import { getControlGroupMock } from './control_group';
  *  <TestProviders>
  *    <FilterGroup
  *      chainingSystem="NONE"
- *      dataViewId={''}
+ *      dataViewId=""
  *      initialControls={[]}
  *      onFilterChange={onFilterchangeMock}
  *      onInit={onInitMock}
diff --git a/x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/utils.test.ts b/x-pack/plugins/security_solution/public/common/components/filter_group/utils.test.ts
similarity index 94%
rename from x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/utils.test.ts
rename to x-pack/plugins/security_solution/public/common/components/filter_group/utils.test.ts
index 4c7e4cfd805fe..edcffd7502df9 100644
--- a/x-pack/plugins/security_solution/public/common/components/filter_group/__tests__/utils.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/filter_group/utils.test.ts
@@ -6,8 +6,8 @@
  */
 
 import type { ControlGroupInput } from '@kbn/controls-plugin/common';
-import { getFilterItemObjListFromControlInput } from '../utils';
-import { initialInputData } from './mock.data';
+import { getFilterItemObjListFromControlInput } from './utils';
+import { initialInputData } from './mocks/data';
 
 describe('utils', () => {
   describe('getFilterItemObjListFromControlOutput', () => {