Merge branch 'develop' into uicoverage-demo

cypress-io · Dec 12, 2024 · f1f3705 · f1f3705
2 parents be72daa + 51ebb27
commit f1f3705
Show file tree

Hide file tree

Showing 65 changed files with 3,815 additions and 3,496 deletions.
diff --git a/backend/graphql/schema.graphql b/backend/graphql/schema.graphql
@@ -3,14 +3,8 @@ type Query {
 }
 
 type Mutation {
-  createBankAccount(
-    bankName: String!,
-    accountNumber: String!,
-    routingNumber: String!
-  ): BankAccount
-  deleteBankAccount(
-    id: ID!
-  ): Boolean
+  createBankAccount(bankName: String!, accountNumber: String!, routingNumber: String!): BankAccount
+  deleteBankAccount(id: ID!): Boolean
 }
 
 type BankAccount {
@@ -23,4 +17,4 @@ type BankAccount {
   isDeleted: Boolean
   createdAt: String
   modifiedAt: String
-}
+}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -123,6 +123,7 @@ Cypress.Commands.add("setTransactionAmountRange", (min, max) => {
     .getBySelLike("filter-amount-range-slider")
     .reactComponent()
     .its("memoizedProps")
+    .its("ownerState")
     .invoke("onChange", null, [min / 10, max / 10]);
 });
 

diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -1,14 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
-
   </head>
   <body>
-
     <div data-cy-root></div>
   </body>
 </html>
diff --git a/cypress/tests/api/api-contacts.spec.ts b/cypress/tests/api/api-contacts.spec.ts
@@ -53,7 +53,7 @@ describe("Contacts API", function () {
       });
     });
 
