diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx index aec6583642..c9d00a4e69 100644 --- a/src/components/views/rooms/ReadReceiptGroup.tsx +++ b/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, diff --git a/test/components/views/rooms/ReadReceiptGroup-test.tsx b/test/components/views/rooms/ReadReceiptGroup-test.tsx index 969ab99123..35c0b6a471 100644 --- a/test/components/views/rooms/ReadReceiptGroup-test.tsx +++ b/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("", () => { + 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(); + }; + + 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(); + }); + }); + }); }); diff --git a/test/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap b/test/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap new file mode 100644 index 0000000000..2b5fa463ca --- /dev/null +++ b/test/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap @@ -0,0 +1,94 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ReadReceiptGroup should display a tooltip 1`] = ` + +`; + +exports[`ReadReceiptGroup should render 1`] = ` +
+
+ +
+
+`;