Merge branch 'develop' into feat/add-formating-buttons-to-wysiwyg

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

@@ -13,15 +13,25 @@ limitations under the License.
 
 import React from "react";
 import { Container } from "react-dom";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { render, RenderResult } from "@testing-library/react";
 
 import { VoiceBroadcastHeader } from "../../../../src/voice-broadcast";
+import { mkRoom, 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("VoiceBroadcastHeader", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";
-    const roomName = "test room";
+    let client: MatrixClient;
+    let room: Room;
     const sender = new RoomMember(roomId, userId);
     let container: Container;
 
@@ -29,12 +39,14 @@ describe("VoiceBroadcastHeader", () => {
         return render(<VoiceBroadcastHeader
             live={live}
             sender={sender}
-            roomName={roomName}
+            room={room}
             showBroadcast={showBroadcast}
         />);
     };
 
     beforeAll(() => {
+        client = stubClient();
+        room = mkRoom(client, roomId);
         sender.name = "test user";
     });
 

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

@@ -5,38 +5,30 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
   <div
     class="mx_VoiceBroadcastHeader"
   >
-    <span
-      class="mx_BaseAvatar"
-      role="presentation"
+    <div
+      data-testid="room-avatar"
     >
-      <span
-        aria-hidden="true"
-        class="mx_BaseAvatar_initial"
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        T
-      </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>
+      room avatar: 
+      !room:example.com
+    </div>
     <div
       class="mx_VoiceBroadcastHeader_content"
     >
-      <div
-        class="mx_VoiceBroadcastHeader_sender"
-      >
-        test user
-      </div>
       <div
         class="mx_VoiceBroadcastHeader_room"
       >
-        test room
+        !room:example.com
+      </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\\");"
+        />
+        test user
       </div>
       <div
         class="mx_VoiceBroadcastHeader_line"
@@ -70,38 +62,30 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
   <div
     class="mx_VoiceBroadcastHeader"
   >
-    <span
-      class="mx_BaseAvatar"
-      role="presentation"
+    <div
+      data-testid="room-avatar"
     >
-      <span
-        aria-hidden="true"
-        class="mx_BaseAvatar_initial"
-        style="font-size: 26px; width: 40px; line-height: 40px;"
-      >
-        T
-      </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>
+      room avatar: 
+      !room:example.com
+    </div>
     <div
       class="mx_VoiceBroadcastHeader_content"
     >
-      <div
-        class="mx_VoiceBroadcastHeader_sender"
-      >
-        test user
-      </div>
       <div
         class="mx_VoiceBroadcastHeader_room"
       >
-        test room
+        !room:example.com
+      </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\\");"
+        />
+        test user
       </div>
     </div>
   </div>

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

@@ -27,6 +27,14 @@ import {
 } 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("VoiceBroadcastPlaybackBody", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";

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

@@ -27,6 +27,14 @@ import {
 } 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("VoiceBroadcastRecordingBody", () => {
     const userId = "@user:example.com";
     const roomId = "!room:example.com";

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

@@ -8,39 +8,31 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
     <div
       class="mx_VoiceBroadcastHeader"
     >
-      <span
-        class="mx_BaseAvatar"
-        role="presentation"
+      <div
+        data-testid="room-avatar"
       >
-        <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>
+        room avatar: 
+        My room
+      </div>
       <div
         class="mx_VoiceBroadcastHeader_content"
       >
-        <div
-          class="mx_VoiceBroadcastHeader_sender"
-        >
-          @user:example.com
-        </div>
         <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
           class="mx_VoiceBroadcastHeader_line"
         >

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

@@ -8,39 +8,31 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
     <div
       class="mx_VoiceBroadcastHeader"
     >
-      <span
-        class="mx_BaseAvatar"
-        role="presentation"
+      <div
+        data-testid="room-avatar"
       >
-        <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>
+        room avatar: 
+        My room
+      </div>
       <div
         class="mx_VoiceBroadcastHeader_content"
       >
-        <div
-          class="mx_VoiceBroadcastHeader_sender"
-        >
-          @user:example.com
-        </div>
         <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"