Fixup reaction toggle button

src/button/ReactionToggleButton.test.tsx

@@ -11,14 +11,13 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
 import { type ReactNode } from "react";
 
-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 "../useReactionsSender";
+import { ReactionsSenderProvider } from "../useReactionsSender";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 const localIdent = `${localRtcMember.sender}:${localRtcMember.deviceId}`;
@@ -32,9 +31,12 @@ function TestComponent({
 }): ReactNode {
   return (
     <TooltipProvider>
-      <ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
+      <ReactionsSenderProvider
+        vm={vm}
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
         <ReactionToggleButton vm={vm} identifier={localIdent} />
-      </ReactionsProvider>
+      </ReactionsSenderProvider>
     </TooltipProvider>
   );
 }
@@ -51,14 +53,15 @@ test("Can open menu", async () => {
 
 test("Can raise hand", async () => {
   const user = userEvent.setup();
-  const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
+  const { vm, rtcSession, handRaisedSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.raise_hand"));
   expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
-    undefined,
+    rtcSession.room.roomId,
     "m.reaction",
     {
       "m.relates_to": {
@@ -69,50 +72,46 @@ test("Can raise hand", async () => {
     },
   );
   await act(() => {
-    vm.updateReactions({
+    // Mock receiving a reaction.
-      raisedHands: {
+    handRaisedSubject.next({
-        [localIdent]: new Date(),
+      [localIdent]: {
+        time: new Date(),
+        reactionEventId: "",
+        membershipEventId: localRtcMember.eventId!,
       },
-      reactions: {},
     });
   });
   expect(container).toMatchSnapshot();
 });
 
 test("Can lower hand", async () => {
+  const reactionEventId = "$my-reaction-event:example.org";
   const user = userEvent.setup();
-  const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
+  const { vm, rtcSession, handRaisedSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.raise_hand"));
   await act(() => {
-    vm.updateReactions({
+    handRaisedSubject.next({
-      raisedHands: {
+      [localIdent]: {
-        [localIdent]: new Date(),
+        time: new Date(),
+        reactionEventId,
+        membershipEventId: localRtcMember.eventId!,
       },
-      reactions: {},
     });
   });
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByLabelText("action.lower_hand"));
   expect(rtcSession.room.client.redactEvent).toHaveBeenCalledWith(
-    undefined,
+    rtcSession.room.roomId,
-    "m.reaction",
+    reactionEventId,
-    {
-      "m.relates_to": {
-        event_id: localRtcMember.eventId,
-        key: "🖐️",
-        rel_type: "m.annotation",
-      },
-    },
   );
   await act(() => {
-    vm.updateReactions({
+    // Mock receiving a redacted reaction.
-      raisedHands: {},
+    handRaisedSubject.next({});
-      reactions: {},
-    });
   });
   expect(container).toMatchSnapshot();
 });
@@ -126,7 +125,7 @@ test("Can react with emoji", async () => {
   await user.click(getByLabelText("common.reactions"));
   await user.click(getByText("🐶"));
   expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
-    undefined,
+    rtcSession.room.roomId,
     ElementCallReactionEventType,
     {
       "m.relates_to": {
@@ -150,7 +149,7 @@ test("Can fully expand emoji picker", async () => {
   expect(container).toMatchSnapshot();
   await user.click(getByText("🦗"));
   expect(rtcSession.room.client.sendEvent).toHaveBeenCalledWith(
-    undefined,
+    rtcSession.room.roomId,
     ElementCallReactionEventType,
     {
       "m.relates_to": {

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -68,6 +68,37 @@ exports[`Can fully expand emoji picker 1`] = `
 </div>
 `;
 
+exports[`Can lower hand 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="true"
+    aria-labelledby=":r36:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    data-kind="secondary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
 exports[`Can open menu 1`] = `
 <div
   aria-hidden="true"

src/utils/test-viewmodel.ts

@@ -32,6 +32,7 @@ export function getBasicCallViewModelEnvironment(
   handRaisedSubject: BehaviorSubject<Record<string, RaisedHandInfo>>;
   reactionsSubject: BehaviorSubject<Record<string, ReactionInfo>>;
 } {
+  const matrixRoomId = "!myRoomId:example.com";
   const matrixRoomMembers = new Map(members.map((p) => [p.userId, p]));
   const remoteParticipants = of([aliceParticipant]);
   const liveKitRoom = mockLivekitRoom(
@@ -51,6 +52,7 @@ export function getBasicCallViewModelEnvironment(
       off: vitest.fn(),
     } as Partial<MatrixClient> as MatrixClient,
     getMember: (userId) => matrixRoomMembers.get(userId) ?? null,
+    roomId: matrixRoomId,
   });
 
   const remoteRtcMemberships = new BehaviorSubject<CallMembership[]>(