[Security Solution] Add cypress for expandable flyout previews (#188117)

## Summary This PR adds cypress test for the new preview panels that were recently added (#186857) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
elastic · Jul 17, 2024 · ff93b41 · ff93b41
1 parent 5684359
commit ff93b41
Show file tree

Hide file tree

Showing 17 changed files with 531 additions and 21 deletions.
diff --git a/...public/flyout/document_details/left/components/correlations_details_alerts_table.test.tsx b/...public/flyout/document_details/left/components/correlations_details_alerts_table.test.tsx
@@ -11,7 +11,6 @@ import { TestProviders } from '../../../../common/mock';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { CorrelationsDetailsAlertsTable } from './correlations_details_alerts_table';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
-import { CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID } from './test_ids';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { mockFlyoutApi } from '../../shared/mocks/mock_flyout_context';
 import { mockContextValue } from '../../shared/mocks/mock_context';
@@ -94,9 +93,7 @@ describe('CorrelationsDetailsAlertsTable', () => {
 
     expect(getByTestId(`${TEST_ID}InvestigateInTimeline`)).toBeInTheDocument();
     expect(getByTestId(`${TEST_ID}Table`)).toBeInTheDocument();
-    expect(
-      queryByTestId(CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID)
-    ).not.toBeInTheDocument();
+    expect(queryByTestId(`${TEST_ID}AlertPreviewButton`)).not.toBeInTheDocument();
 
     expect(jest.mocked(usePaginatedAlerts)).toHaveBeenCalled();
 
@@ -116,9 +113,9 @@ describe('CorrelationsDetailsAlertsTable', () => {
     });
 
     expect(getByTestId(`${TEST_ID}InvestigateInTimeline`)).toBeInTheDocument();
-    expect(getAllByTestId(CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID).length).toBe(2);
+    expect(getAllByTestId(`${TEST_ID}AlertPreviewButton`).length).toBe(2);
 
-    getAllByTestId(CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID)[0].click();
+    getAllByTestId(`${TEST_ID}AlertPreviewButton`)[0].click();
     expect(mockFlyoutApi.openPreviewPanel).toHaveBeenCalledWith({
       id: DocumentDetailsPreviewPanelKey,
       params: {

diff --git a/...tion/public/flyout/document_details/left/components/correlations_details_alerts_table.tsx b/...tion/public/flyout/document_details/left/components/correlations_details_alerts_table.tsx
@@ -15,7 +15,6 @@ import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
-import { CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID } from './test_ids';
 import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
 import type { DataProvider } from '../../../../../common/types';
 import { SeverityBadge } from '../../../../common/components/severity_badge';
@@ -133,7 +132,7 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
                 <AlertPreviewButton
                   id={row.id as string}
                   indexName={row.index as string}
-                  data-test-subj={CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID}
+                  data-test-subj={`${dataTestSubj}AlertPreviewButton`}
                   scopeId={scopeId}
                 />
               ),
@@ -210,7 +209,7 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
         },
       },
     ],
-    [isPreviewEnabled, scopeId]
+    [isPreviewEnabled, scopeId, dataTestSubj]
   );
 
   return (

diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/test_ids.ts b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/test_ids.ts
@@ -69,9 +69,6 @@ export const THREAT_INTELLIGENCE_DETAILS_LOADING_TEST_ID =
 
 export const CORRELATIONS_DETAILS_TEST_ID = `${PREFIX}CorrelationsDetails` as const;
 
-export const CORRELATIONS_DETAILS_ALERT_PREVIEW_BUTTON_TEST_ID =
-  `${CORRELATIONS_DETAILS_TEST_ID}AlertPreviewButton` as const;
-
 export const CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TEST_ID =
   `${CORRELATIONS_DETAILS_TEST_ID}AlertsByAncestrySection` as const;
 export const CORRELATIONS_DETAILS_BY_ANCESTRY_SECTION_TABLE_TEST_ID =

diff --git a/...s/e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_entities_tab.cy.ts b/...s/e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_entities_tab.cy.ts
@@ -10,10 +10,26 @@ import {
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_RIGHT_SECTION,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_TITLE,
+  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_LINK,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_RIGHT_SECTION,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_TITLE,
+  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_LINK,
 } from '../../../../screens/expandable_flyout/alert_details_left_panel_entities_tab';
+import {
+  HOST_PANEL_HEADER,
+  HOST_PREVIEW_PANEL_FOOTER,
+  OPEN_HOST_FLYOUT_LINK,
+} from '../../../../screens/hosts/flyout_host_panel';
+import {
+  USER_PANEL_HEADER,
+  USER_PREVIEW_PANEL_FOOTER,
+  OPEN_USER_FLYOUT_LINK,
+} from '../../../../screens/users/flyout_user_panel';
+import {
+  PREVIEW_SECTION,
+  PREVIEW_BANNER,
+} from '../../../../screens/expandable_flyout/alert_details_preview_panel';
 import { DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB } from '../../../../screens/expandable_flyout/alert_details_left_panel';
 import { openEntitiesTab } from '../../../../tasks/expandable_flyout/alert_details_left_panel_entities_tab';
 import { openInsightsTab } from '../../../../tasks/expandable_flyout/alert_details_left_panel';
@@ -52,6 +68,8 @@ describe(
         .should('have.text', 'Entities')
         .and('have.class', 'euiButtonGroupButton-isSelected');
 
+      // github.com/elastic/security-team/issues/9933
+      // Comment out when feature flag 'entityAlertPreviewEnabled' is enabled
       cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_TITLE).should(
         'contain.text',
         'test'
@@ -62,6 +80,8 @@ describe(
       );
       cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS).should('exist');
 
+      // github.com/elastic/security-team/issues/9933
+      // Comment out when feature flag 'entityAlertPreviewEnabled' is enabled
       cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_TITLE).should(
         'contain.text',
         'siem-kibana'
@@ -72,5 +92,46 @@ describe(
       );
       cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS).should('exist');
     });
