test(room list item): add tests

Author: florianduros

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

@@ -7,11 +7,11 @@
 
 import React from "react";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
-import { render, screen } from "jest-matrix-react";
+import { render, screen, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 
-import { mkRoom, stubClient } from "../../../../../test-utils";
+import { mkRoom, stubClient, withClientContextRenderOptions } from "../../../../../test-utils";
 import { RoomListItemView } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListItemView";
 import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
 import {
@@ -26,6 +26,7 @@ jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListItemView
 describe("<RoomListItemView />", () => {
     const defaultValue: RoomListItemViewState = {
         openRoom: jest.fn(),
+        showHoverMenu: false,
     };
     let matrixClient: MatrixClient;
     let room: Room;
@@ -52,4 +53,16 @@ describe("<RoomListItemView />", () => {
         await user.click(screen.getByRole("button", { name: `Open room ${room.name}` }));
         expect(defaultValue.openRoom).toHaveBeenCalled();
     });
+
+    test("should hover decoration if hovered", async () => {
+        mocked(useRoomListItemViewModel).mockReturnValue({ ...defaultValue, showHoverMenu: true });
+
+        const user = userEvent.setup();
+        render(<RoomListItemView room={room} />, withClientContextRenderOptions(matrixClient));
+        const listItem = screen.getByRole("button", { name: `Open room ${room.name}` });
+        expect(screen.queryByRole("button", { name: "More Options" })).toBeNull();
+
+        await user.hover(listItem);
+        await waitFor(() => expect(screen.getByRole("button", { name: "More Options" })).toBeInTheDocument());
+    });
 });

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

@@ -48,52 +48,3 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
   </button>
 </DocumentFragment>
 `;
-
-exports[`<RoomListItemView /> should render a room item 1`] = `
-<DocumentFragment>
-  <button
-    aria-label="Open room room1"
-    class="mx_RoomListItemView"
-    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);"
-    >
-      <div
-        class="mx_DecoratedRoomAvatar"
-      >
-        <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>
-      <div
-        class="mx_Flex mx_RoomListItemView_content"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
-      >
-        <span
-          title="room1"
-        >
-          room1
-        </span>
-      </div>
-    </div>
-  </button>
-</DocumentFragment>
-`;