Add snapshot

test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx

@@ -89,6 +89,10 @@ describe("<RoomListItemView />", () => {
 
         await user.hover(listItem);
         await waitFor(() => expect(screen.getByRole("button", { name: "More Options" })).toBeInTheDocument());
+
+        // also make another snapshot in the hover state (mostly to test the aria-describedBy on the buttons
+        // as there's no easy way to get the effective ARIA description in react testing library, surprisingly)
+        expect(listItem).toMatchSnapshot();
     });
 
     test("should hover decoration if focused", async () => {

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap

@@ -124,6 +124,129 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<RoomListItemView /> should hover decoration if hovered 1`] = `
+<button
+  aria-label="Open room room1"
+  aria-selected="false"
+  class="mx_RoomListItemView mx_RoomListItemView_hover mx_RoomListItemView_menu_open"
+  tabindex="-1"
+  type="button"
+>
+  <div
+    class="mx_Flex mx_RoomListItemView_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+  >
+    <span
+      aria-label="Avatar"
+      class="_avatar_1qbcf_8 mx_BaseAvatar"
+      data-color="3"
+      data-testid="avatar-img"
+      data-type="round"
+      style="--cpd-avatar-size: 32px;"
+    >
+      <img
+        alt=""
+        class="_image_1qbcf_41"
+        data-type="round"
+        height="32px"
+        loading="lazy"
+        referrerpolicy="no-referrer"
+        src="http://this.is.a.url/avatar.url/room.png"
+        width="32px"
+      />
+    </span>
+    <div
+      class="mx_Flex mx_RoomListItemView_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="mx_RoomListItemView_text"
+      >
+        <div
+          class="mx_RoomListItemView_roomName"
+          id="«r3»"
+          title="room1"
+        >
+          room1
+        </div>
+        <div
+          class="mx_RoomListItemView_messagePreview"
+        />
+      </div>
+      <div
+        class="mx_Flex mx_RoomListItemMenuView"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          aria-describedby="«r3»"
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="More Options"
+          aria-labelledby="«r6»"
+          class="_icon-button_m2erp_8"
+          data-state="closed"
+          id="radix-«r4»"
+          role="button"
+          style="--cpd-icon-button-size: 24px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_zr2a0_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-describedby="«r3»"
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Notification options"
+          aria-labelledby="«rd»"
+          class="_icon-button_m2erp_8"
+          data-state="closed"
+          id="radix-«rb»"
+          role="button"
+          style="--cpd-icon-button-size: 24px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_zr2a0_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</button>
+`;
+
 exports[`<RoomListItemView /> should render a room item 1`] = `
 <DocumentFragment>
   <button