imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak voice broadcast live icon (#9576)

Browse source
This commit is contained in:
Michael Weimann 2022-11-16 16:13:59 +01:00 • committed by GitHub
parent 973513cc75
commit cf3c899dd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 262 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

7
test/voice-broadcast/components/atoms/LiveBadge-test.tsx
View file

@ -20,8 +20,13 @@ import { render } from "@testing-library/react";
import { LiveBadge } from "../../../../src/voice-broadcast";
describe("LiveBadge", () => {
it("should render the expected HTML", () => {
it("should render as expected with default props", () => {
const { container } = render(<LiveBadge />);
expect(container).toMatchSnapshot();
});
it("should render in grey as expected", () => {
const { container } = render(<LiveBadge grey={true} />);
expect(container).toMatchSnapshot();
});
});

20
test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx
View file

@ -16,7 +16,7 @@ import { Container } from "react-dom";
import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
import { render, RenderResult } from "@testing-library/react";
import { VoiceBroadcastHeader } from "../../../../src/voice-broadcast";
import { VoiceBroadcastHeader, VoiceBroadcastLiveness } from "../../../../src/voice-broadcast";
import { mkRoom, stubClient } from "../../../test-utils";
// mock RoomAvatar, because it is doing too much fancy stuff
@ -35,7 +35,7 @@ describe("VoiceBroadcastHeader", () => {
const sender = new RoomMember(roomId, userId);
let container: Container;
const renderHeader = (live: boolean, showBroadcast: boolean = undefined): RenderResult => {
const renderHeader = (live: VoiceBroadcastLiveness, showBroadcast: boolean = undefined): RenderResult => {
return render(<VoiceBroadcastHeader
live={live}
microphoneLabel={sender.name}
@ -52,17 +52,27 @@ describe("VoiceBroadcastHeader", () => {
describe("when rendering a live broadcast header with broadcast info", () => {
beforeEach(() => {
container = renderHeader(true, true).container;
container = renderHeader("live", true).container;
});
it("should render the header with a live badge", () => {
it("should render the header with a red live badge", () => {
expect(container).toMatchSnapshot();
});
});
describe("when rendering a live (grey) broadcast header with broadcast info", () => {
beforeEach(() => {
container = renderHeader("grey", true).container;
});
it("should render the header with a grey live badge", () => {
expect(container).toMatchSnapshot();
});
});
describe("when rendering a non-live broadcast header", () => {
beforeEach(() => {
container = renderHeader(false).container;
container = renderHeader("not-live").container;
});
it("should render the header without a live badge", () => {

15
test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LiveBadge should render the expected HTML 1`] = `
exports[`LiveBadge should render as expected with default props 1`] = `
<div>
<div
class="mx_LiveBadge"
@ -12,3 +12,16 @@ exports[`LiveBadge should render the expected HTML 1`] = `
</div>
</div>
`;
exports[`LiveBadge should render in grey as expected 1`] = `
<div>
<div
class="mx_LiveBadge mx_LiveBadge--grey"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
`;

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

@ -1,6 +1,56 @@
// 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`] = `
exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with broadcast info should render the header with a grey live badge 1`] = `
<div>
<div
class="mx_VoiceBroadcastHeader"
>
<div
data-testid="room-avatar"
>
room avatar:
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
test user
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
</div>
<div
class="mx_LiveBadge mx_LiveBadge--grey"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
`;
exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadcast info should render the header with a red live badge 1`] = `
<div>
<div
class="mx_VoiceBroadcastHeader"