Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-03-31 07:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tests

Browse Source
This commit is contained in:
Half-Shot
2024-11-08 13:26:15 +00:00
parent 90fa6d02d7
commit caf2d6bb5e
4 changed files with 89 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/button/ReactionToggleButton.test.tsx
View File

@@ -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" });
});

3
src/button/ReactionToggleButton.tsx
View File

@@ -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 && (

27
src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
View File

@@ -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"

30
src/room/ReactionAudioRenderer.test.tsx
View File

@@ -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> {