Update voice broadcast header to new design (#9415)
This commit is contained in:
Michael Weimann
GitHub
parent
583d1b0318
commit
bbb02c30d9
15 changed files with 120 additions and 126 deletions
|
|
@ -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";
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue