introducing cypress-pipe

package.json

@@ -183,6 +183,7 @@
     "content-disposition": "0.5.3",
     "core-js": "^3.6.5",
     "custom-event-polyfill": "^0.3.0",
+    "cypress-pipe": "^2.0.0",
     "cypress-promise": "^1.1.0",
     "cytoscape": "^3.10.0",
     "cytoscape-dagre": "^2.2.2",
@@ -834,8 +835,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

@@ -11688,6 +11688,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"