+
+    // github.com/elastic/security-team/issues/9933
+    // Enable when feature flag 'entityAlertPreviewEnabled' is enabled
+    it.skip('should open host preview when click on host details title', () => {
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_LINK).should(
+        'contain.text',
+        'siem-kibana'
+      );
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_LINK).click();
+
+      cy.get(PREVIEW_SECTION).should('exist');
+      cy.get(PREVIEW_BANNER).should('have.text', 'Preview host details');
+      cy.get(HOST_PANEL_HEADER).should('exist');
+      cy.get(HOST_PREVIEW_PANEL_FOOTER).should('exist');
+
+      cy.log('click on footer link');
+
+      cy.get(OPEN_HOST_FLYOUT_LINK).click();
+      cy.get(HOST_PANEL_HEADER).should('exist');
+      cy.get(PREVIEW_SECTION).should('not.exist');
+      cy.get(HOST_PREVIEW_PANEL_FOOTER).should('not.exist');
+    });
+
+    // github.com/elastic/security-team/issues/9933
+    // Enable when feature flag 'entityAlertPreviewEnabled' is enabled
+    it.skip('should open user preview when click on user details title', () => {
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_LINK).should('contain.text', 'test');
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_LINK).click();
+
+      cy.get(PREVIEW_SECTION).should('exist');
+      cy.get(PREVIEW_BANNER).should('have.text', 'Preview user details');
+      cy.get(USER_PANEL_HEADER).should('exist');
+      cy.get(USER_PREVIEW_PANEL_FOOTER).should('exist');
+
+      cy.log('click on footer link');
+
+      cy.get(OPEN_USER_FLYOUT_LINK).click();
+      cy.get(USER_PANEL_HEADER).should('exist');
+      cy.get(PREVIEW_SECTION).should('not.exist');
+      cy.get(USER_PREVIEW_PANEL_FOOTER).should('not.exist');
+    });
   }
 );
diff --git a/...e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_prevalence_tab.cy.ts b/...e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_prevalence_tab.cy.ts
@@ -19,7 +19,23 @@ import {
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_HOST_PREVALENCE_CELL,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_USER_PREVALENCE_CELL,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_DATE_PICKER,
+  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_HOST_CELL,
+  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_USER_CELL,
 } from '../../../../screens/expandable_flyout/alert_details_left_panel_prevalence_tab';
+import {
+  HOST_PANEL_HEADER,
+  HOST_PREVIEW_PANEL_FOOTER,
+  OPEN_HOST_FLYOUT_LINK,
+} from '../../../../screens/hosts/flyout_host_panel';
+import {
+  USER_PANEL_HEADER,
+  USER_PREVIEW_PANEL_FOOTER,
+  OPEN_USER_FLYOUT_LINK,
+} from '../../../../screens/users/flyout_user_panel';
+import {
+  PREVIEW_SECTION,
+  PREVIEW_BANNER,
+} from '../../../../screens/expandable_flyout/alert_details_preview_panel';
 import { deleteAlertsAndRules } from '../../../../tasks/api_calls/common';
 import { login } from '../../../../tasks/login';
 import { visit } from '../../../../tasks/navigation';
@@ -83,5 +99,41 @@ describe(
         100
       );
     });
+
+    // github.com/elastic/security-team/issues/9933
+    // Enable when feature flag 'entityAlertPreviewEnabled' is enabled
+    it.skip('should open host preview when click on host details title', () => {
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_HOST_CELL).click();
+
+      cy.get(PREVIEW_SECTION).should('exist');
+      cy.get(PREVIEW_BANNER).should('have.text', 'Preview host details');
+      cy.get(HOST_PANEL_HEADER).should('exist');
+      cy.get(HOST_PREVIEW_PANEL_FOOTER).should('exist');
+
+      cy.log('should open host flyout when click on footer link');
+
+      cy.get(OPEN_HOST_FLYOUT_LINK).click();
+      cy.get(HOST_PANEL_HEADER).should('exist');
+      cy.get(PREVIEW_SECTION).should('not.exist');
+      cy.get(HOST_PREVIEW_PANEL_FOOTER).should('not.exist');
+    });
+
+    // github.com/elastic/security-team/issues/9933
+    // Enable when feature flag 'entityAlertPreviewEnabled' is enabled
+    it.skip('should open user preview when click on user details title', () => {
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_PREVALENCE_TABLE_USER_CELL).click();
+
+      cy.get(PREVIEW_SECTION).should('exist');
+      cy.get(PREVIEW_BANNER).should('have.text', 'Preview user details');
+      cy.get(USER_PANEL_HEADER).should('exist');
+      cy.get(USER_PREVIEW_PANEL_FOOTER).should('exist');
+
+      cy.log('should open host flyout when click on footer link');
+
+      cy.get(OPEN_USER_FLYOUT_LINK).click();
+      cy.get(USER_PANEL_HEADER).should('exist');
+      cy.get(PREVIEW_SECTION).should('not.exist');
+      cy.get(HOST_PREVIEW_PANEL_FOOTER).should('not.exist');
+    });
   }
 );