[Cloud Posture] add tests for findings flyout toggling (#150551)

elastic · Feb 22, 2023 · cfe91b1 · cfe91b1
1 parent 67e19ec
commit cfe91b1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 35 deletions.
diff --git a/.../plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx b/.../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<FindingsTab>(tabs[0]);
 
   return (
-    <EuiFlyout onClose={onClose}>
+    <EuiFlyout onClose={onClose} data-test-subj={FINDINGS_FLYOUT}>
       <EuiFlyoutHeader>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem grow={false}>

diff --git a/...oud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx b/...oud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx
@@ -19,21 +19,40 @@ const chance = new Chance();
 type TableProps = PropsOf<typeof FindingsTable>;
 
 describe('<FindingsTable />', () => {
-  it('renders the zero state when status success and data has a length of zero ', async () => {
+  const renderWrapper = (opts?: Partial<TableProps>) => {
     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(
       <TestProvider>
         <FindingsTable {...props} />
       </TestProvider>
     );
+    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('<FindingsTable />', () => {
 
   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(
-      <TestProvider>
-        <FindingsTable {...props} />
-      </TestProvider>
-    );
+    renderWrapper({ items: data });
 
     data.forEach((item) => {
       expect(screen.getByText(item.rule.name)).toBeInTheDocument();
@@ -66,23 +75,12 @@ describe('<FindingsTable />', () => {
 
   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(
-      <TestProvider>
-        <FindingsTable {...props} />
-      </TestProvider>
-    );
+    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
@@ -28,6 +28,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 = <T extends string>(key: T, value: Serializable, negate: boolean) => void;
@@ -51,6 +52,7 @@ export const getExpandColumn = <T extends unknown>({
   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
@@ -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';