Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution] Fix unit tests #75165

Merged
merged 1 commit into from
Aug 18, 2020
Merged

[Security Solution] Fix unit tests #75165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 25 additions & 32 deletions x-pack/plugins/security_solution/public/common/components/inspect/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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();
Expand Down Expand Up @@ -59,9 +56,9 @@ describe('Inspect Button', () => {
});
test('Eui Empty Button', () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} inputId="timeline" title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
expect(wrapper.find('button[data-test-subj="inspect-empty-button"]').first().exists()).toBe(
true
Expand All @@ -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(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton compact={true} queryId={newQuery.id} inputId="timeline" title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
expect(wrapper.find('button[data-test-subj="inspect-empty-button"]').first().exists()).toBe(
false
Expand All @@ -81,9 +78,9 @@ describe('Inspect Button', () => {

test('Eui Icon Button', () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
expect(wrapper.find('button[data-test-subj="inspect-icon-button"]').first().exists()).toBe(
true
Expand All @@ -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(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton compact={true} inputId="timeline" queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
expect(wrapper.find('button[data-test-subj="inspect-icon-button"]').first().exists()).toBe(
true
Expand All @@ -103,30 +100,30 @@ describe('Inspect Button', () => {

test('Eui Empty Button disabled', () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton isDisabled={true} queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});

test('Eui Icon Button disabled', () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton isDisabled={true} queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
});

describe('InspectButtonContainer', () => {
test('it renders a transparent inspect button by default', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButtonContainer>
<InspectButton queryId={newQuery.id} title="My title" />
</InspectButtonContainer>
</TestProviderWithoutDragAndDrop>
</TestProviders>
);

expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
Expand All @@ -136,11 +133,11 @@ describe('Inspect Button', () => {

test('it renders an opaque inspect button when it has mouse focus', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButtonContainer>
<InspectButton queryId={newQuery.id} title="My title" />
</InspectButtonContainer>
</TestProviderWithoutDragAndDrop>
</TestProviders>
);

expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
Expand Down Expand Up @@ -169,11 +166,9 @@ describe('Inspect Button', () => {
});
test('Open Inspect Modal', () => {
const wrapper = mount(
<ThemeProvider theme={theme}>
<TestProviderWithoutDragAndDrop store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</ThemeProvider>
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');

Expand All @@ -187,11 +182,9 @@ describe('Inspect Button', () => {

test('Close Inspect Modal', () => {
const wrapper = mount(
<ThemeProvider theme={theme}>
<TestProviderWithoutDragAndDrop store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</ThemeProvider>
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviders>
);
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');

Expand All @@ -209,9 +202,9 @@ describe('Inspect Button', () => {

test('Do not Open Inspect Modal if it is loading', () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop store={store}>
<TestProviders store={store}>
<InspectButton queryId={newQuery.id} title="My title" />
</TestProviderWithoutDragAndDrop>
</TestProviders>
);
store.getState().inputs.global.queries[0].loading = true;
wrapper.find('button[data-test-subj="inspect-icon-button"]').first().simulate('click');
Expand Down
17 changes: 0 additions & 17 deletions x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,23 +74,6 @@ const TestProvidersComponent: React.FC<Props> = ({

export const TestProviders = React.memo(TestProvidersComponent);

const TestProviderWithoutDragAndDropComponent: React.FC<Props> = ({
children,
store = createStore(
state,
SUB_PLUGINS_REDUCER,
apolloClientObservable,
kibanaObservable,
storage
),
}) => (
<I18nProvider>
<ReduxStoreProvider store={store}>{children}</ReduxStoreProvider>
</I18nProvider>
);

export const TestProviderWithoutDragAndDrop = React.memo(TestProviderWithoutDragAndDropComponent);

export const useFormFieldMock = (options?: Partial<FieldHook>): FieldHook => {
const { form } = useForm();

Expand Down
92 changes: 33 additions & 59 deletions ...ity_solution/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -30,34 +25,29 @@ jest.mock('../../../containers/all', () => {
getAllTimeline: originalModule.getAllTimeline,
};
});
jest.mock('../use_timeline_types', () => {
return {
useTimelineTypes: jest.fn().mockReturnValue({
timelineType: 'default',
timelineTabs: <div />,
timelineFilters: <div />,
}),
};
});
jest.mock('../use_timeline_types', () => ({
useTimelineTypes: jest.fn().mockReturnValue({
timelineType: 'default',
timelineTabs: <div />,
timelineFilters: <div />,
}),
}));

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({
Expand All @@ -84,45 +74,29 @@ describe.skip('OpenTimelineModal', () => {

test('it renders the expected modal', async () => {
const wrapper = mount(
<ThemeProvider theme={theme}>
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModal onClose={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
</ThemeProvider>
<TestProviders>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModal onClose={jest.fn()} />
</MockedProvider>
</TestProviders>
);

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(
<ThemeProvider theme={theme}>
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModal onClose={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
</ThemeProvider>
<TestProviders>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModal onClose={jest.fn()} />
</MockedProvider>
</TestProviders>
);

await waitFor(
() => {
wrapper.update();
wrapper.update();

expect(mockInstallPrepackagedTimelines).toHaveBeenCalled();
},
{ timeout: 10000 }
);
}, 20000);
expect(mockInstallPrepackagedTimelines).toHaveBeenCalled();
});
});
6 changes: 3 additions & 3 deletions ...ublic/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -61,10 +61,10 @@ export const OpenTimelineModalBody = memo<OpenTimelineProps>(

const SearchRowContent = useMemo(
() => (
<>
<Fragment key="search-row-content">
{!!timelineFilter && timelineFilter}
{!!templateTimelineFilter && templateTimelineFilter}
</>
</Fragment>
),
[timelineFilter, templateTimelineFilter]
);
Expand Down
10 changes: 5 additions & 5 deletions ...imelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -23,11 +23,11 @@ describe('OpenTimelineModalButton', () => {

test('it renders the expected button text', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<TestProviders>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onClick={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
</TestProviders>
);

await waitFor(() => {
Expand All @@ -44,11 +44,11 @@ describe('OpenTimelineModalButton', () => {
const onClick = jest.fn();
const wrapper = mount(
<ThemeProvider theme={theme}>
<TestProviderWithoutDragAndDrop>
<TestProviders>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onClick={onClick} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
</TestProviders>
</ThemeProvider>
);

Expand Down