From 7f4a142158567ac5bb7c753fe49341e3855280d2 Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Thu, 27 Feb 2025 18:09:51 +0100
Subject: [PATCH] test(new room list): add test for room cell

---
 .../rooms/RoomListPanel/RoomListCell-test.tsx | 44 ++++++++++++++++
 .../__snapshots__/RoomListCell-test.tsx.snap  | 50 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 test/unit-tests/components/views/rooms/RoomListPanel/RoomListCell-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListCell-test.tsx.snap

diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListCell-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListCell-test.tsx
new file mode 100644
index 0000000000..3bbde9fb92
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListCell-test.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { render, screen } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+
+import { mkRoom, stubClient } from "../../../../../test-utils";
+import { RoomListCell } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListCell";
+import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
+
+describe("<RoomListCell />", () => {
+    let matrixClient: MatrixClient;
+    let room: Room;
+
+    beforeEach(() => {
+        matrixClient = stubClient();
+        room = mkRoom(matrixClient, "room1");
+
+        DMRoomMap.makeShared(matrixClient);
+        jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(null);
+    });
+
+    test("should render a room cell", () => {
+        const onClick = jest.fn();
+        const { asFragment } = render(<RoomListCell room={room} onClick={onClick} />);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test("should call onClick when clicked", async () => {
+        const user = userEvent.setup();
+
+        const onClick = jest.fn();
+        render(<RoomListCell room={room} onClick={onClick} />);
+
+        await user.click(screen.getByRole("button", { name: `Open room ${room.name}` }));
+        expect(onClick).toHaveBeenCalled();
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListCell-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListCell-test.tsx.snap
new file mode 100644
index 0000000000..cf7c8b854a
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListCell-test.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoomListCell /> should render a room cell 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="Open room room1"
+    class="mx_RoomListCell"
+    type="button"
+  >
+    <div
+      class="mx_Flex mx_RoomListCell_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_RoomListCell_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>
+`;