mirror of
https://github.com/vector-im/element-call.git
synced 2026-03-31 07:00:26 +00:00
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { render } from "@testing-library/react";
|
|
import { expect, test } from "vitest";
|
|
import { act } from "react";
|
|
import { afterEach } from "node:test";
|
|
|
|
import { showReactions } from "../settings/settings";
|
|
import { ReactionsOverlay } from "./ReactionsOverlay";
|
|
import { ReactionSet } from "../reactions";
|
|
import {
|
|
local,
|
|
alice,
|
|
aliceRtcMember,
|
|
bobRtcMember,
|
|
} from "../utils/test-fixtures";
|
|
import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
|
|
|
|
afterEach(() => {
|
|
showReactions.setValue(showReactions.defaultValue);
|
|
});
|
|
|
|
test("defaults to showing no reactions", () => {
|
|
showReactions.setValue(true);
|
|
const { vm } = getBasicCallViewModelEnvironment([local, alice]);
|
|
const { container } = render(<ReactionsOverlay vm={vm} />);
|
|
expect(container.getElementsByTagName("span")).toHaveLength(0);
|
|
});
|
|
|
|
test("shows a reaction when sent", () => {
|
|
showReactions.setValue(true);
|
|
const { vm } = getBasicCallViewModelEnvironment([local, alice]);
|
|
const { getByRole } = render(<ReactionsOverlay vm={vm} />);
|
|
const reaction = ReactionSet[0];
|
|
act(() => {
|
|
vm.updateReactions({
|
|
reactions: { [aliceRtcMember.deviceId]: reaction },
|
|
raisedHands: {},
|
|
});
|
|
});
|
|
const span = getByRole("presentation");
|
|
expect(getByRole("presentation")).toBeTruthy();
|
|
expect(span.innerHTML).toEqual(reaction.emoji);
|
|
});
|
|
|
|
test("shows two of the same reaction when sent", () => {
|
|
showReactions.setValue(true);
|
|
const reaction = ReactionSet[0];
|
|
const { vm } = getBasicCallViewModelEnvironment([local, alice]);
|
|
const { getAllByRole } = render(<ReactionsOverlay vm={vm} />);
|
|
act(() => {
|
|
vm.updateReactions({
|
|
reactions: {
|
|
[aliceRtcMember.deviceId]: reaction,
|
|
[bobRtcMember.deviceId]: reaction,
|
|
},
|
|
raisedHands: {},
|
|
});
|
|
});
|
|
expect(getAllByRole("presentation")).toHaveLength(2);
|
|
});
|
|
|
|
test("shows two different reactions when sent", () => {
|
|
showReactions.setValue(true);
|
|
const [reactionA, reactionB] = ReactionSet;
|
|
const { vm } = getBasicCallViewModelEnvironment([local, alice]);
|
|
const { getAllByRole } = render(<ReactionsOverlay vm={vm} />);
|
|
act(() => {
|
|
vm.updateReactions({
|
|
reactions: {
|
|
[aliceRtcMember.deviceId]: reactionA,
|
|
[bobRtcMember.deviceId]: reactionB,
|
|
},
|
|
raisedHands: {},
|
|
});
|
|
});
|
|
const [reactionElementA, reactionElementB] = getAllByRole("presentation");
|
|
expect(reactionElementA.innerHTML).toEqual(reactionA.emoji);
|
|
expect(reactionElementB.innerHTML).toEqual(reactionB.emoji);
|
|
});
|
|
|
|
test("hides reactions when reaction animations are disabled", () => {
|
|
showReactions.setValue(false);
|
|
const reaction = ReactionSet[0];
|
|
const { vm } = getBasicCallViewModelEnvironment([local, alice]);
|
|
const { container } = render(<ReactionsOverlay vm={vm} />);
|
|
act(() => {
|
|
vm.updateReactions({
|
|
reactions: { [aliceRtcMember.deviceId]: reaction },
|
|
raisedHands: {},
|
|
});
|
|
});
|
|
expect(container.getElementsByTagName("span")).toHaveLength(0);
|
|
});
|