[Stack monitoring] Add basic tests for alerts modal (#116769) (#119754)

* Add basic tests for alerts modal

* fix types

* fix setup mode button test subj

* fix unit tests

* Move alerts modal tests to functional since ssl is not required anymore

* Remove not needed config change

* fix test for overview alerts badge

* Extract alerts deletion to a new service

* exit setup mode in alerts test

* add missing file

* update test snapshots

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Ester Martí Vilaseca <ester.martivilaseca@elastic.co>

x-pack/plugins/monitoring/public/alerts/badge.tsx

@@ -97,6 +97,7 @@ export const AlertsBadge: React.FC<Props> = (props: Props) => {
     <EuiBadge
       iconType="bell"
       color={inSetupMode ? 'default' : 'danger'}
+      data-test-subj="alertsBadge"
       onClickAriaLabel={
         inSetupMode ? numberOfRulesLabel(alertCount) : numberOfAlertsLabel(alertCount)
       }

x-pack/plugins/monitoring/public/alerts/lib/alerts_toast.tsx

@@ -89,6 +89,7 @@ const showDisabledWatcherClusterAlertsError = () => {
         })}
       </p>
     ),
+    'data-test-subj': 'alertsCreatedToast',
   });
 };
 

x-pack/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap

@@ -78,6 +78,7 @@ exports[`SetupModeRenderer should render the flyout open 1`] = `
           >
             <EuiButton
               color="danger"
+              data-test-subj="exitSetupModeBtn"
               fill={true}
               iconSide="right"
               iconType="flag"
@@ -178,6 +179,7 @@ exports[`SetupModeRenderer should render with setup mode enabled 1`] = `
           >
             <EuiButton
               color="danger"
+              data-test-subj="exitSetupModeBtn"
               fill={true}
               iconSide="right"
               iconType="flag"

x-pack/plugins/monitoring/public/components/renderers/setup_mode.js

