Add tests for ReadReceiptGroup.tsx

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -210,7 +210,8 @@ interface ReadReceiptPersonProps extends IReadReceiptProps {
     onAfterClick?: () => void;
 }
 
-function ReadReceiptPerson({
+// Export for testing
+export function ReadReceiptPerson({
     userId,
     roomMember,
     ts,

test/components/views/rooms/ReadReceiptGroup-test.tsx

@@ -14,8 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { determineAvatarPosition, readReceiptTooltip } from "../../../../src/components/views/rooms/ReadReceiptGroup";
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+import userEvent from "@testing-library/user-event";
+
+import {
+    determineAvatarPosition,
+    ReadReceiptPerson,
+    readReceiptTooltip,
+} from "../../../../src/components/views/rooms/ReadReceiptGroup";
 import * as languageHandler from "../../../../src/languageHandler";
+import { stubClient } from "../../../test-utils";
 
 describe("ReadReceiptGroup", () => {
     describe("TooltipText", () => {
@@ -79,4 +89,35 @@ describe("ReadReceiptGroup", () => {
             expect(determineAvatarPosition(5, 4)).toEqual({ hidden: true, position: 0 });
         });
     });
+
+    describe("<ReadReceiptPerson />", () => {
+        stubClient();
+
+        const ROOM_ID = "roomId";
+        const USER_ID = "@alice:example.org";
+
+        const member = new RoomMember(ROOM_ID, USER_ID);
+        member.rawDisplayName = "Alice";
+        member.getMxcAvatarUrl = () => "http://placekitten.com/400/400";
+
+        const renderReadReceipt = () => {
+            const currentDate = new Date(2024, 4, 15).getTime();
+            return render(<ReadReceiptPerson userId={USER_ID} roomMember={member} ts={currentDate} />);
+        };
+
+        it("should render", () => {
+            const { container } = renderReadReceipt();
+            expect(container).toMatchSnapshot();
+        });
+
+        it("should display a tooltip", async () => {
+            renderReadReceipt();
+
+            await userEvent.hover(screen.getByRole("menuitem"));
+            await waitFor(() => {
+                const tooltip = screen.getByRole("tooltip", { name: member.rawDisplayName });
+                expect(tooltip).toMatchSnapshot();
+            });
+        });
+    });
 });

test/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
+<div
+  aria-describedby="floating-ui-5"
+  aria-labelledby="floating-ui-4"
+  class="_tooltip_svz44_17"
+  id="floating-ui-6"
+  role="tooltip"
+  style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
+  tabindex="-1"
+>
+  <svg
+    aria-hidden="true"
+    class="_arrow_svz44_34"
+    height="10"
+    style="position: absolute; pointer-events: none; top: 100%;"
+    viewBox="0 0 10 10"
+    width="10"
+  >
+    <path
+      d="M0,0 H10 L5,6 Q5,6 5,6 Z"
+      stroke="none"
+    />
+    <clippath
+      id="floating-ui-9"
+    >
+      <rect
+        height="10"
+        width="10"
+        x="0"
+        y="0"
+      />
+    </clippath>
+  </svg>
+  <span
+    id="floating-ui-4"
+  >
+    Alice
+  </span>
+  <span
+    class="_caption_svz44_29 cpd-theme-dark"
+    id="floating-ui-5"
+  >
+    @alice:example.org
+  </span>
+</div>
+`;
+
+exports[`ReadReceiptGroup <ReadReceiptPerson /> should render 1`] = `
+<div>
+  <div>
+    <div
+      class="mx_AccessibleButton mx_ReadReceiptGroup_person"
+      role="menuitem"
+      tabindex="-1"
+    >
+      <span
+        aria-hidden="true"
+        aria-label="Profile picture"
+        aria-live="off"
+        class="_avatar_mcap2_17 mx_BaseAvatar"
+        data-color="3"
+        data-testid="avatar-img"
+        data-type="round"
+        style="--cpd-avatar-size: 24px;"
+      >
+        <img
+          alt=""
+          class="_image_mcap2_50"
+          data-type="round"
+          height="24px"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          src="http://this.is.a.url//placekitten.com/400/400"
+          width="24px"
+        />
+      </span>
+      <div
+        class="mx_ReadReceiptGroup_name"
+      >
+        <p>
+          @alice:example.org
+        </p>
+        <p
+          class="mx_ReadReceiptGroup_secondary"
+        >
+          Wed, 15 May, 0:00
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;