From caf2d6bb5e9e5ab54e36b8097359c8401f6024aa Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 8 Nov 2024 13:26:15 +0000
Subject: [PATCH] Fix tests

---
 src/button/ReactionToggleButton.test.tsx      | 129 ++++++------------
 src/button/ReactionToggleButton.tsx           |   3 +-
 .../ReactionToggleButton.test.tsx.snap        |  27 ++--
 src/room/ReactionAudioRenderer.test.tsx       |  30 +++-
 4 files changed, 89 insertions(+), 100 deletions(-)

diff --git a/src/button/ReactionToggleButton.test.tsx b/src/button/ReactionToggleButton.test.tsx
index 0ab84f7f..4d4a235e 100644
--- a/src/button/ReactionToggleButton.test.tsx
+++ b/src/button/ReactionToggleButton.test.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, getByLabelText, render } from "@testing-library/react";
 import { act } from "react";
 import { expect, test } from "vitest";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
@@ -47,28 +47,26 @@ function TestComponent({
   );
 }
 
-test("Can open menu", () => {
+test("Can open menu", async () => {
+  const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, container } = render(
+  const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  act(() => getByRole("button").click());
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
   expect(container).toMatchSnapshot();
 });
 
-test("Can raise hand", () => {
+test("Can raise hand", async () => {
+  const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, getByLabelText, container } = render(
+  const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  act(() => {
-    getByRole("button").click();
-  });
-  act(() => {
-    getByLabelText("Toggle hand raised").click();
-  });
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.raise_hand"));
   expect(room.testSentEvents).toEqual([
     [
       undefined,
@@ -85,35 +83,29 @@ test("Can raise hand", () => {
   expect(container).toMatchSnapshot();
 });
 
-test("Can lower hand", () => {
+test("Can lower hand", async () => {
+  const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, getByLabelText, container } = render(
+  const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
   const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
-  act(() => {
-    getByRole("button").click();
-  });
-  act(() => {
-    getByLabelText("Toggle hand raised").click();
-  });
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.lower_hand"));
   expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
   expect(container).toMatchSnapshot();
 });
 
-test("Can react with emoji", () => {
+test("Can react with emoji", async () => {
+  const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, getByText } = render(
+  const { getByLabelText, getByText } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  act(() => {
-    getByRole("button").click();
-  });
-  act(() => {
-    getByText("🐶").click();
-  });
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByText("🐶"));
   expect(room.testSentEvents).toEqual([
     [
       undefined,
@@ -134,25 +126,16 @@ test("Can search for and send emoji", async () => {
   const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByText, getByRole, getByPlaceholderText, container } = render(
+  const { getByText, container, getByLabelText } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  act(() => {
-    getByRole("button").click();
-  });
-  act(() => {
-    getByRole("button", {
-      name: "Search",
-    }).click();
-  });
-  await act(async () => {
-    getByPlaceholderText("Search reactions…").focus();
-    await user.keyboard("crickets");
-  });
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  // Search should autofocus.
+  await user.keyboard("crickets");
   expect(container).toMatchSnapshot();
-  act(() => {
-    getByText("🦗").click();
-  });
+  await user.click(getByText("🦗"));
+
   expect(room.testSentEvents).toEqual([
     [
       undefined,
@@ -173,22 +156,14 @@ 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 { getByRole, getByPlaceholderText, container } = render(
+  const { getByLabelText, 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");
-  });
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  const searchField = getByPlaceholderText("reaction_search");
+  // Search should autofocus.
+  await user.keyboard("crickets");
   expect(container).toMatchSnapshot();
   act(() => {
     fireEvent.keyDown(searchField, { key: "Enter" });
@@ -209,43 +184,29 @@ test("Can search for and send emoji with the keyboard", async () => {
   ]);
 });
 
-test("Can close search", () => {
+test("Can close search", async () => {
+  const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, container } = render(
+  const { getByLabelText, container } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  act(() => {
-    getByRole("button").click();
-  });
-  act(() => {
-    getByRole("button", {
-      name: "Search",
-    }).click();
-  });
-  act(() => {
-    getByRole("button", {
-      name: "close search",
-    }).click();
-  });
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  await user.click(getByLabelText("action.close_search"));
   expect(container).toMatchSnapshot();
 });
 
-test("Can close search with the escape key", () => {
+test("Can close search with the escape key", async () => {
+  const user = userEvent.setup();
   const room = new MockRoom(memberUserIdAlice);
   const rtcSession = new MockRTCSession(room, membership);
-  const { getByRole, container, getByPlaceholderText } = render(
+  const { getByLabelText, container, getByPlaceholderText } = render(
     <TestComponent rtcSession={rtcSession} room={room} />,
   );
-  act(() => {
-    getByRole("button").click();
-  });
-  act(() => {
-    getByRole("button", {
-      name: "Search",
-    }).click();
-  });
-  const searchField = getByPlaceholderText("Search reactions…");
+  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("action.open_search"));
+  const searchField = getByPlaceholderText("reaction_search");
   act(() => {
     fireEvent.keyDown(searchField, { key: "Escape" });
   });
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index 85686b0b..2309edab 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -60,6 +60,7 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
       <CpdButton
         className={classNames(raised && styles.raisedButton)}
         aria-expanded={open}
+        aria-label={t("action.raise_hand_or_send_reaction")}
         kind={raised || open ? "primary" : "secondary"}
         iconOnly
         Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
@@ -121,7 +122,7 @@ export function ReactionPopupMenu({
     },
     [sendReaction, filteredReactionSet, canReact, setIsSearching],
   );
-  const label = isHandRaised ? t("common.raise_hand") : t("common.lower_hand");
+  const label = isHandRaised ? t("common.lower_hand") : t("common.raise_hand");
   return (
     <>
       {errorText && (
diff --git a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
index b7cf3faf..b3c4b035 100644
--- a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
+++ b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`Can close search 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":rec:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -39,6 +40,7 @@ exports[`Can close search with the escape key 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="false"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":rhh:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="secondary"
@@ -66,13 +68,11 @@ exports[`Can close search with the escape key 1`] = `
 `;
 
 exports[`Can lower hand 1`] = `
-<div
-  aria-hidden="true"
-  data-aria-hidden="true"
->
+<div>
   <button
-    aria-disabled="true"
-    aria-expanded="true"
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r3i:"
     class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -104,6 +104,7 @@ exports[`Can open menu 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r0:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -131,16 +132,14 @@ exports[`Can open menu 1`] = `
 `;
 
 exports[`Can raise hand 1`] = `
-<div
-  aria-hidden="true"
-  data-aria-hidden="true"
->
+<div>
   <button
-    aria-disabled="true"
-    aria-expanded="true"
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r1p:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-    data-kind="primary"
+    data-kind="secondary"
     data-size="lg"
     role="button"
     tabindex="0"
@@ -172,6 +171,7 @@ exports[`Can search for and send emoji 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":r74:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
@@ -206,6 +206,7 @@ exports[`Can search for and send emoji with the keyboard 1`] = `
   <button
     aria-disabled="false"
     aria-expanded="true"
+    aria-label="action.raise_hand_or_send_reaction"
     aria-labelledby=":ra3:"
     class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     data-kind="primary"
diff --git a/src/room/ReactionAudioRenderer.test.tsx b/src/room/ReactionAudioRenderer.test.tsx
index 4645ba24..371054b4 100644
--- a/src/room/ReactionAudioRenderer.test.tsx
+++ b/src/room/ReactionAudioRenderer.test.tsx
@@ -16,7 +16,7 @@ import {
   TestReactionsWrapper,
 } from "../utils/testReactions";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
-import { ReactionSet } from "../reactions";
+import { GenericReaction, ReactionSet } from "../reactions";
 import { playReactionsSound } from "../settings/settings";
 
 const memberUserIdAlice = "@alice:example.org";
@@ -60,7 +60,8 @@ test("preloads all audio elements", () => {
   );
   const { container } = render(<TestComponent rtcSession={rtcSession} />);
   expect(container.getElementsByTagName("audio")).toHaveLength(
-    ReactionSet.filter((r) => r.sound).length,
+    // All reactions plus the generic sound
+    ReactionSet.filter((r) => r.sound).length + 1,
   );
 });
 
@@ -99,6 +100,31 @@ test("will play an audio sound when there is a reaction", () => {
   expect(audioIsPlaying[0]).toContain(chosenReaction.sound?.ogg);
 });
 
+test("will play the generic audio sound when there is soundless reaction", () => {
+  const audioIsPlaying: string[] = [];
+  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
+    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
+    return Promise.resolve();
+  };
+  playReactionsSound.setValue(true);
+  const room = new MockRoom(memberUserIdAlice);
+  const rtcSession = new MockRTCSession(room, membership);
+  render(<TestComponent rtcSession={rtcSession} />);
+
+  // Find the first reaction with a sound effect
+  const chosenReaction = ReactionSet.find((r) => !r.sound);
+  if (!chosenReaction) {
+    throw Error(
+      "No reactions have sounds configured, this test cannot succeed",
+    );
+  }
+  act(() => {
+    room.testSendReaction(memberEventAlice, chosenReaction, membership);
+  });
+  expect(audioIsPlaying).toHaveLength(1);
+  expect(audioIsPlaying[0]).toContain(GenericReaction.sound?.ogg);
+});
+
 test("will play multiple audio sounds when there are multiple different reactions", () => {
   const audioIsPlaying: string[] = [];
   window.HTMLMediaElement.prototype.play = async function (): Promise<void> {