[SIEM] Adds 'Closes and opens signals' Cypress test

x-pack/legacy/plugins/siem/cypress/integration/detections.spec.ts

@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import {
+  NUMBER_OF_SIGNALS,
+  SELECTED_SIGNALS,
+  SHOWING_SIGNALS,
+  SIGNALS,
+} from '../screens/detections';
+
+import {
+  closeSignals,
+  goToClosedSignals,
+  goToOpenedSignals,
+  openSignals,
+  selectNumberOfSignals,
+  waitForSignalsPanelToBeLoaded,
+  waitForSignals,
+  waitForSignalsToBeLoaded,
+} from '../tasks/detections';
+import { esArchiverLoad } from '../tasks/es_archiver';
+import { loginAndWaitForPage } from '../tasks/login';
+
+import { DETECTIONS } from '../urls/navigation';
+
+describe('Detections', () => {
+  before(() => {
+    esArchiverLoad('signals');
+    loginAndWaitForPage(DETECTIONS);
+  });
+
+  it('Closes and opens signals', () => {
+    waitForSignalsPanelToBeLoaded();
+    waitForSignalsToBeLoaded();
+
+    cy.get(NUMBER_OF_SIGNALS)
+      .invoke('text')
+      .then(numberOfSignals => {
+        cy.get(SHOWING_SIGNALS)
+          .invoke('text')
+          .should('eql', `Showing ${numberOfSignals} signals`);
+
+        const numberOfSignalsToBeClosed = 3;
+        selectNumberOfSignals(numberOfSignalsToBeClosed);
+
+        cy.get(SELECTED_SIGNALS)
+          .invoke('text')
+          .should('eql', `Selected ${numberOfSignalsToBeClosed} signals`);
+
+        closeSignals();
+        waitForSignals();
+        cy.reload();
+        waitForSignals();
+
+        const expectedNumberOfSignalsAfterClosing = +numberOfSignals - numberOfSignalsToBeClosed;
+        cy.get(NUMBER_OF_SIGNALS)
+          .invoke('text')
+          .should('eq', expectedNumberOfSignalsAfterClosing.toString());
+        cy.get(SHOWING_SIGNALS)
+          .invoke('text')
+          .should('eql', `Showing ${expectedNumberOfSignalsAfterClosing.toString()} signals`);
+
+        goToClosedSignals();
+        waitForSignals();
+
+        cy.get(NUMBER_OF_SIGNALS)
+          .invoke('text')
+          .should('eql', numberOfSignalsToBeClosed.toString());
+        cy.get(SHOWING_SIGNALS)
+          .invoke('text')
+          .should('eql', `Showing ${numberOfSignalsToBeClosed.toString()} signals`);
+        cy.get(SIGNALS).should('have.length', numberOfSignalsToBeClosed);
+
+        const numberOfSignalsToBeOpened = 1;
+        selectNumberOfSignals(numberOfSignalsToBeOpened);
+
+        cy.get(SELECTED_SIGNALS)
+          .invoke('text')
+          .should('eql', `Selected ${numberOfSignalsToBeOpened} signal`);
+
+        openSignals();
+        waitForSignals();
+        cy.reload();
+        waitForSignalsToBeLoaded();
+        waitForSignals();
+        goToClosedSignals();
+        waitForSignals();
+
+        const expectedNumberOfClosedSignalsAfterOpened = 2;
+        cy.get(NUMBER_OF_SIGNALS)
+          .invoke('text')
+          .should('eql', expectedNumberOfClosedSignalsAfterOpened.toString());
+        cy.get(SHOWING_SIGNALS)
+          .invoke('text')
+          .should('eql', `Showing ${expectedNumberOfClosedSignalsAfterOpened.toString()} signals`);
+        cy.get(SIGNALS).should('have.length', expectedNumberOfClosedSignalsAfterOpened);
+
+        goToOpenedSignals();
+        waitForSignals();
+
+        const expectedNumberOfOpenedSignals =
+          +numberOfSignals - expectedNumberOfClosedSignalsAfterOpened;
+        cy.get(SHOWING_SIGNALS)
+          .invoke('text')
+          .should('eql', `Showing ${expectedNumberOfOpenedSignals.toString()} signals`);
+
+        cy.get('[data-test-subj="server-side-event-count"]')
+          .invoke('text')
+          .should('eql', expectedNumberOfOpenedSignals.toString());
+      });
+  });
+});

