PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source
This commit is contained in:
Florian Duros 2022-10-13 18:55:03 +02:00 committed by GitHub
commit a557c7f583
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 1300 additions and 485 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
cypress/e2e/integration-manager/kick.spec.ts
View file

@ -84,15 +84,10 @@ function sendActionFromIntegrationManager(integrationManagerUrl: string, targetR
function expectKickedMessage(shouldExist: boolean) {
// Expand any event summaries
cy.get(".mx_RoomView_MessageList").within(roomView => {
if (roomView.find(".mx_GenericEventListSummary_toggle[aria-expanded=false]").length > 0) {
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click({ multiple: true });
}
});
cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click({ multiple: true });
// Check for the event message (or lack thereof)
cy.get(".mx_EventTile_line")
.contains(`${USER_DISPLAY_NAME} removed ${BOT_DISPLAY_NAME}: ${KICK_REASON}`)
cy.contains(".mx_EventTile_line", `${USER_DISPLAY_NAME} removed ${BOT_DISPLAY_NAME}: ${KICK_REASON}`)
.should(shouldExist ? "exist" : "not.exist");
}

3
src/utils/notifications.ts
View file

@ -31,6 +31,9 @@ export function getLocalNotificationAccountDataEventType(deviceId: string): stri
}
export async function createLocalNotificationSettingsIfNeeded(cli: MatrixClient): Promise<void> {
if (cli.isGuest()) {
return;
}
const eventType = getLocalNotificationAccountDataEventType(cli.deviceId);
const event = cli.getAccountData(eventType);
// New sessions will create an account data event to signify they support

26
src/voice-broadcast/components/VoiceBroadcastBody.tsx
View file

@ -14,42 +14,20 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useState } from "react";
import React from "react";
import {
VoiceBroadcastInfoState,
VoiceBroadcastRecordingBody,
VoiceBroadcastRecordingsStore,
VoiceBroadcastRecording,
VoiceBroadcastRecordingEvent,
} from "..";
import { IBodyProps } from "../../components/views/messages/IBodyProps";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
export const VoiceBroadcastBody: React.FC<IBodyProps> = ({ mxEvent }) => {
const client = MatrixClientPeg.get();
const room = client.getRoom(mxEvent.getRoomId());
const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client);
const [recordingState, setRecordingState] = useState(recording.getState());
useTypedEventEmitter(
recording,
VoiceBroadcastRecordingEvent.StateChanged,
(state: VoiceBroadcastInfoState, _recording: VoiceBroadcastRecording) => {
setRecordingState(state);
},
);
const stopVoiceBroadcast = () => {
if (recordingState !== VoiceBroadcastInfoState.Started) return;
recording.stop();
};
return <VoiceBroadcastRecordingBody
onClick={stopVoiceBroadcast}
live={recordingState === VoiceBroadcastInfoState.Started}
sender={mxEvent.sender}
roomName={room.name}
recording={recording}
/>;
};

29
src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx
View file

