Skip to content

Commit

Permalink
unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhilippeOberti
PhilippeOberti committed Oct 29, 2024
1 parent cce6e70 commit 17b8593
Show file tree
Hide file tree
Showing 12 changed files with 163 additions and 232 deletions.
118 changes: 104 additions & 14 deletions ...ty_solution/public/flyout/document_details/right/components/insights_summary_row.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,39 @@ import React from 'react';
import { render } from '@testing-library/react';
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
import { InsightsSummaryRow } from './insights_summary_row';
import { useDocumentDetailsContext } from '../../shared/context';
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys';
import { LeftPanelInsightsTab } from '../../left';

jest.mock('@kbn/expandable-flyout');
jest.mock('../../shared/context');

const mockOpenLeftPanel = jest.fn();
const scopeId = 'scopeId';
const eventId = 'eventId';
const indexName = 'indexName';

const testId = 'test';
const textTestId = `${testId}Text`;
const buttonTestId = `${testId}Button`;
const valueTestId = `${testId}Value`;
const loadingTestId = `${testId}Loading`;

describe('<InsightsSummaryRow />', () => {
it('should render by default', () => {
const { getByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
text={'this is a test for red'}
value={<div>{'value for this'}</div>}
color={'rgb(189,39,30)'}
data-test-subj={testId}
/>
</IntlProvider>
);
beforeEach(() => {
jest.clearAllMocks();

expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
expect(getByTestId(valueTestId)).toHaveTextContent('value for this');
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
eventId,
indexName,
scopeId,
isPreviewMode: false,
});
(useExpandableFlyoutApi as jest.Mock).mockReturnValue({ openLeftPanel: mockOpenLeftPanel });
});

it('should render loading skeletton if loading is true', () => {
it('should render loading skeleton if loading is true', () => {
const { getByTestId } = render(
<InsightsSummaryRow
loading={true}
Expand All @@ -52,4 +61,85 @@ describe('<InsightsSummaryRow />', () => {

expect(container).toBeEmptyDOMElement();
});

it('should render the value component', () => {
const { getByTestId, queryByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
text={'this is a test for red'}
value={<div>{'value for this'}</div>}
data-test-subj={testId}
/>
</IntlProvider>
);

expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
expect(getByTestId(valueTestId)).toHaveTextContent('value for this');
expect(queryByTestId(buttonTestId)).not.toBeInTheDocument();
});

it('should render the value as EuiBadge and EuiButtonEmpty', () => {
const { getByTestId, queryByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow text={'this is a test for red'} value={2} data-test-subj={testId} />
</IntlProvider>
);

expect(getByTestId(textTestId)).toHaveTextContent('this is a test for red');
expect(getByTestId(buttonTestId)).toHaveTextContent('2');
expect(queryByTestId(valueTestId)).not.toBeInTheDocument();
});

it('should open the expanded section to the correct tab when the number is clicked', () => {
const { getByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
text={'this is a test for red'}
value={2}
expandedSubTab={'subTab'}
data-test-subj={testId}
/>
</IntlProvider>
);
getByTestId(buttonTestId).click();

expect(mockOpenLeftPanel).toHaveBeenCalledWith({
id: DocumentDetailsLeftPanelKey,
path: {
tab: LeftPanelInsightsTab,
subTab: 'subTab',
},
params: {
id: eventId,
indexName,
scopeId,
},
});
});

it('should disabled the click when in preview mode', () => {
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
eventId,
indexName,
scopeId,
isPreviewMode: true,
});

const { getByTestId } = render(
<IntlProvider locale="en">
<InsightsSummaryRow
text={'this is a test for red'}
value={2}
expandedSubTab={'subTab'}
data-test-subj={testId}
/>
</IntlProvider>
);
const button = getByTestId(buttonTestId);

expect(button).toHaveAttribute('disabled');

button.click();
expect(mockOpenLeftPanel).not.toHaveBeenCalled();
});
});
33 changes: 14 additions & 19 deletions ...ecurity_solution/public/flyout/document_details/right/components/insights_summary_row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,10 @@
*/

import type { ReactElement, VFC } from 'react';
import { useCallback } from 'react';
import { useMemo } from 'react';
import React from 'react';
import React, { useMemo, useCallback } from 'react';
import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import { EuiButtonEmpty } from '@elastic/eui';
import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
import { EuiBadge, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
import { useDocumentDetailsContext } from '../../shared/context';
import { DocumentDetailsLeftPanelKey } from '../../shared/constants/panel_keys';
Expand Down Expand Up @@ -87,9 +84,14 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
});
}, [eventId, expandedSubTab, indexName, openLeftPanel, scopeId]);

const buttonDataTestSubj = useMemo(() => `${dataTestSubj}Button`, [dataTestSubj]);
const button = useMemo(
() => (
const textDataTestSubj = useMemo(() => `${dataTestSubj}Text`, [dataTestSubj]);
const loadingDataTestSubj = useMemo(() => `${dataTestSubj}Loading`, [dataTestSubj]);

const button = useMemo(() => {
const buttonDataTestSubj = `${dataTestSubj}Button`;
const valueDataTestSubj = `${dataTestSubj}Value`;

return (
<>
{typeof value === 'number' ? (
<EuiBadge color="hollow">
Expand All @@ -105,14 +107,12 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
</EuiButtonEmpty>
</EuiBadge>
) : (
value
<div data-test-subj={valueDataTestSubj}>{value}</div>
)}
</>
),
[buttonDataTestSubj, isPreviewMode, onClick, value]
);
);
}, [dataTestSubj, isPreviewMode, onClick, value]);

