[Security Solution] Fixed flaky Jest config: x-pack/plugins/security_solution/public/timelines

x-pack/plugins/security_solution/public/common/components/top_n/helpers.test.tsx

@@ -21,11 +21,11 @@ import {
 } from './helpers';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 
-/** the following `TimelineId`s are detection alert tables */
-const detectionAlertsTimelines = [TableId.alertsOnAlertsPage, TableId.alertsOnRuleDetailsPage];
+/** the following scopes are detection alert tables */
+const detectionAlertsTables = [TableId.alertsOnAlertsPage, TableId.alertsOnRuleDetailsPage];
 
-/** the following `TimelineId`s are NOT detection alert tables */
-const otherTimelines = [
+/** the following scopes are NOT detection alert tables */
+const otherScopes = [
   TableId.hostsPageEvents,
   TableId.hostsPageSessions,
   TableId.networkPageEvents,
@@ -36,7 +36,7 @@ const otherTimelines = [
   TableId.kubernetesPageSessions,
 ];
 
-const othersWithoutActive = otherTimelines.filter((x) => x !== TimelineId.active);
+const othersWithoutActive = otherScopes.filter((x) => x !== TimelineId.active);
 
 const hostNameFilter: Filter = {
   meta: {
@@ -169,21 +169,21 @@ describe('getOptions', () => {
 });
 
 describe('isDetectionsAlertsTable', () => {
-  detectionAlertsTimelines.forEach((tableId) =>
+  detectionAlertsTables.forEach((tableId) =>
     test(`it returns true for detections alerts table '${tableId}'`, () => {
       expect(isDetectionsAlertsTable(tableId)).toEqual(true);
     })
   );
 
-  otherTimelines.forEach((tableId) =>
+  otherScopes.forEach((tableId) =>
     test(`it returns false for (NON alert table) timeline '${tableId}'`, () => {
       expect(isDetectionsAlertsTable(tableId)).toEqual(false);
     })
   );
 });
 
 describe('shouldIgnoreAlertFilters', () => {
-  detectionAlertsTimelines.forEach((tableId) => {
+  detectionAlertsTables.forEach((tableId) => {
     test(`it returns true when the view is 'raw' for detections alerts table '${tableId}'`, () => {
       const view = 'raw';
       expect(shouldIgnoreAlertFilters({ tableId, view })).toEqual(true);
@@ -195,7 +195,7 @@ describe('shouldIgnoreAlertFilters', () => {
     });
   });
 
-  otherTimelines.forEach((tableId) => {
+  otherScopes.forEach((tableId) => {
     test(`it returns false when the view is 'raw' for (NON alert table) timeline'${tableId}'`, () => {
       const view = 'raw';
       expect(shouldIgnoreAlertFilters({ tableId, view })).toEqual(false);
@@ -209,7 +209,7 @@ describe('shouldIgnoreAlertFilters', () => {
 });
 
 describe('removeIgnoredAlertFilters', () => {
-  detectionAlertsTimelines.forEach((tableId) => {
+  detectionAlertsTables.forEach((tableId) => {
     test(`it removes the ignored alert filters when the view is 'raw' for detections alerts table '${tableId}'`, () => {
       const view = 'raw';
       expect(removeIgnoredAlertFilters({ filters: allFilters, tableId, view })).toEqual([
@@ -223,7 +223,7 @@ describe('removeIgnoredAlertFilters', () => {
     });
   });
 
-  otherTimelines.forEach((tableId) => {
+  otherScopes.forEach((tableId) => {
     test(`it does NOT remove any filters when the view is 'raw' for (NON alert table) '${tableId}'`, () => {
       const view = 'alert';
       expect(removeIgnoredAlertFilters({ filters: allFilters, tableId, view })).toEqual(allFilters);
@@ -237,7 +237,7 @@ describe('removeIgnoredAlertFilters', () => {
 });
 
 describe('getSourcererScopeName', () => {
-  detectionAlertsTimelines.forEach((tableId) => {
+  detectionAlertsTables.forEach((tableId) => {
     test(`it returns the 'default' SourcererScopeName when the view is 'raw' for detections alerts table '${tableId}'`, () => {
       const view = 'raw';
       expect(getSourcererScopeName({ scopeId: tableId, view })).toEqual(SourcererScopeName.default);

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -346,24 +346,26 @@ export const mockGlobalState: State = {
           start: '2020-07-07T08:20:18.966Z',
           end: '2020-07-08T08:20:18.966Z',
         },
-        sessionViewConfig: null,
-        show: false,
+        resolveTimelineConfig: undefined,
         pinnedEventIds: {},
         pinnedEventsSaveObject: {},
-        itemsPerPageOptions: [5, 10, 20],
+        sessionViewConfig: null,
+        show: false,
         sort: [
           {
             columnId: '@timestamp',
             columnType: 'date',
             esTypes: ['date'],
-            sortDirection: Direction.desc,
+            sortDirection: 'desc',
           },
         ],
-        isSaving: false,
+        status: TimelineStatus.draft,
         version: null,
-        status: TimelineStatus.active,
-        isSelectAllChecked: false,
         selectedEventIds: {},
+        isSelectAllChecked: false,
+        filters: [],
+        isSaving: false,
+        itemsPerPageOptions: [10, 25, 50, 100],
       },
     },
     insertTimeline: null,

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { TestProviders } from '../../../../common/mock';
@@ -15,6 +15,15 @@ import { useGetUserCasesPermissions } from '../../../../common/lib/kibana';
 
 jest.mock('../../../../common/lib/kibana');
 const originalKibanaLib = jest.requireActual('../../../../common/lib/kibana');
+jest.mock('@kbn/i18n-react', () => {
+  const originalModule = jest.requireActual('@kbn/i18n-react');
+  const FormattedRelative = jest.fn().mockImplementation(() => '20 hours ago');
+
+  return {
+    ...originalModule,
+    FormattedRelative,
+  };
+});
 
 // Restore the useGetUserCasesPermissions so the calling functions can receive a valid permissions object
 // The returned permissions object will indicate that the user does not have permissions by default
@@ -30,21 +39,25 @@ jest.mock('../../../../common/hooks/use_resolve_conflict', () => {
 });
 
 describe('Pane', () => {
-  test('renders with display block by default', () => {
+  test('renders with display block by default', async () => {
     const EmptyComponent = render(
       <TestProviders>
         <Pane timelineId={TimelineId.test} />
       </TestProviders>
     );
-    expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: block');
+    await waitFor(() => {
+      expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: block');
+    });
   });
 
-  test('renders with display none when visibility is set to false', () => {
+  test('renders with display none when visibility is set to false', async () => {
     const EmptyComponent = render(
       <TestProviders>
         <Pane timelineId={TimelineId.test} visible={false} />
       </TestProviders>
     );
-    expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: none');
+    await waitFor(() => {
+      expect(EmptyComponent.getByTestId('flyout-pane')).toHaveStyle('display: none');
+    });
   });
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/header_actions.test.tsx

@@ -15,7 +15,7 @@ import type {
   ColumnHeaderOptions,
   HeaderActionProps,
 } from '../../../../../../common/types/timeline';
-import { TimelineTabs } from '../../../../../../common/types/timeline';
+import { TimelineId, TimelineTabs } from '../../../../../../common/types/timeline';
 import { timelineActions } from '../../../../store/timeline';
 import { getColumnHeader } from '../column_headers/helpers';
 
@@ -35,7 +35,7 @@ jest.mock('../../../../../common/hooks/use_selector', () => ({
 }));
 
 const columnId = 'test-field';
-const timelineId = 'test-timeline';
+const timelineId = TimelineId.test;
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 mockTriggersActionsUi.getFieldBrowser.mockImplementation(

x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx

@@ -7,7 +7,7 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-import { TableId } from '../../../../../../common/types/timeline';
+import { TableId, TimelineId } from '../../../../../../common/types/timeline';
 import { TestProviders, mockTimelineModel, mockTimelineData } from '../../../../../common/mock';
 import { Actions, isAlert } from '.';
 import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
@@ -97,7 +97,7 @@ const defaultProps = {
   setEventsLoading: () => {},
   showCheckboxes: true,
   showNotes: false,
-  timelineId: 'test',
+  timelineId: TimelineId.test,
   toggleShowNotes: () => {},
 };
 
@@ -271,7 +271,7 @@ describe('Actions', () => {
           <Actions
             {...defaultProps}
             ecsData={ecsData}
-            timelineId={TableId.kubernetesPageSessions}
+            timelineId={TableId.kubernetesPageSessions} // not a bug, this needs to be fixed by providing a generic interface for actions registry
           />
         </TestProviders>
       );

x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header/index.test.tsx

@@ -19,6 +19,7 @@ import { HeaderComponent } from '.';
 import { getNewSortDirectionOnClick, getNextSortDirection, getSortDirection } from './helpers';
 import { Direction } from '../../../../../../../common/search_strategy';
 import { useDeepEqualSelector } from '../../../../../../common/hooks/use_selector';
+import { TimelineId } from '../../../../../../../common/types';
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {
@@ -48,7 +49,7 @@ describe('Header', () => {
       sortDirection: Direction.desc,
     },
   ];
-  const timelineId = 'test';
+  const timelineId = TimelineId.test;
 
   beforeEach(() => {
     (useDeepEqualSelector as jest.Mock).mockReturnValue({ isLoading: false });