mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-25 18:08:14 +08:00
c42562ef39
* update widget url when the theme changes Signed-off-by: Timo K <toger5@hotmail.de> * quick "make it EC specific" workaround proposal. Signed-off-by: Timo K <toger5@hotmail.de> * use `matches` Signed-off-by: Timo K <toger5@hotmail.de> * test coverage Signed-off-by: Timo K <toger5@hotmail.de> * more test coverage Signed-off-by: Timo K <toger5@hotmail.de> * fix jest Signed-off-by: Timo K <toger5@hotmail.de> * add tests for theme changes Signed-off-by: Timo K <toger5@hotmail.de> * update snapshots Signed-off-by: Timo K <toger5@hotmail.de> * test for theme update with non ec widget Signed-off-by: Timo K <toger5@hotmail.de> * add dark custom theme widget url Signed-off-by: Timo K <toger5@hotmail.de> * trigger conditions for theme cleanup Signed-off-by: Timo K <toger5@hotmail.de> * update tests using testId Signed-off-by: Timo K <toger5@hotmail.de> * use typed event emitter for theme watcher Signed-off-by: Timo K <toger5@hotmail.de> * simplify condition Signed-off-by: Timo K <toger5@hotmail.de> --------- Signed-off-by: Timo K <toger5@hotmail.de>
319 lines
14 KiB
TypeScript
319 lines
14 KiB
TypeScript
/*
|
|
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, MockedObject } from "jest-mock";
|
|
import { last } from "lodash";
|
|
import { MatrixEvent, MatrixClient, ClientEvent, EventTimeline } from "matrix-js-sdk/src/matrix";
|
|
import { ClientWidgetApi, WidgetApiFromWidgetAction } from "matrix-widget-api";
|
|
import { waitFor } from "@testing-library/react";
|
|
|
|
import { stubClient, mkRoom, mkEvent } from "../../test-utils";
|
|
import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
|
|
import { StopGapWidget } from "../../../src/stores/widgets/StopGapWidget";
|
|
import { ElementWidgetActions } from "../../../src/stores/widgets/ElementWidgetActions";
|
|
import { VoiceBroadcastInfoEventType, VoiceBroadcastRecording } from "../../../src/voice-broadcast";
|
|
import { SdkContextClass } from "../../../src/contexts/SDKContext";
|
|
import ActiveWidgetStore from "../../../src/stores/ActiveWidgetStore";
|
|
import SettingsStore from "../../../src/settings/SettingsStore";
|
|
import * as Theme from "../../../src/theme";
|
|
|
|
jest.mock("matrix-widget-api/lib/ClientWidgetApi");
|
|
|
|
describe("StopGapWidget", () => {
|
|
let client: MockedObject<MatrixClient>;
|
|
let widget: StopGapWidget;
|
|
let messaging: MockedObject<ClientWidgetApi>;
|
|
|
|
beforeEach(() => {
|
|
stubClient();
|
|
client = mocked(MatrixClientPeg.safeGet());
|
|
|
|
widget = new StopGapWidget({
|
|
app: {
|
|
id: "test",
|
|
creatorUserId: "@alice:example.org",
|
|
type: "example",
|
|
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url&theme=$org.matrix.msc2873.client_theme",
|
|
roomId: "!1:example.org",
|
|
},
|
|
room: mkRoom(client, "!1:example.org"),
|
|
userId: "@alice:example.org",
|
|
creatorUserId: "@alice:example.org",
|
|
waitForIframeLoad: true,
|
|
userWidget: false,
|
|
});
|
|
// Start messaging without an iframe, since ClientWidgetApi is mocked
|
|
widget.startMessaging(null as unknown as HTMLIFrameElement);
|
|
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
|
|
});
|
|
|
|
afterEach(() => {
|
|
widget.stopMessaging();
|
|
});
|
|
|
|
describe("url template", () => {
|
|
it("should replace parameters in widget url template", () => {
|
|
const originalGetValue = SettingsStore.getValue;
|
|
const spy = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
|
|
if (setting === "theme") return "my-theme-for-testing";
|
|
return originalGetValue(setting);
|
|
});
|
|
expect(widget.embedUrl).toBe(
|
|
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=my-theme-for-testing&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
|
|
);
|
|
spy.mockRestore();
|
|
});
|
|
it("should replace custom theme with light/dark", () => {
|
|
const originalGetValue = SettingsStore.getValue;
|
|
const spy = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
|
|
if (setting === "theme") return "custom-my-theme";
|
|
return originalGetValue(setting);
|
|
});
|
|
jest.spyOn(Theme, "getCustomTheme").mockReturnValue({ is_dark: false } as unknown as Theme.CustomTheme);
|
|
expect(widget.embedUrl).toBe(
|
|
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=light&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
|
|
);
|
|
jest.spyOn(Theme, "getCustomTheme").mockReturnValue({ is_dark: true } as unknown as Theme.CustomTheme);
|
|
expect(widget.embedUrl).toBe(
|
|
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=dark&widgetId=test&parentUrl=http%3A%2F%2Flocalhost%2F",
|
|
);
|
|
spy.mockRestore();
|
|
});
|
|
it("should replace parameters in widget popoutUrl template", () => {
|
|
const originalGetValue = SettingsStore.getValue;
|
|
const spy = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
|
|
if (setting === "theme") return "my-theme-for-testing";
|
|
return originalGetValue(setting);
|
|
});
|
|
expect(widget.popoutUrl).toBe(
|
|
"https://example.org/?user-id=%40userId%3Amatrix.org&device-id=ABCDEFGHI&base-url=https%3A%2F%2Fmatrix-client.matrix.org&theme=my-theme-for-testing",
|
|
);
|
|
spy.mockRestore();
|
|
});
|
|
});
|
|
it("feeds incoming to-device messages to the widget", async () => {
|
|
const event = mkEvent({
|
|
event: true,
|
|
type: "org.example.foo",
|
|
user: "@alice:example.org",
|
|
content: { hello: "world" },
|
|
});
|
|
|
|
client.emit(ClientEvent.ToDeviceEvent, event);
|
|
await Promise.resolve(); // flush promises
|
|
expect(messaging.feedToDevice).toHaveBeenCalledWith(event.getEffectiveEvent(), false);
|
|
});
|
|
|
|
describe("feed event", () => {
|
|
let event1: MatrixEvent;
|
|
let event2: MatrixEvent;
|
|
|
|
beforeEach(() => {
|
|
event1 = mkEvent({
|
|
event: true,
|
|
id: "$event-id1",
|
|
type: "org.example.foo",
|
|
user: "@alice:example.org",
|
|
content: { hello: "world" },
|
|
room: "!1:example.org",
|
|
});
|
|
|
|
event2 = mkEvent({
|
|
event: true,
|
|
id: "$event-id2",
|
|
type: "org.example.foo",
|
|
user: "@alice:example.org",
|
|
content: { hello: "world" },
|
|
room: "!1:example.org",
|
|
});
|
|
|
|
const room = mkRoom(client, "!1:example.org");
|
|
client.getRoom.mockImplementation((roomId) => (roomId === "!1:example.org" ? room : null));
|
|
room.getLiveTimeline.mockReturnValue({
|
|
getEvents: (): MatrixEvent[] => [event1, event2],
|
|
} as unknown as EventTimeline);
|
|
|
|
messaging.feedEvent.mockResolvedValue();
|
|
});
|
|
|
|
it("feeds incoming event to the widget", async () => {
|
|
client.emit(ClientEvent.Event, event1);
|
|
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent(), "!1:example.org");
|
|
|
|
client.emit(ClientEvent.Event, event2);
|
|
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
|
|
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent(), "!1:example.org");
|
|
});
|
|
|
|
it("should not feed incoming event to the widget if seen already", async () => {
|
|
client.emit(ClientEvent.Event, event1);
|
|
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent(), "!1:example.org");
|
|
|
|
client.emit(ClientEvent.Event, event2);
|
|
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
|
|
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent(), "!1:example.org");
|
|
|
|
client.emit(ClientEvent.Event, event1);
|
|
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
|
|
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event2.getEffectiveEvent(), "!1:example.org");
|
|
});
|
|
|
|
it("should not feed incoming event if not in timeline", () => {
|
|
const event = mkEvent({
|
|
event: true,
|
|
id: "$event-id",
|
|
type: "org.example.foo",
|
|
user: "@alice:example.org",
|
|
content: {
|
|
hello: "world",
|
|
},
|
|
room: "!1:example.org",
|
|
});
|
|
|
|
client.emit(ClientEvent.Event, event);
|
|
expect(messaging.feedEvent).toHaveBeenCalledWith(event.getEffectiveEvent(), "!1:example.org");
|
|
});
|
|
|
|
it("feeds incoming event that is not in timeline but relates to unknown parent to the widget", async () => {
|
|
const event = mkEvent({
|
|
event: true,
|
|
id: "$event-idRelation",
|
|
type: "org.example.foo",
|
|
user: "@alice:example.org",
|
|
content: {
|
|
"hello": "world",
|
|
"m.relates_to": {
|
|
event_id: "$unknown-parent",
|
|
rel_type: "m.reference",
|
|
},
|
|
},
|
|
room: "!1:example.org",
|
|
});
|
|
|
|
client.emit(ClientEvent.Event, event1);
|
|
expect(messaging.feedEvent).toHaveBeenCalledWith(event1.getEffectiveEvent(), "!1:example.org");
|
|
|
|
client.emit(ClientEvent.Event, event);
|
|
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
|
|
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event.getEffectiveEvent(), "!1:example.org");
|
|
|
|
client.emit(ClientEvent.Event, event1);
|
|
expect(messaging.feedEvent).toHaveBeenCalledTimes(2);
|
|
expect(messaging.feedEvent).toHaveBeenLastCalledWith(event.getEffectiveEvent(), "!1:example.org");
|
|
});
|
|
});
|
|
|
|
describe("when there is a voice broadcast recording", () => {
|
|
let voiceBroadcastInfoEvent: MatrixEvent;
|
|
let voiceBroadcastRecording: VoiceBroadcastRecording;
|
|
|
|
beforeEach(() => {
|
|
voiceBroadcastInfoEvent = mkEvent({
|
|
event: true,
|
|
room: client.getRoom("x")?.roomId,
|
|
user: client.getUserId()!,
|
|
type: VoiceBroadcastInfoEventType,
|
|
content: {},
|
|
});
|
|
voiceBroadcastRecording = new VoiceBroadcastRecording(voiceBroadcastInfoEvent, client);
|
|
jest.spyOn(voiceBroadcastRecording, "pause");
|
|
jest.spyOn(SdkContextClass.instance.voiceBroadcastRecordingsStore, "getCurrent").mockReturnValue(
|
|
voiceBroadcastRecording,
|
|
);
|
|
});
|
|
|
|
describe(`and receiving a action:${ElementWidgetActions.JoinCall} message`, () => {
|
|
beforeEach(async () => {
|
|
messaging.on.mock.calls.find(([event, listener]) => {
|
|
if (event === `action:${ElementWidgetActions.JoinCall}`) {
|
|
listener();
|
|
return true;
|
|
}
|
|
});
|
|
});
|
|
|
|
it("should pause the current voice broadcast recording", () => {
|
|
expect(voiceBroadcastRecording.pause).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
describe("StopGapWidget with stickyPromise", () => {
|
|
let client: MockedObject<MatrixClient>;
|
|
let widget: StopGapWidget;
|
|
let messaging: MockedObject<ClientWidgetApi>;
|
|
|
|
beforeEach(() => {
|
|
stubClient();
|
|
client = mocked(MatrixClientPeg.safeGet());
|
|
});
|
|
|
|
afterEach(() => {
|
|
widget.stopMessaging();
|
|
});
|
|
it("should wait for the sticky promise to resolve before starting messaging", async () => {
|
|
jest.useFakeTimers();
|
|
const getStickyPromise = async () => {
|
|
return new Promise<void>((resolve) => {
|
|
setTimeout(() => {
|
|
resolve();
|
|
}, 1000);
|
|
});
|
|
};
|
|
widget = new StopGapWidget({
|
|
app: {
|
|
id: "test",
|
|
creatorUserId: "@alice:example.org",
|
|
type: "example",
|
|
url: "https://example.org?user-id=$matrix_user_id&device-id=$org.matrix.msc3819.matrix_device_id&base-url=$org.matrix.msc4039.matrix_base_url",
|
|
roomId: "!1:example.org",
|
|
},
|
|
room: mkRoom(client, "!1:example.org"),
|
|
userId: "@alice:example.org",
|
|
creatorUserId: "@alice:example.org",
|
|
waitForIframeLoad: true,
|
|
userWidget: false,
|
|
stickyPromise: getStickyPromise,
|
|
});
|
|
|
|
const setPersistenceSpy = jest.spyOn(ActiveWidgetStore.instance, "setWidgetPersistence");
|
|
|
|
// Start messaging without an iframe, since ClientWidgetApi is mocked
|
|
widget.startMessaging(null as unknown as HTMLIFrameElement);
|
|
const emitSticky = async () => {
|
|
messaging = mocked(last(mocked(ClientWidgetApi).mock.instances)!);
|
|
messaging?.hasCapability.mockReturnValue(true);
|
|
// messaging.transport.reply will be called but transport is undefined in this test environment
|
|
// This just makes sure the call doesn't throw
|
|
Object.defineProperty(messaging, "transport", { value: { reply: () => {} } });
|
|
messaging.on.mock.calls.find(([event, listener]) => {
|
|
if (event === `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`) {
|
|
listener({ preventDefault: () => {}, detail: { data: { value: true } } });
|
|
return true;
|
|
}
|
|
});
|
|
};
|
|
await emitSticky();
|
|
expect(setPersistenceSpy).not.toHaveBeenCalled();
|
|
// Advance the fake timer so that the sticky promise resolves
|
|
jest.runAllTimers();
|
|
// Use a real timer and wait for the next tick so the sticky promise can resolve
|
|
jest.useRealTimers();
|
|
|
|
waitFor(() => expect(setPersistenceSpy).toHaveBeenCalled(), { interval: 5 });
|
|
});
|
|
});
|