@@ -162,6 +162,7 @@ export class WrappedSetupModeRenderer extends React.Component {
                     iconSide="right"
                     size="s"
                     onClick={() => toggleSetupMode(false)}
+                    data-test-subj="exitSetupModeBtn"
                   >
                     {i18n.translate('xpack.monitoring.setupMode.exit', {
                       defaultMessage: `Exit setup mode`,

x-pack/plugins/monitoring/public/components/setup_mode/__snapshots__/enter_button.test.tsx.snap

@@ -3,9 +3,9 @@
 exports[`EnterButton should render properly 1`] = `
 <div
   className="monSetupModeEnterButton__buttonWrapper"
-  data-test-subj="monitoringSetupModeBtn"
 >
   <EuiButton
+    data-test-subj="monitoringSetupModeBtn"
     iconSide="right"
     iconType="flag"
     isLoading={false}

x-pack/plugins/monitoring/public/components/setup_mode/enter_button.tsx

@@ -38,13 +38,14 @@ export const SetupModeEnterButton: React.FC<SetupModeEnterButtonProps> = (
   }
 
   return (
-    <div className="monSetupModeEnterButton__buttonWrapper" data-test-subj="monitoringSetupModeBtn">
+    <div className="monSetupModeEnterButton__buttonWrapper">
       <EuiButton
         onClick={enterSetupMode}
         iconType="flag"
         size="s"
         iconSide="right"
         isLoading={isLoading}
+        data-test-subj="monitoringSetupModeBtn"
       >
         {i18n.translate('xpack.monitoring.setupMode.enter', {
           defaultMessage: 'Enter setup mode',

x-pack/test/functional/apps/monitoring/_get_lifecycle_methods.js

@@ -15,7 +15,7 @@ export const getLifecycleMethods = (getService, getPageObjects) => {
     async setup(archive, { from, to, useSuperUser = false }) {
       _archive = archive;
       if (!useSuperUser) {
-        await security.testUser.setRoles(['monitoring_user', 'kibana_admin']);
+        await security.testUser.setRoles(['monitoring_user', 'kibana_admin', 'test_monitoring']);
       }
 
       const kibanaServer = getService('kibanaServer');

x-pack/test/functional/apps/monitoring/cluster/list.js

@@ -13,6 +13,8 @@ export default function ({ getService, getPageObjects }) {
   const clusterOverview = getService('monitoringClusterOverview');
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['monitoring', 'header', 'common']);
+  const alertsService = getService('monitoringAlerts');
+  const browser = getService('browser');
 
   describe('Cluster listing', () => {
     describe('with trial license clusters', () => {
@@ -150,5 +152,29 @@ export default function ({ getService, getPageObjects }) {
         });
       });
     });
+
+    describe('Alerts', () => {
+      const { setup, tearDown } = getLifecycleMethods(getService, getPageObjects);
+
+      before(async () => {
+        await setup('x-pack/test/functional/es_archives/monitoring/multicluster', {
+          from: 'Aug 15, 2017 @ 21:00:00.000',
+          to: 'Aug 16, 2017 @ 00:00:00.000',
+        });
+      });
+
+      after(async () => {
+        await tearDown();
+
+        await alertsService.deleteAlerts();
+
+        await browser.clearLocalStorage();
+      });
+
+      it('should show a toast when alerts are created successfully', async () => {
+        await clusterList.acceptAlertsModal();
+        expect(await testSubjects.exists('alertsCreatedToast', { timeout: 10000 })).to.be(true);
+      });
+    });
   });
 }

x-pack/test/functional/apps/monitoring/cluster/overview.js

@@ -10,6 +10,11 @@ import { getLifecycleMethods } from '../_get_lifecycle_methods';
 
 export default function ({ getService, getPageObjects }) {
   const overview = getService('monitoringClusterOverview');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects(['monitoring', 'common', 'timePicker']);
+  const alertsService = getService('monitoringAlerts');
+  const browser = getService('browser');
+  const setupMode = getService('monitoringSetupMode');
 
   describe('Cluster overview', () => {
     describe('for Green cluster with Gold license', () => {
@@ -159,5 +164,41 @@ export default function ({ getService, getPageObjects }) {
         expect(await overview.doesLsPanelExist()).to.be(false);
       });
     });
+
+    describe('Alerts', () => {
+      const { setup, tearDown } = getLifecycleMethods(getService, getPageObjects);
+
+      before(async () => {
+        await setup('x-pack/test/functional/es_archives/monitoring/singlecluster_green_gold', {
+          from: 'Aug 23, 2017 @ 21:29:35.267',
+          to: 'Aug 23, 2017 @ 21:47:25.556',
+        });
+      });
+
+      after(async () => {
+        await tearDown();
+        await alertsService.deleteAlerts();
+        await browser.clearLocalStorage();
+      });
+
+      describe('when create alerts options is selected in the alerts modal', () => {
+        before(async () => {
+          await overview.acceptAlertsModal();
+        });
+
+        it('should show a toast when alerts are created successfully', async () => {
+          expect(await testSubjects.exists('alertsCreatedToast', { timeout: 10000 })).to.be(true);
+        });
+
+        it('should show badges when entering setup mode', async () => {
+          await setupMode.clickSetupModeBtn();
+          await PageObjects.timePicker.startAutoRefresh(1);
+
+          expect(await testSubjects.exists('alertsBadge')).to.be(true);
+          await PageObjects.timePicker.pauseAutoRefresh();
+          await setupMode.clickExitSetupModeBtn();
+        });
+      });
+    });
   });
 }

x-pack/test/functional/config.js

@@ -213,6 +213,11 @@ export default async function ({ readConfigFile }) {
     },
     security: {
       roles: {
+        test_monitoring: {
+          elasticsearch: {
+            cluster: ['monitor'],
+          },
+        },
         test_logstash_reader: {
           elasticsearch: {
             cluster: [],

x-pack/test/functional/services/index.ts

@@ -37,6 +37,7 @@ import {
   MonitoringKibanaInstanceProvider,
   MonitoringKibanaSummaryStatusProvider,
   MonitoringSetupModeProvider,
+  MonitoringAlertsProvider,
   // @ts-ignore not ts yet
 } from './monitoring';
 // @ts-ignore not ts yet
@@ -101,6 +102,7 @@ export const services = {
   monitoringKibanaInstance: MonitoringKibanaInstanceProvider,
   monitoringKibanaSummaryStatus: MonitoringKibanaSummaryStatusProvider,
   monitoringSetupMode: MonitoringSetupModeProvider,
+  monitoringAlerts: MonitoringAlertsProvider,
   pipelineList: PipelineListProvider,
   pipelineEditor: PipelineEditorProvider,
   random: RandomProvider,

x-pack/test/functional/services/monitoring/alerts.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export function MonitoringAlertsProvider({ getService }) {
+  const supertest = getService('supertest');
+
+  return new (class MonitoringAlerts {
+    async deleteAlerts() {
+      const apiResponse = await supertest.get('/api/alerts/_find?per_page=20');
+      const alerts = apiResponse.body.data.filter(({ consumer }) => consumer === 'monitoring');
+
+      return await Promise.all(
+        alerts.map(async (alert) =>
+          supertest.delete(`/api/alerts/alert/${alert.id}`).set('kbn-xsrf', 'true').expect(204)
+        )
+      );
+    }
+  })();
+}

x-pack/test/functional/services/monitoring/cluster_list.js

@@ -46,6 +46,10 @@ export function MonitoringClusterListProvider({ getService, getPageObjects }) {
       return testSubjects.click(ALERTS_MODAL_BUTTON);
     }
 
+    acceptAlertsModal() {
+      return testSubjects.click('alerts-modal-button');
+    }
+
     getClusterLink(clusterUuid) {
       return testSubjects.find(`${SUBJ_CLUSTER_ROW_PREFIX}${clusterUuid} > clusterLink`);
     }

x-pack/test/functional/services/monitoring/index.js

@@ -30,3 +30,4 @@ export { MonitoringKibanaInstancesProvider } from './kibana_instances';
 export { MonitoringKibanaInstanceProvider } from './kibana_instance';
 export { MonitoringKibanaSummaryStatusProvider } from './kibana_summary_status';
 export { MonitoringSetupModeProvider } from './setup_mode';
+export { MonitoringAlertsProvider } from './alerts';

x-pack/test/functional/services/monitoring/setup_mode.js

@@ -13,6 +13,7 @@ export function MonitoringSetupModeProvider({ getService }) {
   const SUBJ_SETUP_MODE_METRICBEAT_MIGRATION_TOOLTIP =
     'monitoringSetupModeMetricbeatMigrationTooltip';
   const SUBJ_SETUP_MODE_ALERTS_BADGE = 'monitoringSetupModeAlertBadges';
+  const SUBJ_EXIT_SETUP_MODE_BTN = 'exitSetupModeBtn';
 
   return new (class SetupMode {
     async doesSetupModeBtnAppear() {
@@ -34,5 +35,9 @@ export function MonitoringSetupModeProvider({ getService }) {
     async doesAlertsTooltipAppear() {
       return await testSubjects.exists(SUBJ_SETUP_MODE_ALERTS_BADGE);
     }
+
+    async clickExitSetupModeBtn() {
+      return await testSubjects.click(SUBJ_EXIT_SETUP_MODE_BTN);
+    }
   })();
 }