Extract useVoiceBroadcastRecording hook (#9406)

* Extract useVoiceBroadcastRecording hook

* Trigger CI

test/voice-broadcast/components/VoiceBroadcastBody-test.tsx

@@ -16,9 +16,8 @@ limitations under the License.
 
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
+import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import {
     VoiceBroadcastBody,
@@ -27,10 +26,8 @@ import {
     VoiceBroadcastRecordingBody,
     VoiceBroadcastRecordingsStore,
     VoiceBroadcastRecording,
-    VoiceBroadcastRecordingEvent,
 } from "../../../src/voice-broadcast";
-import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
-import { IBodyProps } from "../../../src/components/views/messages/IBodyProps";
+import { mkEvent, stubClient } from "../../test-utils";
 
 jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody", () => ({
     VoiceBroadcastRecordingBody: jest.fn(),
@@ -38,12 +35,9 @@ jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecor
 
 describe("VoiceBroadcastBody", () => {
     const roomId = "!room:example.com";
-    const recordingTestid = "voice-recording";
     let client: MatrixClient;
-    let room: Room;
     let infoEvent: MatrixEvent;
-    let recording: VoiceBroadcastRecording;
-    let onRecordingStateChanged: (state: VoiceBroadcastInfoState) => void;
+    let testRecording: VoiceBroadcastRecording;
 
     const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
         return mkEvent({
@@ -58,104 +52,39 @@ describe("VoiceBroadcastBody", () => {
     };
 
     const renderVoiceBroadcast = () => {
-        const props: IBodyProps = {
-            mxEvent: infoEvent,
-        } as unknown as IBodyProps;
-        render(<VoiceBroadcastBody {...props} />);
-        recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(infoEvent, client);
-        recording.on(VoiceBroadcastRecordingEvent.StateChanged, onRecordingStateChanged);
-    };
-
-    const itShouldRenderALiveVoiceBroadcast = () => {
-        it("should render a live voice broadcast", () => {
-            expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
-                {
-                    onClick: expect.any(Function),
-                    live: true,
-                    sender: infoEvent.sender,
-                    roomName: room.name,
-                },
-                {},
-            );
-            screen.getByTestId(recordingTestid);
-            screen.getByText("Live");
-        });
-    };
-
-    const itShouldRenderANonLiveVoiceBroadcast = () => {
-        it("should render a non-live voice broadcast", () => {
-            expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
-                {
-                    onClick: expect.any(Function),
-                    live: false,
-                    sender: infoEvent.sender,
-                    roomName: room.name,
-                },
-                {},
-            );
-            expect(screen.getByTestId(recordingTestid)).not.toBeNull();
-            screen.getByTestId(recordingTestid);
-            expect(screen.queryByText("live")).toBeNull();
-        });
+        render(<VoiceBroadcastBody
+            mxEvent={infoEvent}
+            mediaEventHelper={null}
+            onHeightChanged={() => {}}
+            onMessageAllowed={() => {}}
+            permalinkCreator={null}
+        />);
+        testRecording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(infoEvent, client);
     };
 
     beforeEach(() => {
-        mocked(VoiceBroadcastRecordingBody).mockImplementation(
-            ({
-                live,
-                sender,
-                onClick,
-                roomName,
-            }) => {
-                return (
-                    <div
-                        data-testid={recordingTestid}
-                        onClick={onClick}
-                    >
-                        <div>{ sender.name }</div>
-                        <div>{ roomName }</div>
-                        <div>{ live && "Live" }</div>
-                    </div>
-                );
-            },
-        );
         client = stubClient();
-        room = mkStubRoom(roomId, "test room", client);
-        mocked(client.getRoom).mockImplementation((getRoomId: string) => {
-            if (getRoomId === roomId) {
-                return room;
+        infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
+        testRecording = new VoiceBroadcastRecording(infoEvent, client);
+        mocked(VoiceBroadcastRecordingBody).mockImplementation(({ recording }) => {
+            if (testRecording === recording) {
+                return <div data-testid="voice-broadcast-recording-body" />;
             }
         });
-        infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
-        onRecordingStateChanged = jest.fn();
+
+        jest.spyOn(VoiceBroadcastRecordingsStore.instance(), "getByInfoEvent").mockImplementation(
+            (getEvent: MatrixEvent, getClient: MatrixClient) => {
+                if (getEvent === infoEvent && getClient === client) {
+                    return testRecording;
+                }
+            },
+        );
     });
 
-    afterEach(() => {
-        if (recording && onRecordingStateChanged) {
-            recording.off(VoiceBroadcastRecordingEvent.StateChanged, onRecordingStateChanged);
-        }
-    });
-
-    describe("when there is a Started Voice Broadcast info event", () => {
-        beforeEach(() => {
+    describe("when rendering a voice broadcast", () => {
+        it("should render a voice broadcast recording body", () => {
             renderVoiceBroadcast();
-        });
-
-        itShouldRenderALiveVoiceBroadcast();
-
-        describe("and it is clicked", () => {
-            beforeEach(async () => {
-                mocked(VoiceBroadcastRecordingBody).mockClear();
-                mocked(onRecordingStateChanged).mockClear();
-                await userEvent.click(screen.getByTestId(recordingTestid));
-            });
-
-            itShouldRenderANonLiveVoiceBroadcast();
-
-            it("should call stop on the recording", () => {
-                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Stopped);
-                expect(onRecordingStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Stopped);
-            });
+            screen.getByTestId("voice-broadcast-recording-body");
         });
     });
 });

test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx

@@ -14,45 +14,43 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEventHandler } from "react";
+import React from "react";
 import { render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
-import { VoiceBroadcastHeader, VoiceBroadcastRecordingBody } from "../../../../src/voice-broadcast";
-
-jest.mock("../../../../src/voice-broadcast/components/atoms/VoiceBroadcastHeader", () => ({
-    VoiceBroadcastHeader: ({ live, sender, roomName }: React.ComponentProps<typeof VoiceBroadcastHeader>) => {
-        return <div data-testid="voice-broadcast-header">
-            live: { live },
-            sender: { sender.userId },
-            room name: { roomName }
-        </div>;
-    },
-}));
+import {
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+    VoiceBroadcastRecording,
+    VoiceBroadcastRecordingBody,
+} from "../../../../src/voice-broadcast";
+import { mkEvent, stubClient } from "../../../test-utils";
 
 describe("VoiceBroadcastRecordingBody", () => {
-    const testRoomName = "test room name";
     const userId = "@user:example.com";
-    const roomMember = new RoomMember("!room:example.com", userId);
-    let onClick: MouseEventHandler<HTMLDivElement>;
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let infoEvent: MatrixEvent;
+    let recording: VoiceBroadcastRecording;
 
-    beforeEach(() => {
-        onClick = jest.fn();
+    beforeAll(() => {
+        client = stubClient();
+        infoEvent = mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            content: {},
+            room: roomId,
+            user: userId,
+        });
+        recording = new VoiceBroadcastRecording(infoEvent, client);
     });
 
-    describe("when rendered", () => {
+    describe("when rendering a live broadcast", () => {
         let renderResult: RenderResult;
 
         beforeEach(() => {
-            renderResult = render(
-                <VoiceBroadcastRecordingBody
-                    onClick={onClick}
-                    roomName={testRoomName}
-                    live={true}
-                    sender={roomMember}
-                />,
-            );
+            renderResult = render(<VoiceBroadcastRecordingBody recording={recording} />);
         });
 
         it("should render the expected HTML", () => {
@@ -61,27 +59,21 @@ describe("VoiceBroadcastRecordingBody", () => {
 
         describe("and clicked", () => {
             beforeEach(async () => {
-                await userEvent.click(renderResult.getByTestId("voice-broadcast-header"));
+                await userEvent.click(renderResult.getByText("My room"));
             });
 
-            it("should call the onClick prop", () => {
-                expect(onClick).toHaveBeenCalled();
+            it("should stop the recording", () => {
+                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Stopped);
             });
         });
     });
 
-    describe("when non-live rendered", () => {
+    describe("when rendering a non-live broadcast", () => {
         let renderResult: RenderResult;
 
         beforeEach(() => {
-            renderResult = render(
-                <VoiceBroadcastRecordingBody
-                    onClick={onClick}
-                    roomName={testRoomName}
-                    live={false}
-                    sender={roomMember}
-                />,
-            );
+            recording.stop();
+            renderResult = render(<VoiceBroadcastRecordingBody recording={recording} />);
         });
 
         it("should not render the live badge", () => {

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap

@@ -1,18 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VoiceBroadcastRecordingBody when rendered should render the expected HTML 1`] = `
+exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render the expected HTML 1`] = `
 <div>
   <div
     class="mx_VoiceBroadcastRecordingBody"
   >
     <div
-      data-testid="voice-broadcast-header"
+      class="mx_VoiceBroadcastHeader"
     >
-      live: 
-      , sender: 
-      @user:example.com
-      , room name: 
-      test room name
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 26px; width: 40px; line-height: 40px;"
+        >
+          U
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          src="data:image/png;base64,00"
+          style="width: 40px; height: 40px;"
+          title="@user:example.com"
+        />
+      </span>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_sender"
+        >
+          @user:example.com
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+      </div>
+      <div
+        class="mx_LiveBadge"
+      >
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+        Live
+      </div>
     </div>
   </div>
 </div>