Build/upgrade mui v4 to v5 (#1522)

* build: yarn add @mui/material @mui/styles ; yarn add @mui/lab ; yarn add @mui/icons-material * build: yarn add @emotion/react @emotion/styled * build: npx @mui/codemod@latest v5.0.0/preset-safe src * build: empty commit, for: npx @mui/codemod@latest v5.0.0/variant-prop src * build: npx @mui/codemod@latest v5.0.0/link-underline-hover src * build: npx prettier --write src backend cypress scripts * build: yarn remove @material-ui/core @material-ui/icons @material-ui/lab * build: rm patches/@material-ui+core+4.12.4.patch * build: update renovate.json to use @mui not @material-ui * build: update ThemeProvider import, per https://mui.com/material-ui/migration/v5-style-changes/\#update-themeprovider-import * build: update EventType for Tabs onChange event, per https://mui.com/material-ui/migration/v5-component-changes/\#update-event-type-typescript-5 * fix: Two tabs problems: First, the color changes indicated at https://mui.com/material-ui/migration/v5-component-changes/#update-default-indicatorcolor-and-textcolor-prop-values Second, remove the the trailing "px" a number rather than string when passing values to the react-virtualized List component. See https://mui.com/material-ui/migration/v5-style-changes/\#%E2%9C%85-remove-px-suffix * fix: transaction amount was falling off right edge * fix: indirection of onChange prop of Slider via ownerState this was causing the slider-based cypress tests to fail. * fix: remove zIndex from AppBar to fix drawer issue appBar was still over the date picker in mobile screen size, failing one of the cypress:run:mobile tests. See also https://mui.com/material-ui/migration/v5-component-changes/\#fix-z-index-issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/containers followed by lint fixes and manual review * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/BankAccountForm.tsx linting and review * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/CommentForm.tsx review, lint * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/MainLayout.tsx review, remove class for root and use ampersand instead, adding a flexGrow:1 to get styling as before * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NavBar.tsx, review, appBarShift was incorrectly considered a child of root; fixed that with removal of space between & and ., lint * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NavDrawer.tsx review, lint, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/NotificationListItem.tsx review, lint, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignInForm.tsx lint, cast StyledContainer to typeof Container per https://github.com/mui/material-ui/issues/15695\#ref-commit-7fd1a29 * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SignUpForm.tsx lint, cast StyledContainer to typeof Container per https://github.com/mui/material-ui/issues/15695\#ref-commit-7fd1a29 * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/SkeletonList.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionAmount.tsx lint, remove space between & and . because classes are conditionally applied * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepOne.tsx lint and review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepTwo.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionCreateStepThree.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionDateRangeFilter.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionDetail.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionItem.tsx lint, review, problems with SmallAvatar, fixed manually * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionList.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionListAmountRangeFilter.tsx lint, review, did not work really at all, fixed by using sx prop rather than classes at all * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionListFilters.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/TransactionTitle.tsx lint, review, no issues * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components/UserSettingsForm.tsx lint, review, form did not want to play nice with classes, fixed with sx for submit button and styled wrapping div for form * build: npx @mui/codemod@latest v5.0.0/jss-to-styled src/components had apparently accidentally failed-to-checkin TransactionInfiniteList and userSearchForm, but both were reviewed and had no issues * build: yarn remove @mui/styles and some minor style fixups to be rid of the dependency causing the peer dependency warning * fix: oops did not mean to modify database.json * build: remove @ts-expect-error annotations no longer used after yarn.lock merge resolution * test: issue 1278 re-enabling test that had failed on firefox, which is not failing after the upgrade to MUI v5. See #1278 * style: npm run prettier * fix: unset flex-direction which is newly set to row-reverse for AvatarGroup in mui5. * fix: undo parent commit fix because avatars were backward and no longer overlapping. Instead eat up space to right of avatars. * fix: get body font size back down to 14, establish knobs for modifying input styles * test: apply force:true to clicks failing due to issue #29776 --------- Co-authored-by: AtofStryker <[email protected]>
cypress-io · Aug 27, 2024 · 31b7fa5 · 31b7fa5
1 parent babee8b
commit 31b7fa5
Show file tree

Hide file tree

Showing 61 changed files with 1,340 additions and 1,010 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/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<