[SIEM] Refactors Data Providers Cypress tests

x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts

@@ -4,47 +4,44 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { HOSTS_PAGE } from '../../../urls/navigation';
 import {
+  waitForAllHostsToBeLoaded,
+  dragAndDropFirstHostToTimeline,
+  dragFirstHostToTimeline,
+  dragFirstHostToEmptyTimelineDataProviders,
+} from '../../../tasks/hosts/all_hosts';
+import { HOSTS_NAMES } from '../../../screens/hosts/all_hosts';
+import { DEFAULT_TIMEOUT, loginAndWaitForPage } from '../../../tasks/login';
+import { openTimeline, createNewTimeline } from '../../../tasks/timeline/main';
+import {
+  TIMELINE_DATA_PROVIDERS_EMPTY,
   TIMELINE_DATA_PROVIDERS,
   TIMELINE_DROPPED_DATA_PROVIDERS,
-  TIMELINE_DATA_PROVIDERS_EMPTY,
-} from '../../lib/timeline/selectors';
-import {
-  createNewTimeline,
-  dragFromAllHostsToTimeline,
-  toggleTimelineVisibility,
-} from '../../lib/timeline/helpers';
-import { ALL_HOSTS_WIDGET_DRAGGABLE_HOSTS } from '../../lib/hosts/selectors';
-import { HOSTS_PAGE } from '../../lib/urls';
-import { waitForAllHostsWidget } from '../../lib/hosts/helpers';
-import { DEFAULT_TIMEOUT, loginAndWaitForPage } from '../../lib/util/helpers';
-import { drag, dragWithoutDrop } from '../../lib/drag_n_drop/helpers';
+} from '../../../screens/timeline/main';
 
 describe('timeline data providers', () => {
   before(() => {
     loginAndWaitForPage(HOSTS_PAGE);
-    waitForAllHostsWidget();
+    waitForAllHostsToBeLoaded();
   });
 
   beforeEach(() => {
-    toggleTimelineVisibility();
+    openTimeline();
   });
 
   afterEach(() => {
     createNewTimeline();
   });
 
   it('renders the data provider of a host dragged from the All Hosts widget on the hosts page', () => {
-    dragFromAllHostsToTimeline();
+    dragAndDropFirstHostToTimeline();
 
-    cy.get(TIMELINE_DROPPED_DATA_PROVIDERS, {
-      timeout: DEFAULT_TIMEOUT + 10 * 1000,
-    })
+    cy.get(TIMELINE_DROPPED_DATA_PROVIDERS, { timeout: DEFAULT_TIMEOUT })
       .first()
       .invoke('text')
       .then(dataProviderText => {
-        // verify the data provider displays the same `host.name` as the host dragged from the `All Hosts` widget
-        cy.get(ALL_HOSTS_WIDGET_DRAGGABLE_HOSTS)
+        cy.get(HOSTS_NAMES)
           .first()
           .invoke('text')
           .should(hostname => {
@@ -54,9 +51,7 @@ describe('timeline data providers', () => {
   });
 
   it('sets the background to euiColorSuccess with a 10% alpha channel when the user starts dragging a host, but is not hovering over the data providers', () => {
-    cy.get(ALL_HOSTS_WIDGET_DRAGGABLE_HOSTS)
-      .first()
-      .then(host => drag(host));
+    dragFirstHostToTimeline();
 
     cy.get(TIMELINE_DATA_PROVIDERS).should(
       'have.css',
@@ -65,30 +60,14 @@ describe('timeline data providers', () => {
     );
   });
 
-  it('sets the background to euiColorSuccess with a 20% alpha channel when the user starts dragging a host AND is hovering over the data providers', () => {
-    cy.get(ALL_HOSTS_WIDGET_DRAGGABLE_HOSTS)
-      .first()
-      .then(host => drag(host));
-
-    cy.get(TIMELINE_DATA_PROVIDERS_EMPTY).then(dataProvidersDropArea =>
-      dragWithoutDrop(dataProvidersDropArea)
-    );
+  it('sets the background to euiColorSuccess with a 20% alpha channel and renders the dashed border color as euiColorSuccess when the user starts dragging a host AND is hovering over the data providers', () => {
+    dragFirstHostToEmptyTimelineDataProviders();
 
     cy.get(TIMELINE_DATA_PROVIDERS_EMPTY).should(
       'have.css',
       'background',
       'rgba(1, 125, 115, 0.2) none repeat scroll 0% 0% / auto padding-box border-box'
     );
-  });
-
-  it('renders the dashed border color as euiColorSuccess when hovering over the data providers', () => {
-    cy.get(ALL_HOSTS_WIDGET_DRAGGABLE_HOSTS)
-      .first()
-      .then(host => drag(host));
-
-    cy.get(TIMELINE_DATA_PROVIDERS_EMPTY).then(dataProvidersDropArea =>
-      dragWithoutDrop(dataProvidersDropArea)
-    );
 
     cy.get(TIMELINE_DATA_PROVIDERS).should(
       'have.css',

x-pack/legacy/plugins/siem/cypress/screens/hosts/all_hosts.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export const ALL_HOSTS_TABLE = '[data-test-subj="table-allHosts-loading-false"]';
+
+export const HOSTS_NAMES = '[data-test-subj="draggable-content-host.name"]';

x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts

@@ -20,3 +20,15 @@ export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count
 export const TIMELINE_SETTINGS_ICON = '[data-test-subj="settings-gear"]';
 
 export const TIMELINE_INSPECT_BUTTON = '[data-test-subj="inspect-empty-button"]';
+
+export const CLOSE_TIMELINE_BTN = '[data-test-subj="close-timeline"]';
+
+export const CREATE_NEW_TIMELINE = '[data-test-subj="timeline-new"]';
+
+export const TIMELINE_DATA_PROVIDERS = '[data-test-subj="dataProviders"]';
+
+export const TIMELINE_DATA_PROVIDERS_EMPTY =
+  '[data-test-subj="dataProviders"] [data-test-subj="empty"]';
+
+export const TIMELINE_DROPPED_DATA_PROVIDERS =
+  '[data-test-subj="dataProviders"] [data-test-subj="providerContainer"]';

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

@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+
+const primaryButton = 0;
+
+/**
+ * To overcome the React Beautiful DND sloppy click detection threshold:
+ * https://github.com/atlassian/react-beautiful-dnd/blob/67b96c8d04f64af6b63ae1315f74fc02b5db032b/docs/sensors/mouse.md#sloppy-clicks-and-click-prevention-
+ */
+const dndSloppyClickDetectionThreshold = 5;
+
+/** Starts dragging the subject */
+export const drag = (subject: JQuery<HTMLElement>) => {
+  const subjectLocation = subject[0].getBoundingClientRect();
+
+  cy.wrap(subject)
+    .trigger('mousedown', {
+      button: primaryButton,
+      clientX: subjectLocation.left,
+      clientY: subjectLocation.top,
+      force: true,
+    })
+    .wait(1)
+    .trigger('mousemove', {
+      button: primaryButton,
+      clientX: subjectLocation.left + dndSloppyClickDetectionThreshold,
+      clientY: subjectLocation.top,
+      force: true,
+    })
+    .wait(1);
+};
+
+/** "Drops" the subject being dragged on the specified drop target  */
+export const drop = (dropTarget: JQuery<HTMLElement>) => {
+  cy.wrap(dropTarget)
+    .trigger('mousemove', { button: primaryButton, force: true })
+    .wait(1)
+    .trigger('mouseup', { force: true })
+    .wait(1);
+};
+
+/** Drags the subject being dragged on the specified drop target, but does not drop it  */
+export const dragWithoutDrop = (dropTarget: JQuery<HTMLElement>) => {
+  cy.wrap(dropTarget).trigger('mousemove', 'center', {
+    button: primaryButton,
+  });
+};

x-pack/legacy/plugins/siem/cypress/tasks/hosts/all_hosts.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { ALL_HOSTS_TABLE, HOSTS_NAMES } from '../../screens/hosts/all_hosts';
+import {
+  TIMELINE_DATA_PROVIDERS,
+  TIMELINE_DATA_PROVIDERS_EMPTY,
+} from '../../screens/timeline/main';
+import { DEFAULT_TIMEOUT } from '../../tasks/login';
+import { drag, drop, dragWithoutDrop } from '../../tasks/common';
+
+export const waitForAllHostsToBeLoaded = () => {
+  cy.get(ALL_HOSTS_TABLE, { timeout: DEFAULT_TIMEOUT }).should('exist');
+};
+
+export const dragAndDropFirstHostToTimeline = () => {
+  cy.get(HOSTS_NAMES)
+    .first()
+    .then(firstHost => drag(firstHost));
+  cy.get(TIMELINE_DATA_PROVIDERS).then(dataProvidersDropArea => drop(dataProvidersDropArea));
+};
+
+export const dragFirstHostToTimeline = () => {
+  cy.get(HOSTS_NAMES)
+    .first()
+    .then(host => drag(host));
+};
+
+export const dragFirstHostToEmptyTimelineDataProviders = () => {
+  cy.get(HOSTS_NAMES)
+    .first()
+    .then(host => drag(host));
+
+  cy.get(TIMELINE_DATA_PROVIDERS_EMPTY).then(dataProvidersDropArea =>
+    dragWithoutDrop(dataProvidersDropArea)
+  );
+};

x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts

@@ -13,6 +13,8 @@ import {
   SERVER_SIDE_EVENT_COUNT,
   TIMELINE_SETTINGS_ICON,
   TIMELINE_INSPECT_BUTTON,
+  CREATE_NEW_TIMELINE,
+  CLOSE_TIMELINE_BTN,
 } from '../../screens/timeline/main';
 
 export const hostExistsQuery = 'host.name: *';
@@ -44,3 +46,9 @@ export const openTimelineInspectButton = () => {
   cy.get(TIMELINE_INSPECT_BUTTON, { timeout: DEFAULT_TIMEOUT }).should('not.be.disabled');
   cy.get(TIMELINE_INSPECT_BUTTON).trigger('click', { force: true });
 };
+
+export const createNewTimeline = () => {
+  cy.get(TIMELINE_SETTINGS_ICON).click({ force: true });
+  cy.get(CREATE_NEW_TIMELINE).click();
+  cy.get(CLOSE_TIMELINE_BTN).click({ force: true });
+};

x-pack/legacy/plugins/siem/cypress/urls/navigation.ts

@@ -6,6 +6,7 @@
 
 export const TIMELINES_PAGE = '/app/siem#/timelines';
 export const OVERVIEW_PAGE = '/app/siem#/overview';
+export const HOSTS_PAGE = '/app/siem#/hosts/allHosts';
 export const HOSTS_PAGE_TAB_URLS = {
   allHosts: '/app/siem#/hosts/allHosts',
   anomalies: '/app/siem#/hosts/anomalies',