Add voice broadcast recording body (#9316)
* Add voice broadcast recording body * Change icon element; update css variables * Update Icon-test snapshots
This commit is contained in:
Michael Weimann
GitHub
parent
d077ea1990
commit
8e719d57a2
32 changed files with 1059 additions and 7 deletions
182
test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
Normal file
182
test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
/*
|
||||
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 } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
|
||||
import { Relations } from "matrix-js-sdk/src/models/relations";
|
||||
import { mocked } from "jest-mock";
|
||||
|
||||
import {
|
||||
VoiceBroadcastBody,
|
||||
VoiceBroadcastInfoEventType,
|
||||
VoiceBroadcastInfoState,
|
||||
VoiceBroadcastRecordingBody,
|
||||
} from "../../../src/voice-broadcast";
|
||||
import { mkEvent, stubClient } from "../../test-utils";
|
||||
import { IBodyProps } from "../../../src/components/views/messages/IBodyProps";
|
||||
|
||||
jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody", () => ({
|
||||
VoiceBroadcastRecordingBody: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("VoiceBroadcastBody", () => {
|
||||
const roomId = "!room:example.com";
|
||||
const recordingTestid = "voice-recording";
|
||||
let client: MatrixClient;
|
||||
let getRelationsForEvent: (eventId: string, relationType: string, eventType: string) => Relations;
|
||||
let event: MatrixEvent;
|
||||
let relatedEvent: MatrixEvent;
|
||||
let recordingElement: HTMLElement;
|
||||
|
||||
const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
|
||||
return mkEvent({
|
||||
event: true,
|
||||
type: VoiceBroadcastInfoEventType,
|
||||
user: client.getUserId(),
|
||||
room: roomId,
|
||||
content: {
|
||||
state,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const renderVoiceBroadcast = async () => {
|
||||
const props: IBodyProps = {
|
||||
getRelationsForEvent,
|
||||
mxEvent: event,
|
||||
} as unknown as IBodyProps;
|
||||
const result = render(<VoiceBroadcastBody {...props} />);
|
||||
recordingElement = await result.findByTestId(recordingTestid);
|
||||
};
|
||||
|
||||
const itShouldRenderALiveVoiceBroadcast = () => {
|
||||
it("should render a live voice broadcast", () => {
|
||||
expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
|
||||
{
|
||||
onClick: expect.any(Function),
|
||||
live: true,
|
||||
member: event.sender,
|
||||
userId: client.getUserId(),
|
||||
title: "@userId:matrix.org • My room",
|
||||
},
|
||||
{},
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const itShouldRenderANonLiveVoiceBroadcast = () => {
|
||||
it("should render a non-live voice broadcast", () => {
|
||||
expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
|
||||
{
|
||||
onClick: expect.any(Function),
|
||||
live: false,
|
||||
member: event.sender,
|
||||
userId: client.getUserId(),
|
||||
title: "@userId:matrix.org • My room",
|
||||
},
|
||||
{},
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mocked(VoiceBroadcastRecordingBody).mockImplementation(
|
||||
({
|
||||
live,
|
||||
member: _member,
|
||||
onClick,
|
||||
title,
|
||||
userId: _userId,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
data-testid={recordingTestid}
|
||||
onClick={onClick}
|
||||
>
|
||||
{ title }
|
||||
{ live && "Live" }
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
client = stubClient();
|
||||
event = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
|
||||
});
|
||||
|
||||
describe("when getRelationsForEvent is undefined", () => {
|
||||
beforeEach(async () => {
|
||||
await renderVoiceBroadcast();
|
||||
});
|
||||
|
||||
itShouldRenderALiveVoiceBroadcast();
|
||||
|
||||
describe("and the Voice Broadcast tile has been clicked", () => {
|
||||
beforeEach(async () => {
|
||||
await userEvent.click(recordingElement);
|
||||
});
|
||||
|
||||
it("should emit a Voice Broadcast stop state event", () => {
|
||||
expect(mocked(client.sendStateEvent)).toHaveBeenCalledWith(
|
||||
roomId,
|
||||
VoiceBroadcastInfoEventType,
|
||||
{
|
||||
state: VoiceBroadcastInfoState.Stopped,
|
||||
["m.relates_to"]: {
|
||||
rel_type: RelationType.Reference,
|
||||
event_id: event.getId(),
|
||||
},
|
||||
},
|
||||
client.getUserId(),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when getRelationsForEvent returns null", () => {
|
||||
beforeEach(async () => {
|
||||
getRelationsForEvent = jest.fn().mockReturnValue(null);
|
||||
await renderVoiceBroadcast();
|
||||
});
|
||||
|
||||
itShouldRenderALiveVoiceBroadcast();
|
||||
});
|
||||
|
||||
describe("when getRelationsForEvent returns a stopped Voice Broadcast info", () => {
|
||||
beforeEach(async () => {
|
||||
relatedEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped);
|
||||
getRelationsForEvent = jest.fn().mockReturnValue({
|
||||
getRelations: jest.fn().mockReturnValue([
|
||||
relatedEvent,
|
||||
]),
|
||||
});
|
||||
await renderVoiceBroadcast();
|
||||
});
|
||||
|
||||
itShouldRenderANonLiveVoiceBroadcast();
|
||||
|
||||
describe("and the Voice Broadcast tile has been clicked", () => {
|
||||
beforeEach(async () => {
|
||||
await userEvent.click(recordingElement);
|
||||
});
|
||||
|
||||
it("should not emit a voice broadcast stop state event", () => {
|
||||
expect(mocked(client.sendStateEvent)).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
27
test/voice-broadcast/components/atoms/LiveBadge-test.tsx
Normal file
27
test/voice-broadcast/components/atoms/LiveBadge-test.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
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 } from "@testing-library/react";
|
||||
|
||||
import { LiveBadge } from "../../../../src/voice-broadcast";
|
||||
|
||||
describe("LiveBadge", () => {
|
||||
it("should render the expected HTML", () => {
|
||||
const { container } = render(<LiveBadge />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LiveBadge should render the expected HTML 1`] = `
|
||||
<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>
|
||||
`;
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
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, { 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";
|
||||
|
||||
jest.mock("../../../../src/components/views/avatars/MemberAvatar", () => jest.fn());
|
||||
|
||||
describe("VoiceBroadcastRecordingBody", () => {
|
||||
const title = "Test Title";
|
||||
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", () => {
|
||||
let renderResult: RenderResult;
|
||||
|
||||
beforeEach(() => {
|
||||
renderResult = render(
|
||||
<VoiceBroadcastRecordingBody
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
userId={userId}
|
||||
live={true}
|
||||
member={roomMember}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
it("should render the expected HTML", () => {
|
||||
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));
|
||||
});
|
||||
|
||||
it("should call the onClick prop", () => {
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("when non-live rendered", () => {
|
||||
let renderResult: RenderResult;
|
||||
|
||||
beforeEach(() => {
|
||||
renderResult = render(
|
||||
<VoiceBroadcastRecordingBody
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
userId={userId}
|
||||
live={false}
|
||||
member={roomMember}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
it("should not render the live badge", () => {
|
||||
expect(renderResult.queryByText("Live")).toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VoiceBroadcastRecordingBody when rendered should render the expected HTML 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingBody"
|
||||
>
|
||||
<div
|
||||
data-testid="member-avatar"
|
||||
/>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingBody_content"
|
||||
>
|
||||
<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
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue