[SIEM] Adds pin event to timeline cypress test (#74256) (#74862)

* adds 'pin event' cypress test

* refactors code

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/security_solution/cypress/integration/timeline_events.spec.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { PIN_EVENT } from '../screens/timeline';
+
+import { loginAndWaitForPage } from '../tasks/login';
+import { openTimeline } from '../tasks/security_main';
+import { pinFirstEvent, populateTimeline, unpinFirstEvent } from '../tasks/timeline';
+
+import { HOSTS_URL } from '../urls/navigation';
+
+describe('timeline events', () => {
+  before(() => {
+    loginAndWaitForPage(HOSTS_URL);
+    openTimeline();
+    populateTimeline();
+  });
+
+  after(() => {
+    unpinFirstEvent();
+  });
+
+  it('pins the first event to the timeline', () => {
+    cy.server();
+    cy.route('POST', '**/api/solutions/security/graphql').as('persistTimeline');
+
+    pinFirstEvent();
+
+    cy.wait('@persistTimeline', { timeout: 10000 }).then((response) => {
+      cy.wrap(response.status).should('eql', 200);
+      cy.wrap(response.xhr.responseText).should('include', 'persistPinnedEventOnTimeline');
+    });
+
+    cy.get(PIN_EVENT).should('have.attr', 'aria-label', 'Pinned event');
+  });
+});

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -19,6 +19,8 @@ export const ID_FIELD = '[data-test-subj="timeline"] [data-test-subj="field-name
 
 export const ID_TOGGLE_FIELD = '[data-test-subj="toggle-field-_id"]';
 
+export const PIN_EVENT = '[data-test-subj="pin"]';
+
 export const PROVIDER_BADGE = '[data-test-subj="providerBadge"]';
 
 export const REMOVE_COLUMN =

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -12,6 +12,7 @@ import {
   ID_FIELD,
   ID_HEADER_FIELD,
   ID_TOGGLE_FIELD,
+  PIN_EVENT,
   SEARCH_OR_FILTER_CONTAINER,
   SERVER_SIDE_EVENT_COUNT,
   TIMELINE_DESCRIPTION,
@@ -78,6 +79,10 @@ export const openTimelineSettings = () => {
   cy.get(TIMELINE_SETTINGS_ICON).trigger('click', { force: true });
 };
 
+export const pinFirstEvent = () => {
+  cy.get(PIN_EVENT).first().click({ force: true });
+};
+
 export const populateTimeline = () => {
   executeTimelineKQL(hostExistsQuery);
   cy.get(SERVER_SIDE_EVENT_COUNT)
@@ -88,6 +93,10 @@ export const populateTimeline = () => {
     });
 };
 
+export const unpinFirstEvent = () => {
+  cy.get(PIN_EVENT).first().click({ force: true });
+};
+
 export const uncheckTimestampToggleField = () => {
   cy.get(TIMESTAMP_TOGGLE_FIELD).should('exist');