const loadingDataTestSubj = useMemo(() => `${dataTestSubj}Loading`, [dataTestSubj]);
if (loading) {
return (
<EuiSkeletonText
Expand All @@ -129,9 +129,6 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
return null;
}

const textDataTestSubj = `${dataTestSubj}Text`;
const valueDataTestSubj = `${dataTestSubj}Value`;

return (
<EuiFlexGroup
gutterSize="none"
Expand All @@ -151,9 +148,7 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
>
{text}
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj={valueDataTestSubj}>
{button}
</EuiFlexItem>
<EuiFlexItem grow={false}>{button}</EuiFlexItem>
</EuiFlexGroup>
);
};
Expand Down
35 changes: 7 additions & 28 deletions ...ution/public/flyout/document_details/right/components/related_alerts_by_ancestry.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
import { render } from '@testing-library/react';
import {
SUMMARY_ROW_TEXT_TEST_ID,
SUMMARY_ROW_VALUE_TEST_ID,
SUMMARY_ROW_LOADING_TEST_ID,
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID,
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID,
SUMMARY_ROW_BUTTON_TEST_ID,
} from './test_ids';
import { RelatedAlertsByAncestry } from './related_alerts_by_ancestry';
import { useFetchRelatedAlertsByAncestry } from '../../shared/hooks/use_fetch_related_alerts_by_ancestry';
Expand All @@ -35,7 +34,7 @@ const eventId = 'eventId';
const indexName = 'indexName';

const TEXT_TEST_ID = SUMMARY_ROW_TEXT_TEST_ID(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID);
const VALUE_TEST_ID = SUMMARY_ROW_VALUE_TEST_ID(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID);
const BUTTON_TEST_ID = SUMMARY_ROW_BUTTON_TEST_ID(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID);
const LOADING_TEST_ID = SUMMARY_ROW_LOADING_TEST_ID(
CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_TEST_ID
);
Expand All @@ -54,6 +53,7 @@ describe('<RelatedAlertsByAncestry />', () => {
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
eventId,
indexName,
scopeId,
isPreviewMode: false,
});
(useExpandableFlyoutApi as jest.Mock).mockReturnValue({ openLeftPanel: mockOpenLeftPanel });
Expand All @@ -68,7 +68,7 @@ describe('<RelatedAlertsByAncestry />', () => {

const { getByTestId } = renderRelatedAlertsByAncestry();
expect(getByTestId(TEXT_TEST_ID)).toHaveTextContent('Alert related by ancestry');
expect(getByTestId(VALUE_TEST_ID)).toHaveTextContent('1');
expect(getByTestId(BUTTON_TEST_ID)).toHaveTextContent('1');
});

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

const { getByTestId } = renderRelatedAlertsByAncestry();
expect(getByTestId(TEXT_TEST_ID)).toHaveTextContent('Alerts related by ancestry');
expect(getByTestId(VALUE_TEST_ID)).toHaveTextContent('2');
expect(getByTestId(BUTTON_TEST_ID)).toHaveTextContent('2');
});

it('should render big number of related alerts correctly', () => {
Expand All @@ -92,7 +92,7 @@ describe('<RelatedAlertsByAncestry />', () => {

const { getByTestId } = renderRelatedAlertsByAncestry();
expect(getByTestId(TEXT_TEST_ID)).toHaveTextContent('Alerts related by ancestry');
expect(getByTestId(VALUE_TEST_ID)).toHaveTextContent('2k');
expect(getByTestId(BUTTON_TEST_ID)).toHaveTextContent('2k');
});

it('should render loading skeleton', () => {
Expand Down Expand Up @@ -122,7 +122,7 @@ describe('<RelatedAlertsByAncestry />', () => {
});

const { getByTestId } = renderRelatedAlertsByAncestry();
getByTestId(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID).click();
getByTestId(BUTTON_TEST_ID).click();

expect(mockOpenLeftPanel).toHaveBeenCalledWith({
id: DocumentDetailsLeftPanelKey,
Expand All @@ -137,25 +137,4 @@ describe('<RelatedAlertsByAncestry />', () => {
},
});
});

it('should disabled the click when in preview mode', () => {
(useDocumentDetailsContext as jest.Mock).mockReturnValue({
eventId,
indexName,
isPreviewMode: true,
});
(useFetchRelatedAlertsByAncestry as jest.Mock).mockReturnValue({
loading: false,
error: false,
dataCount: 1,
});

const { getByTestId } = renderRelatedAlertsByAncestry();
const button = getByTestId(CORRELATIONS_RELATED_ALERTS_BY_ANCESTRY_BUTTON_TEST_ID);

expect(button).toHaveAttribute('disabled');

button.click();
expect(mockOpenLeftPanel).not.toHaveBeenCalled();
});
});
Loading

0 comments on commit 17b8593

Please sign in to comment.