Voice Broadcast recording pip (#9385)

test/voice-broadcast/components/atoms/StopButton-test.tsx

@@ -0,0 +1,45 @@
+/*
+Copyright 2022 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 { render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { StopButton } from "../../../../src/voice-broadcast";
+
+describe("StopButton", () => {
+    let result: RenderResult;
+    let onClick: () => {};
+
+    beforeEach(() => {
+        onClick = jest.fn();
+        result = render(<StopButton onClick={onClick} />);
+    });
+
+    it("should render as expected", () => {
+        expect(result.container).toMatchSnapshot();
+    });
+
+    describe("when clicking it", () => {
+        beforeEach(async () => {
+            await userEvent.click(result.getByLabelText("stop voice broadcast"));
+        });
+
+        it("should invoke the callback", () => {
+            expect(onClick).toHaveBeenCalled();
+        });
+    });
+});

test/voice-broadcast/components/atoms/__snapshots__/StopButton-test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StopButton should render as expected 1`] = `
+<div>
+  <div
+    aria-label="stop voice broadcast"
+    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+    role="button"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+      role="presentation"
+      style="mask-image: url(\\"image-file-stub\\");"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,67 @@
+/*
+Copyright 2022 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 { render, RenderResult } from "@testing-library/react";
+import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import {
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastRecording,
+    VoiceBroadcastRecordingPip,
+} from "../../../../src/voice-broadcast";
+import { mkEvent, stubClient } from "../../../test-utils";
+
+// mock RoomAvatar, because it is doing too much fancy stuff
+jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
+    __esModule: true,
+    default: jest.fn().mockImplementation(({ room }) => {
+        return <div data-testid="room-avatar">room avatar: { room.name }</div>;
+    }),
+}));
+
+describe("VoiceBroadcastRecordingPip", () => {
+    const userId = "@user:example.com";
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let infoEvent: MatrixEvent;
+    let recording: VoiceBroadcastRecording;
+
+    beforeAll(() => {
+        client = stubClient();
+        infoEvent = mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            content: {},
+            room: roomId,
+            user: userId,
+        });
+        recording = new VoiceBroadcastRecording(infoEvent, client);
+    });
+
+    describe("when rendering", () => {
+        let renderResult: RenderResult;
+
+        beforeEach(() => {
+            renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
+        });
+
+        it("should create the expected result", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
+});

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VoiceBroadcastRecordingPip when rendering should create the expected result 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastRecordingPip"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        data-testid="room-avatar"
+      >
+        room avatar: 
+        My room
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <i
+            aria-hidden="true"
+            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+            role="presentation"
+            style="mask-image: url(\\"image-file-stub\\");"
+          />
+          @user:example.com
+        </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>
+    <hr
+      class="mx_VoiceBroadcastRecordingPip_divider"
+    />
+    <div
+      class="mx_VoiceBroadcastRecordingPip_controls"
+    >
+      <div
+        aria-label="stop voice broadcast"
+        class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+        role="button"
+        tabindex="0"
+      >
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;