Merge branch 'develop' into feat/add-formating-buttons-to-wysiwyg

This commit is contained in:
Florian Duros 2022-10-14 09:44:32 +02:00 committed by GitHub
commit 3ecd67aa80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 1156 additions and 95 deletions

View file

@ -26,6 +26,10 @@ import {
VoiceBroadcastRecordingBody,
VoiceBroadcastRecordingsStore,
VoiceBroadcastRecording,
shouldDisplayAsVoiceBroadcastRecordingTile,
VoiceBroadcastPlaybackBody,
VoiceBroadcastPlayback,
VoiceBroadcastPlaybacksStore,
} from "../../../src/voice-broadcast";
import { mkEvent, stubClient } from "../../test-utils";
@ -33,11 +37,20 @@ jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecor
VoiceBroadcastRecordingBody: jest.fn(),
}));
jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody", () => ({
VoiceBroadcastPlaybackBody: jest.fn(),
}));
jest.mock("../../../src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile", () => ({
shouldDisplayAsVoiceBroadcastRecordingTile: jest.fn(),
}));
describe("VoiceBroadcastBody", () => {
const roomId = "!room:example.com";
let client: MatrixClient;
let infoEvent: MatrixEvent;
let testRecording: VoiceBroadcastRecording;
let testPlayback: VoiceBroadcastPlayback;
const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
return mkEvent({
@ -66,12 +79,19 @@ describe("VoiceBroadcastBody", () => {
client = stubClient();
infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
testRecording = new VoiceBroadcastRecording(infoEvent, client);
testPlayback = new VoiceBroadcastPlayback(infoEvent);
mocked(VoiceBroadcastRecordingBody).mockImplementation(({ recording }) => {
if (testRecording === recording) {
return <div data-testid="voice-broadcast-recording-body" />;
}
});
mocked(VoiceBroadcastPlaybackBody).mockImplementation(({ playback }) => {
if (testPlayback === playback) {
return <div data-testid="voice-broadcast-playback-body" />;
}
});
jest.spyOn(VoiceBroadcastRecordingsStore.instance(), "getByInfoEvent").mockImplementation(
(getEvent: MatrixEvent, getClient: MatrixClient) => {
if (getEvent === infoEvent && getClient === client) {
@ -79,12 +99,35 @@ describe("VoiceBroadcastBody", () => {
}
},
);
jest.spyOn(VoiceBroadcastPlaybacksStore.instance(), "getByInfoEvent").mockImplementation(
(getEvent: MatrixEvent) => {
if (getEvent === infoEvent) {
return testPlayback;
}
},
);
});
describe("when rendering a voice broadcast", () => {
describe("when displaying a voice broadcast recording", () => {
beforeEach(() => {
mocked(shouldDisplayAsVoiceBroadcastRecordingTile).mockReturnValue(true);
});
it("should render a voice broadcast recording body", () => {
renderVoiceBroadcast();
screen.getByTestId("voice-broadcast-recording-body");
});
});
describe("when displaying a voice broadcast playback", () => {
beforeEach(() => {
mocked(shouldDisplayAsVoiceBroadcastRecordingTile).mockReturnValue(false);
});
it("should render a voice broadcast playback body", () => {
renderVoiceBroadcast();
screen.getByTestId("voice-broadcast-playback-body");
});
});
});

View file

@ -0,0 +1,45 @@
/*
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, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { PlaybackControlButton, VoiceBroadcastPlaybackState } from "../../../../src/voice-broadcast";
describe("PlaybackControlButton", () => {
let onClick: () => void;
beforeEach(() => {
onClick = jest.fn();
});
it.each([
[VoiceBroadcastPlaybackState.Playing],
[VoiceBroadcastPlaybackState.Paused],
[VoiceBroadcastPlaybackState.Stopped],
])("should render state »%s« as expected", (state: VoiceBroadcastPlaybackState) => {
const result = render(<PlaybackControlButton state={state} onClick={onClick} />);
expect(result.container).toMatchSnapshot();
});
it("should call onClick on click", async () => {
render(<PlaybackControlButton state={VoiceBroadcastPlaybackState.Playing} onClick={onClick} />);
const button = screen.getByLabelText("pause voice broadcast");
await userEvent.click(button);
expect(onClick).toHaveBeenCalled();
});
});

View file

@ -0,0 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PlaybackControlButton should render state »0« as expected 1`] = `
<div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;
exports[`PlaybackControlButton should render state »1« as expected 1`] = `
<div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;
exports[`PlaybackControlButton should render state »2« as expected 1`] = `
<div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;

View file

@ -0,0 +1,69 @@
/*
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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { render, RenderResult } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import {
VoiceBroadcastInfoEventType,
VoiceBroadcastPlayback,
VoiceBroadcastPlaybackBody,
VoiceBroadcastPlaybackState,
} from "../../../../src/voice-broadcast";
import { mkEvent, stubClient } from "../../../test-utils";
describe("VoiceBroadcastPlaybackBody", () => {
const userId = "@user:example.com";
const roomId = "!room:example.com";
let infoEvent: MatrixEvent;
let playback: VoiceBroadcastPlayback;
beforeAll(() => {
stubClient();
infoEvent = mkEvent({
event: true,
type: VoiceBroadcastInfoEventType,
content: {},
room: roomId,
user: userId,
});
playback = new VoiceBroadcastPlayback(infoEvent);
});
describe("when rendering a broadcast", () => {
let renderResult: RenderResult;
beforeEach(() => {
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
it("should render as expected", () => {
expect(renderResult.container).toMatchSnapshot();
});
describe("and clicking the play button", () => {
beforeEach(async () => {
await userEvent.click(renderResult.getByLabelText("resume voice broadcast"));
});
it("should stop the recording", () => {
expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Playing);
});
});
});
});

View file

@ -0,0 +1,76 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastPlaybackBody"
>
<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;"
>
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>
<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\\");"
/>
Voice broadcast
</div>
</div>
</div>
<div
class="mx_VoiceBroadcastPlaybackBody_controls"
>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
</div>
</div>
`;

View file

@ -0,0 +1,116 @@
/*
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 { mocked } from "jest-mock";
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import {
VoiceBroadcastInfoEventType,
VoiceBroadcastPlayback,
VoiceBroadcastPlaybackEvent,
VoiceBroadcastPlaybackState,
} from "../../../src/voice-broadcast";
import { mkEvent } from "../../test-utils";
describe("VoiceBroadcastPlayback", () => {
const userId = "@user:example.com";
const roomId = "!room:example.com";
let infoEvent: MatrixEvent;
let playback: VoiceBroadcastPlayback;
let onStateChanged: (state: VoiceBroadcastPlaybackState) => void;
const itShouldSetTheStateTo = (state: VoiceBroadcastPlaybackState) => {
it(`should set the state to ${state}`, () => {
expect(playback.getState()).toBe(state);
});
};
const itShouldEmitAStateChangedEvent = (state: VoiceBroadcastPlaybackState) => {
it(`should emit a ${state} state changed event`, () => {
expect(mocked(onStateChanged)).toHaveBeenCalledWith(state);
});
};
beforeAll(() => {
infoEvent = mkEvent({
event: true,
type: VoiceBroadcastInfoEventType,
user: userId,
room: roomId,
content: {},
});
});
beforeEach(() => {
onStateChanged = jest.fn();
playback = new VoiceBroadcastPlayback(infoEvent);
jest.spyOn(playback, "removeAllListeners");
playback.on(VoiceBroadcastPlaybackEvent.StateChanged, onStateChanged);
});
it("should expose the info event", () => {
expect(playback.infoEvent).toBe(infoEvent);
});
it("should be in state Stopped", () => {
expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Stopped);
});
describe("when calling start", () => {
beforeEach(() => {
playback.start();
});
itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
describe("and calling toggle", () => {
beforeEach(() => {
playback.toggle();
});
itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Stopped);
});
});
describe("when calling stop", () => {
beforeEach(() => {
playback.stop();
});
itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
describe("and calling toggle", () => {
beforeEach(() => {
playback.toggle();
});
itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Stopped);
});
});
describe("when calling destroy", () => {
beforeEach(() => {
playback.destroy();
});
it("should call removeAllListeners", () => {
expect(playback.removeAllListeners).toHaveBeenCalled();
});
});
});

View file

@ -0,0 +1,128 @@
/*
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 { mocked } from "jest-mock";
import {
MatrixClient,
MatrixEvent,
Room,
} from "matrix-js-sdk/src/matrix";
import {
VoiceBroadcastInfoEventType,
VoiceBroadcastPlayback,
VoiceBroadcastPlaybacksStore,
VoiceBroadcastPlaybacksStoreEvent,
} from "../../../src/voice-broadcast";
import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastPlayback", () => ({
...jest.requireActual("../../../src/voice-broadcast/models/VoiceBroadcastPlayback") as object,
VoiceBroadcastPlayback: jest.fn().mockImplementation((infoEvent: MatrixEvent) => ({ infoEvent })),
}));
describe("VoiceBroadcastPlaybacksStore", () => {
const roomId = "!room:example.com";
let client: MatrixClient;
let room: Room;
let infoEvent: MatrixEvent;
let playback: VoiceBroadcastPlayback;
let playbacks: VoiceBroadcastPlaybacksStore;
let onCurrentChanged: (playback: VoiceBroadcastPlayback) => void;
beforeEach(() => {
client = stubClient();
room = mkStubRoom(roomId, "test room", client);
mocked(client.getRoom).mockImplementation((roomId: string) => {
if (roomId === room.roomId) {
return room;
}
});
infoEvent = mkEvent({
event: true,
type: VoiceBroadcastInfoEventType,
user: client.getUserId(),
room: roomId,
content: {},
});
playback = {
infoEvent,
} as unknown as VoiceBroadcastPlayback;
playbacks = new VoiceBroadcastPlaybacksStore();
onCurrentChanged = jest.fn();
playbacks.on(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, onCurrentChanged);
});
afterEach(() => {
playbacks.off(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, onCurrentChanged);
});
describe("when setting a current Voice Broadcast playback", () => {
beforeEach(() => {
playbacks.setCurrent(playback);
});
it("should return it as current", () => {
expect(playbacks.getCurrent()).toBe(playback);
});
it("should return it by id", () => {
expect(playbacks.getByInfoEvent(infoEvent)).toBe(playback);
});
it("should emit a CurrentChanged event", () => {
expect(onCurrentChanged).toHaveBeenCalledWith(playback);
});
describe("and setting the same again", () => {
beforeEach(() => {
mocked(onCurrentChanged).mockClear();
playbacks.setCurrent(playback);
});
it("should not emit a CurrentChanged event", () => {
expect(onCurrentChanged).not.toHaveBeenCalled();
});
});
});
describe("getByInfoEventId", () => {
let returnedPlayback: VoiceBroadcastPlayback;
describe("when retrieving a known playback", () => {
beforeEach(() => {
playbacks.setCurrent(playback);
returnedPlayback = playbacks.getByInfoEvent(infoEvent);
});
it("should return the playback", () => {
expect(returnedPlayback).toBe(playback);
});
});
describe("when retrieving an unknown playback", () => {
beforeEach(() => {
returnedPlayback = playbacks.getByInfoEvent(infoEvent);
});
it("should return the playback", () => {
expect(returnedPlayback).toEqual({
infoEvent,
});
});
});
});
});

View file

@ -0,0 +1,98 @@
/*
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 { mocked } from "jest-mock";
import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
import {
shouldDisplayAsVoiceBroadcastRecordingTile,
VoiceBroadcastInfoEventType,
VoiceBroadcastInfoState,
} from "../../../src/voice-broadcast";
import { createTestClient, mkEvent } from "../../test-utils";
const testCases = [
[
"@user1:example.com", // own MXID
"@user1:example.com", // sender MXID
VoiceBroadcastInfoState.Started,
true, // expected return value
],
[
"@user1:example.com",
"@user1:example.com",
VoiceBroadcastInfoState.Paused,
true,
],
[
"@user1:example.com",
"@user1:example.com",
VoiceBroadcastInfoState.Running,
true,
],
[
"@user1:example.com",
"@user1:example.com",
VoiceBroadcastInfoState.Stopped,
false,
],
[
"@user2:example.com",
"@user1:example.com",
VoiceBroadcastInfoState.Started,
false,
],
[
null,
null,
null,
false,
],
[
undefined,
undefined,
undefined,
false,
],
];
describe("shouldDisplayAsVoiceBroadcastRecordingTile", () => {
let event: MatrixEvent;
let client: MatrixClient;
beforeAll(() => {
client = createTestClient();
});
describe.each(testCases)(
"when called with user »%s«, sender »%s«, state »%s«",
(userId: string, senderId: string, state: VoiceBroadcastInfoState, expected: boolean) => {
beforeEach(() => {
event = mkEvent({
event: true,
type: VoiceBroadcastInfoEventType,
room: "!room:example.com",
user: senderId,
content: {},
});
mocked(client.getUserId).mockReturnValue(userId);
});
it(`should return ${expected}`, () => {
expect(shouldDisplayAsVoiceBroadcastRecordingTile(state, client, event)).toBe(expected);
});
});
});