[Security Solution] Adds cypress-pipe (#91550) (#92064)

* introducing cypress-pipe

* moves cypress pipe and promise packages to dev dependencies

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

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

package.json

@@ -180,7 +180,6 @@
     "content-disposition": "0.5.3",
     "core-js": "^3.6.5",
     "custom-event-polyfill": "^0.3.0",
-    "cypress-promise": "^1.1.0",
     "cytoscape": "^3.10.0",
     "cytoscape-dagre": "^2.2.2",
     "d3-array": "1.2.4",
@@ -610,6 +609,8 @@
     "cypress": "^6.2.1",
     "cypress-cucumber-preprocessor": "^2.5.2",
     "cypress-multi-reporters": "^1.4.0",
+    "cypress-pipe": "^2.0.0",
+    "cypress-promise": "^1.1.0",
     "d3": "3.5.17",
     "d3-cloud": "1.2.5",
     "d3-scale": "1.0.7",
@@ -830,8 +831,8 @@
     "val-loader": "^1.1.1",
     "vega": "^5.19.1",
     "vega-lite": "^4.17.0",
-    "vega-spec-injector": "^0.0.2",
     "vega-schema-url-parser": "^2.1.0",
+    "vega-spec-injector": "^0.0.2",
     "vega-tooltip": "^0.25.0",
     "venn.js": "0.2.20",
     "vinyl-fs": "^3.0.3",

x-pack/plugins/security_solution/cypress/support/index.js

@@ -22,6 +22,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+import 'cypress-pipe';
 
 Cypress.Cookies.defaults({
   preserve: 'sid',

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

@@ -177,8 +177,9 @@ export const openTimelineInspectButton = () => {
 };
 
 export const openTimelineFromSettings = () => {
-  cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').click({ force: true });
-  cy.get(OPEN_TIMELINE_ICON).click({ force: true });
+  const click = ($el: Cypress.ObjectLike) => cy.wrap($el).click();
+  cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').pipe(click);
+  cy.get(OPEN_TIMELINE_ICON).pipe(click);
 };
 
 export const openTimelineTemplateFromSettings = (id: string) => {

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

@@ -20,10 +20,8 @@ export const exportTimeline = (timelineId: string) => {
 };
 
 export const openTimeline = (id: string) => {
-  // This temporary wait here is to reduce flakeyness until we integrate cypress-pipe. Then please let us use cypress pipe.
-  // Ref: https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/
-  // Ref: https://github.com/NicholasBoll/cypress-pipe#readme
-  cy.get(TIMELINE(id)).should('be.visible').wait(1500).click();
+  const click = ($el: Cypress.ObjectLike) => cy.wrap($el).click();
+  cy.get(TIMELINE(id)).should('be.visible').pipe(click);
 };
 
 export const waitForTimelinesPanelToBeLoaded = () => {

x-pack/plugins/security_solution/cypress/tsconfig.json

@@ -8,6 +8,7 @@
     "tsBuildInfoFile": "../../../../build/tsbuildinfo/security_solution/cypress",
     "types": [
       "cypress",
+      "cypress-pipe",
       "node"
     ],
     "resolveJsonModule": true,

yarn.lock

@@ -11680,6 +11680,11 @@ cypress-multi-reporters@^1.4.0:
     debug "^4.1.1"
     lodash "^4.17.15"
 
+cypress-pipe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cypress-pipe/-/cypress-pipe-2.0.0.tgz#577df7a70a8603d89a96dfe4092a605962181af8"
+  integrity sha512-KW9s+bz4tFLucH3rBGfjW+Q12n7S4QpUSSyxiGrgPOfoHlbYWzAGB3H26MO0VTojqf9NVvfd5Kt0MH5XMgbfyg==
+
 cypress-promise@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/cypress-promise/-/cypress-promise-1.1.0.tgz#f2d66965945fe198431aaf692d5157cea9d47b25"