From bba294d79901f934e71e6002516c0b75c2effaac Mon Sep 17 00:00:00 2001 From: Or Ouziel Date: Wed, 22 Feb 2023 09:25:35 +0200 Subject: [PATCH] [Cloud Posture] add tests for findings flyout toggling (#150551) (cherry picked from commit cfe91b199dab7e1951bb27a08a27af785de27267) --- .../findings_flyout/findings_flyout.tsx | 3 +- .../latest_findings_table.test.tsx | 66 +++++++++---------- .../pages/findings/layout/findings_layout.tsx | 2 + .../public/pages/findings/test_subjects.ts | 2 + 4 files changed, 38 insertions(+), 35 deletions(-) diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx index 8229084c10dd9..0c1f9dd288e8d 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx @@ -33,6 +33,7 @@ import { RuleTab } from './rule_tab'; import type { BenchmarkId } from '../../../../common/types'; import { CISBenchmarkIcon } from '../../../components/cis_benchmark_icon'; import { BenchmarkName } from '../../../../common/types'; +import { FINDINGS_FLYOUT } from '../test_subjects'; const tabs = [ { @@ -112,7 +113,7 @@ export const FindingsRuleFlyout = ({ onClose, findings }: FindingFlyoutProps) => const [tab, setTab] = useState(tabs[0]); return ( - + diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx index 968db8feb53b2..443f7c9d51de3 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx @@ -19,14 +19,15 @@ const chance = new Chance(); type TableProps = PropsOf; describe('', () => { - it('renders the zero state when status success and data has a length of zero ', async () => { + const renderWrapper = (opts?: Partial) => { const props: TableProps = { loading: false, - items: [], + items: opts?.items || [], sorting: { sort: { field: '@timestamp', direction: 'desc' } }, - pagination: { pageSize: 10, pageIndex: 1, totalItemCount: 0 }, + pagination: { pageSize: 10, pageIndex: 1, totalItemCount: opts?.items?.length || 0 }, setTableOptions: jest.fn(), onAddFilter: jest.fn(), + ...opts, }; render( @@ -34,6 +35,24 @@ describe('', () => { ); + return props; + }; + + it('opens/closes the flyout when clicked on expand/close buttons ', () => { + renderWrapper({ items: [getFindingsFixture()] }); + + expect(screen.queryByTestId(TEST_SUBJECTS.FINDINGS_FLYOUT)).not.toBeInTheDocument(); + expect(screen.queryByTestId(TEST_SUBJECTS.FINDINGS_TABLE_EXPAND_COLUMN)).toBeInTheDocument(); + + userEvent.click(screen.getByTestId(TEST_SUBJECTS.FINDINGS_TABLE_EXPAND_COLUMN)); + expect(screen.getByTestId(TEST_SUBJECTS.FINDINGS_FLYOUT)).toBeInTheDocument(); + + userEvent.click(screen.getByTestId('euiFlyoutCloseButton')); + expect(screen.queryByTestId(TEST_SUBJECTS.FINDINGS_FLYOUT)).not.toBeInTheDocument(); + }); + + it('renders the zero state when status success and data has a length of zero ', async () => { + renderWrapper({ items: [] }); expect( screen.getByTestId(TEST_SUBJECTS.LATEST_FINDINGS_TABLE_NO_FINDINGS_EMPTY_STATE) @@ -42,22 +61,12 @@ describe('', () => { it('renders the table with provided items', () => { const names = chance.unique(chance.sentence, 10); - const data = names.map(getFindingsFixture); + const data = names.map((name) => { + const fixture = getFindingsFixture(); + return { ...fixture, rule: { ...fixture.rule, name } }; + }); - const props: TableProps = { - loading: false, - items: data, - sorting: { sort: { field: '@timestamp', direction: 'desc' } }, - pagination: { pageSize: 10, pageIndex: 1, totalItemCount: 0 }, - setTableOptions: jest.fn(), - onAddFilter: jest.fn(), - }; - - render( - - - - ); + renderWrapper({ items: data }); data.forEach((item) => { expect(screen.getByText(item.rule.name)).toBeInTheDocument(); @@ -66,23 +75,12 @@ describe('', () => { it('adds filter with a cell button click', () => { const names = chance.unique(chance.sentence, 10); - const data = names.map(getFindingsFixture); - - const filterProps = { onAddFilter: jest.fn() }; - const props: TableProps = { - loading: false, - items: data, - sorting: { sort: { field: '@timestamp', direction: 'desc' } }, - pagination: { pageSize: 10, pageIndex: 1, totalItemCount: 0 }, - setTableOptions: jest.fn(), - ...filterProps, - }; + const data = names.map((name) => { + const fixture = getFindingsFixture(); + return { ...fixture, rule: { ...fixture.rule, name } }; + }); - render( - - - - ); + const props = renderWrapper({ items: data }); const row = data[0]; diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx index f650a6ec59e70..a7fab3b5d12c1 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx @@ -29,6 +29,7 @@ import { CspEvaluationBadge } from '../../../components/csp_evaluation_badge'; import { FINDINGS_TABLE_CELL_ADD_FILTER, FINDINGS_TABLE_CELL_ADD_NEGATED_FILTER, + FINDINGS_TABLE_EXPAND_COLUMN, } from '../test_subjects'; export type OnAddFilter = (key: T, value: Serializable, negate: boolean) => void; @@ -52,6 +53,7 @@ export const getExpandColumn = ({ width: '40px', actions: [ { + 'data-test-subj': FINDINGS_TABLE_EXPAND_COLUMN, name: i18n.translate('xpack.csp.expandColumnNameLabel', { defaultMessage: 'Expand' }), description: i18n.translate('xpack.csp.expandColumnDescriptionLabel', { defaultMessage: 'Expand', diff --git a/x-pack/plugins/cloud_security_posture/public/pages/findings/test_subjects.ts b/x-pack/plugins/cloud_security_posture/public/pages/findings/test_subjects.ts index 153811865c5c3..13c5de508849d 100644 --- a/x-pack/plugins/cloud_security_posture/public/pages/findings/test_subjects.ts +++ b/x-pack/plugins/cloud_security_posture/public/pages/findings/test_subjects.ts @@ -5,6 +5,8 @@ * 2.0. */ +export const FINDINGS_FLYOUT = 'findings_flyout'; +export const FINDINGS_TABLE_EXPAND_COLUMN = 'findings_table_expand_column'; export const FINDINGS_TABLE = 'findings_table'; export const FINDINGS_BY_RESOURCE_TABLE_NO_FINDINGS_EMPTY_STATE = 'findings-by-resource-table-no-findings-empty-state';