Test all pairs of rtc mode in federated calls

playwright/widget/federated-call.test.ts

@@ -8,64 +8,73 @@ Please see LICENSE in the repository root for full details.
 import { expect, test } from "@playwright/test";
 
 import { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers";
+import { HOST1, HOST2, type RtcMode, TestHelpers } from "./test-helpers";
 
-widgetTest(
+const modePairs: [RtcMode, RtcMode][] = [
-  "Test federated call default rtc mode",
+  ["compat", "compat"],
-  async ({ addUser, browserName }) => {
+  ["legacy", "legacy"],
-    test.skip(
+  ["legacy", "compat"],
-      browserName === "firefox",
+  ["compat", "legacy"],
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+];
-    );
 
-    const florian = await addUser("floriant", HOST1);
+modePairs.forEach(([rtcMode1, rtcMode2]) => {
-    const timo = await addUser("timo", HOST2);
+  widgetTest(
+    `Test federated call with rtc modes ${rtcMode1} and ${rtcMode2}`,
+    async ({ addUser, browserName }) => {
+      test.skip(
+        browserName === "firefox",
+        "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
+      );
 
-    const roomName = "Call Room";
+      const florian = await addUser("floriant", HOST1);
+      const timo = await addUser("timo", HOST2);
 
-    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
+      const roomName = "Call Room";
 
-    await TestHelpers.acceptRoomInvite(roomName, timo.page);
+      await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
 
-    await florian.page.pause();
+      await TestHelpers.acceptRoomInvite(roomName, timo.page);
 
-    await TestHelpers.setEmbeddedElementCallRtcMode(florian.page, "legacy");
+      await florian.page.pause();
-    await TestHelpers.setEmbeddedElementCallRtcMode(timo.page, "compat");
 
-    await TestHelpers.startCallInCurrentRoom(florian.page, false);
+      await TestHelpers.setEmbeddedElementCallRtcMode(florian.page, rtcMode1);
-    await TestHelpers.joinCallFromLobby(florian.page);
+      await TestHelpers.setEmbeddedElementCallRtcMode(timo.page, rtcMode2);
 
-    // timo joins
+      await TestHelpers.startCallInCurrentRoom(florian.page, false);
-    await TestHelpers.joinCallInCurrentRoom(timo.page);
+      await TestHelpers.joinCallFromLobby(florian.page);
 
-    // We should see 2 video tiles everywhere now
+      // timo joins
-    for (const user of [timo, florian]) {
+      await TestHelpers.joinCallInCurrentRoom(timo.page);
-      const frame = user.page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame();
-      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
 
-      // There are no other options than to wait for all media to be ready?
+      // We should see 2 video tiles everywhere now
-      // Or it is too flaky :/
+      for (const user of [timo, florian]) {
-      await user.page.waitForTimeout(3000);
+        const frame = user.page
-      // No one should be waiting for media
+          .locator('iframe[title="Element Call"]')
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
+          .contentFrame();
+        await expect(frame.getByTestId("videoTile")).toHaveCount(2);
 
-      // There should be 5 video elements, visible and autoplaying
+        // There are no other options than to wait for all media to be ready?
-      const videoElements = await frame.locator("video").all();
+        // Or it is too flaky :/
-      expect(videoElements.length).toBe(2);
+        await user.page.waitForTimeout(3000);
+        // No one should be waiting for media
+        await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
 
-      const blockDisplayCount = await frame
+        // There should be 5 video elements, visible and autoplaying
-        .locator("video")
+        const videoElements = await frame.locator("video").all();
-        .evaluateAll(
+        expect(videoElements.length).toBe(2);
-          (videos: Element[]) =>
-            videos.filter(
-              (v: Element) => window.getComputedStyle(v).display === "block",
-            ).length,
-        );
-      expect(blockDisplayCount).toBe(2);
-    }
 
-    // await florian.page.pause();
+        const blockDisplayCount = await frame
-  },
+          .locator("video")
-);
+          .evaluateAll(
+            (videos: Element[]) =>
+              videos.filter(
+                (v: Element) => window.getComputedStyle(v).display === "block",
+              ).length,
+          );
+        expect(blockDisplayCount).toBe(2);
+      }
+
+      // await florian.page.pause();
+    },
+  );
+});

playwright/widget/test-helpers.ts

@@ -18,6 +18,8 @@ const PASSWORD = "foobarbaz1!";
 export const HOST1 = "https://app.m.localhost/#/welcome";
 export const HOST2 = "https://app.othersite.m.localhost/#/welcome";
 
+export type RtcMode = "legacy" | "compat" | "2_0";
+
 export class TestHelpers {
   public static async startCallInCurrentRoom(
     page: Page,
@@ -183,7 +185,7 @@ export class TestHelpers {
    */
   public static async setEmbeddedElementCallRtcMode(
     page: Page,
-    mode: "legacy" | "compat" | "2_0",
+    mode: RtcMode,
   ): Promise<void> {
     await page.getByRole("button", { name: "Video call" }).click();
     await page.getByRole("menuitem", { name: "Element Call" }).click();
@@ -197,9 +199,9 @@ export class TestHelpers {
 
     // Move to Developer tab now
     await iframe.getByRole("tab", { name: "Developer" }).click();
-    if (mode === "legacy") {
+    if (mode == "legacy") {
       await iframe.getByText("Legacy: state events").click();
-    } else if (mode === "2_0") {
+    } else if (mode == "2_0") {
       await iframe.getByText("Matrix 2.0").click();
     } else {
       // compat