Extract voice broadcast header (#9393)
This commit is contained in:
Michael Weimann
GitHub
parent
19bc3f1d9a
commit
533eda2273
14 changed files with 318 additions and 79 deletions
|
|
@ -72,9 +72,8 @@ describe("VoiceBroadcastBody", () => {
|
|||
{
|
||||
onClick: expect.any(Function),
|
||||
live: true,
|
||||
member: infoEvent.sender,
|
||||
userId: client.getUserId(),
|
||||
title: "@userId:matrix.org • test room",
|
||||
sender: infoEvent.sender,
|
||||
roomName: room.name,
|
||||
},
|
||||
{},
|
||||
);
|
||||
|
|
@ -89,9 +88,8 @@ describe("VoiceBroadcastBody", () => {
|
|||
{
|
||||
onClick: expect.any(Function),
|
||||
live: false,
|
||||
member: infoEvent.sender,
|
||||
userId: client.getUserId(),
|
||||
title: "@userId:matrix.org • test room",
|
||||
sender: infoEvent.sender,
|
||||
roomName: room.name,
|
||||
},
|
||||
{},
|
||||
);
|
||||
|
|
@ -105,17 +103,17 @@ describe("VoiceBroadcastBody", () => {
|
|||
mocked(VoiceBroadcastRecordingBody).mockImplementation(
|
||||
({
|
||||
live,
|
||||
member: _member,
|
||||
sender,
|
||||
onClick,
|
||||
title,
|
||||
userId: _userId,
|
||||
roomName,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
data-testid={recordingTestid}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div>{ title }</div>
|
||||
<div>{ sender.name }</div>
|
||||
<div>{ roomName }</div>
|
||||
<div>{ live && "Live" }</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
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 { Container } from "react-dom";
|
||||
import { RoomMember } from "matrix-js-sdk/src/matrix";
|
||||
import { render, RenderResult } from "@testing-library/react";
|
||||
|
||||
import { VoiceBroadcastHeader } from "../../../../src/voice-broadcast";
|
||||
|
||||
describe("VoiceBroadcastHeader", () => {
|
||||
const userId = "@user:example.com";
|
||||
const roomId = "!room:example.com";
|
||||
const roomName = "test room";
|
||||
const sender = new RoomMember(roomId, userId);
|
||||
let container: Container;
|
||||
|
||||
const renderHeader = (live: boolean, showBroadcast: boolean = undefined): RenderResult => {
|
||||
return render(<VoiceBroadcastHeader
|
||||
live={live}
|
||||
sender={sender}
|
||||
roomName={roomName}
|
||||
showBroadcast={showBroadcast}
|
||||
/>);
|
||||
};
|
||||
|
||||
beforeAll(() => {
|
||||
sender.name = "test user";
|
||||
});
|
||||
|
||||
describe("when rendering a live broadcast header with broadcast info", () => {
|
||||
beforeEach(() => {
|
||||
container = renderHeader(true, true).container;
|
||||
});
|
||||
|
||||
it("should render the header with a live badge", () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe("when rendering a non-live broadcast header", () => {
|
||||
beforeEach(() => {
|
||||
container = renderHeader(false).container;
|
||||
});
|
||||
|
||||
it("should render the header without a live badge", () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadcast info should render the header with a live badge 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
>
|
||||
<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>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_content"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_sender"
|
||||
>
|
||||
test user
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_room"
|
||||
>
|
||||
test 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\\");"
|
||||
/>
|
||||
Voice broadcast
|
||||
</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>
|
||||
`;
|
||||
|
||||
exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should render the header without a live badge 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
>
|
||||
<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>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_content"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_sender"
|
||||
>
|
||||
test user
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader_room"
|
||||
>
|
||||
test room
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -18,23 +18,27 @@ import React, { MouseEventHandler } 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 { mocked } from "jest-mock";
|
||||
|
||||
import { VoiceBroadcastRecordingBody } from "../../../../src/voice-broadcast";
|
||||
import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
|
||||
import { VoiceBroadcastHeader, VoiceBroadcastRecordingBody } from "../../../../src/voice-broadcast";
|
||||
|
||||
jest.mock("../../../../src/components/views/avatars/MemberAvatar", () => jest.fn());
|
||||
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>;
|
||||
},
|
||||
}));
|
||||
|
||||
describe("VoiceBroadcastRecordingBody", () => {
|
||||
const title = "Test Title";
|
||||
const testRoomName = "test room name";
|
||||
const userId = "@user:example.com";
|
||||
const roomMember = new RoomMember("!room:example.com", userId);
|
||||
let onClick: MouseEventHandler<HTMLDivElement>;
|
||||
|
||||
beforeEach(() => {
|
||||
onClick = jest.fn();
|
||||
// @ts-ignore
|
||||
mocked(MemberAvatar).mockReturnValue(<div data-testid="member-avatar" />);
|
||||
});
|
||||
|
||||
describe("when rendered", () => {
|
||||
|
|
@ -44,10 +48,9 @@ describe("VoiceBroadcastRecordingBody", () => {
|
|||
renderResult = render(
|
||||
<VoiceBroadcastRecordingBody
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
userId={userId}
|
||||
roomName={testRoomName}
|
||||
live={true}
|
||||
member={roomMember}
|
||||
sender={roomMember}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
|
@ -56,19 +59,9 @@ describe("VoiceBroadcastRecordingBody", () => {
|
|||
expect(renderResult.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should pass the props to MemberAvatar", () => {
|
||||
expect(mocked(MemberAvatar)).toHaveBeenCalledWith(
|
||||
{
|
||||
member: roomMember,
|
||||
fallbackUserId: userId,
|
||||
},
|
||||
{},
|
||||
);
|
||||
});
|
||||
|
||||
describe("and clicked", () => {
|
||||
beforeEach(async () => {
|
||||
await userEvent.click(renderResult.getByText(title));
|
||||
await userEvent.click(renderResult.getByTestId("voice-broadcast-header"));
|
||||
});
|
||||
|
||||
it("should call the onClick prop", () => {
|
||||
|
|
@ -84,10 +77,9 @@ describe("VoiceBroadcastRecordingBody", () => {
|
|||
renderResult = render(
|
||||
<VoiceBroadcastRecordingBody
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
userId={userId}
|
||||
roomName={testRoomName}
|
||||
live={false}
|
||||
member={roomMember}
|
||||
sender={roomMember}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,27 +6,13 @@ exports[`VoiceBroadcastRecordingBody when rendered should render the expected HT
|
|||
class="mx_VoiceBroadcastRecordingBody"
|
||||
>
|
||||
<div
|
||||
data-testid="member-avatar"
|
||||
/>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingBody_content"
|
||||
data-testid="voice-broadcast-header"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingBody_title"
|
||||
>
|
||||
Test Title
|
||||
</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
|
||||
live:
|
||||
, sender:
|
||||
@user:example.com
|
||||
, room name:
|
||||
test room name
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue