Show voice room participants when not connected (#8136)
* Add utility for getting connected voice participants * Allow voice room members to send connected device state * Update connected devices when connecting/disconnecting voice * Show voice room participants in room tile when not connected * Update voice room tests * Add null types and guards
This commit is contained in:
Robin
GitHub
parent
0a16989d26
commit
8baf06c3ff
10 changed files with 378 additions and 143 deletions
|
|
@ -17,79 +17,78 @@ limitations under the License.
|
|||
import React from "react";
|
||||
import { mount } from "enzyme";
|
||||
import { act } from "react-dom/test-utils";
|
||||
import { ClientWidgetApi, MatrixWidgetType } from "matrix-widget-api";
|
||||
import { mocked } from "jest-mock";
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
|
||||
import "../../../skinned-sdk";
|
||||
import { stubClient, mkStubRoom } from "../../../test-utils";
|
||||
import {
|
||||
stubClient,
|
||||
mockStateEventImplementation,
|
||||
mkRoom,
|
||||
mkEvent,
|
||||
} from "../../../test-utils";
|
||||
import { stubVoiceChannelStore } from "../../../test-utils/voice";
|
||||
import RoomTile from "../../../../src/components/views/rooms/RoomTile";
|
||||
import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
|
||||
import SettingsStore from "../../../../src/settings/SettingsStore";
|
||||
import WidgetStore from "../../../../src/stores/WidgetStore";
|
||||
import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
|
||||
import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidgetActions";
|
||||
import VoiceChannelStore, { VoiceChannelEvent } from "../../../../src/stores/VoiceChannelStore";
|
||||
import { DefaultTagID } from "../../../../src/stores/room-list/models";
|
||||
import DMRoomMap from "../../../../src/utils/DMRoomMap";
|
||||
import { VOICE_CHANNEL_ID } from "../../../../src/utils/VoiceChannelUtils";
|
||||
import { VOICE_CHANNEL_MEMBER } from "../../../../src/utils/VoiceChannelUtils";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
import PlatformPeg from "../../../../src/PlatformPeg";
|
||||
import BasePlatform from "../../../../src/BasePlatform";
|
||||
|
||||
const mkVoiceChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
|
||||
event: true,
|
||||
type: VOICE_CHANNEL_MEMBER,
|
||||
room: "!1:example.org",
|
||||
user: userId,
|
||||
skey: userId,
|
||||
content: { devices },
|
||||
});
|
||||
|
||||
describe("RoomTile", () => {
|
||||
jest.spyOn(PlatformPeg, 'get')
|
||||
.mockReturnValue({ overrideBrowserShortcuts: () => false } as unknown as BasePlatform);
|
||||
|
||||
const cli = mocked(MatrixClientPeg.get());
|
||||
let cli;
|
||||
let store;
|
||||
|
||||
beforeEach(() => {
|
||||
const realGetValue = SettingsStore.getValue;
|
||||
jest.spyOn(SettingsStore, 'getValue').mockImplementation((name, roomId) => {
|
||||
SettingsStore.getValue = <T, >(name: string, roomId?: string): T => {
|
||||
if (name === "feature_voice_rooms") {
|
||||
return true;
|
||||
return true as unknown as T;
|
||||
}
|
||||
return realGetValue(name, roomId);
|
||||
});
|
||||
};
|
||||
|
||||
stubClient();
|
||||
stubVoiceChannelStore();
|
||||
DMRoomMap.makeShared();
|
||||
|
||||
cli = mocked(MatrixClientPeg.get());
|
||||
store = VoiceChannelStore.instance;
|
||||
});
|
||||
|
||||
afterEach(() => jest.clearAllMocks());
|
||||
|
||||
describe("voice rooms", () => {
|
||||
const room = mkStubRoom("!1:example.org", "voice room", cli);
|
||||
room.isCallRoom = () => true;
|
||||
|
||||
// Set up mocks to simulate the remote end of the widget API
|
||||
let messageSent;
|
||||
let messageSendMock;
|
||||
let onceMock;
|
||||
beforeEach(() => {
|
||||
let resolveMessageSent;
|
||||
messageSent = new Promise(resolve => resolveMessageSent = resolve);
|
||||
messageSendMock = jest.fn().mockImplementation(() => resolveMessageSent());
|
||||
onceMock = jest.fn();
|
||||
|
||||
jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
|
||||
id: VOICE_CHANNEL_ID,
|
||||
eventId: "$1:example.org",
|
||||
roomId: "!1:example.org",
|
||||
type: MatrixWidgetType.JitsiMeet,
|
||||
url: "",
|
||||
name: "Voice channel",
|
||||
creatorUserId: "@alice:example.org",
|
||||
avatar_url: null,
|
||||
}]);
|
||||
jest.spyOn(WidgetMessagingStore.instance, "getMessagingForUid").mockReturnValue({
|
||||
on: () => {},
|
||||
off: () => {},
|
||||
once: onceMock,
|
||||
transport: {
|
||||
send: messageSendMock,
|
||||
reply: () => {},
|
||||
},
|
||||
} as unknown as ClientWidgetApi);
|
||||
});
|
||||
const room = mkRoom(cli, "!1:example.org");
|
||||
room.isCallRoom.mockReturnValue(true);
|
||||
|
||||
it("tracks connection state", async () => {
|
||||
// Insert a breakpoint in the connect method, so we can see the intermediate connecting state
|
||||
let continueJoin;
|
||||
const breakpoint = new Promise(resolve => continueJoin = resolve);
|
||||
const realConnect = store.connect;
|
||||
store.connect = async () => {
|
||||
await breakpoint;
|
||||
await realConnect();
|
||||
};
|
||||
|
||||
const tile = mount(
|
||||
<RoomTile
|
||||
room={room}
|
||||
|
|
@ -104,41 +103,58 @@ describe("RoomTile", () => {
|
|||
tile.update();
|
||||
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Connecting...");
|
||||
|
||||
// Wait for the VoiceChannelStore to connect to the widget API
|
||||
await messageSent;
|
||||
// Then, locate the callback that will confirm the join
|
||||
const [, join] = onceMock.mock.calls.find(([action]) =>
|
||||
action === `action:${ElementWidgetActions.JoinCall}`,
|
||||
);
|
||||
|
||||
// Now we confirm the join and wait for the VoiceChannelStore to update
|
||||
// Now we confirm the join and wait for the store to update
|
||||
const waitForConnect = new Promise<void>(resolve =>
|
||||
VoiceChannelStore.instance.once(VoiceChannelEvent.Connect, resolve),
|
||||
store.once(VoiceChannelEvent.Connect, resolve),
|
||||
);
|
||||
join({ detail: {} });
|
||||
continueJoin();
|
||||
await waitForConnect;
|
||||
// Wait yet another tick for the room tile to update
|
||||
// Wait exactly 2 ticks for the room tile to update
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
|
||||
tile.update();
|
||||
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Connected");
|
||||
|
||||
// Locate the callback that will perform the hangup
|
||||
const [, hangup] = onceMock.mock.calls.find(([action]) =>
|
||||
action === `action:${ElementWidgetActions.HangupCall}`,
|
||||
);
|
||||
|
||||
// Hangup and wait for the VoiceChannelStore, once again
|
||||
const waitForHangup = new Promise<void>(resolve =>
|
||||
VoiceChannelStore.instance.once(VoiceChannelEvent.Disconnect, resolve),
|
||||
);
|
||||
hangup({ detail: {} });
|
||||
await waitForHangup;
|
||||
// Wait yet another tick for the room tile to update
|
||||
await Promise.resolve();
|
||||
await store.disconnect();
|
||||
|
||||
tile.update();
|
||||
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Voice room");
|
||||
});
|
||||
|
||||
it("displays connected members", async () => {
|
||||
mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
|
||||
// A user connected from 2 devices
|
||||
mkVoiceChannelMember("@alice:example.org", ["device 1", "device 2"]),
|
||||
// A disconnected user
|
||||
mkVoiceChannelMember("@bob:example.org", []),
|
||||
// A user that claims to have a connected device, but has left the room
|
||||
mkVoiceChannelMember("@chris:example.org", ["device 1"]),
|
||||
]));
|
||||
|
||||
mocked(room.currentState).getMember.mockImplementation(userId => ({
|
||||
userId,
|
||||
membership: userId === "@chris:example.org" ? "leave" : "join",
|
||||
name: userId,
|
||||
rawDisplayName: userId,
|
||||
roomId: "!1:example.org",
|
||||
getAvatarUrl: () => {},
|
||||
getMxcAvatarUrl: () => {},
|
||||
}) as unknown as RoomMember);
|
||||
|
||||
const tile = mount(
|
||||
<RoomTile
|
||||
room={room}
|
||||
showMessagePreview={false}
|
||||
isMinimized={false}
|
||||
tag={DefaultTagID.Untagged}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Only Alice should display as connected
|
||||
const avatar = tile.find(MemberAvatar);
|
||||
expect(avatar.length).toEqual(1);
|
||||
expect(avatar.props().member.userId).toEqual("@alice:example.org");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { EventEmitter } from "events";
|
||||
import React from "react";
|
||||
import { mount } from "enzyme";
|
||||
import { act } from "react-dom/test-utils";
|
||||
|
|
@ -22,49 +21,14 @@ import { mocked } from "jest-mock";
|
|||
|
||||
import "../../../skinned-sdk";
|
||||
import { stubClient, mkStubRoom, wrapInMatrixClientContext } from "../../../test-utils";
|
||||
import { stubVoiceChannelStore } from "../../../test-utils/voice";
|
||||
import _VoiceChannelRadio from "../../../../src/components/views/voip/VoiceChannelRadio";
|
||||
import VoiceChannelStore, { VoiceChannelEvent } from "../../../../src/stores/VoiceChannelStore";
|
||||
import VoiceChannelStore from "../../../../src/stores/VoiceChannelStore";
|
||||
import DMRoomMap from "../../../../src/utils/DMRoomMap";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
|
||||
const VoiceChannelRadio = wrapInMatrixClientContext(_VoiceChannelRadio);
|
||||
|
||||
class StubVoiceChannelStore extends EventEmitter {
|
||||
private _roomId: string;
|
||||
public get roomId(): string { return this._roomId; }
|
||||
private _audioMuted: boolean;
|
||||
public get audioMuted(): boolean { return this._audioMuted; }
|
||||
private _videoMuted: boolean;
|
||||
public get videoMuted(): boolean { return this._videoMuted; }
|
||||
|
||||
public connect = jest.fn().mockImplementation(async (roomId: string) => {
|
||||
this._roomId = roomId;
|
||||
this._audioMuted = true;
|
||||
this._videoMuted = true;
|
||||
this.emit(VoiceChannelEvent.Connect);
|
||||
});
|
||||
public disconnect = jest.fn().mockImplementation(async () => {
|
||||
this._roomId = null;
|
||||
this.emit(VoiceChannelEvent.Disconnect);
|
||||
});
|
||||
public muteAudio = jest.fn().mockImplementation(async () => {
|
||||
this._audioMuted = true;
|
||||
this.emit(VoiceChannelEvent.MuteAudio);
|
||||
});
|
||||
public unmuteAudio = jest.fn().mockImplementation(async () => {
|
||||
this._audioMuted = false;
|
||||
this.emit(VoiceChannelEvent.UnmuteAudio);
|
||||
});
|
||||
public muteVideo = jest.fn().mockImplementation(async () => {
|
||||
this._videoMuted = true;
|
||||
this.emit(VoiceChannelEvent.MuteVideo);
|
||||
});
|
||||
public unmuteVideo = jest.fn().mockImplementation(async () => {
|
||||
this._videoMuted = false;
|
||||
this.emit(VoiceChannelEvent.UnmuteVideo);
|
||||
});
|
||||
}
|
||||
|
||||
describe("VoiceChannelRadio", () => {
|
||||
const cli = mocked(MatrixClientPeg.get());
|
||||
const room = mkStubRoom("!1:example.org", "voice channel", cli);
|
||||
|
|
@ -72,10 +36,8 @@ describe("VoiceChannelRadio", () => {
|
|||
|
||||
beforeEach(() => {
|
||||
stubClient();
|
||||
stubVoiceChannelStore();
|
||||
DMRoomMap.makeShared();
|
||||
// Stub out the VoiceChannelStore
|
||||
jest.spyOn(VoiceChannelStore, "instance", "get")
|
||||
.mockReturnValue(new StubVoiceChannelStore() as unknown as VoiceChannelStore);
|
||||
});
|
||||
|
||||
it("shows when connecting voice", async () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue