[SIEM] Fixes 'sets and reads the url state for timeline by id' timeli…

…ne Cypress test (#75125)

* fixes 'sets and reads the url state for timeline by id' timeline ttest

* makes test more reliable

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

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

@@ -36,6 +36,7 @@ import {
   addNameToTimeline,
   closeTimeline,
   executeTimelineKQL,
+  waitForTimelineChanges,
 } from '../tasks/timeline';
 
 import { HOSTS_URL } from '../urls/navigation';
@@ -217,7 +218,7 @@ describe('url state', () => {
     cy.get(KQL_INPUT).invoke('text').should('eq', 'source.ip: "10.142.0.9"');
   });
 
-  it.skip('sets and reads the url state for timeline by id', () => {
+  it('sets and reads the url state for timeline by id', () => {
     loginAndWaitForPage(HOSTS_URL);
     openTimeline();
     executeTimelineKQL('host.name: *');
@@ -229,20 +230,24 @@ describe('url state', () => {
         cy.wrap(intCount).should('be.above', 0);
       });
 
+    cy.server();
+    cy.route('PATCH', '**/api/timeline').as('timeline');
+
     const timelineName = 'Security';
+    const timelineDescription = 'This is the best timeline of the world';
     addNameToTimeline(timelineName);
-    addDescriptionToTimeline('This is the best timeline of the world');
-    cy.wait(5000);
-
-    cy.url({ timeout: 30000 }).should('match', /\w*-\w*-\w*-\w*-\w*/);
-    cy.url().then((url) => {
-      const matched = url.match(/\w*-\w*-\w*-\w*-\w*/);
-      const newTimelineId = matched && matched.length > 0 ? matched[0] : 'null';
-      expect(matched).to.have.lengthOf(1);
+    waitForTimelineChanges();
+    addDescriptionToTimeline(timelineDescription);
+    waitForTimelineChanges();
+
+    cy.wait('@timeline').then((response) => {
       closeTimeline();
+      cy.wrap(response.status).should('eql', 200);
+      const JsonResponse = JSON.parse(response.xhr.responseText);
+      const timelineId = JsonResponse.data.persistTimeline.timeline.savedObjectId;
       cy.visit('/app/home');
-      cy.visit(`/app/security/timelines?timeline=(id:%27${newTimelineId}%27,isOpen:!t)`);
-      cy.contains('a', 'Security');
+      cy.visit(`/app/security/timelines?timeline=(id:'${timelineId}',isOpen:!t)`);
+      cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).should('exist');
       cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).invoke('text').should('not.equal', 'Updating');
       cy.get(TIMELINE_TITLE).should('be.visible');
       cy.get(TIMELINE_TITLE).should('have.attr', 'value', timelineName);

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

@@ -39,6 +39,8 @@ export const TIMELINE = (id: string) => {
   return `[data-test-subj="title-${id}"]`;
 };
 
+export const TIMELINE_CHANGES_IN_PROGRESS = '[data-test-subj="timeline"] .euiProgress';
+
 export const TIMELINE_COLUMN_SPINNER = '[data-test-subj="timeline-loading-spinner"]';
 
 export const TIMELINE_DATA_PROVIDERS = '[data-test-subj="dataProviders"]';

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

@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DATE_PICKER_APPLY_BUTTON_TIMELINE } from '../screens/date_picker';
-
 import {
   CLOSE_TIMELINE_BTN,
   CREATE_NEW_TIMELINE,
@@ -16,6 +14,7 @@ import {
   PIN_EVENT,
   SEARCH_OR_FILTER_CONTAINER,
   SERVER_SIDE_EVENT_COUNT,
+  TIMELINE_CHANGES_IN_PROGRESS,
   TIMELINE_DESCRIPTION,
   TIMELINE_FIELDS_BUTTON,
   TIMELINE_INSPECT_BUTTON,
@@ -33,7 +32,7 @@ export const hostExistsQuery = 'host.name: *';
 
 export const addDescriptionToTimeline = (description: string) => {
   cy.get(TIMELINE_DESCRIPTION).type(`${description}{enter}`);
-  cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).click().invoke('text').should('not.equal', 'Updating');
+  cy.get(TIMELINE_DESCRIPTION).should('have.attr', 'value', description);
 };
 
 export const addNameToTimeline = (name: string) => {
@@ -122,3 +121,8 @@ export const removeColumn = (column: number) => {
 export const resetFields = () => {
   cy.get(RESET_FIELDS).click({ force: true });
 };
+
+export const waitForTimelineChanges = () => {
+  cy.get(TIMELINE_CHANGES_IN_PROGRESS).should('exist');
+  cy.get(TIMELINE_CHANGES_IN_PROGRESS).should('not.exist');
+};