Skip to content

Commit 2b34b9b

Browse files
PhilippeObertiPhilippeOberti
committed
fix Jest and Cypress tests
1 parent 8e0fca8 commit 2b34b9b

File tree

14 files changed

+182
-296
lines changed

14 files changed

+182
-296
lines changed

‎x-pack/plugins/security_solution/public/flyout/document_details/right/components/correlations_overview.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import {
2222
CORRELATIONS_RELATED_CASES_TEST_ID,
2323
CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID,
2424
CORRELATIONS_TEST_ID,
25+
SUMMARY_ROW_BUTTON_TEST_ID,
2526
SUMMARY_ROW_TEXT_TEST_ID,
26-
SUMMARY_ROW_VALUE_TEST_ID,
2727
} from './test_ids';
2828
import { useShowRelatedAlertsByAncestry } from '../../shared/hooks/use_show_related_alerts_by_ancestry';
2929
import { useShowRelatedAlertsBySameSourceEvent } from '../../shared/hooks/use_show_related_alerts_by_same_source_event';
@@ -59,32 +59,32 @@ const TITLE_LINK_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_LINK_TEST_ID(CORRELATIO
5959
const TITLE_ICON_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID(CORRELATIONS_TEST_ID);
6060
const TITLE_TEXT_TEST_ID = EXPANDABLE_PANEL_HEADER_TITLE_TEXT_TEST_ID(CORRELATIONS_TEST_ID);
6161

62-
const SUPPRESSED_ALERTS_TEXT_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
62+
const SUPPRESSED_ALERTS_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
6363
CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID
6464
);
65-
const SUPPRESSED_ALERTS_VALUE_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
65+
const SUPPRESSED_ALERTS_VALUE_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(
6666
CORRELATIONS_SUPPRESSED_ALERTS_TEST_ID
6767
);
6868
const RELATED_ALERTS_BY_ANCESTRY_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
6969
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID
7070
);
71-
const RELATED_ALERTS_BY_ANCESTRY_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
71+
const RELATED_ALERTS_BY_ANCESTRY_VALUE_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(
7272
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID
7373
);
7474
const RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
7575
CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID
7676
);
77-
const RELATED_ALERTS_BY_SAME_SOURCE_EVENT_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
77+
const RELATED_ALERTS_BY_SAME_SOURCE_EVENT_VALUE_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(
7878
CORRELATIONS_RELATED_ALERTS_BY_SAME_SOURCE_EVENT_TEST_ID
7979
);
8080
const RELATED_ALERTS_BY_SESSION_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(
8181
CORRELATIONS_RELATED_ALERTS_BY_SESSION_TEST_ID
8282
);
83-
const RELATED_ALERTS_BY_SESSION_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(
83+
const RELATED_ALERTS_BY_SESSION_VALUE_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(
8484
CORRELATIONS_RELATED_ALERTS_BY_SESSION_TEST_ID
8585
);
8686
const RELATED_CASES_TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(CORRELATIONS_RELATED_CASES_TEST_ID);
87-
const RELATED_CASES_VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(CORRELATIONS_RELATED_CASES_TEST_ID);
87+
const RELATED_CASES_VALUE_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(CORRELATIONS_RELATED_CASES_TEST_ID);
8888

8989
const panelContextValue = {
9090
eventId: 'event id',

‎x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_summary_row.test.tsx‎

Lines changed: 114 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,39 @@ import React from 'react';
99
import { render } from '@testing-library/react';
1010
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
1111
import { InsightsSummaryRow } from './insights_summary_row';
12+
import { useDocumentDetailsContext } from '../../shared/context';
13+
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
14+
import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys';
15+
import { LeftPanelInsightsTab } from '../../left';
16+
17+
jest.mock('@kbn/expandable-flyout');
18+
jest.mock('../../shared/context');
19+
20+
const mockOpenLeftPanel = jest.fn();
21+
const scopeId = 'scopeId';
22+
const eventId = 'eventId';
23+
const indexName = 'indexName';
1224

1325
const testId = 'test';
1426
const textTestId = `${testId}Text`;
27+
const buttonTestId = `${testId}Button`;
1528
const valueTestId = `${testId}Value`;
1629
const loadingTestId = `${testId}Loading`;
1730

1831
describe('<InsightsSummaryRow />', () => {
19-
it('should render by default', () => {
20-
const { getByTestId } = render(
21-
<IntlProvider locale="en">
22-
<InsightsSummaryRow
23-
text={'this is a test for red'}
24-
value={<div>{'value for this'}</div>}
25-
color={'rgb(189,39,30)'}
26-
data-test-subj={testId}
27-
/>
28-
</IntlProvider>
29-
);
32+
beforeEach(() => {
33+
jest.clearAllMocks();
3034

31-
expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
32-
expect(getByTestId(valueTestId)).toHaveTextContent('value for this');
35+
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
36+
eventId,
37+
indexName,
38+
scopeId,
39+
isPreviewMode: false,
40+
});
41+
(useExpandableFlyoutApi as jest.Mock).mockReturnValue({ openLeftPanel: mockOpenLeftPanel });
3342
});
3443

35-
it('should render loading skeletton if loading is true', () => {
44+
it('should render loading skeleton if loading is true', () => {
3645
const { getByTestId } = render(
3746
<InsightsSummaryRow
3847
loading={true}
@@ -52,4 +61,95 @@ describe('<InsightsSummaryRow />', () => {
5261

5362
expect(container).toBeEmptyDOMElement();
5463
});
64+
65+
it('should render the value component', () => {
66+
const { getByTestId, queryByTestId } = render(
67+
<IntlProvider locale="en">
68+
<InsightsSummaryRow
69+
text={'this is a test for red'}
70+
value={<div>{'value for this'}</div>}
71+
data-test-subj={testId}
72+
/>
73+
</IntlProvider>
74+
);
75+
76+
expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
77+
expect(getByTestId(valueTestId)).toHaveTextContent('value for this');
78+
expect(queryByTestId(buttonTestId)).not.toBeInTheDocument();
79+
});
80+
81+
it('should render the value as EuiBadge and EuiButtonEmpty', () => {
82+
const { getByTestId, queryByTestId } = render(
83+
<IntlProvider locale="en">
84+
<InsightsSummaryRow text={'this is a test for red'} value={2} data-test-subj={testId} />
85+
</IntlProvider>
86+
);
87+
88+
expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
89+
expect(getByTestId(buttonTestId)).toHaveTextContent('2');
90+
expect(queryByTestId(valueTestId)).not.toBeInTheDocument();
91+
});
92+
93+
it('should render big numbers formatted correctly', () => {
94+
const { getByTestId } = render(
95+
<IntlProvider locale="en">
96+
<InsightsSummaryRow text={'this is a test for red'} value={2000} data-test-subj={testId} />
97+
</IntlProvider>
98+
);
99+
100+
expect(getByTestId(buttonTestId)).toHaveTextContent('2k');
101+
});
102+
103+
it('should open the expanded section to the correct tab when the number is clicked', () => {
104+
const { getByTestId } = render(
105+
<IntlProvider locale="en">
106+
<InsightsSummaryRow
107+
text={'this is a test for red'}
108+
value={2}
109+
expandedSubTab={'subTab'}
110+
data-test-subj={testId}
111+
/>
112+
</IntlProvider>
113+
);
114+
getByTestId(buttonTestId).click();
115+
116+
expect(mockOpenLeftPanel).toHaveBeenCalledWith({
117+
id: DocumentDetailsLeftPanelKey,
118+
path: {
119+
tab: LeftPanelInsightsTab,
120+
subTab: 'subTab',
121+
},
122+
params: {
123+
id: eventId,
124+
indexName,
125+
scopeId,
126+
},
127+
});
128+
});
129+
130+
it('should disabled the click when in preview mode', () => {
131+
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
132+
eventId,
133+
indexName,
134+
scopeId,
135+
isPreviewMode: true,
136+
});
137+
138+
const { getByTestId } = render(
139+
<IntlProvider locale="en">
140+
<InsightsSummaryRow
141+
text={'this is a test for red'}
142+
value={2}
143+
expandedSubTab={'subTab'}
144+
data-test-subj={testId}
145+
/>
146+
</IntlProvider>
147+
);
148+
const button = getByTestId(buttonTestId);
149+
150+
expect(button).toHaveAttribute('disabled');
151+
152+
button.click();
153+
expect(mockOpenLeftPanel).not.toHaveBeenCalled();
154+
});
55155
});

‎x-pack/plugins/security_solution/public/flyout/document_details/right/components/insights_summary_row.tsx‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,10 @@
66
*/
77

88
import type { ReactElement, VFC } from 'react';
9-
import { useCallback } from 'react';
10-
import { useMemo } from 'react';
11-
import React from 'react';
9+
import React, { useMemo, useCallback } from 'react';
1210
import { css } from '@emotion/react';
1311
import { i18n } from '@kbn/i18n';
14-
import { EuiButtonEmpty } from '@elastic/eui';
15-
import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
12+
import { EuiBadge, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
1613
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
1714
import { useDocumentDetailsContext } from '../../shared/context';
1815
import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys';
@@ -87,9 +84,14 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
8784
});
8885
}, [eventId, expandedSubTab, indexName, openLeftPanel, scopeId]);
8986

90-
const buttonDataTestSubj = useMemo(() => `${dataTestSubj}Button`, [dataTestSubj]);
91-
const button = useMemo(
92-
() => (
87+
const textDataTestSubj = useMemo(() => `${dataTestSubj}Text`, [dataTestSubj]);
88+
const loadingDataTestSubj = useMemo(() => `${dataTestSubj}Loading`, [dataTestSubj]);
89+
90+
const button = useMemo(() => {
91+
const buttonDataTestSubj = `${dataTestSubj}Button`;
92+
const valueDataTestSubj = `${dataTestSubj}Value`;
93+
94+
return (
9395
<>
9496
{typeof value === 'number' ? (
9597
<EuiBadge color="hollow">
@@ -105,14 +107,12 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
105107
</EuiButtonEmpty>
106108
</EuiBadge>
107109
) : (
108-
value
110+
<div data-test-subj={valueDataTestSubj}>{value}</div>
109111
)}
110112
</>
111-
),
112-
[buttonDataTestSubj, isPreviewMode, onClick, value]
113-
);
113+
);
114+
}, [dataTestSubj, isPreviewMode, onClick, value]);
114115

115-
const loadingDataTestSubj = useMemo(() => `${dataTestSubj}Loading`, [dataTestSubj]);
116116
if (loading) {
117117
return (
118118
<EuiSkeletonText
@@ -129,9 +129,6 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
129129
return null;
130130
}
131131

132-
const textDataTestSubj = `${dataTestSubj}Text`;
133-
const valueDataTestSubj = `${dataTestSubj}Value`;
134-
135132
return (
136133
<EuiFlexGroup
137134
gutterSize="none"
@@ -151,9 +148,7 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
151148
>
152149
{text}
153150
</EuiFlexItem>
154-
<EuiFlexItem grow={false} data-test-subj={valueDataTestSubj}>
155-
{button}
156-
</EuiFlexItem>
151+
<EuiFlexItem grow={false}>{button}</EuiFlexItem>
157152
</EuiFlexGroup>
158153
);
159154
};

‎x-pack/plugins/security_solution/public/flyout/document_details/right/components/related_alerts_by_ancestry.test.tsx‎

Lines changed: 6 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
1010
import { render } from '@testing-library/react';
1111
import {
1212
SUMMARY_ROW_TEXT_TEST_ID,
13-
SUMMARY_ROW_VALUE_TEST_ID,
1413
SUMMARY_ROW_LOADING_TEST_ID,
1514
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID,
16-
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID,
15+
SUMMARY_ROW_BUTTON_TEST_ID,
1716
} from './test_ids';
1817
import { RelatedAlertsByAncestry } from './related_alerts_by_ancestry';
1918
import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_related_alerts_by_ancestry';
@@ -35,7 +34,7 @@ const eventId = 'eventId';
3534
const indexName = 'indexName';
3635

3736
const TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID);
38-
const VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID);
37+
const BUTTON_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID);
3938
const LOADING_TEST_ID = SUMMARY_ROW_LOADING_TEST_ID(
4039
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID
4140
);
@@ -54,6 +53,7 @@ describe('<RelatedAlertsByAncestry />', () => {
5453
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
5554
eventId,
5655
indexName,
56+
scopeId,
5757
isPreviewMode: false,
5858
});
5959
(useExpandableFlyoutApi as jest.Mock).mockReturnValue({ openLeftPanel: mockOpenLeftPanel });
@@ -68,7 +68,7 @@ describe('<RelatedAlertsByAncestry />', () => {
6868

6969
const { getByTestId } = renderRelatedAlertsByAncestry();
7070
expect(getByTestId(TEXT_TEST_ID)).toHaveTextContent('Alert related by ancestry');
71-
expect(getByTestId(VALUE_TEST_ID)).toHaveTextContent('1');
71+
expect(getByTestId(BUTTON_TEST_ID)).toHaveTextContent('1');
7272
});
7373

