DEVPROD-5904: Mock clipboard usage in Cypress (#116)

evergreen-ci · May 14, 2024 · 1391839 · 1391839
1 parent cef5220
commit 1391839
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 43 deletions.
diff --git a/apps/parsley/cypress/integration/ansiLogs/ansi_logView.ts b/apps/parsley/cypress/integration/ansiLogs/ansi_logView.ts
@@ -104,8 +104,7 @@ describe("Bookmarking and selecting lines", () => {
       "[2022/03/02 17:05:21.050] running setup group because we have a new independent task";
 
     cy.toggleDetailsPanel(true);
-    // Need to fire a real click here because the copy to clipboard
-    cy.dataCy("jira-button").realClick();
+    cy.dataCy("jira-button").click();
     cy.assertValueCopiedToClipboard(
       `{noformat}\n${logLine0}\n...\n${logLine10}\n${logLine11}\n...\n${logLine297}\n{noformat}`,
     );
@@ -225,20 +224,18 @@ describe("Sharing lines", () => {
     cy.dataCy("line-index-2").click({ shiftKey: true });
     cy.dataCy("sharing-menu").should("be.visible");
     cy.contains("Copy selected contents").should("be.visible");
-    // Need to fire a real click here because the copy to clipboard
-    cy.contains("Copy selected contents").realClick();
+    cy.contains("Copy selected contents").click();
     cy.validateToast("success", "Copied 2 lines to clipboard", true);
     cy.assertValueCopiedToClipboard(
-      `{noformat}\n[2022/03/02 17:01:58.587] Starting task spruce_ubuntu1604_test_2c9056df66d42fb1908d52eed096750a91f1f089_22_03_02_16_45_12, execution 0.\n[2022/03/02 17:01:58.701] Running pre-task commands.\n{noformat}`,
+      "{noformat}\n[2022/03/02 17:01:58.587] Starting task spruce_ubuntu1604_test_2c9056df66d42fb1908d52eed096750a91f1f089_22_03_02_16_45_12, execution 0.\n[2022/03/02 17:01:58.701] Running pre-task commands.\n{noformat}",
     );
   });
   it("should be able to copy a link to the selected lines", () => {
     cy.dataCy("line-index-1").click();
     cy.dataCy("line-index-2").click({ shiftKey: true });
     cy.dataCy("sharing-menu").should("be.visible");
     cy.contains("Copy share link to selected lines").should("be.visible");
-    // Need to fire a real click here because the copy to clipboard
-    cy.contains("Copy share link to selected lines").realClick();
+    cy.contains("Copy share link to selected lines").click();
     cy.validateToast("success", "Copied link to clipboard", true);
     cy.assertValueCopiedToClipboard(
       "http://localhost:4173/evergreen/spruce_ubuntu1604_test_2c9056df66d42fb1908d52eed096750a91f1f089_22_03_02_16_45_12/0/task?bookmarks=0%2C297&selectedLineRange=L1-L2&shareLine=1",

diff --git a/apps/parsley/cypress/integration/resmokeLogs/resmoke_evg_test_logView.ts b/apps/parsley/cypress/integration/resmokeLogs/resmoke_evg_test_logView.ts
@@ -150,8 +150,7 @@ describe("Bookmarking and selecting lines", () => {
     const logLine1638 = `[ContinuousStepdown:job0] Pausing the stepdown thread.`;
 
     cy.dataCy("details-button").click();
-    // Need to fire a real click here because the copy to clipboard
-    cy.dataCy("jira-button").realClick();
+    cy.dataCy("jira-button").click();
     cy.assertValueCopiedToClipboard(
       `{noformat}\n${logLine0}\n...\n${logLine10}\n${logLine11}\n...\n${logLine1638}\n{noformat}`,
     );
@@ -288,20 +287,18 @@ describe("Sharing lines", () => {
     cy.dataCy("line-index-2").click({ shiftKey: true });
     cy.dataCy("sharing-menu").should("be.visible");
     cy.contains("Copy selected contents").should("be.visible");
-    // Need to fire a real click here because the copy to clipboard
-    cy.contains("Copy selected contents").realClick();
+    cy.contains("Copy selected contents").click();
     cy.validateToast("success", "Copied 2 lines to clipboard", true);
     cy.assertValueCopiedToClipboard(
-      `{noformat}\n+------------------------------------------+--------+-----+-----+\n|full_name                                 |name    |port |pid  |\n{noformat}`,
+      "{noformat}\n+------------------------------------------+--------+-----+-----+\n|full_name                                 |name    |port |pid  |\n{noformat}",
     );
   });
   it("should be able to copy a link to the selected lines", () => {
     cy.dataCy("line-index-1").click();
     cy.dataCy("line-index-2").click({ shiftKey: true });
     cy.dataCy("sharing-menu").should("be.visible");
     cy.contains("Copy share link to selected lines").should("be.visible");
-    // Need to fire a real click here because the copy to clipboard
-    cy.contains("Copy share link to selected lines").realClick();
+    cy.contains("Copy share link to selected lines").click();
     cy.validateToast("success", "Copied link to clipboard", true);
     cy.assertValueCopiedToClipboard(
       "http://localhost:4173/test/mongodb_mongo_master_rhel80_debug_v4ubsan_all_feature_flags_experimental_concurrency_sharded_with_stepdowns_and_balancer_4_linux_enterprise_361789ed8a613a2dc0335a821ead0ab6205fbdaa_22_09_21_02_53_24/0/1716e11b4f8a4541c5e2faf70affbfab?bookmarks=0%2C12568&selectedLineRange=L1-L2&shareLine=1",

diff --git a/apps/parsley/cypress/integration/resmokeLogs/resmoke_logView.ts b/apps/parsley/cypress/integration/resmokeLogs/resmoke_logView.ts
@@ -150,8 +150,7 @@ describe("Bookmarking and selecting lines", () => {
     const logLine11079 = `[j0:s1] | 2022-09-21T12:50:28.489+00:00 I  NETWORK  22944       [conn60] "Connection ended","attr":{"remote":"127.0.0.1:47362","uuid":{"uuid":{"$uuid":"b28d7d9f-03b6-4f93-a7cd-5e1948135f69"}},"connectionId":60,"connectionCount":2}`;
 
     cy.dataCy("details-button").click();
-    // Need to fire a real click here because the copy to clipboard
-    cy.dataCy("jira-button").realClick();
+    cy.dataCy("jira-button").click();
     cy.assertValueCopiedToClipboard(
       `{noformat}\n${logLine0}\n...\n${logLine10}\n${logLine11}\n...\n${logLine11079}\n{noformat}`,
     );
@@ -288,20 +287,18 @@ describe("Sharing lines", () => {
     cy.dataCy("line-index-2").click({ shiftKey: true });
     cy.dataCy("sharing-menu").should("be.visible");
     cy.contains("Copy selected contents").should("be.visible");
-    // Need to fire a real click here because the copy to clipboard
-    cy.contains("Copy selected contents").realClick();
+    cy.contains("Copy selected contents").click();
     cy.validateToast("success", "Copied 2 lines to clipboard", true);
     cy.assertValueCopiedToClipboard(
-      `{noformat}\n+------------------------------------------+--------+-----+-----+\n|full_name                                 |name    |port |pid  |\n{noformat}`,
+      "{noformat}\n+------------------------------------------+--------+-----+-----+\n|full_name                                 |name    |port |pid  |\n{noformat}",
     );
   });
   it("should be able to copy a link to the selected lines", () => {
     cy.dataCy("line-index-1").click();
     cy.dataCy("line-index-2").click({ shiftKey: true });
     cy.dataCy("sharing-menu").should("be.visible");
     cy.contains("Copy share link to selected lines").should("be.visible");
-    // Need to fire a real click here because the copy to clipboard
-    cy.contains("Copy share link to selected lines").realClick();
+    cy.contains("Copy share link to selected lines").click();
     cy.validateToast("success", "Copied link to clipboard", true);
     cy.assertValueCopiedToClipboard(
       "http://localhost:4173/resmoke/7e208050e166b1a9025c817b67eee48d/test/1716e11b4f8a4541c5e2faf70affbfab?bookmarks=0%2C11079&selectedLineRange=L1-L2&shareLine=1",

diff --git a/apps/parsley/cypress/support/commands.ts b/apps/parsley/cypress/support/commands.ts
@@ -38,6 +38,10 @@ Cypress.Commands.add("addSearch", (search: string) => {
   cy.dataCy("searchbar-input").type(`${search}`);
 });
 
+Cypress.Commands.add("assertValueCopiedToClipboard", (value: string) => {
+  cy.get("@writeText").should("have.been.calledOnceWith", value);
+});
+
 Cypress.Commands.add("clearBounds", () => {
   cy.toggleDetailsPanel(true);
 
@@ -202,13 +206,14 @@ Cypress.Commands.add(
   },
 );
 
-Cypress.Commands.add("assertValueCopiedToClipboard", (value: string) => {
-  cy.window().then((win) => {
-    win.navigator.clipboard.readText().then((text) => {
-      expect(text).to.eq(value);
-    });
-  });
-  // This wait is necessary to ensure the clipboard has time to be read
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy.wait(50);
+Cypress.Commands.overwrite("visit", (originalVisit, url, options = {}) => {
+  const opts = {
+    onBeforeLoad(win: Window): void {
+      // Mock clipboard API.
+      cy.spy(win.navigator.clipboard, "writeText").as("writeText");
+    },
+    ...options,
+  };
+  // @ts-ignore - TypeScript detects the wrong definition for the original function.
+  return originalVisit(url, opts);
 });
diff --git a/apps/parsley/cypress/support/index.ts b/apps/parsley/cypress/support/index.ts
@@ -1,4 +1,3 @@
-import "cypress-real-events";
 import "./commands";
 
 declare global {
@@ -19,6 +18,11 @@ declare global {
        * @example cy.addSearch('mySearch')
        */
       addSearch(search: string): void;
+      /**
+       * Custom command to validate that a value was copied to the clipboard.
+       * @example cy.assertValueCopiedToClipboard("This is some text")
+       */
+      assertValueCopiedToClipboard(text: string): void;
       /**
        * Custom command to click one of the toggles in the Details Menu panel.
        * @param toggleDataCy The data-cy attribute of the toggle to click.
@@ -99,11 +103,6 @@ declare global {
         message?: string,
         shouldClose?: boolean,
       ): void;
-      /**
-       * Custom command to validate that a value was copied to the clipboard.
-       * @example cy.assertValueCopiedToClipboard("This is some text")
-       */
-      assertValueCopiedToClipboard(text: string): void;
     }
   }
 }

diff --git a/apps/parsley/cypress/tsconfig.json b/apps/parsley/cypress/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "target": "ES5",
     "lib": ["ES5", "DOM"],
-    "types": ["cypress", "node", "cypress-real-events"],
+    "types": ["cypress", "node"],
   },
   "include": ["**/*.ts"]
 }
diff --git a/apps/parsley/package.json b/apps/parsley/package.json
@@ -115,7 +115,6 @@
     "@vitejs/plugin-react": "3.0.1",
     "babel-plugin-import-graphql": "2.8.1",
     "cypress": "12.7.0",
-    "cypress-real-events": "1.11.0",
     "env-cmd": "10.1.0",
     "eslint": "8.56.0",
     "eslint-config-evg": "*",

diff --git a/yarn.lock b/yarn.lock
@@ -8482,11 +8482,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-[email protected]:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.11.0.tgz#292fe5281c5b6e955524e766ab7fec46930c7763"
-  integrity sha512-4LXVRsyq+xBh5TmlEyO1ojtBXtN7xw720Pwb9rEE9rkJuXmeH3VyoR1GGayMGr+Itqf11eEjfDewtDmcx6PWPQ==
-
 [email protected]:
   version "12.17.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.1.tgz#777fdcceec4ecd642fc90795f5994853b6ea03f8"