feat: show call participants in room list (Discord-style)

2026-05-10 14:25:35 +02:00
parent b797925316
commit 3da363517f
4610 changed files with 827237 additions and 1 deletions
@@ -0,0 +1,168 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2022 Mikhail Aheichyk
+Copyright 2022 Nordeck IT + Consulting GmbH.
+
+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 { test } from "../../element-web-test";
+import { waitForRoom } from "../utils";
+
+const DEMO_WIDGET_ID = "demo-widget-id";
+const DEMO_WIDGET_NAME = "Demo Widget";
+const DEMO_WIDGET_TYPE = "demo";
+const ROOM_NAME = "Demo";
+
+const DEMO_WIDGET_HTML = `
+    <html lang="en">
+        <head>
+            <title>Demo Widget</title>
+            <script>
+                let sendEventCount = 0
+                window.onmessage = ev => {
+                    if (ev.data.action === 'capabilities') {
+                        window.parent.postMessage(Object.assign({
+                            response: {
+                                capabilities: [
+                                    "org.matrix.msc2762.timeline:*",
+                                    "org.matrix.msc2762.receive.state_event:m.room.topic",
+                                    "org.matrix.msc2762.send.event:net.widget_echo"
+                                ]
+                            },
+                        }, ev.data), '*');
+                    } else if (ev.data.action === 'send_event' && !ev.data.response) {
+                        // wraps received event into 'net.widget_echo' and sends back
+                        sendEventCount += 1
+                        window.parent.postMessage({
+                            api: "fromWidget",
+                            widgetId: ev.data.widgetId,
+                            requestId: 'widget-' + sendEventCount,
+                            action: "send_event",
+                            data: {
+                                type: 'net.widget_echo',
+                                content: ev.data.data // sets matrix event to the content returned
+                            },
+                        }, '*')
+                    }
+                };
+            </script>
+        </head>
+        <body>
+            <button id="demo">Demo</button>
+        </body>
+    </html>
+`;
+
+test.describe("Widget Events", () => {
+    test.use({
+        displayName: "Mike",
+        botCreateOpts: { displayName: "Bot", autoAcceptInvites: true },
+    });
+
+    let demoWidgetUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
+    });
+
+    test("should be updated if user is re-invited into the room with updated state event", async ({
+        page,
+        app,
+        user,
+        bot,
+    }) => {
+        const roomId = await app.client.createRoom({
+            name: ROOM_NAME,
+            invite: [bot.credentials.userId],
+        });
+
+        // setup widget via state event
+        await app.client.sendStateEvent(
+            roomId,
+            "im.vector.modular.widgets",
+            {
+                id: DEMO_WIDGET_ID,
+                creatorUserId: "somebody",
+                type: DEMO_WIDGET_TYPE,
+                name: DEMO_WIDGET_NAME,
+                url: demoWidgetUrl,
+            },
+            DEMO_WIDGET_ID,
+        );
+
+        // set initial layout
+        await app.client.sendStateEvent(
+            roomId,
+            "io.element.widgets.layout",
+            {
+                widgets: {
+                    [DEMO_WIDGET_ID]: {
+                        container: "top",
+                        index: 1,
+                        width: 100,
+                        height: 0,
+                    },
+                },
+            },
+            "",
+        );
+
+        // open the room
+        await app.viewRoomByName(ROOM_NAME);
+
+        // approve capabilities
+        await page.locator(".mx_WidgetCapabilitiesPromptDialog").getByRole("button", { name: "Approve" }).click();
+
+        // bot creates a new room with 'm.room.topic'
+        const roomNew = await bot.createRoom({
+            name: "New room",
+            initial_state: [
+                {
+                    type: "m.room.topic",
+                    state_key: "",
+                    content: {
+                        topic: "topic initial",
+                    },
+                },
+            ],
+        });
+
+        await bot.inviteUser(roomNew, user.userId);
+
+        // widget should receive 'm.room.topic' event after invite
+        await waitForRoom(page, app.client, roomId, (room) => {
+            const events = room.getLiveTimeline().getEvents();
+            return events.some(
+                (e) =>
+                    e.getType() === "net.widget_echo" &&
+                    e.getContent().type === "m.room.topic" &&
+                    e.getContent().content.topic === "topic initial",
+            );
+        });
+
+        // update the topic
+        await bot.sendStateEvent(
+            roomNew,
+            "m.room.topic",
+            {
+                topic: "topic updated",
+            },
+            "",
+        );
+
+        await bot.inviteUser(roomNew, user.userId);
+
+        // widget should receive updated 'm.room.topic' event after re-invite
+        await waitForRoom(page, app.client, roomId, (room) => {
+            const events = room.getLiveTimeline().getEvents();
+            return events.some(
+                (e) =>
+                    e.getType() === "net.widget_echo" &&
+                    e.getContent().type === "m.room.topic" &&
+                    e.getContent().content.topic === "topic updated",
+            );
+        });
+    });
+});
@@ -0,0 +1,51 @@
+/*
+Copyright 2025 New Vector 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 { test as base, expect } from "../../element-web-test";
+import { Bot } from "../../pages/bot";
+
+const ROOM_NAME = "Jitsi Room";
+
+const test = base.extend<{
+    bot1: Bot;
+    bot2: Bot;
+}>({
+    bot2: async ({ page, homeserver }, use, testInfo) => {
+        const bot = new Bot(page, homeserver, { displayName: `ByteBot_${testInfo.testId}` });
+        await bot.prepareClient(); // eagerly register the bot
+        await use(bot);
+    },
+});
+
+test.describe("Jitsi Calls", () => {
+    test.use({
+        displayName: "Jimmy",
+        botCreateOpts: { displayName: "Bot", autoAcceptInvites: false },
+    });
+
+    test("should be able to pop out a jitsi widget", async ({ page, app, bot, bot2, context }) => {
+        const roomId = await app.client.createRoom({
+            name: ROOM_NAME,
+            invite: [bot.credentials.userId, bot2.credentials.userId],
+        });
+
+        await bot.joinRoom(roomId);
+        await bot2.joinRoom(roomId);
+
+        // open the room
+        await app.viewRoomByName(ROOM_NAME);
+
+        await page.getByRole("button", { name: "Video call" }).click();
+
+        const pagePromise = context.waitForEvent("page");
+
+        await page.getByRole("button", { name: "Popout widget" }).click();
+
+        const newPage = await pagePromise;
+        await expect(newPage.getByRole("button", { name: "Join Conference" })).toBeVisible();
+    });
+});
@@ -0,0 +1,111 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2022 Oliver Sand
+Copyright 2022 Nordeck IT + Consulting GmbH.
+
+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 { test, expect } from "../../element-web-test";
+
+const ROOM_NAME = "Test Room";
+const WIDGET_ID = "fake-widget";
+const WIDGET_HTML = `
+    <html lang="en">
+        <head>
+            <title>Fake Widget</title>
+        </head>
+        <body>
+            Hello World
+        </body>
+    </html>
+`;
+
+test.describe("Widget Layout", () => {
+    test.use({
+        displayName: "Sally",
+    });
+
+    let roomId: string;
+    let widgetUrl: string;
+    test.beforeEach(async ({ webserver, app, user }) => {
+        widgetUrl = webserver.start(WIDGET_HTML);
+
+        roomId = await app.client.createRoom({ name: ROOM_NAME });
+
+        // setup widget via state event
+        await app.client.sendStateEvent(
+            roomId,
+            "im.vector.modular.widgets",
+            {
+                id: WIDGET_ID,
+                creatorUserId: "somebody",
+                type: "widget",
+                name: "widget",
+                url: widgetUrl,
+            },
+            WIDGET_ID,
+        );
+
+        // set initial layout
+        await app.client.sendStateEvent(
+            roomId,
+            "io.element.widgets.layout",
+            {
+                widgets: {
+                    [WIDGET_ID]: {
+                        container: "top",
+                        index: 1,
+                        width: 100,
+                        height: 0,
+                    },
+                },
+            },
+            "",
+        );
+
+        // open the room
+        await app.viewRoomByName(ROOM_NAME);
+    });
+
+    test("should be set properly", { tag: "@screenshot" }, async ({ page }) => {
+        await expect(page.locator(".mx_AppsDrawer")).toMatchScreenshot("apps-drawer.png");
+    });
+
+    test("manually resize the height of the top container layout", async ({ page }) => {
+        const iframe = page.locator('iframe[title="widget"]');
+        expect((await iframe.boundingBox()).height).toBeLessThan(250);
+
+        await page.locator(".mx_AppsDrawer_resizer_container_handle").hover();
+        await page.mouse.down();
+        await page.mouse.move(0, 550);
+        await page.mouse.up();
+
+        expect((await iframe.boundingBox()).height).toBeGreaterThan(400);
+    });
+
+    test("programmatically resize the height of the top container layout", async ({ page, app }) => {
+        const iframe = page.locator('iframe[title="widget"]');
+        expect((await iframe.boundingBox()).height).toBeLessThan(250);
+
+        await app.client.sendStateEvent(
+            roomId,
+            "io.element.widgets.layout",
+            {
+                widgets: {
+                    [WIDGET_ID]: {
+                        container: "top",
+                        index: 1,
+                        width: 100,
+                        height: 500,
+                    },
+                },
+            },
+            "",
+        );
+
+        await expect.poll(async () => (await iframe.boundingBox()).height).toBeGreaterThan(400);
+    });
+});
@@ -0,0 +1,98 @@
+/*
+Copyright 2025 New Vector 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 { test, expect } from "../../element-web-test";
+
+const DEMO_WIDGET_ID = "demo-widget-id";
+const DEMO_WIDGET_NAME = "Demo Widget";
+const DEMO_WIDGET_TYPE = "demo";
+const ROOM_NAME = "Demo";
+
+const DEMO_WIDGET_HTML = `
+    <html lang="en">
+        <head>
+            <title>Demo Widget</title>
+            <script>
+                let sendEventCount = 0
+                window.onmessage = ev => {
+                    if (ev.data.action === 'capabilities') {
+                        window.parent.postMessage(Object.assign({
+                            response: {
+                                capabilities: [
+                                    "org.matrix.msc2762.timeline:*",
+                                    "org.matrix.msc2762.receive.state_event:m.room.topic",
+                                    "org.matrix.msc2762.send.event:net.widget_echo"
+                                ]
+                            },
+                        }, ev.data), '*');
+                    }
+                };
+            </script>
+        </head>
+    </html>
+`;
+
+test.describe("Widget permissions dialog", () => {
+    test.use({
+        displayName: "Mike",
+    });
+
+    let demoWidgetUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
+    });
+
+    test(
+        "should be updated if user is re-invited into the room with updated state event",
+        { tag: "@screenshot" },
+        async ({ page, app, user, axe }) => {
+            const roomId = await app.client.createRoom({
+                name: ROOM_NAME,
+            });
+
+            // setup widget via state event
+            await app.client.sendStateEvent(
+                roomId,
+                "im.vector.modular.widgets",
+                {
+                    id: DEMO_WIDGET_ID,
+                    creatorUserId: "somebody",
+                    type: DEMO_WIDGET_TYPE,
+                    name: DEMO_WIDGET_NAME,
+                    url: demoWidgetUrl,
+                },
+                DEMO_WIDGET_ID,
+            );
+
+            // set initial layout
+            await app.client.sendStateEvent(
+                roomId,
+                "io.element.widgets.layout",
+                {
+                    widgets: {
+                        [DEMO_WIDGET_ID]: {
+                            container: "top",
+                            index: 1,
+                            width: 100,
+                            height: 0,
+                        },
+                    },
+                },
+                "",
+            );
+
+            // open the room
+            await app.viewRoomByName(ROOM_NAME);
+
+            axe.disableRules(["color-contrast", "nested-interactive"]); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot(
+                "widget-capabilites-prompt.png",
+            );
+        },
+    );
+});
@@ -0,0 +1,202 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
+
+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 { Page } from "@playwright/test";
+import { test, expect } from "../../element-web-test";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
+import { type Credentials } from "../../plugins/homeserver";
+import type { UserWidget } from "../../../src/utils/WidgetUtils-types.ts";
+import { readSampleFileSync } from "../../sample-files";
+
+const STICKER_PICKER_WIDGET_ID = "fake-sticker-picker";
+const STICKER_PICKER_WIDGET_NAME = "Fake Stickers";
+const STICKER_NAME = "Test Sticker";
+const ROOM_NAME_1 = "Sticker Test";
+const ROOM_NAME_2 = "Sticker Test Two";
+const STICKER_IMAGE = readSampleFileSync("riot.png", null);
+
+function getStickerMessage(contentUri: string, mimetype: string): string {
+    return JSON.stringify({
+        action: "m.sticker",
+        api: "fromWidget",
+        data: {
+            name: "teststicker",
+            description: STICKER_NAME,
+            file: "test.png",
+            content: {
+                body: STICKER_NAME,
+                info: {
+                    h: 480,
+                    mimetype: mimetype,
+                    size: 13818,
+                    w: 480,
+                },
+                msgtype: "m.sticker",
+                url: contentUri,
+            },
+        },
+        requestId: "1",
+        widgetId: STICKER_PICKER_WIDGET_ID,
+    });
+}
+
+function getWidgetHtml(contentUri: string, mimetype: string) {
+    const stickerMessage = getStickerMessage(contentUri, mimetype);
+    return `
+    <html lang="en">
+        <head>
+            <title>Fake Sticker Picker</title>
+            <script>
+                window.onmessage = ev => {
+                    if (ev.data.action === 'capabilities') {
+                        window.parent.postMessage(Object.assign({
+                            response: {
+                                capabilities: ["m.sticker"]
+                            },
+                        }, ev.data), '*');
+                    }
+                };
+            </script>
+        </head>
+        <body>
+            <button name="Send" id="sendsticker">Press for sticker</button>
+            <script>
+                document.getElementById('sendsticker').onclick = () => {
+                    window.parent.postMessage(${stickerMessage}, '*')
+                };
+            </script>
+        </body>
+    </html>
+`;
+}
+async function openStickerPicker(app: ElementAppPage) {
+    const options = await app.openMessageComposerOptions();
+    await options.getByRole("menuitem", { name: "Sticker" }).click();
+}
+
+async function sendStickerFromPicker(page: Page) {
+    const iframe = page.frameLocator(`iframe[title="${STICKER_PICKER_WIDGET_NAME}"]`);
+    await iframe.locator("#sendsticker").click();
+
+    // Sticker picker should close itself after sending.
+    await expect(page.locator(".mx_AppTileFullWidth#stickers")).not.toBeVisible();
+}
+
+async function expectTimelineSticker(page: Page, serverName: string, roomId: string, contentUri: string) {
+    const contentId = contentUri.split("/").slice(-1)[0];
+    // Make sure it's in the right room
+    await expect(page.locator(".mx_EventTile_sticker > a")).toHaveAttribute("href", new RegExp(`/${roomId}/`));
+
+    // Make sure the image points at the sticker image. We will briefly show it
+    // using the thumbnail URL, but as soon as that fails, we will switch to the
+    // download URL.
+    await expect(page.locator(`img[alt="${STICKER_NAME}"]`)).toHaveAttribute(
+        "src",
+        new RegExp(`/${serverName}/${contentId}`),
+    );
+}
+
+async function expectFileTile(page: Page, roomId: string, contentUri: string) {
+    await expect(page.locator(".mx_MFileBody [data-type='info']")).toContainText(STICKER_NAME);
+}
+
+async function setWidgetAccountData(
+    app: ElementAppPage,
+    user: Credentials,
+    stickerPickerUrl: string,
+    provideCreatorUserId: boolean = true,
+) {
+    await app.client.setAccountData("m.widgets", {
+        [STICKER_PICKER_WIDGET_ID]: {
+            content: {
+                type: "m.stickerpicker",
+                name: STICKER_PICKER_WIDGET_NAME,
+                url: stickerPickerUrl,
+                creatorUserId: provideCreatorUserId ? user.userId : undefined,
+            },
+            sender: user.userId,
+            state_key: STICKER_PICKER_WIDGET_ID,
+            type: "m.widget",
+            id: STICKER_PICKER_WIDGET_ID,
+        } as unknown as UserWidget,
+    });
+}
+
+test.describe("Stickers", { tag: ["@no-firefox", "@no-webkit"] }, () => {
+    test.use({
+        displayName: "Sally",
+        room: async ({ app }, use) => {
+            const roomId = await app.client.createRoom({ name: ROOM_NAME_1 });
+            await use({ roomId });
+        },
+    });
+
+    // We spin up a web server for the sticker picker so that we're not testing to see if
+    // sysadmins can deploy sticker pickers on the same Element domain - we actually want
+    // to make sure that cross-origin postMessage works properly. This makes it difficult
+    // to write the test though, as we have to juggle iframe logistics.
+    //
+    // See sendStickerFromPicker() for more detail on iframe comms.
+    let stickerPickerUrl: string;
+
+    test("should send a sticker to multiple rooms", async ({ webserver, page, app, user, room }) => {
+        const roomId2 = await app.client.createRoom({ name: ROOM_NAME_2 });
+        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
+        const widgetHtml = getWidgetHtml(contentUri, "image/png");
+        stickerPickerUrl = webserver.start(widgetHtml);
+        await setWidgetAccountData(app, user, stickerPickerUrl);
+
+        await app.viewRoomByName(ROOM_NAME_1);
+        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await openStickerPicker(app);
+        await sendStickerFromPicker(page);
+        await expectTimelineSticker(page, user.homeServer, room.roomId, contentUri);
+
+        // Ensure that when we switch to a different room that the sticker
+        // goes to the right place
+        await app.viewRoomByName(ROOM_NAME_2);
+        await expect(page).toHaveURL(`/#/room/${roomId2}`);
+        await openStickerPicker(app);
+        await sendStickerFromPicker(page);
+        await expectTimelineSticker(page, user.homeServer, roomId2, contentUri);
+    });
+
+    test("should handle a sticker picker widget missing creatorUserId", async ({
+        webserver,
+        page,
+        app,
+        user,
+        room,
+    }) => {
+        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
+        const widgetHtml = getWidgetHtml(contentUri, "image/png");
+        stickerPickerUrl = webserver.start(widgetHtml);
+        await setWidgetAccountData(app, user, stickerPickerUrl, false);
+
+        await app.viewRoomByName(ROOM_NAME_1);
+        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await openStickerPicker(app);
+        await sendStickerFromPicker(page);
+        await expectTimelineSticker(page, user.homeServer, room.roomId, contentUri);
+    });
+
+    test("should render invalid mimetype as a file", async ({ webserver, page, app, user, room }) => {
+        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, {
+            type: "application/octet-stream",
+        });
+        const widgetHtml = getWidgetHtml(contentUri, "application/octet-stream");
+        stickerPickerUrl = webserver.start(widgetHtml);
+        await setWidgetAccountData(app, user, stickerPickerUrl);
+
+        await app.viewRoomByName(ROOM_NAME_1);
+        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await openStickerPicker(app);
+        await sendStickerFromPicker(page);
+        await expectFileTile(page, room.roomId, contentUri);
+    });
+});
@@ -0,0 +1,161 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2022 Mikhail Aheichyk
+Copyright 2022 Nordeck IT + Consulting GmbH.
+
+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 { IWidget } from "matrix-widget-api/src/interfaces/IWidget";
+import type { MatrixEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+import { test, expect } from "../../element-web-test";
+import { type Client } from "../../pages/client";
+
+const DEMO_WIDGET_ID = "demo-widget-id";
+const DEMO_WIDGET_NAME = "Demo Widget";
+const DEMO_WIDGET_TYPE = "demo";
+const ROOM_NAME = "Demo";
+
+const DEMO_WIDGET_HTML = `
+    <html lang="en">
+        <head>
+            <title>Demo Widget</title>
+            <script>
+                window.onmessage = ev => {
+                    if (ev.data.action === 'capabilities') {
+                        window.parent.postMessage(Object.assign({
+                            response: {
+                                capabilities: []
+                            },
+                        }, ev.data), '*');
+                    }
+                };
+            </script>
+        </head>
+        <body>
+            <button id="demo">Demo</button>
+        </body>
+    </html>
+`;
+
+// mostly copied from src/utils/WidgetUtils.waitForRoomWidget with small modifications
+async function waitForRoomWidget(client: Client, widgetId: string, roomId: string, add: boolean): Promise<void> {
+    await client.evaluate(
+        (matrixClient, { widgetId, roomId, add }) => {
+            return new Promise<void>((resolve, reject) => {
+                function eventsInIntendedState(evList: MatrixEvent[]) {
+                    const widgetPresent = evList.some((ev) => {
+                        return ev.getContent() && ev.getContent()["id"] === widgetId;
+                    });
+                    if (add) {
+                        return widgetPresent;
+                    } else {
+                        return !widgetPresent;
+                    }
+                }
+
+                const room = matrixClient.getRoom(roomId);
+
+                const startingWidgetEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
+                if (eventsInIntendedState(startingWidgetEvents)) {
+                    resolve();
+                    return;
+                }
+
+                function onRoomStateEvents(ev: MatrixEvent) {
+                    if (ev.getRoomId() !== roomId || ev.getType() !== "im.vector.modular.widgets") return;
+
+                    const currentWidgetEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
+
+                    if (eventsInIntendedState(currentWidgetEvents)) {
+                        matrixClient.removeListener("RoomState.events" as RoomStateEvent.Events, onRoomStateEvents);
+                        resolve();
+                    }
+                }
+
+                matrixClient.on("RoomState.events" as RoomStateEvent.Events, onRoomStateEvents);
+            });
+        },
+        { widgetId, roomId, add },
+    );
+}
+
+test.describe("Widget PIP", () => {
+    test.use({
+        displayName: "Mike",
+        botCreateOpts: { displayName: "Bot", autoAcceptInvites: false },
+    });
+
+    let demoWidgetUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
+    });
+
+    for (const userRemove of ["leave", "kick", "ban"] as const) {
+        test(`should be closed on ${userRemove}`, async ({ page, app, bot, user }) => {
+            const roomId = await app.client.createRoom({
+                name: ROOM_NAME,
+                invite: [bot.credentials.userId],
+            });
+
+            // sets bot to Admin and user to Moderator
+            await app.client.sendStateEvent(roomId, "m.room.power_levels", {
+                users: {
+                    [user.userId]: 50,
+                    [bot.credentials.userId]: 100,
+                },
+            });
+
+            // bot joins the room
+            await bot.joinRoom(roomId);
+
+            // setup widget via state event
+            const content: IWidget = {
+                id: DEMO_WIDGET_ID,
+                creatorUserId: "somebody",
+                type: DEMO_WIDGET_TYPE,
+                name: DEMO_WIDGET_NAME,
+                url: demoWidgetUrl,
+            };
+            await app.client.sendStateEvent(roomId, "im.vector.modular.widgets", content, DEMO_WIDGET_ID);
+
+            // open the room
+            await app.viewRoomByName(ROOM_NAME);
+
+            // wait for widget state event
+            await waitForRoomWidget(app.client, DEMO_WIDGET_ID, roomId, true);
+
+            // activate widget in pip mode
+            await page.evaluate(
+                ({ widgetId, roomId }) => {
+                    window.mxActiveWidgetStore.setWidgetPersistence(widgetId, roomId, true);
+                },
+                {
+                    widgetId: DEMO_WIDGET_ID,
+                    roomId,
+                },
+            );
+
+            // checks that pip window is opened
+            await expect(page.getByTestId("widget-pip-container")).toBeVisible();
+
+            // checks that widget is opened in pip
+            const iframe = page.frameLocator(`iframe[title="${DEMO_WIDGET_NAME}"]`);
+            await expect(iframe.locator("#demo")).toBeVisible();
+
+            const userId = user.userId;
+            if (userRemove == "leave") {
+                await app.client.leave(roomId);
+            } else if (userRemove == "kick") {
+                await bot.kick(roomId, userId);
+            } else if (userRemove == "ban") {
+                await bot.ban(roomId, userId);
+            }
+
+            // checks that pip window is closed
+            await expect(iframe.getByTestId("widget-pip-container")).not.toBeVisible();
+        });
+    }
+});