x-pack/legacy/plugins/siem/cypress/screens/detections.ts

@@ -4,6 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export const CLOSED_SIGNALS_BTN = '[data-test-subj="closedSignals"]';
+
 export const LOADING_SIGNALS_PANEL = '[data-test-subj="loading-signals-panel"]';
 
 export const MANAGE_SIGNAL_DETECTION_RULES_BTN = '[data-test-subj="manage-signal-detection-rules"]';
+
+export const NUMBER_OF_SIGNALS = '[data-test-subj="server-side-event-count"]';
+
+export const OPEN_CLOSE_SIGNALS_BTN = '[data-test-subj="openCloseSignal"] .siemLinkIcon__label';
+
+export const OPENED_SIGNALS_BTN = '[data-test-subj="openSignals"]';
+
+export const SELECTED_SIGNALS = '[data-test-subj="selectedSignals"]';
+
+export const SHOWING_SIGNALS = '[data-test-subj="showingSignals"]';
+
+export const SIGNALS = '[data-test-subj="event"]';
+
+export const SIGNAL_CHECKBOX = '[data-test-subj="select-event-container"] .euiCheckbox__input';

x-pack/legacy/plugins/siem/cypress/tasks/detections.ts

@@ -4,14 +4,53 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { LOADING_SIGNALS_PANEL, MANAGE_SIGNAL_DETECTION_RULES_BTN } from '../screens/detections';
+import {
+  CLOSED_SIGNALS_BTN,
+  LOADING_SIGNALS_PANEL,
+  MANAGE_SIGNAL_DETECTION_RULES_BTN,
+  OPEN_CLOSE_SIGNALS_BTN,
+  OPENED_SIGNALS_BTN,
+  SIGNALS,
+  SIGNAL_CHECKBOX,
+} from '../screens/detections';
+import { REFRESH_BUTTON } from '../screens/siem_header';
+
+export const closeSignals = () => {
+  cy.get(OPEN_CLOSE_SIGNALS_BTN).click({ force: true });
+};
+
+export const goToClosedSignals = () => {
+  cy.get(CLOSED_SIGNALS_BTN).click({ force: true });
+};
 
 export const goToManageSignalDetectionRules = () => {
   cy.get(MANAGE_SIGNAL_DETECTION_RULES_BTN)
     .should('exist')
     .click({ force: true });
 };
 
