diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx index 914d33ee18fbffa938b26bf2a1b3cd3da38c94a4..eda1a8051441511947f25545be3abc9ab68b8e35 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx +++ b/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 () => { diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap index 30edbfde50751331bf73c72a628ebfb58416f9c2..138190f2a7e16a26ae2ce864b8d6b66b323a7751 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap +++ b/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