Merge pull request #113 from replayio-public/feature/PRO-697-muiv5-up…

…date Upgrade to MUI v5 for React 18 / 19 compat
replayio-public · Jun 25, 2024 · 3649741 · 3649741
2 parents 60748f3 + 3bdceb9
commit 3649741
Show file tree

Hide file tree

Showing 67 changed files with 1,862 additions and 1,468 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/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/tsconfig.json b/cypress/tsconfig.json
@@ -7,6 +7,6 @@
     "lib": ["es2015", "dom"],
     "isolatedModules": false,
     "allowJs": true,
-    "noEmit": true
-  }
+    "noEmit": true,
+  },
 }
diff --git a/data/database.json b/data/database.json
@@ -10985,4 +10985,4 @@
       "modifiedAt": "2024-03-07T13:32:42.472Z"
     }
   ]
-}
+}
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/__tests__/comments.test.ts b/src/__tests__/comments.test.ts
@@ -11,23 +11,23 @@ import {
 import { User, Transaction } from "../../src/models";
 
 describe("Comments", () => {
-  // beforeEach(() => {
-  //   seedDatabase();
-  // });
-  // it("should comment a transaction for a contact", () => {
-  //   const user: User = getAllUsers()[0];
-  //   const transactions: Transaction[] = getTransactionsForUserContacts(user.id);
-  //   const content = "This is my comment content";
-  //   const comment = createComment(user.id, transactions[0].id, content);
-  //   expect(comment.transactionId).toBe(transactions[0].id);
-  //   expect(comment.content).toBe(content);
-  // });
-  // it("should get a list of comments for a transaction", () => {
-  //   const user: User = getAllUsers()[0];
-  //   const transactions: Transaction[] = getTransactionsByUserId(user.id);
-  //   const transaction = transactions[0];
-  //   createComment(user.id, transaction.id, "This is my comment");
-  //   const comments = getCommentsByTransactionId(transaction.id);
-  //   expect(comments[0].transactionId).toBe(transaction.id);
-  // });
+  beforeEach(() => {
+    seedDatabase();
+  });
+  it("should comment a transaction for a contact", () => {
+    const user: User = getAllUsers()[0];
+    const transactions: Transaction[] = getTransactionsForUserContacts(user.id);
+    const content = "This is my comment content";
+    const comment = createComment(user.id, transactions[0].id, content);
+    expect(comment.transactionId).toBe(transactions[0].id);
+    expect(comment.content).toBe(content);
+  });
+  it("should get a list of comments for a transaction", () => {
+    const user: User = getAllUsers()[0];
+    const transactions: Transaction[] = getTransactionsByUserId(user.id);
+    const transaction = transactions[0];
+    createComment(user.id, transaction.id, "This is my comment");
+    const comments = getCommentsByTransactionId(transaction.id);
+    expect(comments[0].transactionId).toBe(transaction.id);
+  });
 });