[Security Solution] Fixed flaky Jest config: x-pack/plugins/security_…

…solution/public/timelines (#143824)

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

* Improved Ids

* -

* Fixed test files and lazy suricata

* Cleaned up act error for async stuff

* -

* Cleaning up jest errors for timeline components

* -

* Used mount enzyme

* mocked react-beautiful-dnd

* type check

* Fixed snapshot

* mocked one more expensive lib

* Reduced the number of data rows to 1 to simplify rendering

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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 });