7474
it('should render multiple related alerts correctly', () => {
@@ -80,19 +80,7 @@ describe('<RelatedAlertsByAncestry />', () => {
8080

8181
const { getByTestId } = renderRelatedAlertsByAncestry();
8282
expect(getByTestId(TEXT_TEST_ID)).toHaveTextContent('Alerts related by ancestry');
83-
expect(getByTestId(VALUE_TEST_ID)).toHaveTextContent('2');
84-
});
85-
86-
it('should render big number of related alerts correctly', () => {
87-
(useFetchRelatedAlertsByAncestry as jest.Mock).mockReturnValue({
88-
loading: false,
89-
error: false,
90-
dataCount: 2000,
91-
});
92-
93-
const { getByTestId } = renderRelatedAlertsByAncestry();
94-
expect(getByTestId(TEXT_TEST_ID)).toHaveTextContent('Alerts related by ancestry');
95-
expect(getByTestId(VALUE_TEST_ID)).toHaveTextContent('2k');
83+
expect(getByTestId(BUTTON_TEST_ID)).toHaveTextContent('2');
9684
});
9785

9886
it('should render loading skeleton', () => {
@@ -122,7 +110,7 @@ describe('<RelatedAlertsByAncestry />', () => {
122110
});
123111

124112
const { getByTestId } = renderRelatedAlertsByAncestry();
125-
getByTestId(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID).click();
113+
getByTestId(BUTTON_TEST_ID).click();
126114

127115
expect(mockOpenLeftPanel).toHaveBeenCalledWith({
128116
id: DocumentDetailsLeftPanelKey,
@@ -137,25 +125,4 @@ describe('<RelatedAlertsByAncestry />', () => {
137125
},
138126
});
139127
});
140-
141-
it('should disabled the click when in preview mode', () => {
142-
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
143-
eventId,
144-
indexName,
145-
isPreviewMode: true,
146-
});
147-
(useFetchRelatedAlertsByAncestry as jest.Mock).mockReturnValue({
148-
loading: false,
149-
error: false,
150-
dataCount: 1,
151-
});
152-
153-
const { getByTestId } = renderRelatedAlertsByAncestry();
154-
const button = getByTestId(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID);
155-
156-
expect(button).toHaveAttribute('disabled');
157-
158-
button.click();
159-
expect(mockOpenLeftPanel).not.toHaveBeenCalled();
160-
});
161128
});

0 commit comments

Comments
 (0)