Voice broadcast indicator in room list (#9709)

test/components/views/rooms/RoomList-test.tsx

@@ -32,7 +32,7 @@ import RoomListStore, { RoomListStoreClass } from "../../../../src/stores/room-l
 import RoomListLayoutStore from "../../../../src/stores/room-list/RoomListLayoutStore";
 import RoomList from "../../../../src/components/views/rooms/RoomList";
 import RoomSublist from "../../../../src/components/views/rooms/RoomSublist";
-import RoomTile from "../../../../src/components/views/rooms/RoomTile";
+import { RoomTile } from "../../../../src/components/views/rooms/RoomTile";
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from '../../../test-utils';
 import ResizeNotifier from '../../../../src/utils/ResizeNotifier';
 

test/components/views/rooms/RoomTile-test.tsx

@@ -15,12 +15,13 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, screen, act } from "@testing-library/react";
+import { render, screen, act, RenderResult } from "@testing-library/react";
 import { mocked, Mocked } from "jest-mock";
 import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
 import { Widget } from "matrix-widget-api";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import type { ClientWidgetApi } from "matrix-widget-api";
@@ -30,6 +31,7 @@ import {
     MockedCall,
     useMockedCalls,
     setupAsyncStoreWithClient,
+    filterConsole,
 } from "../../../test-utils";
 import { CallStore } from "../../../../src/stores/CallStore";
 import RoomTile from "../../../../src/components/views/rooms/RoomTile";
@@ -39,38 +41,79 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import PlatformPeg from "../../../../src/PlatformPeg";
 import BasePlatform from "../../../../src/BasePlatform";
 import { WidgetMessagingStore } from "../../../../src/stores/widgets/WidgetMessagingStore";
+import { VoiceBroadcastInfoState } from "../../../../src/voice-broadcast";
+import { mkVoiceBroadcastInfoStateEvent } from "../../../voice-broadcast/utils/test-utils";
 
 describe("RoomTile", () => {
     jest.spyOn(PlatformPeg, "get")
         .mockReturnValue({ overrideBrowserShortcuts: () => false } as unknown as BasePlatform);
     useMockedCalls();
 
+    const setUpVoiceBroadcast = (state: VoiceBroadcastInfoState): void => {
+        voiceBroadcastInfoEvent = mkVoiceBroadcastInfoStateEvent(
+            room.roomId,
+            state,
+            client.getUserId(),
+            client.getDeviceId(),
+        );
+
+        act(() => {
+            room.currentState.setStateEvents([voiceBroadcastInfoEvent]);
+        });
+    };
+
+    const renderRoomTile = (): void => {
+        renderResult = render(
+            <RoomTile
+                room={room}
+                showMessagePreview={false}
+                isMinimized={false}
+                tag={DefaultTagID.Untagged}
+            />,
+        );
+    };
+
     let client: Mocked<MatrixClient>;
+    let restoreConsole: () => void;
+    let voiceBroadcastInfoEvent: MatrixEvent;
+    let room: Room;
+    let renderResult: RenderResult;
 
     beforeEach(() => {
+        restoreConsole = filterConsole(
+            // irrelevant for this test
+            "Room !1:example.org does not have an m.room.create event",
+        );
+
         stubClient();
         client = mocked(MatrixClientPeg.get());
         DMRoomMap.makeShared();
+
+        room = new Room("!1:example.org", client, "@alice:example.org", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+
+        client.getRoom.mockImplementation(roomId => roomId === room.roomId ? room : null);
+        client.getRooms.mockReturnValue([room]);
+        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
+
+        renderRoomTile();
     });
 
     afterEach(() => {
+        restoreConsole();
         jest.clearAllMocks();
     });
 
-    describe("call subtitle", () => {
-        let room: Room;
+    it("should render the room", () => {
+        expect(renderResult.container).toMatchSnapshot();
+    });
+
+    describe("when a call starts", () => {
         let call: MockedCall;
         let widget: Widget;
 
         beforeEach(() => {
-            room = new Room("!1:example.org", client, "@alice:example.org", {
-                pendingEventOrdering: PendingEventOrdering.Detached,
-            });
-
-            client.getRoom.mockImplementation(roomId => roomId === room.roomId ? room : null);
-            client.getRooms.mockReturnValue([room]);
-            client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
-
             setupAsyncStoreWithClient(CallStore.instance, client);
             setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
 
@@ -83,18 +126,10 @@ describe("RoomTile", () => {
             WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
                 stop: () => {},
             } as unknown as ClientWidgetApi);
-
-            render(
-                <RoomTile
-                    room={room}
-                    showMessagePreview={false}
-                    isMinimized={false}
-                    tag={DefaultTagID.Untagged}
-                />,
-            );
         });
 
         afterEach(() => {
+            renderResult.unmount();
             call.destroy();
             client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
             WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
@@ -147,5 +182,45 @@ describe("RoomTile", () => {
             act(() => { call.participants = new Map(); });
             expect(screen.queryByLabelText(/participant/)).toBe(null);
         });
+
+        describe("and a live broadcast starts", () => {
+            beforeEach(() => {
+                setUpVoiceBroadcast(VoiceBroadcastInfoState.Started);
+            });
+
+            it("should still render the call subtitle", () => {
+                expect(screen.queryByText("Video")).toBeInTheDocument();
+                expect(screen.queryByText("Live")).not.toBeInTheDocument();
+            });
+        });
+    });
+
+    describe("when a live voice broadcast starts", () => {
+        beforeEach(() => {
+            setUpVoiceBroadcast(VoiceBroadcastInfoState.Started);
+        });
+
+        it("should render the »Live« subtitle", () => {
+            expect(screen.queryByText("Live")).toBeInTheDocument();
+        });
+
+        describe("and the broadcast stops", () => {
+            beforeEach(() => {
+                const stopEvent = mkVoiceBroadcastInfoStateEvent(
+                    room.roomId,
+                    VoiceBroadcastInfoState.Stopped,
+                    client.getUserId(),
+                    client.getDeviceId(),
+                    voiceBroadcastInfoEvent,
+                );
+                act(() => {
+                    room.currentState.setStateEvents([stopEvent]);
+                });
+            });
+
+            it("should not render the »Live« subtitle", () => {
+                expect(screen.queryByText("Live")).not.toBeInTheDocument();
+            });
+        });
     });
 });

test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomTile should render the room 1`] = `
+<div>
+  <div
+    aria-label="!1:​example.org Unread messages."
+    aria-selected="false"
+    class="mx_AccessibleButton mx_RoomTile"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="mx_DecoratedRoomAvatar"
+    >
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 20.8px; width: 32px; line-height: 32px;"
+        >
+          !
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          data-testid="avatar-img"
+          src="data:image/png;base64,00"
+          style="width: 32px; height: 32px;"
+        />
+      </span>
+    </div>
+    <div
+      class="mx_RoomTile_titleContainer"
+    >
+      <div
+        class="mx_RoomTile_title mx_RoomTile_titleHasUnreadEvents"
+        tabindex="-1"
+        title="!1:​example.org"
+      >
+        <span
+          dir="auto"
+        >
+          !1:​example.org
+        </span>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="mx_RoomTile_badgeContainer"
+    >
+      <div
+        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_dot"
+      >
+        <span
+          class="mx_NotificationBadge_count"
+        />
+      </div>
+    </div>
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Room options"
+      class="mx_AccessibleButton mx_RoomTile_menuButton"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Notification options"
+      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
+      role="button"
+      tabindex="-1"
+    />
+  </div>
+</div>
+`;