diff --git a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts index 24c1974cf8343..3d251c1c6bcac 100644 --- a/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts +++ b/x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/timeline/data_providers.spec.ts @@ -4,30 +4,30 @@ * 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(() => { @@ -35,16 +35,13 @@ describe('timeline data providers', () => { }); 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', diff --git a/x-pack/legacy/plugins/siem/cypress/screens/hosts/all_hosts.ts b/x-pack/legacy/plugins/siem/cypress/screens/hosts/all_hosts.ts new file mode 100644 index 0000000000000..f316356580814 --- /dev/null +++ b/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"]'; diff --git a/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts b/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts index ca11f48932263..60c9c2ab44372 100644 --- a/x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts +++ b/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"]'; diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/common.ts b/x-pack/legacy/plugins/siem/cypress/tasks/common.ts new file mode 100644 index 0000000000000..39a61401c15b3 --- /dev/null +++ b/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) => { + 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) => { + 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) => { + cy.wrap(dropTarget).trigger('mousemove', 'center', { + button: primaryButton, + }); +}; diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/hosts/all_hosts.ts b/x-pack/legacy/plugins/siem/cypress/tasks/hosts/all_hosts.ts new file mode 100644 index 0000000000000..43e2a7e1bef11 --- /dev/null +++ b/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) + ); +}; diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts b/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts index ae2a863092907..068b6dd9f8bd4 100644 --- a/x-pack/legacy/plugins/siem/cypress/tasks/timeline/main.ts +++ b/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 }); +}; diff --git a/x-pack/legacy/plugins/siem/cypress/urls/navigation.ts b/x-pack/legacy/plugins/siem/cypress/urls/navigation.ts index 0437693e87e5e..164a117b82475 100644 --- a/x-pack/legacy/plugins/siem/cypress/urls/navigation.ts +++ b/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',