mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-25 18:08:14 +08:00
d551469543
* Fix performance issues with useRoomMembers With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless * Add public room indicator * Format room members count better * Add public room test * Add search to room summary card * Update settings UI * Update snapshot * Remove default title attribute
504 lines
19 KiB
TypeScript
504 lines
19 KiB
TypeScript
/*
|
|
Copyright 2023 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import React from "react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
|
|
import { EventType, JoinRule, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
|
|
import { getAllByTitle, getByLabelText, getByText, getByTitle, render, screen, waitFor } from "@testing-library/react";
|
|
|
|
import { mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils";
|
|
import RoomHeader from "../../../../src/components/views/rooms/RoomHeader";
|
|
import DMRoomMap from "../../../../src/utils/DMRoomMap";
|
|
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
|
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
|
|
import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
|
|
import LegacyCallHandler from "../../../../src/LegacyCallHandler";
|
|
import SettingsStore from "../../../../src/settings/SettingsStore";
|
|
import SdkConfig from "../../../../src/SdkConfig";
|
|
import dispatcher from "../../../../src/dispatcher/dispatcher";
|
|
import { CallStore } from "../../../../src/stores/CallStore";
|
|
import { Call, ElementCall } from "../../../../src/models/Call";
|
|
import * as ShieldUtils from "../../../../src/utils/ShieldUtils";
|
|
|
|
jest.mock("../../../../src/utils/ShieldUtils");
|
|
|
|
describe("RoomHeader", () => {
|
|
let room: Room;
|
|
|
|
const ROOM_ID = "!1:example.org";
|
|
|
|
let setCardSpy: jest.SpyInstance | undefined;
|
|
|
|
beforeEach(async () => {
|
|
stubClient();
|
|
room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org", {
|
|
pendingEventOrdering: PendingEventOrdering.Detached,
|
|
});
|
|
DMRoomMap.setShared({
|
|
getUserIdForRoomId: jest.fn(),
|
|
} as unknown as DMRoomMap);
|
|
|
|
setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
|
|
});
|
|
|
|
afterEach(() => {
|
|
jest.resetAllMocks();
|
|
});
|
|
|
|
it("renders the room header", () => {
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
expect(container).toHaveTextContent(ROOM_ID);
|
|
});
|
|
|
|
it("renders the room topic", async () => {
|
|
const TOPIC = "Hello World!";
|
|
|
|
const roomTopic = new MatrixEvent({
|
|
type: EventType.RoomTopic,
|
|
event_id: "$00002",
|
|
room_id: room.roomId,
|
|
sender: "@alice:example.com",
|
|
origin_server_ts: 1,
|
|
content: { topic: TOPIC },
|
|
state_key: "",
|
|
});
|
|
await room.addLiveEvents([roomTopic]);
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
expect(container).toHaveTextContent(TOPIC);
|
|
});
|
|
|
|
it("opens the room summary", async () => {
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
await userEvent.click(getByText(container, ROOM_ID));
|
|
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomSummary });
|
|
});
|
|
|
|
it("does not show the face pile for DMs", () => {
|
|
const client = MatrixClientPeg.get()!;
|
|
|
|
jest.spyOn(client, "getAccountData").mockReturnValue(
|
|
mkEvent({
|
|
event: true,
|
|
type: EventType.Direct,
|
|
user: client.getSafeUserId(),
|
|
content: {
|
|
"user@example.com": [room.roomId],
|
|
},
|
|
}),
|
|
);
|
|
|
|
room.getJoinedMembers = jest.fn().mockReturnValue([
|
|
{
|
|
userId: "@me:example.org",
|
|
name: "Member",
|
|
rawDisplayName: "Member",
|
|
roomId: room.roomId,
|
|
membership: "join",
|
|
getAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
getMxcAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
},
|
|
]);
|
|
|
|
const { asFragment } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
expect(asFragment()).toMatchSnapshot();
|
|
});
|
|
|
|
it("shows a face pile for rooms", async () => {
|
|
const members = [
|
|
{
|
|
userId: "@me:example.org",
|
|
name: "Member",
|
|
rawDisplayName: "Member",
|
|
roomId: room.roomId,
|
|
membership: "join",
|
|
getAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
getMxcAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
},
|
|
{
|
|
userId: "@you:example.org",
|
|
name: "Member",
|
|
rawDisplayName: "Member",
|
|
roomId: room.roomId,
|
|
membership: "join",
|
|
getAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
getMxcAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
},
|
|
{
|
|
userId: "@them:example.org",
|
|
name: "Member",
|
|
rawDisplayName: "Member",
|
|
roomId: room.roomId,
|
|
membership: "join",
|
|
getAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
getMxcAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
},
|
|
{
|
|
userId: "@bot:example.org",
|
|
name: "Bot user",
|
|
rawDisplayName: "Bot user",
|
|
roomId: room.roomId,
|
|
membership: "join",
|
|
getAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
getMxcAvatarUrl: () => "mxc://avatar.url/image.png",
|
|
},
|
|
];
|
|
room.currentState.setJoinedMemberCount(members.length);
|
|
room.getJoinedMembers = jest.fn().mockReturnValue(members);
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
expect(container).toHaveTextContent("4");
|
|
|
|
const facePile = getByLabelText(container, "4 members");
|
|
expect(facePile).toHaveTextContent("4");
|
|
|
|
await userEvent.click(facePile);
|
|
|
|
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomMemberList });
|
|
});
|
|
|
|
it("opens the thread panel", async () => {
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
await userEvent.click(getByTitle(container, "Threads"));
|
|
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.ThreadPanel });
|
|
});
|
|
|
|
it("opens the notifications panel", async () => {
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
await userEvent.click(getByTitle(container, "Notifications"));
|
|
expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.NotificationPanel });
|
|
});
|
|
|
|
describe("groups call disabled", () => {
|
|
it("you can't call if you're alone", () => {
|
|
mockRoomMembers(room, 1);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
for (const button of getAllByTitle(container, "There's no one here to call")) {
|
|
expect(button).toBeDisabled();
|
|
}
|
|
});
|
|
|
|
it("you can call when you're two in the room", async () => {
|
|
mockRoomMembers(room, 2);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
const voiceButton = getByTitle(container, "Voice call");
|
|
const videoButton = getByTitle(container, "Video call");
|
|
expect(voiceButton).not.toBeDisabled();
|
|
expect(videoButton).not.toBeDisabled();
|
|
|
|
const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
|
|
|
|
await userEvent.click(voiceButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
|
|
|
|
await userEvent.click(videoButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Video);
|
|
});
|
|
|
|
it("you can't call if there's already a call", () => {
|
|
mockRoomMembers(room, 2);
|
|
jest.spyOn(LegacyCallHandler.instance, "getCallForRoom").mockReturnValue(
|
|
// The JS-SDK does not export the class `MatrixCall` only the type
|
|
{} as MatrixCall,
|
|
);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
for (const button of getAllByTitle(container, "Ongoing call")) {
|
|
expect(button).toBeDisabled();
|
|
}
|
|
});
|
|
|
|
it("can calls in large rooms if able to edit widgets", () => {
|
|
mockRoomMembers(room, 10);
|
|
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
expect(getByTitle(container, "Voice call")).not.toBeDisabled();
|
|
expect(getByTitle(container, "Video call")).not.toBeDisabled();
|
|
});
|
|
|
|
it("disable calls in large rooms by default", () => {
|
|
mockRoomMembers(room, 10);
|
|
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
expect(getByTitle(container, "You do not have permission to start voice calls")).toBeDisabled();
|
|
expect(getByTitle(container, "You do not have permission to start video calls")).toBeDisabled();
|
|
});
|
|
});
|
|
|
|
describe("group call enabled", () => {
|
|
beforeEach(() => {
|
|
jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_group_calls");
|
|
});
|
|
|
|
it("renders only the video call element", async () => {
|
|
jest.spyOn(SdkConfig, "get").mockReturnValue({ use_exclusively: true });
|
|
// allow element calls
|
|
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
expect(screen.queryByTitle("Voice call")).toBeNull();
|
|
|
|
const videoCallButton = getByTitle(container, "Video call");
|
|
expect(videoCallButton).not.toBeDisabled();
|
|
|
|
const dispatcherSpy = jest.spyOn(dispatcher, "dispatch");
|
|
|
|
await userEvent.click(getByTitle(container, "Video call"));
|
|
|
|
expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true }));
|
|
});
|
|
|
|
it("can call if there's an ongoing call", () => {
|
|
jest.spyOn(SdkConfig, "get").mockReturnValue({ use_exclusively: true });
|
|
// allow element calls
|
|
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
|
|
|
|
jest.spyOn(CallStore.instance, "getCall").mockReturnValue({} as Call);
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
expect(getByTitle(container, "Ongoing call")).toBeDisabled();
|
|
});
|
|
|
|
it("disables calling if there's a jitsi call", () => {
|
|
mockRoomMembers(room, 2);
|
|
jest.spyOn(LegacyCallHandler.instance, "getCallForRoom").mockReturnValue(
|
|
// The JS-SDK does not export the class `MatrixCall` only the type
|
|
{} as MatrixCall,
|
|
);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
for (const button of getAllByTitle(container, "Ongoing call")) {
|
|
expect(button).toBeDisabled();
|
|
}
|
|
});
|
|
|
|
it("can't call if you have no friends", () => {
|
|
mockRoomMembers(room, 1);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
for (const button of getAllByTitle(container, "There's no one here to call")) {
|
|
expect(button).toBeDisabled();
|
|
}
|
|
});
|
|
|
|
it("calls using legacy or jitsi", async () => {
|
|
mockRoomMembers(room, 2);
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
const voiceButton = getByTitle(container, "Voice call");
|
|
const videoButton = getByTitle(container, "Video call");
|
|
expect(voiceButton).not.toBeDisabled();
|
|
expect(videoButton).not.toBeDisabled();
|
|
|
|
const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
|
|
await userEvent.click(voiceButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
|
|
|
|
await userEvent.click(videoButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Video);
|
|
});
|
|
|
|
it("calls using legacy or jitsi for large rooms", async () => {
|
|
mockRoomMembers(room, 3);
|
|
|
|
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
|
|
if (key === "im.vector.modular.widgets") return true;
|
|
return false;
|
|
});
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
const voiceButton = getByTitle(container, "Voice call");
|
|
const videoButton = getByTitle(container, "Video call");
|
|
expect(voiceButton).not.toBeDisabled();
|
|
expect(videoButton).not.toBeDisabled();
|
|
|
|
const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
|
|
await userEvent.click(voiceButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
|
|
|
|
await userEvent.click(videoButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Video);
|
|
});
|
|
|
|
it("calls using element calls for large rooms", async () => {
|
|
mockRoomMembers(room, 3);
|
|
|
|
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
|
|
if (key === "im.vector.modular.widgets") return true;
|
|
if (key === ElementCall.CALL_EVENT_TYPE.name) return true;
|
|
return false;
|
|
});
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
const voiceButton = getByTitle(container, "Voice call");
|
|
const videoButton = getByTitle(container, "Video call");
|
|
expect(voiceButton).not.toBeDisabled();
|
|
expect(videoButton).not.toBeDisabled();
|
|
|
|
const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
|
|
await userEvent.click(voiceButton);
|
|
expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
|
|
|
|
const dispatcherSpy = jest.spyOn(dispatcher, "dispatch");
|
|
await userEvent.click(videoButton);
|
|
expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true }));
|
|
});
|
|
});
|
|
|
|
describe("public room", () => {
|
|
it("shows a globe", () => {
|
|
const joinRuleEvent = new MatrixEvent({
|
|
type: EventType.RoomJoinRules,
|
|
content: { join_rule: JoinRule.Public },
|
|
sender: MatrixClientPeg.get()!.getSafeUserId(),
|
|
state_key: "",
|
|
room_id: room.roomId,
|
|
});
|
|
room.addLiveEvents([joinRuleEvent]);
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
expect(getByLabelText(container, "Public room")).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe("dm", () => {
|
|
let client: MatrixClient;
|
|
beforeEach(() => {
|
|
client = MatrixClientPeg.get()!;
|
|
|
|
// Make the mocked room a DM
|
|
jest.spyOn(client, "getAccountData").mockImplementation((eventType: string): MatrixEvent | undefined => {
|
|
if (eventType === EventType.Direct) {
|
|
return mkEvent({
|
|
event: true,
|
|
content: {
|
|
[client.getUserId()!]: [room.roomId],
|
|
},
|
|
type: EventType.Direct,
|
|
user: client.getSafeUserId(),
|
|
});
|
|
}
|
|
|
|
return undefined;
|
|
});
|
|
jest.spyOn(client, "isCryptoEnabled").mockReturnValue(true);
|
|
});
|
|
|
|
it.each([
|
|
[ShieldUtils.E2EStatus.Verified, "Verified"],
|
|
[ShieldUtils.E2EStatus.Warning, "Untrusted"],
|
|
])("shows the %s icon", async (value: ShieldUtils.E2EStatus, expectedLabel: string) => {
|
|
jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(value);
|
|
|
|
const { container } = render(
|
|
<RoomHeader room={room} />,
|
|
withClientContextRenderOptions(MatrixClientPeg.get()!),
|
|
);
|
|
|
|
await waitFor(() => expect(getByLabelText(container, expectedLabel)).toBeInTheDocument());
|
|
});
|
|
});
|
|
});
|
|
|
|
/**
|
|
*
|
|
* @param count the number of users to create
|
|
*/
|
|
function mockRoomMembers(room: Room, count: number) {
|
|
const members = Array(count)
|
|
.fill(0)
|
|
.map((_, index) => ({
|
|
userId: `@user-${index}:example.org`,
|
|
name: `Member ${index}`,
|
|
rawDisplayName: `Member ${index}`,
|
|
roomId: room.roomId,
|
|
membership: "join",
|
|
getAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
|
|
getMxcAvatarUrl: () => `mxc://avatar.url/user-${index}.png`,
|
|
}));
|
|
|
|
room.currentState.setJoinedMemberCount(members.length);
|
|
room.getJoinedMembers = jest.fn().mockReturnValue(members);
|
|
}
|