Skip to content

Commit

Permalink
Cleaning up jest errors for timeline components
Browse files Browse the repository at this point in the history
  • Loading branch information
@YulNaumenko
YulNaumenko committed Oct 24, 2022
1 parent c626f5b commit 3b2c01f
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 36 deletions.
23 changes: 18 additions & 5 deletions x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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');
});
});
});
34 changes: 20 additions & 14 deletions x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { useMountAppended } from '../../../../common/utils/use_mount_appended';

import { TimelineHeader } from '.';
import { TimelineStatus, TimelineType } from '../../../../../common/types/timeline';
import { waitFor } from '@testing-library/react';

const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;

Expand All @@ -25,6 +26,11 @@ jest.mock('../../../../common/lib/kibana');
describe('Header', () => {
const indexPattern = mockIndexPattern;
const mount = useMountAppended();
const getWrapper = async (childrenComponent: JSX.Element) => {
const wrapper = mount(childrenComponent);
await waitFor(() => wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists());
return wrapper;
};
const props = {
browserFields: {},
dataProviders: mockDataProviders,
Expand All @@ -48,9 +54,9 @@ describe('Header', () => {
expect(wrapper).toMatchSnapshot();
});

test('it renders the data providers when show is true', () => {
test('it renders the data providers when show is true', async () => {
const testProps = { ...props, show: true };
const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand All @@ -59,14 +65,14 @@ describe('Header', () => {
expect(wrapper.find('[data-test-subj="dataProviders"]').exists()).toEqual(true);
});

test('it renders the unauthorized call out providers', () => {
test('it renders the unauthorized call out providers', async () => {
const testProps = {
...props,
filterManager: new FilterManager(mockUiSettingsForFilterManager),
showCallOutUnauthorizedMsg: true,
};

const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand All @@ -75,14 +81,14 @@ describe('Header', () => {
expect(wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists()).toEqual(true);
});

test('it renders the unauthorized call out with correct icon', () => {
test('it renders the unauthorized call out with correct icon', async () => {
const testProps = {
...props,
filterManager: new FilterManager(mockUiSettingsForFilterManager),
showCallOutUnauthorizedMsg: true,
};

const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand All @@ -93,14 +99,14 @@ describe('Header', () => {
).toEqual('alert');
});

test('it renders the unauthorized call out with correct message', () => {
test('it renders the unauthorized call out with correct message', async () => {
const testProps = {
...props,
filterManager: new FilterManager(mockUiSettingsForFilterManager),
showCallOutUnauthorizedMsg: true,
};

const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand All @@ -113,15 +119,15 @@ describe('Header', () => {
);
});

test('it renders the immutable timeline call out providers', () => {
test('it renders the immutable timeline call out providers', async () => {
const testProps = {
...props,
filterManager: new FilterManager(mockUiSettingsForFilterManager),
showCallOutUnauthorizedMsg: false,
status: TimelineStatus.immutable,
};

const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand All @@ -130,15 +136,15 @@ describe('Header', () => {
expect(wrapper.find('[data-test-subj="timelineImmutableCallOut"]').exists()).toEqual(true);
});

test('it renders the immutable timeline call out with correct icon', () => {
test('it renders the immutable timeline call out with correct icon', async () => {
const testProps = {
...props,
filterManager: new FilterManager(mockUiSettingsForFilterManager),
showCallOutUnauthorizedMsg: false,
status: TimelineStatus.immutable,
};

const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand All @@ -149,15 +155,15 @@ describe('Header', () => {
).toEqual('alert');
});

test('it renders the immutable timeline call out with correct message', () => {
test('it renders the immutable timeline call out with correct message', async () => {
const testProps = {
...props,
filterManager: new FilterManager(mockUiSettingsForFilterManager),
showCallOutUnauthorizedMsg: false,
status: TimelineStatus.immutable,
};

const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<TimelineHeader {...testProps} />
</TestProviders>
Expand Down
39 changes: 22 additions & 17 deletions ...s/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { mockSourcererScope } from '../../../../common/containers/sourcerer/mock
import { Direction } from '../../../../../common/search_strategy';
import { mockCasesContext } from '@kbn/cases-plugin/public/mocks/mock_cases_context';
import * as helpers from '../../../../common/lib/kuery';
import { waitFor } from '@testing-library/react';

jest.mock('../../../containers', () => ({
useTimelineEvents: jest.fn(),
Expand Down Expand Up @@ -109,7 +110,11 @@ describe('Timeline', () => {
const endDate = '2018-03-24T03:33:52.253Z';

const mount = useMountAppended();

const getWrapper = async (childrenComponent: JSX.Element) => {
const wrapper = mount(childrenComponent);
await waitFor(() => wrapper.find('[data-test-subj="timelineHeader"]').exists());
return wrapper;
};
beforeEach(() => {
(useTimelineEvents as jest.Mock).mockReturnValue([
false,
Expand Down Expand Up @@ -162,8 +167,8 @@ describe('Timeline', () => {
spyCombineQueries.mockClear();
});

test('should trim kqlQueryExpression', () => {
mount(
test('should trim kqlQueryExpression', async () => {
await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} />
</TestProviders>
Expand All @@ -184,8 +189,8 @@ describe('Timeline', () => {
expect(wrapper.find('QueryTabContentComponent')).toMatchSnapshot();
});

test('it renders the timeline header', () => {
const wrapper = mount(
test('it renders the timeline header', async () => {
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} />
</TestProviders>
Expand All @@ -194,8 +199,8 @@ describe('Timeline', () => {
expect(wrapper.find('[data-test-subj="timelineHeader"]').exists()).toEqual(true);
});

test('it renders the timeline table', () => {
const wrapper = mount(
test('it renders the timeline table', async () => {
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} />
</TestProviders>
Expand All @@ -206,15 +211,15 @@ describe('Timeline', () => {
).toEqual(true);
});

test('it does render the timeline table when the source is loading with no events', () => {
test('it does render the timeline table when the source is loading with no events', async () => {
(useSourcererDataView as jest.Mock).mockReturnValue({
browserFields: {},
loading: true,
indexPattern: {},
selectedPatterns: [],
missingPatterns: [],
});
const wrapper = mount(
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} />
</TestProviders>
Expand All @@ -226,8 +231,8 @@ describe('Timeline', () => {
expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
});

test('it does NOT render the timeline table when start is empty', () => {
const wrapper = mount(
test('it does NOT render the timeline table when start is empty', async () => {
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} start={''} />
</TestProviders>
Expand All @@ -239,8 +244,8 @@ describe('Timeline', () => {
expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
});

test('it does NOT render the timeline table when end is empty', () => {
const wrapper = mount(
test('it does NOT render the timeline table when end is empty', async () => {
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} end={''} />
</TestProviders>
Expand All @@ -252,8 +257,8 @@ describe('Timeline', () => {
expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
});

test('it does NOT render the paging footer when you do NOT have any data providers', () => {
const wrapper = mount(
test('it does NOT render the paging footer when you do NOT have any data providers', async () => {
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} />
</TestProviders>
Expand All @@ -262,8 +267,8 @@ describe('Timeline', () => {
expect(wrapper.find('[data-test-subj="table-pagination"]').exists()).toEqual(false);
});

it('it shows the timeline footer', () => {
const wrapper = mount(
it('it shows the timeline footer', async () => {
const wrapper = await getWrapper(
<TestProviders>
<QueryTabContentComponent {...props} />
</TestProviders>
Expand Down

0 comments on commit 3b2c01f

Please sign in to comment.