Upgrade compound-web (#12234)

* Upgrade compound-web I forgot to include this in #12209, which has caused avatar and username colors to be out of sync and sometimes revert to plain black/white. * Update tests * Update tests
matrix-org · Feb 7, 2024 · b422641 · b422641
1 parent a498706
commit b422641
Show file tree

Hide file tree

Showing 33 changed files with 173 additions and 183 deletions.
diff --git a/jest.config.ts b/jest.config.ts
@@ -44,6 +44,7 @@ const config: Config = {
     ],
     coverageReporters: ["text-summary", "lcov"],
     testResultsProcessor: "@casualbot/jest-sonar-reporter",
+    prettierPath: null,
 };
 
 // if we're running under GHA, enable the GHA reporter

diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.0.0",
-        "@vector-im/compound-web": "3.0.1",
+        "@vector-im/compound-web": "^3.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -151,7 +151,6 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/register": "^7.12.10",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "fake-indexeddb": "^5.0.2",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.40.1",
         "@testing-library/dom": "^9.0.0",
@@ -202,6 +201,7 @@
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^50.0.0",
         "express": "^4.18.2",
+        "fake-indexeddb": "^5.0.2",
         "fetch-mock-jest": "^1.5.1",
         "fs-extra": "^11.0.0",
         "jest": "^29.6.2",

diff --git a/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -94,8 +94,8 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-                  data-color="7"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+                  data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
                   role="presentation"

diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -100,7 +100,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -179,7 +179,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -267,7 +267,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -346,7 +346,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -511,7 +511,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             class="mx_DecoratedRoomAvatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -593,7 +593,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+                  class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"

diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -71,8 +71,8 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-              data-color="7"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+              data-color="5"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
@@ -141,8 +141,8 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-              data-color="8"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+              data-color="6"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
@@ -212,8 +212,8 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-              data-color="8"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+              data-color="2"
               data-testid="avatar-img"
               data-type="round"
               role="presentation"
@@ -289,7 +289,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"

diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<UserMenu> <UserMenu> when video broadcast when rendered should render
         class="mx_UserMenu_userAvatar"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_k41ul_60"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"

diff --git a/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
@@ -6,8 +6,8 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
     class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
   >
     <span
-      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-      data-color="3"
+      class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+      data-color="1"
       data-testid="avatar-img"
       data-type="round"
       role="presentation"

diff --git a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
   <span
-    class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+    class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -18,8 +18,8 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
   <span
-    class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-    data-color="7"
+    class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+    data-color="3"
     data-testid="avatar-img"
     data-type="round"
     role="presentation"
@@ -33,8 +33,8 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-    data-color="2"
+    class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+    data-color="6"
     data-testid="avatar-img"
     data-type="round"
     role="presentation"

diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -4,15 +4,15 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
 <DocumentFragment>
   <span>
     <div
-      class="mx_Marker mx_Username_color8"
+      class="mx_Marker mx_Username_color6"
       id="!room:server_@alice:server"
     >
       <div
         class="mx_Marker_border"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-          data-color="8"
+          class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+          data-color="6"
           data-testid="avatar-img"
           data-type="round"
           role="presentation"

diff --git a/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
@@ -32,8 +32,8 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
   class="mx_DialogOwnBeaconStatus"
 >
   <span
-    class="_avatar_1o69u_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_1o69u_60"
-    data-color="8"
+    class="_avatar_k41ul_17 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_k41ul_60"
+    data-color="6"
     data-testid="avatar-img"
     data-type="round"
     role="presentation"

diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
         class="mx_BeaconListItem"
       >
         <span
-          class="_avatar_1o69u_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_1o69u_60"
+          class="_avatar_k41ul_17 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_k41ul_60"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"

diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -41,8 +41,8 @@ exports[`ConfirmUserActionDialog renders 1`] = `
           class="mx_ConfirmUserActionDialog_avatar"
         >
           <span
-            class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-            data-color="7"
+            class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+            data-color="3"
             data-testid="avatar-img"
             data-type="round"
             role="presentation"

diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -71,8 +71,8 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           <div>
             <div>
               <span
-                class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-                data-color="7"
+                class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+                data-color="1"
                 data-testid="avatar-img"
                 data-type="round"
                 role="presentation"

diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -108,15 +108,15 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_1o69u_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_k41ul_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
             style="--cpd-avatar-size: 20px;"
           >
             <img
               alt=""
-              class="_image_1o69u_49"
+              class="_image_k41ul_49"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -195,15 +195,15 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_1o69u_17 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_k41ul_17 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
             style="--cpd-avatar-size: 20px;"
           >
             <img
               alt=""
-              class="_image_1o69u_49"
+              class="_image_k41ul_49"
               crossorigin="anonymous"
               data-type="round"
               height="20px"
@@ -273,7 +273,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+              class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -349,15 +349,15 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_1o69u_17 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_k41ul_17 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
                   style="--cpd-avatar-size: 20px;"
                 >
                   <img
                     alt=""
-                    class="_image_1o69u_49"
+                    class="_image_k41ul_49"
                     crossorigin="anonymous"
                     data-type="round"
                     height="20px"

diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -9,11 +9,11 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_1o69u_120"
+      class="_stacked-avatars_k41ul_110"
     >
       <span
-        class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
-        data-color="8"
+        class="_avatar_k41ul_17 mx_BaseAvatar _avatar-imageless_k41ul_60"
+        data-color="4"
         data-testid="avatar-img"
         data-type="round"
         role="presentation"