@ -1,12 +1,9 @@
/*
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.
@ -14,28 +11,26 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { MouseEventHandler } from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import React from "react";
import { VoiceBroadcastHeader } from "../..";
import { useVoiceBroadcastRecording, VoiceBroadcastHeader, VoiceBroadcastRecording } from "../..";
interface VoiceBroadcastRecordingBodyProps {
live: boolean;
onClick: MouseEventHandler<HTMLDivElement>;
roomName: string;
sender: RoomMember;
recording: VoiceBroadcastRecording;
}
export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({
live,
onClick,
roomName,
sender,
}) => {
export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({ recording }) => {
const {
live,
roomName,
sender,
stopRecording,
} = useVoiceBroadcastRecording(recording);
return (
<div
className="mx_VoiceBroadcastRecordingBody"
onClick={onClick}
onClick={stopRecording}
>
<VoiceBroadcastHeader
live={live}

51
src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts Normal file
View file

@ -0,0 +1,51 @@
/*
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 { useState } from "react";
import {
VoiceBroadcastInfoState,
VoiceBroadcastRecording,
VoiceBroadcastRecordingEvent,
VoiceBroadcastRecordingsStore,
} from "..";
import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
import { MatrixClientPeg } from "../../MatrixClientPeg";
export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) => {
const client = MatrixClientPeg.get();
const room = client.getRoom(recording.infoEvent.getRoomId());
const stopRecording = () => {
recording.stop();
VoiceBroadcastRecordingsStore.instance().clearCurrent();
};
const [live, setLive] = useState(recording.getState() === VoiceBroadcastInfoState.Started);
useTypedEventEmitter(
recording,
VoiceBroadcastRecordingEvent.StateChanged,
(state: VoiceBroadcastInfoState, _recording: VoiceBroadcastRecording) => {
setLive(state === VoiceBroadcastInfoState.Started);
},
);
return {
live,
roomName: room.name,
sender: recording.infoEvent.sender,
stopRecording,
};
};

1
src/voice-broadcast/index.ts
View file

@ -30,6 +30,7 @@ export * from "./models/VoiceBroadcastRecording";
export * from "./stores/VoiceBroadcastRecordingsStore";
export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
export * from "./utils/startNewVoiceBroadcastRecording";
export * from "./hooks/useVoiceBroadcastRecording";
export const VoiceBroadcastInfoEventType = "io.element.voice_broadcast_info";
export const VoiceBroadcastChunkEventType = "io.element.voice_broadcast_chunk";

7
src/voice-broadcast/stores/VoiceBroadcastRecordingsStore.ts
View file

@ -50,6 +50,13 @@ export class VoiceBroadcastRecordingsStore extends TypedEventEmitter<VoiceBroadc
return this.current;
}
public clearCurrent(): void {
if (this.current === null) return;
this.current = null;
this.emit(VoiceBroadcastRecordingsStoreEvent.CurrentChanged, null);
}
public getByInfoEvent(infoEvent: MatrixEvent, client: MatrixClient): VoiceBroadcastRecording {
const infoEventId = infoEvent.getId();

29
test/components/views/settings/KeyboardShortcut-test.tsx
View file

@ -16,17 +16,14 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { render } from "@testing-library/react";
import { Key } from "../../../../src/Keyboard";
import { mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils/platform";
import { KeyboardKey, KeyboardShortcut } from "../../../../src/components/views/settings/KeyboardShortcut";
const PATH_TO_COMPONENT = "../../../../src/components/views/settings/KeyboardShortcut.tsx";
const renderKeyboardShortcut = async (component, props?): Promise<ReactWrapper> => {
const Component = (await import(PATH_TO_COMPONENT))[component];
return mount(<Component {...props} />);
const renderKeyboardShortcut = (Component, props?) => {
return render(<Component {...props} />).container;
};
describe("KeyboardShortcut", () => {
@ -35,24 +32,24 @@ describe("KeyboardShortcut", () => {
unmockPlatformPeg();
});
it("renders key icon", async () => {
const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.ARROW_DOWN });
it("renders key icon", () => {
const body = renderKeyboardShortcut(KeyboardKey, { name: Key.ARROW_DOWN });
expect(body).toMatchSnapshot();
});
it("renders alternative key name", async () => {
const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.PAGE_DOWN });
it("renders alternative key name", () => {
const body = renderKeyboardShortcut(KeyboardKey, { name: Key.PAGE_DOWN });
expect(body).toMatchSnapshot();
});
it("doesn't render + if last", async () => {
const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.A, last: true });
it("doesn't render + if last", () => {
const body = renderKeyboardShortcut(KeyboardKey, { name: Key.A, last: true });
expect(body).toMatchSnapshot();
});
it("doesn't render same modifier twice", async () => {
it("doesn't render same modifier twice", () => {
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
const body1 = await renderKeyboardShortcut("KeyboardShortcut", {
const body1 = renderKeyboardShortcut(KeyboardShortcut, {
value: {
key: Key.A,
ctrlOrCmdKey: true,
@ -61,7 +58,7 @@ describe("KeyboardShortcut", () => {
});
expect(body1).toMatchSnapshot();
const body2 = await renderKeyboardShortcut("KeyboardShortcut", {
const body2 = renderKeyboardShortcut(KeyboardShortcut, {
value: {
key: Key.A,
ctrlOrCmdKey: true,

111
test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap
View file

@ -1,116 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KeyboardShortcut doesn't render + if last 1`] = `
<KeyboardKey
last={true}
name="a"
>
<div>
<kbd>
a
</kbd>
</KeyboardKey>
</div>
`;
exports[`KeyboardShortcut doesn't render same modifier twice 1`] = `
<KeyboardShortcut
value={
Object {
"ctrlOrCmdKey": true,
"key": "a",
"metaKey": true,
}
}
>
<div>
<div
className="mx_KeyboardShortcut"
class="mx_KeyboardShortcut"
>
<KeyboardKey
key="ctrlOrCmdKey"
name="Control"
>
<kbd>
Ctrl
</kbd>
+
</KeyboardKey>
<KeyboardKey
last={true}
name="a"
>
<kbd>
a
</kbd>
</KeyboardKey>
<kbd>
Ctrl
</kbd>
+
<kbd>
a
</kbd>
</div>
</KeyboardShortcut>
</div>
`;
exports[`KeyboardShortcut doesn't render same modifier twice 2`] = `
<KeyboardShortcut
value={
Object {
"ctrlKey": true,
"ctrlOrCmdKey": true,
"key": "a",
}
}
>
<div>
<div
className="mx_KeyboardShortcut"
class="mx_KeyboardShortcut"
>
<KeyboardKey
key="ctrlOrCmdKey"
name="Control"
>
<kbd>
Ctrl
</kbd>
+
</KeyboardKey>
<KeyboardKey
last={true}
name="a"
>
<kbd>
a
</kbd>
</KeyboardKey>
<kbd>
Ctrl
</kbd>
+
<kbd>
a
</kbd>
</div>
</KeyboardShortcut>
</div>
`;
exports[`KeyboardShortcut renders alternative key name 1`] = `
<KeyboardKey
name="PageDown"
>
<div>
<kbd>
Page Down
</kbd>
+
</KeyboardKey>
</div>
`;
exports[`KeyboardShortcut renders key icon 1`] = `
<KeyboardKey
name="ArrowDown"
>
<div>
<kbd>
↓
</kbd>
+
</KeyboardKey>
</div>
`;

17
test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx
View file

@ -15,15 +15,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { render } from "@testing-library/react";
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import KeyboardUserSettingsTab from
"../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
import { Key } from "../../../../../../src/Keyboard";
import { mockPlatformPeg } from "../../../../../test-utils/platform";
const PATH_TO_KEYBOARD_SHORTCUTS = "../../../../../../src/accessibility/KeyboardShortcuts";
const PATH_TO_KEYBOARD_SHORTCUT_UTILS = "../../../../../../src/accessibility/KeyboardShortcutUtils";
const PATH_TO_COMPONENT = "../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
const mockKeyboardShortcuts = (override) => {
jest.doMock(PATH_TO_KEYBOARD_SHORTCUTS, () => {
@ -45,17 +46,17 @@ const mockKeyboardShortcutUtils = (override) => {
});
};
const renderKeyboardUserSettingsTab = async (component): Promise<ReactWrapper> => {
const Component = (await import(PATH_TO_COMPONENT))[component];
return mount(<Component />);
const renderKeyboardUserSettingsTab = () => {
return render(<KeyboardUserSettingsTab />).container;
};
describe("KeyboardUserSettingsTab", () => {
beforeEach(() => {
jest.resetModules();
mockPlatformPeg();
});
it("renders list of keyboard shortcuts", async () => {
it("renders list of keyboard shortcuts", () => {
mockKeyboardShortcuts({
"CATEGORIES": {
"Composer": {
@ -101,7 +102,7 @@ describe("KeyboardUserSettingsTab", () => {
},
});
const body = await renderKeyboardUserSettingsTab("default");
const body = renderKeyboardUserSettingsTab();
expect(body).toMatchSnapshot();
});
});

1178
test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap
View file

File diff suppressed because it is too large Load diff

28
test/i18n-test/languageHandler-test.tsx
View file

@ -100,6 +100,16 @@ describe('languageHandler', function() {
],
];
let oldNodeEnv;
beforeAll(() => {
oldNodeEnv = process.env.NODE_ENV;
process.env.NODE_ENV = "test";
});
afterAll(() => {
process.env.NODE_ENV = oldNodeEnv;
});
describe('when translations exist in language', () => {
beforeEach(function(done) {
stubClient();
@ -115,7 +125,7 @@ describe('languageHandler', function() {
}).then(done);
});
it.each(testCasesEn)("%s", async (_d, translationString, variables, tags, result) => {
it.each(testCasesEn)("%s", (_d, translationString, variables, tags, result) => {
expect(_t(translationString, variables, tags)).toEqual(result);
});
@ -137,9 +147,9 @@ describe('languageHandler', function() {
});
describe('for a non-en language', () => {
beforeEach(async () => {
beforeEach(() => {
stubClient();
await setLanguage('lv');
setLanguage('lv');
// counterpart doesnt expose any way to restore default config
// missingEntryGenerator is mocked in the root setup file
// reset to default here
@ -178,7 +188,7 @@ describe('languageHandler', function() {
});
it.each(pluralCases)(
"%s",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_t(translationString, variables, tags)).toEqual(result);
},
);
@ -192,7 +202,7 @@ describe('languageHandler', function() {
});
it.each(pluralCases)(
"%s and translates with fallback locale, attributes fallback locale",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_tDom(translationString, variables, tags)).toEqual(<span lang="en">{ result }</span>);
},
);
@ -203,7 +213,7 @@ describe('languageHandler', function() {
describe('_t', () => {
it.each(testCasesEn)(
"%s and translates with fallback locale",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_t(translationString, variables, tags)).toEqual(result);
},
);
@ -212,7 +222,7 @@ describe('languageHandler', function() {
describe('_tDom()', () => {
it.each(testCasesEn)(
"%s and translates with fallback locale, attributes fallback locale",
async (_d, translationString, variables, tags, result) => {
(_d, translationString, variables, tags, result) => {
expect(_tDom(translationString, variables, tags)).toEqual(<span lang="en">{ result }</span>);
},
);
@ -221,12 +231,12 @@ describe('languageHandler', function() {
});
describe('when languages dont load', () => {
it('_t', async () => {
it('_t', () => {
const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
expect(_t(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(STRING_NOT_IN_THE_DICTIONARY);
});
it('_tDom', async () => {
it('_tDom', () => {
const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
expect(_tDom(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(
<span lang="en">{ STRING_NOT_IN_THE_DICTIONARY }</span>);

33
test/utils/notifications-test.ts
View file

@ -30,21 +30,23 @@ jest.mock("../../src/settings/SettingsStore");
describe('notifications', () => {
let accountDataStore = {};
const mockClient = getMockClientWithEventEmitter({
isGuest: jest.fn().mockReturnValue(false),
getAccountData: jest.fn().mockImplementation(eventType => accountDataStore[eventType]),
setAccountData: jest.fn().mockImplementation((eventType, content) => {
accountDataStore[eventType] = new MatrixEvent({
type: eventType,
content,
});
}),
});
const accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId);
let mockClient;
let accountDataEventKey;
beforeEach(() => {
jest.clearAllMocks();
mockClient = getMockClientWithEventEmitter({
isGuest: jest.fn().mockReturnValue(false),
getAccountData: jest.fn().mockImplementation(eventType => accountDataStore[eventType]),
setAccountData: jest.fn().mockImplementation((eventType, content) => {
accountDataStore[eventType] = new MatrixEvent({
type: eventType,
content,
});
}),
});
accountDataStore = {};
accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId);
mocked(SettingsStore).getValue.mockReturnValue(false);
});
@ -55,6 +57,13 @@ describe('notifications', () => {
expect(event?.getContent().is_silenced).toBe(true);
});
it('does not do anything for guests', async () => {
mockClient.isGuest.mockReset().mockReturnValue(true);
await createLocalNotificationSettingsIfNeeded(mockClient);
const event = mockClient.getAccountData(accountDataEventKey);
expect(event).toBeFalsy();
});
it.each(deviceNotificationSettingsKeys)(
'unsilenced for existing sessions when %s setting is truthy',
async (settingKey) => {

125
test/voice-broadcast/components/VoiceBroadcastBody-test.tsx
View file

@ -16,9 +16,8 @@ limitations under the License.
import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { mocked } from "jest-mock";
import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
import {
VoiceBroadcastBody,
@ -27,10 +26,8 @@ import {
VoiceBroadcastRecordingBody,
VoiceBroadcastRecordingsStore,
VoiceBroadcastRecording,
VoiceBroadcastRecordingEvent,
} from "../../../src/voice-broadcast";
import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
import { IBodyProps } from "../../../src/components/views/messages/IBodyProps";
import { mkEvent, stubClient } from "../../test-utils";
jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody", () => ({
VoiceBroadcastRecordingBody: jest.fn(),
@ -38,12 +35,9 @@ jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecor
describe("VoiceBroadcastBody", () => {
const roomId = "!room:example.com";
const recordingTestid = "voice-recording";
let client: MatrixClient;
let room: Room;
let infoEvent: MatrixEvent;
let recording: VoiceBroadcastRecording;
let onRecordingStateChanged: (state: VoiceBroadcastInfoState) => void;
let testRecording: VoiceBroadcastRecording;
const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
return mkEvent({
@ -58,104 +52,39 @@ describe("VoiceBroadcastBody", () => {
};
const renderVoiceBroadcast = () => {
const props: IBodyProps = {
mxEvent: infoEvent,
} as unknown as IBodyProps;
render(<VoiceBroadcastBody {...props} />);
recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(infoEvent, client);
recording.on(VoiceBroadcastRecordingEvent.StateChanged, onRecordingStateChanged);
};
const itShouldRenderALiveVoiceBroadcast = () => {
it("should render a live voice broadcast", () => {
expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
{
onClick: expect.any(Function),
live: true,
sender: infoEvent.sender,
roomName: room.name,
},
{},
);
screen.getByTestId(recordingTestid);
screen.getByText("Live");
});
};
const itShouldRenderANonLiveVoiceBroadcast = () => {
it("should render a non-live voice broadcast", () => {
expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
{
onClick: expect.any(Function),
live: false,
sender: infoEvent.sender,
roomName: room.name,
},
{},
);
expect(screen.getByTestId(recordingTestid)).not.toBeNull();
screen.getByTestId(recordingTestid);
expect(screen.queryByText("live")).toBeNull();
});
render(<VoiceBroadcastBody
mxEvent={infoEvent}
mediaEventHelper={null}
onHeightChanged={() => {}}
onMessageAllowed={() => {}}
permalinkCreator={null}
/>);
testRecording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(infoEvent, client);
};
beforeEach(() => {
mocked(VoiceBroadcastRecordingBody).mockImplementation(
({
live,
sender,
onClick,
roomName,
}) => {
return (
<div
data-testid={recordingTestid}
onClick={onClick}
>
<div>{ sender.name }</div>
<div>{ roomName }</div>
<div>{ live && "Live" }</div>
</div>
);
},
);
client = stubClient();
room = mkStubRoom(roomId, "test room", client);
mocked(client.getRoom).mockImplementation((getRoomId: string) => {
if (getRoomId === roomId) {
return room;
infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
testRecording = new VoiceBroadcastRecording(infoEvent, client);
mocked(VoiceBroadcastRecordingBody).mockImplementation(({ recording }) => {
if (testRecording === recording) {
return <div data-testid="voice-broadcast-recording-body" />;
}
});
infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
onRecordingStateChanged = jest.fn();
jest.spyOn(VoiceBroadcastRecordingsStore.instance(), "getByInfoEvent").mockImplementation(
(getEvent: MatrixEvent, getClient: MatrixClient) => {
if (getEvent === infoEvent && getClient === client) {
return testRecording;
}
},
);
});
afterEach(() => {
if (recording && onRecordingStateChanged) {
recording.off(VoiceBroadcastRecordingEvent.StateChanged, onRecordingStateChanged);
}
});
describe("when there is a Started Voice Broadcast info event", () => {
beforeEach(() => {
describe("when rendering a voice broadcast", () => {
it("should render a voice broadcast recording body", () => {
renderVoiceBroadcast();
});
itShouldRenderALiveVoiceBroadcast();
describe("and it is clicked", () => {
beforeEach(async () => {
mocked(VoiceBroadcastRecordingBody).mockClear();
mocked(onRecordingStateChanged).mockClear();
await userEvent.click(screen.getByTestId(recordingTestid));
});
itShouldRenderANonLiveVoiceBroadcast();
it("should call stop on the recording", () => {
expect(recording.getState()).toBe(VoiceBroadcastInfoState.Stopped);
expect(onRecordingStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Stopped);
});
screen.getByTestId("voice-broadcast-recording-body");
});
});
});

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

@ -14,45 +14,43 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { MouseEventHandler } from "react";
import React 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 { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { VoiceBroadcastHeader, VoiceBroadcastRecordingBody } from "../../../../src/voice-broadcast";
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>;
},
}));
import {
VoiceBroadcastInfoEventType,
VoiceBroadcastInfoState,
VoiceBroadcastRecording,
VoiceBroadcastRecordingBody,
} from "../../../../src/voice-broadcast";
import { mkEvent, stubClient } from "../../../test-utils";
describe("VoiceBroadcastRecordingBody", () => {
const testRoomName = "test room name";
const userId = "@user:example.com";
const roomMember = new RoomMember("!room:example.com", userId);
let onClick: MouseEventHandler<HTMLDivElement>;
const roomId = "!room:example.com";
let client: MatrixClient;
let infoEvent: MatrixEvent;
let recording: VoiceBroadcastRecording;
beforeEach(() => {
onClick = jest.fn();
beforeAll(() => {
client = stubClient();
infoEvent = mkEvent({
event: true,
type: VoiceBroadcastInfoEventType,
content: {},
room: roomId,
user: userId,
});
recording = new VoiceBroadcastRecording(infoEvent, client);
});
describe("when rendered", () => {
describe("when rendering a live broadcast", () => {
let renderResult: RenderResult;
beforeEach(() => {
renderResult = render(
<VoiceBroadcastRecordingBody
onClick={onClick}
roomName={testRoomName}
live={true}
sender={roomMember}
/>,
);
renderResult = render(<VoiceBroadcastRecordingBody recording={recording} />);
});
it("should render the expected HTML", () => {
@ -61,27 +59,21 @@ describe("VoiceBroadcastRecordingBody", () => {
describe("and clicked", () => {
beforeEach(async () => {
await userEvent.click(renderResult.getByTestId("voice-broadcast-header"));
await userEvent.click(renderResult.getByText("My room"));
});
it("should call the onClick prop", () => {
expect(onClick).toHaveBeenCalled();
it("should stop the recording", () => {
expect(recording.getState()).toBe(VoiceBroadcastInfoState.Stopped);
});
});
});
describe("when non-live rendered", () => {
describe("when rendering a non-live broadcast", () => {
let renderResult: RenderResult;
beforeEach(() => {
renderResult = render(
<VoiceBroadcastRecordingBody
onClick={onClick}
roomName={testRoomName}
live={false}
sender={roomMember}
/>,
);
recording.stop();
renderResult = render(<VoiceBroadcastRecordingBody recording={recording} />);
});
it("should not render the live badge", () => {

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

@ -1,18 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VoiceBroadcastRecordingBody when rendered should render the expected HTML 1`] = `
exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render the expected HTML 1`] = `
<div>
<div
class="mx_VoiceBroadcastRecordingBody"
>
<div
data-testid="voice-broadcast-header"
class="mx_VoiceBroadcastHeader"
>
live:
, sender:
@user:example.com
, room name:
test room name
<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>
<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>
</div>

14
test/voice-broadcast/stores/VoiceBroadcastRecordingsStore-test.ts
View file

@ -97,6 +97,20 @@ describe("VoiceBroadcastRecordingsStore", () => {
expect(onCurrentChanged).not.toHaveBeenCalled();
});
});
describe("and calling clearCurrent()", () => {
beforeEach(() => {
recordings.clearCurrent();
});
it("should clear the current recording", () => {
expect(recordings.getCurrent()).toBeNull();
});
it("should emit a current changed event", () => {
expect(onCurrentChanged).toHaveBeenCalledWith(null);
});
});
});
describe("getByInfoEventId", () => {