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( , ); - 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( , ); - 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( , ); 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( , ); - 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( , ); - 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( , ); - 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( , ); - 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( , ); - 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 = ({ raised, open, ...props }) => { {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`] = ` + + { ); const { container } = render(); 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 { + 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(); + + // 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 {