-    it("error when invalid contactUserId", function () {
+    it("errors when invalid contactUserId", function () {
       cy.request({
         method: "POST",
         url: `${apiContacts}`,

diff --git a/cypress/tests/api/api-notifications.spec.ts b/cypress/tests/api/api-notifications.spec.ts
@@ -90,7 +90,7 @@ describe("Notifications API", function () {
       });
     });
 
-    it("error when invalid field sent", function () {
+    it("errors when invalid field sent", function () {
       cy.request({
         method: "PATCH",
         url: `${apiNotifications}/${ctx.notificationId}`,

diff --git a/cypress/tests/api/api-transactions.spec.ts b/cypress/tests/api/api-transactions.spec.ts
@@ -152,7 +152,7 @@ describe("Transactions API", function () {
       });
     });
 
-    it("error when invalid field sent", function () {
+    it("errors when an invalid field sent", function () {
       cy.request({
         method: "PATCH",
         url: `${apiTransactions}/${ctx.transactionId}`,

diff --git a/cypress/tests/api/api-users.spec.ts b/cypress/tests/api/api-users.spec.ts
@@ -37,14 +37,14 @@ describe("Users API", function () {
   });
 
   context("GET /users/:userId", function () {
-    it("get a user", function () {
+    it("gets a user", function () {
       cy.request("GET", `${apiUsers}/${ctx.authenticatedUser!.id}`).then((response) => {
         expect(response.status).to.eq(200);
         expect(response.body.user).to.have.property("firstName");
       });
     });
 
-    it("error when invalid userId", function () {
+    it("errors when invalid userId", function () {
       cy.request({
         method: "GET",
         url: `${apiUsers}/1234`,
@@ -57,7 +57,7 @@ describe("Users API", function () {
   });
 
   context("GET /users/profile/:username", function () {
-    it("get a user profile by username", function () {
+    it("gets a user profile by username", function () {
       const { username, firstName, lastName, avatar } = ctx.authenticatedUser!;
       cy.request("GET", `${apiUsers}/profile/${username}`).then((response) => {
         expect(response.status).to.eq(200);
@@ -72,7 +72,7 @@ describe("Users API", function () {
   });
 
   context("GET /users/search", function () {
-    it("get users by email", function () {
+    it("gets users by email", function () {
       const { email, firstName } = ctx.searchUser!;
       cy.request({
         method: "GET",
@@ -86,7 +86,7 @@ describe("Users API", function () {
       });
     });
 
-    it("get users by phone number", function () {
+    it("gets users by phone number", function () {
       const { phoneNumber, firstName } = ctx.searchUser!;
 
       cy.request({
@@ -101,7 +101,7 @@ describe("Users API", function () {
       });
     });
 
-    it("get users by username", function () {
+    it("gets users by username", function () {
       const { username, firstName } = ctx.searchUser!;
 
       cy.request({
@@ -154,7 +154,7 @@ describe("Users API", function () {
       });
     });
 
-    it("error when invalid field sent", function () {
+    it("errors when an invalid field sent", function () {
       cy.request({
         method: "POST",
         url: `${apiUsers}`,
@@ -180,7 +180,7 @@ describe("Users API", function () {
       });
     });
 
-    it("error when invalid field sent", function () {
+    it("errors when an invalid field sent", function () {
       cy.request({
         method: "PATCH",
         url: `${apiUsers}/${ctx.authenticatedUser!.id}`,
@@ -196,7 +196,7 @@ describe("Users API", function () {
   });
 
   context("POST /login", function () {
-    it("login as user", function () {
+    it("logs in as a user", function () {
       cy.loginByApi(ctx.authenticatedUser!.username).then((response) => {
         expect(response.status).to.eq(200);
       });

diff --git a/cypress/tests/ui/notifications.spec.ts b/cypress/tests/ui/notifications.spec.ts
@@ -26,65 +26,59 @@ describe("Notifications", function () {
   });
 
   describe("notifications from user interactions", function () {
-    it(
-      "User A likes a transaction of User B; User B gets notification that User A liked transaction ",
-      // NOTE: this test seems to have issues in Firefox UI/Mobile tests due to an issue with the Base Button component in MUI v4
-      // we should try unskipping this test in Firefox once we upgrade MUI to v5+. @see https://github.com/cypress-io/cypress-realworld-app/issues/1278
-      { browser: { name: "!firefox" } },
-      function () {
-        cy.loginByXstate(ctx.userA.username);
-        cy.wait("@getNotifications");
-
-        cy.database("find", "transactions", { senderId: ctx.userB.id }).then(
-          (transaction: Transaction) => {
-            cy.visit(`/transaction/${transaction.id}`);
-          }
-        );
-
-        cy.log("🚩 Renders the notifications badge with count");
-        cy.wait("@getNotifications")
-          .its("response.body.results.length")
-          .then((notificationCount) => {
-            cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`);
-          });
-        cy.visualSnapshot("Renders the notifications badge with count");
-
-        const likesCountSelector = "[data-test*=transaction-like-count]";
-        cy.contains(likesCountSelector, 0);
-        cy.getBySelLike("like-button").click();
-        // a successful "like" should disable the button and increment
-        // the number of likes
-        cy.getBySelLike("like-button").should("be.disabled");
-        cy.contains(likesCountSelector, 1);
-        cy.visualSnapshot("Like Count Incremented");
-
-        cy.switchUserByXstate(ctx.userB.username);
-        cy.visualSnapshot(`Switch to User ${ctx.userB.username}`);
-
-        cy.wait("@getNotifications")
-          .its("response.body.results.length")
-          .as("preDismissedNotificationCount");
-
-        cy.visit("/notifications");
-
-        cy.wait("@getNotifications");
-
-        cy.getBySelLike("notification-list-item")
-          .should("have.length", 9)
-          .first()
-          .should("contain", ctx.userA?.firstName)
-          .and("contain", "liked");
-
-        cy.log("🚩 Marks notification as read");
-        cy.getBySelLike("notification-mark-read").first().click({ force: true });
-        cy.wait("@updateNotification");
-
-        cy.get("@preDismissedNotificationCount").then((count) => {
-          cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count));
+    it("User A likes a transaction of User B; User B gets notification that User A liked transaction ", function () {
+      cy.loginByXstate(ctx.userA.username);
+      cy.wait("@getNotifications");
+
+      cy.database("find", "transactions", { senderId: ctx.userB.id }).then(
+        (transaction: Transaction) => {
+          cy.visit(`/transaction/${transaction.id}`);
+        }
+      );
+
+      cy.log("🚩 Renders the notifications badge with count");
+      cy.wait("@getNotifications")
+        .its("response.body.results.length")
+        .then((notificationCount) => {
+          cy.getBySel("nav-top-notifications-count").should("have.text", `${notificationCount}`);
         });
-        cy.visualSnapshot("Notification count after notification dismissed");
-      }
-    );
+      cy.visualSnapshot("Renders the notifications badge with count");
+
+      const likesCountSelector = "[data-test*=transaction-like-count]";
+      cy.contains(likesCountSelector, 0);
+      cy.getBySelLike("like-button").click();
+      // a successful "like" should disable the button and increment
+      // the number of likes
+      cy.getBySelLike("like-button").should("be.disabled");
+      cy.contains(likesCountSelector, 1);
+      cy.visualSnapshot("Like Count Incremented");
+
+      cy.switchUserByXstate(ctx.userB.username);
+      cy.visualSnapshot(`Switch to User ${ctx.userB.username}`);
+
+      cy.wait("@getNotifications")
+        .its("response.body.results.length")
+        .as("preDismissedNotificationCount");
+
+      cy.visit("/notifications");
+
+      cy.wait("@getNotifications");
+
+      cy.getBySelLike("notification-list-item")
+        .should("have.length", 9)
+        .first()
+        .should("contain", ctx.userA?.firstName)
+        .and("contain", "liked");
+
+      cy.log("🚩 Marks notification as read");
+      cy.getBySelLike("notification-mark-read").first().click({ force: true });
+      cy.wait("@updateNotification");
+
+      cy.get("@preDismissedNotificationCount").then((count) => {
+        cy.getBySelLike("notification-list-item").should("have.length.lessThan", Number(count));
+      });
+      cy.visualSnapshot("Notification count after notification dismissed");
+    });
 
     it("User C likes a transaction between User A and User B; User A and User B get notifications that User C liked transaction", function () {
       cy.loginByXstate(ctx.userC.username);

diff --git a/cypress/tests/ui/transaction-view.spec.ts b/cypress/tests/ui/transaction-view.spec.ts
@@ -40,15 +40,17 @@ describe("Transaction View", function () {
   });
 
   it("transactions navigation tabs are hidden on a transaction view page", function () {
-    cy.getBySelLike("transaction-item").first().click();
+    // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
+    cy.getBySelLike("transaction-item").first().click({ force: true });
     cy.location("pathname").should("include", "/transaction");
     cy.getBySel("nav-transaction-tabs").should("not.exist");
     cy.getBySel("transaction-detail-header").should("be.visible");
     cy.visualSnapshot("Transaction Navigation Tabs Hidden");
   });
 
   it("likes a transaction", function () {
-    cy.getBySelLike("transaction-item").first().click();
+    // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
+    cy.getBySelLike("transaction-item").first().click({ force: true });
     cy.wait("@getTransaction");
 
     cy.getBySelLike("like-button").click();
@@ -58,7 +60,8 @@ describe("Transaction View", function () {
   });
 
   it("comments on a transaction", function () {
-    cy.getBySelLike("transaction-item").first().click();
+    // { force: true } is a workaround for https://github.com/cypress-io/cypress/issues/29776
+    cy.getBySelLike("transaction-item").first().click({ force: true });
     cy.wait("@getTransaction");
 
     const comments = ["Thank you!", "Appreciate it."];

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -7,6 +7,6 @@
     "lib": ["es2015", "dom"],
     "isolatedModules": false,
     "allowJs": true,
-    "noEmit": true
-  }
+    "noEmit": true,
+  },
 }
diff --git a/package.json b/package.json
@@ -16,12 +16,14 @@
     "@babel/core": "7.23.9",
     "@babel/plugin-syntax-flow": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
     "@graphql-tools/graphql-file-loader": "7.5.17",
     "@graphql-tools/load": "7.8.14",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.3",
-    "@material-ui/lab": "4.0.0-alpha.61",
     "@matheusluizn/react-google-login": "^5.1.6",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/lab": "^5.0.0-alpha.167",
+    "@mui/material": "^5.15.12",
     "@okta/jwt-verifier": "^3.0.1",
     "@okta/okta-auth-js": "^7.3.0",
     "@okta/okta-react": "^6.7.0",
@@ -100,9 +102,9 @@
     "eslint": "^8.44.0",
     "eslint-config-prettier": "8.10.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-cypress": "2.15.2",
+    "eslint-plugin-cypress": "3.5.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "express": "4.19.2",
+    "express": "4.20.0",
     "express-jwt": "6.1.2",
     "express-paginate": "1.0.2",
     "express-session": "1.18.0",