All the test bits and pieces

src/button/ReactionToggleButton.test.tsx

@@ -5,47 +5,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+import { act, render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
 import { ReactNode } from "react";
 
-import {
-  MockRoom,
-  MockRTCSession,
-  TestReactionsWrapper,
-} from "../utils/testReactions";
+import { MockRoom } from "../utils/testReactions";
 import { ReactionToggleButton } from "./ReactionToggleButton";
 import { ElementCallReactionEventType } from "../reactions";
+import { CallViewModel } from "../state/CallViewModel";
+import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
+import { alice, local, localRtcMember } from "../utils/test-fixtures";
+import { MockRTCSession } from "../utils/test";
+import { ReactionsProvider } from "../useReactions";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
-const memberUserIdAlice = "@alice:example.org";
-const memberEventAlice = "$membership-alice:example.org";
-
-const membership: Record<string, string> = {
-  [memberEventAlice]: memberUserIdAlice,
-};
+const localIdent = `${localRtcMember.sender}:${localRtcMember.deviceId}`;
 
 function TestComponent({
   rtcSession,
+  vm,
 }: {
   rtcSession: MockRTCSession;
+  vm: CallViewModel;
 }): ReactNode {
   return (
     <TooltipProvider>
-      <TestReactionsWrapper rtcSession={rtcSession}>
-        <ReactionToggleButton userId={memberUserIdAlice} />
-      </TestReactionsWrapper>
+      <ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
+        <ReactionToggleButton vm={vm} identifier={localIdent} />
+      </ReactionsProvider>
     </TooltipProvider>
   );
 }
 
 test("Can open menu", async () => {
   const user = userEvent.setup();
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
+  const { vm, rtcSession } = getBasicCallViewModelEnvironment([alice]);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   expect(container).toMatchSnapshot();
@@ -53,40 +51,68 @@ test("Can open menu", async () => {
 
 test("Can raise hand", async () => {
   const user = userEvent.setup();
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
+  const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.raise_hand"));
-  expect(room.testSentEvents).toEqual([
-    [
-      undefined,
-      "m.reaction",
-      {
-        "m.relates_to": {
-          event_id: memberEventAlice,
-          key: "🖐️",
-          rel_type: "m.annotation",
-        },
+  expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
+    undefined,
+    "m.reaction",
+    {
+      "m.relates_to": {
+        event_id: localRtcMember.eventId,
+        key: "🖐️",
+        rel_type: "m.annotation",
       },
-    ],
-  ]);
+    },
+  );
+  await act(() => {
+    vm.updateReactions({
+      raisedHands: {
+        [localIdent]: new Date(),
+      },
+      reactions: {},
+    });
+  });
   expect(container).toMatchSnapshot();
 });
 
-test("Can lower hand", async () => {
+test.only("Can lower hand", async () => {
   const user = userEvent.setup();
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
+  const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
   const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} />,
+    <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
-  const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
   await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.raise_hand"));
+  await act(() => {
+    vm.updateReactions({
+      raisedHands: {
+        [localIdent]: new Date(),
+      },
+      reactions: {},
+    });
+  });
   await user.click(getByLabelText("action.lower_hand"));
-  expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
+  expect(rtcSession.room.client.redactEvent).toHaveBeenCalledWith(
+    undefined,
+    "m.reaction",
+    {
+      "m.relates_to": {
+        event_id: localRtcMember.eventId,
+        key: "🖐️",
+        rel_type: "m.annotation",
+      },
+    },
+  );
+  await act(() => {
+    vm.updateReactions({
+      raisedHands: {},
+      reactions: {},
+    });
+  });
   expect(container).toMatchSnapshot();
 });