[Security Solution] improve and add Cypress tests for expandable flyo…

…ut (elastic#170993)

x-pack/plugins/security_solution/public/flyout/document_details/left/components/test_ids.ts

@@ -11,7 +11,6 @@ import { PREFIX } from '../../../shared/test_ids';
 
 export const ANALYZER_GRAPH_TEST_ID = `${PREFIX}AnalyzerGraph` as const;
 export const SESSION_VIEW_TEST_ID = `${PREFIX}SessionView` as const;
-export const SESSION_VIEW_ERROR_TEST_ID = `${PREFIX}SessionViewError` as const;
 
 /* Insights tab */
 

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

@@ -56,7 +56,7 @@ export const HeaderTitle: FC = memo(() => {
 
   const eventTitle = (
     <EuiTitle size="s">
-      <h2 data-test-subj={FLYOUT_HEADER_TITLE_TEST_ID}>
+      <h2>
         <FormattedMessage
           id="xpack.securitySolution.flyout.right.header.headerTitle"
           defaultMessage="Event details"
@@ -71,7 +71,9 @@ export const HeaderTitle: FC = memo(() => {
       <EuiSpacer size="m" />
       {timestamp && <PreferenceFormattedDate value={new Date(timestamp)} />}
       <EuiSpacer size="xs" />
-      {isAlert && !isEmpty(ruleName) ? ruleTitle : eventTitle}
+      <div data-test-subj={FLYOUT_HEADER_TITLE_TEST_ID}>
+        {isAlert && !isEmpty(ruleName) ? ruleTitle : eventTitle}
+      </div>
       <EuiSpacer size="m" />
       <EuiFlexGroup direction="row" gutterSize="m" responsive={false}>
         <EuiFlexItem grow={false}>

x-pack/plugins/security_solution/public/flyout/document_details/right/components/test_ids.ts

@@ -97,8 +97,6 @@ export const ENTITIES_HOST_OVERVIEW_LAST_SEEN_TEST_ID =
   `${ENTITIES_HOST_OVERVIEW_TEST_ID}LastSeen` as const;
 export const ENTITIES_HOST_OVERVIEW_RISK_LEVEL_TEST_ID =
   `${ENTITIES_HOST_OVERVIEW_TEST_ID}RiskLevel` as const;
-export const TECHNICAL_PREVIEW_ICON_TEST_ID =
-  `${INSIGHTS_ENTITIES_TEST_ID}TechnicalPreviewIcon` as const;
 
 /* Threat intelligence */
 

x-pack/plugins/security_solution/public/flyout/shared/components/flyout_title.test.tsx

@@ -9,46 +9,40 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { FlyoutTitle } from './flyout_title';
 import {
-  FLYOUT_TITLE_TEST_ID,
   TITLE_HEADER_ICON_TEST_ID,
+  TITLE_HEADER_TEXT_TEST_ID,
   TITLE_LINK_ICON_TEST_ID,
 } from './test_ids';
 
 const title = 'test title';
+const TEST_ID = 'test';
 
 describe('<FlyoutTitle />', () => {
   it('should render title and icon', () => {
     const { getByTestId, queryByTestId } = render(
-      <FlyoutTitle title={title} iconType={'warning'} />
+      <FlyoutTitle title={title} iconType={'warning'} data-test-subj={TEST_ID} />
     );
 
-    expect(getByTestId(FLYOUT_TITLE_TEST_ID)).toHaveTextContent(title);
-    expect(
-      getByTestId(FLYOUT_TITLE_TEST_ID).querySelector('[data-euiicon-type="warning"]')
-    ).toBeInTheDocument();
-    expect(queryByTestId(TITLE_LINK_ICON_TEST_ID)).not.toBeInTheDocument();
+    expect(getByTestId(TITLE_HEADER_TEXT_TEST_ID(TEST_ID))).toHaveTextContent(title);
+    expect(getByTestId(TITLE_HEADER_ICON_TEST_ID(TEST_ID))).toBeInTheDocument();
+    expect(queryByTestId(TITLE_LINK_ICON_TEST_ID(TEST_ID))).not.toBeInTheDocument();
   });
 
   it('should not render icon if iconType is not passed', () => {
-    const { getByTestId, queryByTestId } = render(<FlyoutTitle title={title} />);
+    const { getByTestId, queryByTestId } = render(
+      <FlyoutTitle title={title} data-test-subj={TEST_ID} />
+    );
 
-    expect(getByTestId(FLYOUT_TITLE_TEST_ID)).toBeInTheDocument();
-    expect(queryByTestId(TITLE_HEADER_ICON_TEST_ID)).not.toBeInTheDocument();
-    expect(queryByTestId(TITLE_LINK_ICON_TEST_ID)).not.toBeInTheDocument();
+    expect(getByTestId(TITLE_HEADER_TEXT_TEST_ID(TEST_ID))).toBeInTheDocument();
+    expect(queryByTestId(TITLE_HEADER_ICON_TEST_ID(TEST_ID))).not.toBeInTheDocument();
+    expect(queryByTestId(TITLE_LINK_ICON_TEST_ID(TEST_ID))).not.toBeInTheDocument();
   });
 
   it('should render popout icon if title is a link', () => {
-    const { getByTestId } = render(<FlyoutTitle title={title} isLink />);
-
-    expect(getByTestId(FLYOUT_TITLE_TEST_ID)).toHaveTextContent(title);
-    expect(getByTestId(TITLE_LINK_ICON_TEST_ID)).toBeInTheDocument();
-    expect(
-      getByTestId(FLYOUT_TITLE_TEST_ID).querySelector('[data-euiicon-type="popout"]')
-    ).toBeInTheDocument();
-  });
+    const { getByTestId } = render(<FlyoutTitle title={title} isLink data-test-subj={TEST_ID} />);
 
-  it('should render title with custom data test subject', () => {
-    const { getByTestId } = render(<FlyoutTitle title={title} data-test-subj={'test-title'} />);
-    expect(getByTestId('test-title')).toHaveTextContent(title);
+    expect(getByTestId(TITLE_HEADER_TEXT_TEST_ID(TEST_ID))).toHaveTextContent(title);
+    expect(getByTestId(TITLE_LINK_ICON_TEST_ID(TEST_ID))).toBeInTheDocument();
+    expect(getByTestId(TITLE_LINK_ICON_TEST_ID(TEST_ID))).toBeInTheDocument();
   });
 });

x-pack/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx

@@ -18,11 +18,6 @@ import {
   EuiTextColor,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import {
-  FLYOUT_TITLE_TEST_ID,
-  TITLE_HEADER_ICON_TEST_ID,
-  TITLE_LINK_ICON_TEST_ID,
-} from './test_ids';
 
 export interface FlyoutTitleProps {
   /**
@@ -48,7 +43,7 @@ export interface FlyoutTitleProps {
  * Title component with optional icon to indicate the type of document, can be used for text or a link
  */
 export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
-  ({ title, iconType, isLink = false, 'data-test-subj': dataTestSubj = FLYOUT_TITLE_TEST_ID }) => {
+  ({ title, iconType, isLink = false, 'data-test-subj': dataTestSubj }) => {
     const { euiTheme } = useEuiTheme();
 
     const titleIcon = useMemo(() => {
@@ -57,23 +52,23 @@ export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
           type={iconType}
           size="m"
           className="eui-alignBaseline"
-          data-test-subj={TITLE_HEADER_ICON_TEST_ID}
+          data-test-subj={`${dataTestSubj}Icon`}
           css={css`
             margin-right: ${euiTheme.size.xs};
           `}
         />
       ) : null;
-    }, [iconType, euiTheme.size.xs]);
+    }, [dataTestSubj, iconType, euiTheme.size.xs]);
 
     const titleComponent = useMemo(() => {
       return (
-        <EuiTitle size="s">
+        <EuiTitle size="s" data-test-subj={`${dataTestSubj}Text`}>
           <EuiTextColor color={isLink ? euiTheme.colors.primaryText : undefined}>
             <span>{title}</span>
           </EuiTextColor>
         </EuiTitle>
       );
-    }, [title, isLink, euiTheme.colors.primaryText]);
+    }, [dataTestSubj, title, isLink, euiTheme.colors.primaryText]);
 
     const linkIcon = useMemo(() => {
       return (
@@ -83,19 +78,14 @@ export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
           css={css`
             margin-bottom: ${euiTheme.size.xs};
           `}
-          data-test-subj={TITLE_LINK_ICON_TEST_ID}
+          data-test-subj={`${dataTestSubj}LinkIcon`}
         />
       );
-    }, [euiTheme.size.xs]);
+    }, [dataTestSubj, euiTheme.size.xs]);
 
     return (
       <EuiToolTip content={title}>
-        <EuiFlexGroup
-          alignItems="flexEnd"
-          gutterSize="xs"
-          data-test-subj={dataTestSubj}
-          responsive={false}
-        >
+        <EuiFlexGroup alignItems="flexEnd" gutterSize="xs" responsive={false}>
           <EuiFlexItem>
             <div
               css={css`

x-pack/plugins/security_solution/public/flyout/shared/components/test_ids.ts

@@ -33,6 +33,6 @@ export const COLLAPSE_DETAILS_BUTTON_TEST_ID =
   `${FLYOUT_NAVIGATION_TEST_ID}CollapseDetailButton` as const;
 export const HEADER_ACTIONS_TEST_ID = `${FLYOUT_NAVIGATION_TEST_ID}Actions` as const;
 
-export const FLYOUT_TITLE_TEST_ID = `${PREFIX}Title` as const;
-export const TITLE_HEADER_ICON_TEST_ID = `${FLYOUT_TITLE_TEST_ID}Icon` as const;
-export const TITLE_LINK_ICON_TEST_ID = `${FLYOUT_TITLE_TEST_ID}LinkIcon` as const;
+export const TITLE_HEADER_ICON_TEST_ID = (dataTestSubj: string) => `${dataTestSubj}Icon`;
+export const TITLE_HEADER_TEXT_TEST_ID = (dataTestSubj: string) => `${dataTestSubj}Text`;
+export const TITLE_LINK_ICON_TEST_ID = (dataTestSubj: string) => `${dataTestSubj}LinkIcon`;

x-pack/test/security_solution_cypress/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_analyzer_graph_tab.cy.ts

@@ -9,10 +9,7 @@ import {
   DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON,
   DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_GRAPH_ANALYZER_CONTENT,
 } from '../../../../screens/expandable_flyout/alert_details_left_panel_analyzer_graph_tab';
-import {
-  DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB,
-  DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_BUTTON_GROUP,
-} from '../../../../screens/expandable_flyout/alert_details_left_panel';
+import { DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB } from '../../../../screens/expandable_flyout/alert_details_left_panel';
 import { openGraphAnalyzerTab } from '../../../../tasks/expandable_flyout/alert_details_left_panel_analyzer_graph_tab';
 import { expandDocumentDetailsExpandableFlyoutLeftSection } from '../../../../tasks/expandable_flyout/alert_details_right_panel';
 import { expandFirstAlertExpandableFlyout } from '../../../../tasks/expandable_flyout/common';
@@ -41,17 +38,15 @@ describe.skip(
 
     it('should display analyzer graph and node list under visualize', () => {
       cy.get(DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB)
-        .should('be.visible')
-        .and('have.text', 'Visualize');
-
-      cy.get(DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_BUTTON_GROUP).should('be.visible');
+        .should('have.text', 'Visualize')
+        .and('have.class', 'euiTab-isSelected');
 
       cy.get(DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_GRAPH_ANALYZER_BUTTON)
-        .should('be.visible')
-        .and('have.text', 'Analyzer Graph');
+        .should('have.text', 'Analyzer Graph')
+        .and('have.class', 'euiButtonGroupButton-isSelected');
 
-      cy.get(DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_GRAPH_ANALYZER_CONTENT).should('be.visible');
-      cy.get(ANALYZER_NODE).first().should('be.visible');
+      cy.get(DOCUMENT_DETAILS_FLYOUT_VISUALIZE_TAB_GRAPH_ANALYZER_CONTENT).should('exist');
+      cy.get(ANALYZER_NODE).first().should('exist');
     });
   }
 );

x-pack/test/security_solution_cypress/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_correlations_tab.cy.ts

@@ -20,10 +20,7 @@ import {
   CORRELATIONS_SOURCE_SECTION_TITLE,
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_CORRELATIONS_BUTTON,
 } from '../../../../screens/expandable_flyout/alert_details_left_panel_correlations_tab';
-import {
-  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB,
-  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_BUTTON_GROUP,
-} from '../../../../screens/expandable_flyout/alert_details_left_panel';
+import { DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB } from '../../../../screens/expandable_flyout/alert_details_left_panel';
 import { openCorrelationsTab } from '../../../../tasks/expandable_flyout/alert_details_left_panel_correlations_tab';
 import { openInsightsTab } from '../../../../tasks/expandable_flyout/alert_details_left_panel';
 import { expandDocumentDetailsExpandableFlyoutLeftSection } from '../../../../tasks/expandable_flyout/alert_details_right_panel';
@@ -50,24 +47,15 @@ describe('Expandable flyout left panel correlations', { tags: ['@ess', '@serverl
   });
 
   it('should render correlations details correctly', () => {
-    cy.log('link the alert to a new case');
-
-    cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB).scrollIntoView();
-
-    cy.log('should render the Insights header');
-    cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB).should('be.visible').and('have.text', 'Insights');
+    cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB)
+      .should('have.text', 'Insights')
+      .and('have.class', 'euiTab-isSelected');
 
-    cy.log('should render the inner tab switch');
-    cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_BUTTON_GROUP).should('be.visible');
-
-    cy.log('should render correlations tab activator / button');
     cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_CORRELATIONS_BUTTON)
-      .should('be.visible')
-      .and('have.text', 'Correlations');
-
-    cy.log('should render all the correlations sections');
+      .should('have.text', 'Correlations')
+      .and('have.class', 'euiButtonGroupButton-isSelected');
 
-    cy.log('suppressed alerts');
+    // cy.log('suppressed alerts');
 
     // TODO get proper data to test suppressed alerts
     // cy.get(CORRELATIONS_SUPPRESSED_ALERTS_TITLE).scrollIntoView();
@@ -78,38 +66,42 @@ describe('Expandable flyout left panel correlations', { tags: ['@ess', '@serverl
 
     cy.log('related cases');
 
-    cy.get(CORRELATIONS_CASES_SECTION_TITLE).scrollIntoView();
-    cy.get(CORRELATIONS_CASES_SECTION_TITLE)
-      .should('be.visible')
-      .and('contain.text', '1 related case');
-    cy.get(CORRELATIONS_CASES_SECTION_TABLE).should('be.visible');
+    cy.get(CORRELATIONS_CASES_SECTION_TITLE).should('contain.text', '1 related case');
+    cy.get(CORRELATIONS_CASES_SECTION_TABLE)
+      .should('contain.text', 'case')
+      .and('contain.text', 'open');
 
     cy.log('related alerts by source event');
 
-    cy.get(CORRELATIONS_SOURCE_SECTION_TITLE).scrollIntoView();
-    cy.get(CORRELATIONS_SOURCE_SECTION_TITLE)
-      .should('be.visible')
-      .and('contain.text', '1 alert related by source event');
-    cy.get(CORRELATIONS_SOURCE_SECTION_TABLE).should('be.visible');
-    cy.get(CORRELATIONS_SOURCE_SECTION_INVESTIGATE_IN_TIMELINE_BUTTON).should('be.visible');
+    cy.get(CORRELATIONS_SOURCE_SECTION_TITLE).should(
+      'contain.text',
+      '1 alert related by source event'
+    );
+    cy.get(CORRELATIONS_SOURCE_SECTION_TABLE).should('exist');
+    cy.get(CORRELATIONS_SOURCE_SECTION_INVESTIGATE_IN_TIMELINE_BUTTON).should(
+      'contain.text',
+      'Investigate in timeline'
+    );
 
     cy.log('related alerts by session');
 
-    cy.get(CORRELATIONS_SESSION_SECTION_TITLE).scrollIntoView();
-    cy.get(CORRELATIONS_SESSION_SECTION_TITLE)
-      .should('be.visible')
-      .and('contain.text', '1 alert related by session');
-    cy.get(CORRELATIONS_SESSION_SECTION_TABLE).should('be.visible');
-    cy.get(CORRELATIONS_SESSION_SECTION_INVESTIGATE_IN_TIMELINE_BUTTON).should('be.visible');
+    cy.get(CORRELATIONS_SESSION_SECTION_TITLE).should('contain.text', '1 alert related by session');
+    cy.get(CORRELATIONS_SESSION_SECTION_TABLE).should('exist');
+    cy.get(CORRELATIONS_SESSION_SECTION_INVESTIGATE_IN_TIMELINE_BUTTON).should(
+      'contain.text',
+      'Investigate in timeline'
+    );
 
     cy.log('related alerts by ancestry');
 
-    cy.get(CORRELATIONS_ANCESTRY_SECTION_TITLE).scrollIntoView();
-    cy.get(CORRELATIONS_ANCESTRY_SECTION_TITLE)
-      .should('be.visible')
-      .and('contain.text', '1 alert related by ancestry');
-    cy.get(CORRELATIONS_ANCESTRY_SECTION_TABLE).scrollIntoView();
-    cy.get(CORRELATIONS_ANCESTRY_SECTION_TABLE).should('be.visible');
-    cy.get(CORRELATIONS_ANCESTRY_SECTION_INVESTIGATE_IN_TIMELINE_BUTTON).should('be.visible');
+    cy.get(CORRELATIONS_ANCESTRY_SECTION_TITLE).should(
+      'contain.text',
+      '1 alert related by ancestry'
+    );
+    cy.get(CORRELATIONS_ANCESTRY_SECTION_TABLE).should('exist');
+    cy.get(CORRELATIONS_ANCESTRY_SECTION_INVESTIGATE_IN_TIMELINE_BUTTON).should(
+      'contain.text',
+      'Investigate in timeline'
+    );
   });
 });

x-pack/test/security_solution_cypress/cypress/e2e/investigations/alerts/expandable_flyout/alert_details_left_panel_entities_tab.cy.ts

@@ -8,12 +8,13 @@
 import {
   DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_ENTITIES_BUTTON,
   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_USER_DETAILS,
+  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_RIGHT_SECTION,
+  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_TITLE,
 } from '../../../../screens/expandable_flyout/alert_details_left_panel_entities_tab';
-import {
-  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB,
-  DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_BUTTON_GROUP,
-} from '../../../../screens/expandable_flyout/alert_details_left_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';
 import { expandDocumentDetailsExpandableFlyoutLeftSection } from '../../../../tasks/expandable_flyout/alert_details_right_panel';
@@ -42,20 +43,32 @@ describe(
 
     it('should display host details and user details under Insights Entities', () => {
       cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB)
-        .should('be.visible')
-        .and('have.text', 'Insights');
-
-      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_BUTTON_GROUP).should('be.visible');
+        .should('have.text', 'Insights')
+        .and('have.class', 'euiTab-isSelected');
 
       cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_ENTITIES_BUTTON)
-        .should('be.visible')
-        .and('have.text', 'Entities');
+        .should('have.text', 'Entities')
+        .and('have.class', 'euiButtonGroupButton-isSelected');
 
-      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS).scrollIntoView();
-      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS).should('be.visible');
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_TITLE).should(
+        'contain.text',
+        'test'
+      );
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS_RIGHT_SECTION).should(
+        'contain.text',
+        'Related hosts: 0'
+      );
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS).should('exist');
 
-      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS).scrollIntoView();
-      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_USER_DETAILS).should('be.visible');
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_TITLE).should(
+        'contain.text',
+        'siem-kibana'
+      );
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS_RIGHT_SECTION).should(
+        'contain.text',
+        'Related users: 0'
+      );
+      cy.get(DOCUMENT_DETAILS_FLYOUT_INSIGHTS_TAB_HOST_DETAILS).should('exist');
     });
   }
 );