cypress-io · jennifer-shehane · Aug 27, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024
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/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",

diff --git a/patches/@material-ui+core+4.12.4.patch b/patches/@material-ui+core+4.12.4.patch
diff --git a/renovate.json b/renovate.json
@@ -68,7 +68,7 @@
     },
     {
       "groupName": "Material UI",
-      "matchPackagePatterns": ["^@material-ui/"]
+      "matchPackagePatterns": ["^@mui/"]
     },
     {
       "groupName": "Graphql",

diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
@@ -4,6 +4,6 @@
   "exclude": [],
   "compilerOptions": {
     "types": ["node"],
-    "isolatedModules": false
-  }
+    "isolatedModules": false,
+  },
 }
diff --git a/src/components/AlertBar.tsx b/src/components/AlertBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Snackbar } from "@material-ui/core";
+import { Snackbar } from "@mui/material";
 import {
   BaseActionObject,
   Interpreter,
@@ -9,7 +9,7 @@ import {
 } from "xstate";
 import { SnackbarContext, SnackbarSchema, SnackbarEvents } from "../machines/snackbarMachine";
 import { useActor } from "@xstate/react";
-import { Alert } from "@material-ui/lab";
+import { Alert } from "@mui/material";
 
 interface Props {
   snackbarService: Interpreter<