diff --git a/x-pack/plugins/security_solution/public/common/components/inspect/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/inspect/index.test.tsx
index f2b7d45972625e..0c07e0948cf151 100644
--- a/x-pack/plugins/security_solution/public/common/components/inspect/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/inspect/index.test.tsx
@@ -4,13 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { mount } from 'enzyme';
import React from 'react';
-import { ThemeProvider } from 'styled-components';
import {
- TestProviderWithoutDragAndDrop,
+ TestProviders,
mockGlobalState,
apolloClientObservable,
SUB_PLUGINS_REDUCER,
@@ -24,7 +22,6 @@ import { InspectButton, InspectButtonContainer, BUTTON_CLASS } from '.';
import { cloneDeep } from 'lodash/fp';
describe('Inspect Button', () => {
- const theme = () => ({ eui: euiDarkVars, darkMode: true });
const refetch = jest.fn();
const state: State = mockGlobalState;
const { storage } = createSecuritySolutionStorageMock();
@@ -59,9 +56,9 @@ describe('Inspect Button', () => {
});
test('Eui Empty Button', () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find('button[data-test-subj="inspect-empty-button"]').first().exists()).toBe(
true
@@ -70,9 +67,9 @@ describe('Inspect Button', () => {
test('it does NOT render the Eui Empty Button when timeline is timeline and compact is true', () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find('button[data-test-subj="inspect-empty-button"]').first().exists()).toBe(
false
@@ -81,9 +78,9 @@ describe('Inspect Button', () => {
test('Eui Icon Button', () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find('button[data-test-subj="inspect-icon-button"]').first().exists()).toBe(
true
@@ -92,9 +89,9 @@ describe('Inspect Button', () => {
test('renders the Icon Button when inputId does NOT equal global, but compact is true', () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find('button[data-test-subj="inspect-icon-button"]').first().exists()).toBe(
true
@@ -103,18 +100,18 @@ describe('Inspect Button', () => {
test('Eui Empty Button disabled', () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});
test('Eui Icon Button disabled', () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});
@@ -122,11 +119,11 @@ describe('Inspect Button', () => {
describe('InspectButtonContainer', () => {
test('it renders a transparent inspect button by default', async () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
@@ -136,11 +133,11 @@ describe('Inspect Button', () => {
test('it renders an opaque inspect button when it has mouse focus', async () => {
const wrapper = mount(
-
+
-
+
);
expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
@@ -169,11 +166,9 @@ describe('Inspect Button', () => {
});
test('Open Inspect Modal', () => {
const wrapper = mount(
-
-
-
-
-
+
+
+
);
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');
@@ -187,11 +182,9 @@ describe('Inspect Button', () => {
test('Close Inspect Modal', () => {
const wrapper = mount(
-
-
-
-
-
+
+
+
);
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');
@@ -209,9 +202,9 @@ describe('Inspect Button', () => {
test('Do not Open Inspect Modal if it is loading', () => {
const wrapper = mount(
-
+
-
+
);
store.getState().inputs.global.queries[0].loading = true;
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');
diff --git a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
index 297dc235a2a50b..010d2fac18af5c 100644
--- a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
+++ b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
@@ -74,23 +74,6 @@ const TestProvidersComponent: React.FC = ({
export const TestProviders = React.memo(TestProvidersComponent);
-const TestProviderWithoutDragAndDropComponent: React.FC = ({
- children,
- store = createStore(
- state,
- SUB_PLUGINS_REDUCER,
- apolloClientObservable,
- kibanaObservable,
- storage
- ),
-}) => (
-
- {children}
-
-);
-
-export const TestProviderWithoutDragAndDrop = React.memo(TestProviderWithoutDragAndDropComponent);
-
export const useFormFieldMock = (options?: Partial): FieldHook => {
const { form } = useForm();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
index 365444032b4029..ca90b6536600f6 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
@@ -4,16 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { mount } from 'enzyme';
import React, { ReactElement } from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
-import { ThemeProvider } from 'styled-components';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
-
-import { TestProviderWithoutDragAndDrop } from '../../../../common/mock/test_providers';
+import { TestProviders } from '../../../../common/mock/test_providers';
import { mockOpenTimelineQueryResults } from '../../../../common/mock/timeline_results';
import { useGetAllTimeline, getAllTimeline } from '../../../containers/all';
import { useTimelineStatus } from '../use_timeline_status';
@@ -30,34 +25,29 @@ jest.mock('../../../containers/all', () => {
getAllTimeline: originalModule.getAllTimeline,
};
});
-jest.mock('../use_timeline_types', () => {
- return {
- useTimelineTypes: jest.fn().mockReturnValue({
- timelineType: 'default',
- timelineTabs: ,
- timelineFilters: ,
- }),
- };
-});
+jest.mock('../use_timeline_types', () => ({
+ useTimelineTypes: jest.fn().mockReturnValue({
+ timelineType: 'default',
+ timelineTabs: ,
+ timelineFilters: ,
+ }),
+}));
-jest.mock('../use_timeline_status', () => {
- return {
- useTimelineStatus: jest.fn(),
- };
-});
+jest.mock('../use_timeline_status', () => ({
+ useTimelineStatus: jest.fn(),
+}));
// mock for EuiSelectable's virtualization
-jest.mock('react-virtualized-auto-sizer', () => {
- return ({
+jest.mock(
+ 'react-virtualized-auto-sizer',
+ () => ({
children,
}: {
children: (dimensions: { width: number; height: number }) => ReactElement;
- }) => children({ width: 100, height: 500 });
-});
+ }) => children({ width: 100, height: 500 })
+);
-// Failing: See https://github.com/elastic/kibana/issues/74814
-describe.skip('OpenTimelineModal', () => {
- const theme = () => ({ eui: euiDarkVars, darkMode: true });
+describe('OpenTimelineModal', () => {
const mockInstallPrepackagedTimelines = jest.fn();
beforeEach(() => {
((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
@@ -84,45 +74,29 @@ describe.skip('OpenTimelineModal', () => {
test('it renders the expected modal', async () => {
const wrapper = mount(
-
-
-
-
-
-
-
+
+
+
+
+
);
- await waitFor(
- () => {
- wrapper.update();
+ wrapper.update();
- expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(
- 1
- );
- },
- { timeout: 10000 }
- );
- }, 20000);
+ expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(1);
+ });
test('it installs elastic prebuilt templates', async () => {
const wrapper = mount(
-
-
-
-
-
-
-
+
+
+
+
+
);
- await waitFor(
- () => {
- wrapper.update();
+ wrapper.update();
- expect(mockInstallPrepackagedTimelines).toHaveBeenCalled();
- },
- { timeout: 10000 }
- );
- }, 20000);
+ expect(mockInstallPrepackagedTimelines).toHaveBeenCalled();
+ });
});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
index af2bd53df77db2..ab07b4e7564769 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
@@ -5,7 +5,7 @@
*/
import { EuiModalBody, EuiModalHeader } from '@elastic/eui';
-import React, { memo, useMemo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
import styled from 'styled-components';
import { OpenTimelineProps, ActionTimelineToShow } from '../types';
@@ -61,10 +61,10 @@ export const OpenTimelineModalBody = memo(
const SearchRowContent = useMemo(
() => (
- <>
+
{!!timelineFilter && timelineFilter}
{!!templateTimelineFilter && templateTimelineFilter}
-
+
),
[timelineFilter, templateTimelineFilter]
);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
index a3f180ce84c58a..ea587aeca2061e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
@@ -12,7 +12,7 @@ import { ThemeProvider } from 'styled-components';
// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
import { wait as waitFor } from '@testing-library/react';
-import { TestProviderWithoutDragAndDrop } from '../../../../common/mock/test_providers';
+import { TestProviders } from '../../../../common/mock/test_providers';
import { mockOpenTimelineQueryResults } from '../../../../common/mock/timeline_results';
import * as i18n from '../translations';
@@ -23,11 +23,11 @@ describe('OpenTimelineModalButton', () => {
test('it renders the expected button text', async () => {
const wrapper = mount(
-
+
-
+
);
await waitFor(() => {
@@ -44,11 +44,11 @@ describe('OpenTimelineModalButton', () => {
const onClick = jest.fn();
const wrapper = mount(
-
+
-
+
);