sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Redesign widget pip and move into shared component (#32654)

Browse Source 
* redesign widget pip and move into shared component

* fix onBackClick handler

* fix ci

* Update README.md prepare -> prepack

* add vm tests

* Update WidgetPipView.stories.tsx

* fix tests

* playwright tests

* fix test id

* remove unused files (reappeared after rebase)

* update storybook screenshot tests

* update playwright tests

* adjust padding

* review

* comment and docstring corrections

* fix imports and `this.props`

* fix double `complementary` item

* add WidgetPipView tests and revmoe `setViewingRoom` from
WidgetPipViewModelInterface.

* add doc sting to `setViewingRoom`

* Update RoomStatusBarView.test.tsx

* fix copyright

* Update RoomView-test.tsx.snap

* revert accidental Copyright year changes

* update snapshot RoomView-test
This commit is contained in:
Timo
2026-03-10 16:59:51 +00:00
committed by GitHub
parent 652b9f5b5b
commit 6d99678ade
26 changed files with 810 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/structures/PipContainer-test.tsx
+3 -37
View File
@@ -17,7 +17,7 @@ import {
RoomStateEvent,
type RoomMember,
} from "matrix-js-sdk/src/matrix";
import { Widget, type ClientWidgetApi } from "matrix-widget-api";
import { Widget } from "matrix-widget-api";
import {
useMockedCalls,
@@ -47,7 +47,6 @@ import { Container, WidgetLayoutStore } from "../../../../src/stores/widgets/Wid
import WidgetStore from "../../../../src/stores/WidgetStore";
import { WidgetType } from "../../../../src/widgets/WidgetType";
import { SdkContextClass } from "../../../../src/contexts/SDKContext";
import { ElementWidgetActions } from "../../../../src/stores/widgets/ElementWidgetActions";
import { type WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
jest.mock("../../../../src/stores/OwnProfileStore", () => ({
@@ -194,7 +193,7 @@ describe("PipContainer", () => {
expect(screen.queryByRole("complementary")).toBeNull();
});
it("shows an active call with back and leave buttons", async () => {
it("shows an active call with back buttons", async () => {
renderPip();
await withCall(async (call) => {
@@ -211,11 +210,6 @@ describe("PipContainer", () => {
metricsTrigger: expect.any(String),
});
defaultDispatcher.unregister(dispatcherRef);
// The leave button should disconnect from the call
const disconnectSpy = jest.spyOn(call, "disconnect");
await user.click(screen.getByRole("button", { name: "Leave" }));
expect(disconnectSpy).toHaveBeenCalled();
});
});
@@ -252,16 +246,7 @@ describe("PipContainer", () => {
mockPlatformPeg({ supportsJitsiScreensharing: () => true });
setUpRoomViewStore();
viewRoom(room2.roomId);
const widget = WidgetStore.instance.addVirtualWidget(
{
id: "1",
creatorUserId: "@alice:example.org",
type: WidgetType.JITSI.preferred,
url: "https://meet.example.org",
name: "Jitsi example",
},
room.roomId,
);
renderPip();
await withWidget(async () => {
@@ -277,25 +262,6 @@ describe("PipContainer", () => {
metricsTrigger: expect.any(String),
});
defaultDispatcher.unregister(dispatcherRef);
// The leave button should hangup the call
const sendSpy = jest
.fn<
ReturnType<ClientWidgetApi["transport"]["send"]>,
Parameters<ClientWidgetApi["transport"]["send"]>
>()
.mockResolvedValue({});
const mockMessaging = {
on: () => {},
off: () => {},
stop: () => {},
widgetApi: {
transport: { send: sendSpy },
},
} as unknown as WidgetMessaging;
WidgetMessagingStore.instance.storeMessaging(new Widget(widget), room.roomId, mockMessaging);
await user.click(screen.getByRole("button", { name: "Leave" }));
expect(sendSpy).toHaveBeenCalledWith(ElementWidgetActions.HangupCall, {});
});
WidgetStore.instance.removeVirtualWidget("1", room.roomId);
apps/web/test/unit-tests/components/structures/__snapshots__/PictureInPictureDragger-test.tsx.snap
+4 -4
View File
@@ -3,7 +3,7 @@
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and 2 should render both contents 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
style="transform: translateX(672px) translateY(80px);"
>
<div>
content 1
@@ -20,7 +20,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rendering PiP content 2 should update the PiP content 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
style="transform: translateX(672px) translateY(80px);"
>
<div>
content 2
@@ -34,7 +34,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rerendering PiP content 1 should not change the PiP content: pip-content-1 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
style="transform: translateX(672px) translateY(80px);"
>
<div>
content 1
@@ -46,7 +46,7 @@ exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 a
exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 should render the PiP content: pip-content-1 1`] = `
<div>
<aside
style="transform: translateX(680px) translateY(478px);"
style="transform: translateX(672px) translateY(80px);"
>
<div>
content 1
apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+2 -2
View File
@@ -237,7 +237,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_content_193k4_38"
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1rm46_17"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1xryk_24"
id="_r_1c3_"
>
Could not start a chat with this user
@@ -247,7 +247,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_actions_193k4_60"
>
<button
class="_button_13vu4_8 _primaryAction_1rm46_13 _has-icon_13vu4_60"
class="_button_13vu4_8 _primaryAction_1xryk_20 _has-icon_13vu4_60"
data-kind="primary"
data-size="sm"
role="button"
apps/web/test/viewmodels/room/WidgetPip-test.ts
+108
View File
@@ -0,0 +1,108 @@
/*
* Copyright (c) 2025 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
import { type MatrixClient, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import { type MockedObject } from "jest-mock";
import { mkRoom, stubClient } from "../../test-utils";
import { WidgetPipViewModel } from "../../../src/viewmodels/room/WidgetPipViewModel";
import WidgetStore, { type IApp } from "../../../src/stores/WidgetStore";
import defaultDispatcher from "../../../src/dispatcher/dispatcher";
import { Action } from "../../../src/dispatcher/actions";
import { Container, WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
import { CallStore, CallStoreEvent } from "../../../src/stores/CallStore";
import { type Call } from "../../../src/models/Call";
const userId = "@example:example.org";
const widgetId = "test-widget-id";
type BackClickEvent = Parameters<WidgetPipViewModel["onBackClick"]>[0];
const createBackClickEvent = (): BackClickEvent =>
({
preventDefault: jest.fn(),
stopPropagation: jest.fn(),
}) as unknown as BackClickEvent;
describe("WidgetPipViewModel", () => {
let client: MockedObject<MatrixClient>;
let vm: WidgetPipViewModel;
let room: MockedObject<Room>;
let widget: IApp;
beforeEach(() => {
client = stubClient() as MockedObject<MatrixClient>;
room = mkRoom(client, "!example");
widget = {
id: widgetId,
roomId: room.roomId,
creatorUserId: userId,
type: "m.custom",
name: "Test Widget",
data: {},
} as unknown as IApp;
jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
vm = new WidgetPipViewModel({
room,
widgetId,
});
});
afterEach(() => {
vm.dispose();
jest.restoreAllMocks();
});
it("updates room name", () => {
room.name = "New Room Name";
room.emit(RoomEvent.Name, room);
expect(vm.getSnapshot().roomName).toBe("New Room Name");
});
it("updates onBackClick if call changes", () => {
const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
vm.onBackClick(createBackClickEvent());
expect(dispatchSpy).toHaveBeenCalledWith({
action: Action.ViewRoom,
room_id: room.roomId,
metricsTrigger: "WebFloatingCallWindow",
});
dispatchSpy.mockClear();
const call = { widget: { id: widgetId } } as unknown as Call;
CallStore.instance.emit(CallStoreEvent.Call, call, room.roomId);
vm.onBackClick(createBackClickEvent());
expect(dispatchSpy).toHaveBeenCalledWith({
action: Action.ViewRoom,
room_id: room.roomId,
view_call: true,
metricsTrigger: "WebFloatingCallWindow",
});
});
it("updates onBackClick if viewingRoom changes", () => {
const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
const moveSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer").mockImplementation(() => {});
vm.setViewingRoom(true);
vm.onBackClick(createBackClickEvent());
expect(moveSpy).toHaveBeenCalledWith(room, widget, Container.Center);
moveSpy.mockClear();
vm.setViewingRoom(false);
vm.onBackClick(createBackClickEvent());
expect(dispatchSpy).toHaveBeenCalledWith({
action: Action.ViewRoom,
room_id: room.roomId,
metricsTrigger: "WebFloatingCallWindow",
});
expect(moveSpy).not.toHaveBeenCalled();
});
});