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

* 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
2026-03-10 16:59:51 +00:00
parent 652b9f5b5b
commit 6d99678ade
26 changed files with 810 additions and 290 deletions
@@ -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();
+    });
+});