Extract useVoiceBroadcastRecording hook (#9406)

* Extract useVoiceBroadcastRecording hook

* Trigger CI

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>