Add keyboard shortcuts for reaction sending.

src/button/ReactionToggleButton.test.tsx

@@ -1,15 +1,24 @@
-import { act, render } from "@testing-library/react";
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { act, fireEvent, render } from "@testing-library/react";
 import { expect, test } from "vitest";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+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 { ReactionToggleButton } from "./ReactionToggleButton";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
-import { TooltipProvider } from "@vector-im/compound-web";
 import { ElementCallReactionEventType } from "../reactions";
-import { userEvent } from "@testing-library/user-event";
 
 const memberUserIdAlice = "@alice:example.org";
 const memberEventAlice = "$membership-alice:example.org";
@@ -24,20 +33,20 @@ function TestComponent({
 }: {
   rtcSession: MockRTCSession;
   room: MockRoom;
-}) {
+}): ReactNode {
   return (
     <TooltipProvider>
       <TestReactionsWrapper rtcSession={rtcSession}>
         <ReactionToggleButton
           rtcSession={rtcSession as unknown as MatrixRTCSession}
           client={room.client}
-        ></ReactionToggleButton>
+        />
       </TestReactionsWrapper>
     </TooltipProvider>
   );
 }
 
-test("Can open menu", async () => {
+test("Can open menu", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByRole, container } = render(
@@ -47,7 +56,7 @@ test("Can open menu", async () => {
   expect(container).toMatchSnapshot();
 });
 
-test("Can close menu", async () => {
+test("Can close menu", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByRole, container } = render(
@@ -60,7 +69,7 @@ test("Can close menu", async () => {
   expect(container).toMatchSnapshot();
 });
 
-test("Can raise hand", async () => {
+test("Can raise hand", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByRole, getByText, container } = render(
@@ -88,7 +97,7 @@ test("Can raise hand", async () => {
   expect(container).toMatchSnapshot();
 });
 
-test("Can can lower hand", async () => {
+test("Can can lower hand", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByRole, getByText, container } = render(
@@ -105,7 +114,7 @@ test("Can can lower hand", async () => {
   expect(container).toMatchSnapshot();
 });
 
-test("Can react with emoji", async () => {
+test("Can react with emoji", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByRole, getByText } = render(
@@ -172,7 +181,47 @@ test("Can search for and send emoji", async () => {
   ]);
 });
 
-test("Can close search", async () => {
+test("Can search for and send emoji with the keyboard", async () => {
+  const user = userEvent.setup();
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByText, getByRole, getByPlaceholderText, container } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  act(() => {
+    getByRole("button").click();
+  });
+  act(() => {
+    getByRole("button", {
+      name: "Search",
+    }).click();
+  });
+  const searchField = getByPlaceholderText("Search reactions…");
+  await act(async () => {
+    searchField.focus();
+    await user.keyboard("crickets");
+  });
+  expect(container).toMatchSnapshot();
+  act(() => {
+    fireEvent.keyDown(searchField, { key: "Enter" });
+  });
+  expect(room.testSentEvents).toEqual([
+    [
+      undefined,
+      ElementCallReactionEventType,
+      {
+        "m.relates_to": {
+          event_id: memberEventAlice,
+          rel_type: "m.reference",
+        },
+        name: "crickets",
+        emoji: "🦗",
+      },
+    ],
+  ]);
+});
+
+test("Can close search", () => {
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
   const { getByRole, container } = render(
@@ -193,3 +242,24 @@ test("Can close search", async () => {
   });
   expect(container).toMatchSnapshot();
 });
+
+test("Can close search with the escape key", () => {
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  const { getByRole, container, getByPlaceholderText } = render(
+    <TestComponent rtcSession={rtcSession} room={room} />,
+  );
+  act(() => {
+    getByRole("button").click();
+  });
+  act(() => {
+    getByRole("button", {
+      name: "Search",
+    }).click();
+  });
+  const searchField = getByPlaceholderText("Search reactions…");
+  act(() => {
+    fireEvent.keyDown(searchField, { key: "Escape" });
+  });
+  expect(container).toMatchSnapshot();
+});