Migrate from cy.route to cy.intercept for 7.x release

cypress/support/commands.ts

@@ -50,9 +50,8 @@ Cypress.Commands.add("login", (username, password, rememberUser = false) => {
     autoEnd: false,
   });
 
-  cy.server();
-  cy.route("POST", "/login").as("loginUser");
-  cy.route("GET", "checkAuth").as("getUserProfile");
+  cy.intercept("POST", "/login").as("loginUser");
+  cy.intercept("GET", "checkAuth").as("getUserProfile");
 
   cy.location("pathname", { log: false }).then((currentPath) => {
     if (currentPath !== signinPath) {
@@ -77,7 +76,7 @@ Cypress.Commands.add("login", (username, password, rememberUser = false) => {
           username,
           password,
           rememberUser,
-          userId: loginUser.response.body.user?.id,
+          userId: loginUser.response.statusCode !== 401 && loginUser.response.body.user.id,
         };
       },
     });
@@ -137,9 +136,8 @@ Cypress.Commands.add("loginByXstate", (username, password = Cypress.env("default
     autoEnd: false,
   });
 
-  cy.server();
-  cy.route("POST", "/login").as("loginUser");
-  cy.route("GET", "/checkAuth").as("getUserProfile");
+  cy.intercept("POST", "/login").as("loginUser");
+  cy.intercept("GET", "/checkAuth").as("getUserProfile");
   cy.visit("/signin", { log: false }).then(() => {
     log.snapshot("before");
   });
@@ -164,8 +162,7 @@ Cypress.Commands.add("loginByXstate", (username, password = Cypress.env("default
 });
 
 Cypress.Commands.add("logoutByXstate", () => {
-  cy.server();
-  cy.route("POST", "/logout").as("logoutUser");
+  cy.intercept("POST", "/logout").as("logoutUser");
 
   const log = Cypress.log({
     name: "logoutByXstate",

cypress/support/index.ts

@@ -1,3 +1,23 @@
 // @ts-check
 import "@cypress/code-coverage/support";
 import "./commands";
+import { isMobile } from "./utils";
+
+beforeEach(() => {
+  // cy.intercept middleware to remove 'if-none-match' headers from all requests
+  // to prevent the server from returning cached responses of API requests
+  cy.intercept(
+    { url: "http://localhost:3001/**", middleware: true },
+    (req) => delete req.headers["if-none-match"]
+  );
+
+  // Throttle API responses for mobile testing to simulate real world condition
+  if (isMobile()) {
+    cy.intercept({ url: "http://localhost:3001/**", middleware: true }, (req) => {
+      req.on("response", (res) => {
+        // Throttle the response to 1 Mbps to simulate a mobile 3G connection
+        res.setThrottle(1000);
+      });
+    });
+  }
+});

cypress/tests/ui/auth.spec.ts

@@ -5,9 +5,8 @@ describe("User Sign-up and Login", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("POST", "/users").as("signup");
-    cy.route("POST", "/bankAccounts").as("createBankAccount");
+    cy.intercept("POST", "/users").as("signup");
+    cy.intercept("POST", "/bankAccounts").as("createBankAccount");
   });
 
   it("should redirect unauthenticated user to signin page", function () {
@@ -112,6 +111,8 @@ describe("User Sign-up and Login", function () {
   });
 
   it("should display signup errors", function () {
+    cy.intercept("GET", "/signup");
+
     cy.visit("/signup");
 
     cy.getBySel("signup-first-name").type("First").find("input").clear().blur();

cypress/tests/ui/bankaccounts.spec.ts

@@ -11,10 +11,9 @@ describe("Bank Accounts", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("POST", "/bankAccounts").as("createBankAccount");
-    cy.route("DELETE", "/bankAccounts/*").as("deleteBankAccount");
-    cy.route("GET", "/notifications").as("getNotifications");
+    cy.intercept("POST", "/bankAccounts").as("createBankAccount");
+    cy.intercept("DELETE", "**/bankAccounts/*").as("deleteBankAccount");
+    cy.intercept("GET", "/notifications").as("getNotifications");
 
     cy.database("find", "users").then((user: User) => {
       ctx.user = user;
@@ -124,7 +123,9 @@ describe("Bank Accounts", function () {
 
   // TODO: [enhancement] the onboarding modal assertion can be removed after adding "onboarded" flag to user profile
   it("renders an empty bank account list state with onboarding modal", function () {
-    cy.route("GET", "/bankAccounts", []).as("getBankAccounts");
+    cy.intercept("GET", "/bankAccounts", {
+      body: { results: [] },
+    }).as("getBankAccounts");
 
     cy.visit("/bankaccounts");
     cy.wait("@getBankAccounts");

cypress/tests/ui/new-transaction.spec.ts

@@ -14,15 +14,16 @@ describe("New Transaction", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("POST", "/transactions").as("createTransaction");
+    cy.intercept("GET", "/users*").as("allUsers");
 
-    cy.route("GET", "/users").as("allUsers");
-    cy.route("GET", "/notifications").as("notifications");
-    cy.route("GET", "/transactions/public").as("publicTransactions");
-    cy.route("GET", "/transactions").as("personalTransactions");
-    cy.route("GET", "/users/search*").as("usersSearch");
-    cy.route("PATCH", "/transactions/*").as("updateTransaction");
+    cy.intercept("GET", "/users/search*").as("usersSearch");
+
+    cy.intercept("POST", "/transactions").as("createTransaction");
+
+    cy.intercept("GET", "/notifications").as("notifications");
+    cy.intercept("GET", "/transactions/public").as("publicTransactions");
+    cy.intercept("GET", "/transactions").as("personalTransactions");
+    cy.intercept("PATCH", "/transactions/*").as("updateTransaction");
 
     cy.database("filter", "users").then((users: User[]) => {
       ctx.allUsers = users;
@@ -219,7 +220,7 @@ describe("New Transaction", function () {
     cy.visualSnapshot("Navigate to Transaction Item");
 
     cy.getBySelLike("accept-request").click();
-    cy.wait("@updateTransaction").its("status").should("equal", 204);
+    cy.wait("@updateTransaction").its("response.statusCode").should("eq", 204);
     cy.getBySelLike("transaction-detail-header").should("be.visible");
     cy.getBySelLike("transaction-amount").should("be.visible");
     cy.getBySelLike("sender-avatar").should("be.visible");
@@ -263,8 +264,9 @@ describe("New Transaction", function () {
         cy.getBySel("user-list-search-input").type(targetUser[attr] as string, { force: true });
         cy.wait("@usersSearch")
           // make sure the backend returns some results
-          .its("responseBody.results.length")
-          .should("be.gt", 0)
+          .its("response.body.results")
+          .should("have.length.gt", 0)
+          .its("length")
           .then((resultsN) => {
             cy.getBySelLike("user-list-item")
               // make sure the list of results is fully updated

cypress/tests/ui/notifications.spec.ts

@@ -13,11 +13,10 @@ describe("Notifications", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("GET", "/notifications").as("getNotifications");
-    cy.route("POST", "/transactions").as("createTransaction");
-    cy.route("PATCH", "/notifications/*").as("updateNotification");
-    cy.route("POST", "/comments/*").as("postComment");
+    cy.intercept("GET", "/notifications*").as("getNotifications");
+    cy.intercept("POST", "/transactions").as("createTransaction");
+    cy.intercept("PATCH", "/notifications/*").as("updateNotification");
+    cy.intercept("POST", "/comments/*").as("postComment");
 
     cy.database("filter", "users").then((users: User[]) => {
       ctx.userA = users[0];
@@ -250,7 +249,7 @@ describe("Notifications", function () {
   });
 
   it("renders an empty notifications state", function () {
-    cy.route("GET", "/notifications", []).as("notifications");
+    cy.intercept("GET", "/notifications", []).as("notifications");
 
     cy.loginByXstate(ctx.userA.username);
 

cypress/tests/ui/transaction-feeds.spec.ts

@@ -46,11 +46,10 @@ describe("Transaction Feed", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("GET", "/notifications").as("notifications");
-    cy.route("/transactions*").as(feedViews.personal.routeAlias);
-    cy.route("/transactions/public*").as(feedViews.public.routeAlias);
-    cy.route("/transactions/contacts*").as(feedViews.contacts.routeAlias);
+    cy.intercept("GET", "/notifications").as("notifications");
+    cy.intercept("GET", "/transactions*").as(feedViews.personal.routeAlias);
+    cy.intercept("GET", "/transactions/public*").as(feedViews.public.routeAlias);
+    cy.intercept("GET", "/transactions/contacts*").as(feedViews.contacts.routeAlias);
 
     cy.database("filter", "users").then((users: User[]) => {
       ctx.user = users[0];
@@ -62,6 +61,7 @@ describe("Transaction Feed", function () {
   describe("app layout and responsiveness", function () {
     it("toggles the navigation drawer", function () {
       cy.wait("@notifications");
+      cy.wait("@publicTransactions");
       if (isMobile()) {
         cy.getBySel("sidenav-home").should("not.exist");
         cy.visualSnapshot("Mobile Initial Side Navigation Not Visible");
@@ -87,9 +87,15 @@ describe("Transaction Feed", function () {
 
   describe("renders and paginates all transaction feeds", function () {
     it("renders transactions item variations in feed", function () {
-      cy.route("/transactions/public*", "fixture:public-transactions").as(
-        "mockedPublicTransactions"
-      );
+      cy.intercept("GET", "/transactions/public*", {
+        headers: {
+          "X-Powered-By": "Express",
+          Date: new Date().toString(),
+        },
+        fixture: "public-transactions.json",
+      }).as("mockedPublicTransactions");
+
+      // Visit page again to trigger call to /transactions/public
       cy.visit("/");
 
       cy.wait("@notifications");
@@ -309,7 +315,7 @@ describe("Transaction Feed", function () {
         );
 
         // @ts-ignore
-        cy.wait(`@${feed.routeAlias}`).then(({ response: { body }, url }) => {
+        cy.wait(`@${feed.routeAlias}`).then(({ response: { body, url } }) => {
           const transactions = body.results as TransactionResponseItem[];
           const urlParams = new URLSearchParams(_.last(url.split("?")));
 

cypress/tests/ui/transaction-view.spec.ts

@@ -11,15 +11,14 @@ describe("Transaction View", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("GET", "/transactions").as("personalTransactions");
-    cy.route("GET", "/transactions/public").as("publicTransactions");
-    cy.route("GET", "/transactions/*").as("getTransaction");
-    cy.route("PATCH", "/transactions/*").as("updateTransaction");
+    cy.intercept("GET", "/transactions*").as("personalTransactions");
+    cy.intercept("GET", "/transactions/public*").as("publicTransactions");
+    cy.intercept("GET", "/transactions/*").as("getTransaction");
+    cy.intercept("PATCH", "/transactions/*").as("updateTransaction");
 
-    cy.route("GET", "/checkAuth").as("userProfile");
-    cy.route("GET", "/notifications").as("getNotifications");
-    cy.route("GET", "/bankAccounts").as("getBankAccounts");
+    cy.intercept("GET", "/checkAuth").as("userProfile");
+    cy.intercept("GET", "/notifications").as("getNotifications");
+    cy.intercept("GET", "/bankAccounts").as("getBankAccounts");
 
     cy.database("find", "users").then((user: User) => {
       ctx.authenticatedUser = user;
@@ -78,7 +77,7 @@ describe("Transaction View", function () {
     cy.wait("@getTransaction");
 
     cy.getBySelLike("accept-request").click();
-    cy.wait("@updateTransaction").should("have.property", "status", 204);
+    cy.wait("@updateTransaction").its("response.statusCode").should("equal", 204);
     cy.getBySelLike("accept-request").should("not.exist");
     cy.getBySel("transaction-detail-header").should("be.visible");
     cy.visualSnapshot("Transaction Accepted");
@@ -89,7 +88,7 @@ describe("Transaction View", function () {
     cy.wait("@getTransaction");
 
     cy.getBySelLike("reject-request").click();
-    cy.wait("@updateTransaction").should("have.property", "status", 204);
+    cy.wait("@updateTransaction").its("response.statusCode").should("equal", 204);
     cy.getBySelLike("reject-request").should("not.exist");
     cy.getBySel("transaction-detail-header").should("be.visible");
     cy.visualSnapshot("Transaction Rejected");

cypress/tests/ui/user-settings.spec.ts

@@ -5,9 +5,8 @@ describe("User Settings", function () {
   beforeEach(function () {
     cy.task("db:seed");
 
-    cy.server();
-    cy.route("PATCH", "/users/*").as("updateUser");
-    cy.route("GET", "/notifications").as("getNotifications");
+    cy.intercept("PATCH", "/users/*").as("updateUser");
+    cy.intercept("GET", "/notifications*").as("getNotifications");
 
     cy.database("find", "users").then((user: User) => {
       cy.loginByXstate(user.username);
@@ -69,7 +68,7 @@ describe("User Settings", function () {
     cy.getBySelLike("submit").should("not.be.disabled");
     cy.getBySelLike("submit").click();
 
-    cy.wait("@updateUser").its("status").should("equal", 204);
+    cy.wait("@updateUser").its("response.statusCode").should("equal", 204);
 
     if (isMobile()) {
       cy.getBySel("sidenav-toggle").click();