Add cypress-pipe, add custom command to retry clicks (#415)

Author: smartspot2

cypress/e2e/course/restricted-courses.cy.ts

@@ -93,13 +93,18 @@ describe("whitelisted courses", () => {
     cy.contains(".csm-btn", /cs61a/i).should("be.visible");
 
     // view unrestricted courses; should show nothing
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).click();
+    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).clickUntil($el => {
+      expect($el).to.have.class("active");
+    });
     cy.contains(".course-menu-sidebar-tab", /unrestricted/i).should("have.class", "active");
     cy.contains(".csm-btn", /cs61a/i).should("not.exist");
 
     // go to cs61a sections
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).click();
+    cy.contains(".course-menu-sidebar-tab", /restricted/i).clickUntil($el => {
+      expect($el).to.have.class("active");
+    });
     cy.contains(".course-menu-sidebar-tab", /restricted/i).should("have.class", "active");
+
     cy.contains(".csm-btn", /cs61a/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");
 
@@ -143,13 +148,17 @@ describe("whitelisted courses", () => {
     cy.contains(".csm-btn", /cs70/i).should("not.exist");
 
     // view unrestricted courses; should show cs70, but not cs61a
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).click();
+    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).clickUntil($el => {
+      expect($el).to.have.class("active");
+    });
     cy.contains(".course-menu-sidebar-tab", /unrestricted/i).should("have.class", "active");
     cy.contains(".csm-btn", /cs61a/i).should("not.exist");
     cy.contains(".csm-btn", /cs70/i).should("be.visible");
 
     // go to cs61a sections
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).click();
+    cy.contains(".course-menu-sidebar-tab", /restricted/i).clickUntil($el => {
+      expect($el).to.have.class("active");
+    });
     cy.contains(".course-menu-sidebar-tab", /restricted/i).should("have.class", "active");
     cy.contains(".csm-btn", /cs61a/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");
@@ -225,15 +234,19 @@ describe("whitelisted courses", () => {
     cy.contains(".enrollment-container .enrollment-course", /cs61a/i).should("be.visible");
 
     // view unrestricted courses; should show cs70, but not cs61a
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).click();
+    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).clickUntil($el => {
+      expect($el).to.have.class("active");
+    });
     cy.contains(".course-menu-sidebar-tab", /unrestricted/i).should("have.class", "active");
     cy.contains(".csm-btn", /cs61a/i).should("not.exist");
     cy.contains(".csm-btn", /cs70/i).should("be.visible");
     // should not show any enrollment times
     cy.get(".enrollment-container").should("not.exist");
 
     // go to cs61a sections
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).click();
+    cy.contains(".course-menu-sidebar-tab", /restricted/i).clickUntil($el => {
+      expect($el).to.have.class("active");
+    });
     cy.contains(".course-menu-sidebar-tab", /restricted/i).should("have.class", "active");
     cy.contains(".csm-btn", /cs61a/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");

cypress/support/commands.ts

@@ -72,3 +72,14 @@ Cypress.Commands.add("_exec", command => {
     }
   });
 });
+
+/**
+ * Chained click until a condition is satisfied;
+ * doesn't use the Cypress .click(), and instead uses the jQuery .trigger("click").
+ *
+ * Should guard this with a visibility check to ensure that the element is actually clickable.
+ */
+Cypress.Commands.add("clickUntil", { prevSubject: true }, (subject: JQuery<HTMLElement>, condition) => {
+  const click = ($el: JQuery<HTMLElement>) => $el.trigger("click");
+  return cy.wrap(subject).pipe(click).should(condition);
+});

cypress/support/e2e.ts

@@ -13,8 +13,11 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+// add pipe command
+import "cypress-pipe";
+
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/support/index.d.ts

@@ -14,5 +14,8 @@ declare namespace Cypress {
     setupDB(script_name: string, func_name: string, options?: SetupDBOptions): Chainable<void>;
     initDB(): Chainable<void>;
     _exec(command: string): Chainable<void>;
+    clickUntil(
+      condition: ($el: JQuery<HTMLElement>) => void | Chainable<JQuery<HTMLElement>>
+    ): Chainable<JQuery<HTMLElement>>;
   }
 }

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "allowJs": true,
     "baseUrl": "../node_modules",
-    "types": ["cypress"],
+    "types": ["cypress", "cypress-pipe"],
     "target": "es2019"
   },
   "include": ["**/*.*"]

package-lock.json

@@ -38,11 +38,11 @@
     "@testing-library/react": "^13.4.0",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.175",
+    "@types/random-words": "^1.1.2",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "babel-jest": "^28.1.1",
-    "@types/random-words": "^1.1.2",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -51,6 +51,7 @@
     "css-loader": "^6.2.0",
     "csso-cli": "^3.0.0",
     "cypress": "^12.2.0",
+    "cypress-pipe": "^2.0.0",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-cypress": "^2.12.1",