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

13
test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
View file

@ -22,6 +22,7 @@ import { mocked } from "jest-mock";
import {
VoiceBroadcastInfoState,
VoiceBroadcastLiveness,
VoiceBroadcastPlayback,
VoiceBroadcastPlaybackBody,
VoiceBroadcastPlaybackEvent,
@ -62,6 +63,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
beforeEach(() => {
playback = new VoiceBroadcastPlayback(infoEvent, client);
jest.spyOn(playback, "toggle").mockImplementation(() => Promise.resolve());
jest.spyOn(playback, "getLiveness");
jest.spyOn(playback, "getState");
jest.spyOn(playback, "durationSeconds", "get").mockReturnValue(23 * 60 + 42); // 23:42
});
@ -69,6 +71,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
describe("when rendering a buffering voice broadcast", () => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Buffering);
mocked(playback.getLiveness).mockReturnValue("live");
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
@ -80,6 +83,7 @@ describe("VoiceBroadcastPlaybackBody", () => {
describe(`when rendering a stopped broadcast`, () => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Stopped);
mocked(playback.getLiveness).mockReturnValue("not-live");
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
@ -107,11 +111,12 @@ describe("VoiceBroadcastPlaybackBody", () => {
});
describe.each([
VoiceBroadcastPlaybackState.Paused,
VoiceBroadcastPlaybackState.Playing,
])("when rendering a %s broadcast", (playbackState: VoiceBroadcastPlaybackState) => {
[VoiceBroadcastPlaybackState.Paused, "not-live"],
[VoiceBroadcastPlaybackState.Playing, "live"],
])("when rendering a %s/%s broadcast", (state: VoiceBroadcastPlaybackState, liveness: VoiceBroadcastLiveness) => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(playbackState);
mocked(playback.getState).mockReturnValue(state);
mocked(playback.getLiveness).mockReturnValue(liveness);
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});

12
test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
View file

@ -60,21 +60,21 @@ describe("VoiceBroadcastRecordingBody", () => {
renderResult = render(<VoiceBroadcastRecordingBody recording={recording} />);
});
it("should render the expected HTML", () => {
it("should render with a red live badge", () => {
expect(renderResult.container).toMatchSnapshot();
});
});
describe("when rendering a non-live broadcast", () => {
describe("when rendering a paused broadcast", () => {
let renderResult: RenderResult;
beforeEach(() => {
recording.stop();
beforeEach(async () => {
await recording.pause();
renderResult = render(<VoiceBroadcastRecordingBody recording={recording} />);
});
it("should not render the live badge", () => {
expect(renderResult.queryByText("Live")).toBeFalsy();
it("should render with a grey live badge", () => {
expect(renderResult.container).toMatchSnapshot();
});
});
});

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

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render as expected 1`] = `
exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody"
@ -41,14 +41,6 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
Voice broadcast
</div>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
<div
class="mx_VoiceBroadcastBody_controls"
@ -87,7 +79,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
</div>
`;
exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render as expected 1`] = `
exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody"
@ -303,14 +295,6 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast and the l
Voice broadcast
</div>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
<div
class="mx_VoiceBroadcastBody_controls"

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

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render the expected HTML 1`] = `
exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render with a red live badge 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody"
@ -45,3 +45,49 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
</div>
</div>
`;
exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should render with a grey live badge 1`] = `
<div>
<div
class="mx_VoiceBroadcastBody"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
</div>
<div
class="mx_LiveBadge mx_LiveBadge--grey"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
</div>
`;

2
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
View file

@ -36,7 +36,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
</div>
</div>
<div
class="mx_LiveBadge"
class="mx_LiveBadge mx_LiveBadge--grey"
>
<div
class="mx_Icon mx_Icon_16"