+export const goToOpenedSignals = () => {
+  cy.get(OPENED_SIGNALS_BTN).click({ force: true });
+};
+
+export const openSignals = () => {
+  cy.get(OPEN_CLOSE_SIGNALS_BTN).click({ force: true });
+};
+
+export const selectNumberOfSignals = (numberOfSignals: number) => {
+  for (let i = 0; i < numberOfSignals; i++) {
+    cy.get(SIGNAL_CHECKBOX)
+      .eq(i)
+      .click({ force: true });
+  }
+};
+
+export const waitForSignals = () => {
+  cy.get(REFRESH_BUTTON)
+    .invoke('text')
+    .should('not.equal', 'Updating');
+};
+
 export const waitForSignalsIndexToBeCreated = () => {
   cy.request({ url: '/api/detection_engine/index', retryOnStatusCodeFailure: true }).then(
     response => {
@@ -26,3 +65,8 @@ export const waitForSignalsPanelToBeLoaded = () => {
   cy.get(LOADING_SIGNALS_PANEL).should('exist');
   cy.get(LOADING_SIGNALS_PANEL).should('not.exist');
 };
+
+export const waitForSignalsToBeLoaded = () => {
+  const expectedNumberOfDisplayedSignals = 25;
+  cy.get(SIGNALS).should('have.length', expectedNumberOfDisplayedSignals);
+};

x-pack/legacy/plugins/siem/cypress/tasks/es_archiver.ts

@@ -12,6 +12,14 @@ export const esArchiverLoadEmptyKibana = () => {
   );
 };
 
+export const esArchiverLoad = (folder: string) => {
+  cy.exec(
+    `node ../../../../scripts/es_archiver load ${folder} --dir ../../../test/siem_cypress/es_archives --config ../../../../test/functional/config.js --es-url ${Cypress.env(
+      'ELASTICSEARCH_URL'
+    )} --kibana-url ${Cypress.config().baseUrl}`
+  );
+};
+
 export const esArchiverUnloadEmptyKibana = () => {
   cy.exec(
     `node ../../../../scripts/es_archiver empty_kibana unload empty--dir ../../../test/siem_cypress/es_archives --config ../../../../test/functional/config.js --es-url ${Cypress.env(

x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_action.tsx

@@ -42,11 +42,23 @@ Popover.displayName = 'Popover';
 
 export interface UtilityBarActionProps extends LinkIconProps {
   popoverContent?: (closePopover: () => void) => React.ReactNode;
+  dataTestSubj?: string;
 }
 
 export const UtilityBarAction = React.memo<UtilityBarActionProps>(
-  ({ children, color, disabled, href, iconSide, iconSize, iconType, onClick, popoverContent }) => (
-    <BarAction>
+  ({
+    children,
+    color,
+    dataTestSubj,
+    disabled,
+    href,
+    iconSide,
+    iconSize,
+    iconType,
+    onClick,
+    popoverContent,
+  }) => (
+    <BarAction data-test-subj={dataTestSubj}>
       {popoverContent ? (
         <Popover
           color={color}

x-pack/legacy/plugins/siem/public/components/utility_bar/utility_bar_text.tsx

@@ -10,10 +10,11 @@ import { BarText } from './styles';
 
 export interface UtilityBarTextProps {
   children: string;
+  dataTestSubj?: string;
 }
 
-export const UtilityBarText = React.memo<UtilityBarTextProps>(({ children }) => (
-  <BarText>{children}</BarText>
+export const UtilityBarText = React.memo<UtilityBarTextProps>(({ children, dataTestSubj }) => (
+  <BarText data-test-subj={dataTestSubj}>{children}</BarText>
 ));
 
 UtilityBarText.displayName = 'UtilityBarText';

x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx

@@ -32,6 +32,7 @@ const SignalsTableFilterGroupComponent: React.FC<Props> = ({ onFilterGroupChange
   return (
     <EuiFilterGroup>
       <EuiFilterButton
+        data-test-subj="openSignals"
         hasActiveFilters={filterGroup === FILTER_OPEN}
         onClick={onClickOpenFilterCallback}
         withNext
@@ -40,6 +41,7 @@ const SignalsTableFilterGroupComponent: React.FC<Props> = ({ onFilterGroupChange
       </EuiFilterButton>
 
       <EuiFilterButton
+        data-test-subj="closedSignals"
         hasActiveFilters={filterGroup === FILTER_CLOSED}
         onClick={onClickCloseFilterCallback}
       >

x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx

@@ -65,20 +65,23 @@ const SignalsUtilityBarComponent: React.FC<SignalsUtilityBarProps> = ({
       <UtilityBar>
         <UtilityBarSection>
           <UtilityBarGroup>
-            <UtilityBarText>{i18n.SHOWING_SIGNALS(formattedTotalCount, totalCount)}</UtilityBarText>
+            <UtilityBarText dataTestSubj="showingSignals">
+              {i18n.SHOWING_SIGNALS(formattedTotalCount, totalCount)}
+            </UtilityBarText>
           </UtilityBarGroup>
 
           <UtilityBarGroup>
             {canUserCRUD && hasIndexWrite && (
               <>
-                <UtilityBarText>
+                <UtilityBarText dataTestSubj="selectedSignals">
                   {i18n.SELECTED_SIGNALS(
                     showClearSelection ? formattedTotalCount : formattedSelectedEventsCount,
                     showClearSelection ? totalCount : Object.keys(selectedEventIds).length
                   )}
                 </UtilityBarText>
 
                 <UtilityBarAction
+                  dataTestSubj="openCloseSignal"
                   disabled={areEventsLoading || isEmpty(selectedEventIds)}
                   iconType={isFilteredToOpen ? 'securitySignalResolved' : 'securitySignalDetected'}
                   onClick={handleUpdateStatus}