fix: Regression on default mutestate for voicecall + end-2-end tests

playwright/fixtures/widget-user.ts

@@ -17,6 +17,7 @@ import type { MatrixClient } from "matrix-js-sdk";
 
 export type UserBaseFixture = {
   mxId: string;
+  displayName: string;
   page: Page;
   clientHandle: JSHandle<MatrixClient>;
 };
@@ -28,6 +29,7 @@ export type BaseWidgetSetup = {
 
 export interface MyFixtures {
   asWidget: BaseWidgetSetup;
+  callType: "room" | "dm";
 }
 
 const PASSWORD = "foobarbaz1!";
@@ -145,25 +147,27 @@ async function registerUser(
 }
 
 export const widgetTest = test.extend<MyFixtures>({
-  asWidget: async ({ browser, context }, pUse) => {
+  // allow per-test override: `widgetTest.use({ callType: "dm" })`
+  callType: ["room", { option: true }],
+  asWidget: async ({ browser, context, callType }, pUse) => {
     await context.route(`http://localhost:8081/config.json*`, async (route) => {
       await route.fulfill({ json: CONFIG_JSON });
     });
 
-    const userA = `brooks_${Date.now()}`;
-    const userB = `whistler_${Date.now()}`;
+    const brooksDisplayName = `brooks_${Date.now()}`;
+    const whistlerDisplayName = `whistler_${Date.now()}`;
 
     // Register users
     const {
       page: ewPage1,
       clientHandle: brooksClientHandle,
       mxId: brooksMxId,
-    } = await registerUser(browser, userA);
+    } = await registerUser(browser, brooksDisplayName);
     const {
       page: ewPage2,
       clientHandle: whistlerClientHandle,
       mxId: whistlerMxId,
-    } = await registerUser(browser, userB);
+    } = await registerUser(browser, whistlerDisplayName);
 
     // Invite the second user
     await ewPage1
@@ -171,37 +175,60 @@ export const widgetTest = test.extend<MyFixtures>({
       .getByRole("button", { name: "New conversation" })
       .click();
 
-    await ewPage1.getByRole("menuitem", { name: "New Room" }).click();
-    await ewPage1.getByRole("textbox", { name: "Name" }).fill("Welcome Room");
-    await ewPage1.getByRole("button", { name: "Create room" }).click();
-    await expect(ewPage1.getByText("You created this room.")).toBeVisible();
-    await expect(ewPage1.getByText("Encryption enabled")).toBeVisible();
+    if (callType === "room") {
 
-    await ewPage1
-      .getByRole("button", { name: "Invite to this room", exact: true })
-      .click();
-    await expect(
-      ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
-    ).toBeVisible();
+      await ewPage1.getByRole("menuitem", { name: "New Room" }).click();
+      await ewPage1.getByRole("textbox", { name: "Name" }).fill("Welcome Room");
+      await ewPage1.getByRole("button", { name: "Create room" }).click();
+      await expect(ewPage1.getByText("You created this room.")).toBeVisible();
+      await expect(ewPage1.getByText("Encryption enabled")).toBeVisible();
 
-    // To get the invite textbox we need to specifically select within the
-    // dialog, since there is another textbox in the background (the message
-    // composer). In theory the composer shouldn't be visible to Playwright at
-    // all because the invite dialog has trapped focus, but the focus trap
-    // doesn't quite work right on Firefox.
-    await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
-    await ewPage1.getByRole("dialog").getByRole("textbox").click();
-    await ewPage1.getByRole("button", { name: "Invite" }).click();
+      await ewPage1
+        .getByRole("button", { name: "Invite to this room", exact: true })
+        .click();
+      await expect(
+        ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
+      ).toBeVisible();
 
-    // Accept the invite
-    await expect(
-      ewPage2.getByRole("option", { name: "Welcome Room" }),
-    ).toBeVisible();
-    await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
-    await ewPage2.getByRole("button", { name: "Accept" }).click();
-    await expect(
-      ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }),
-    ).toBeVisible();
+      // To get the invite textbox we need to specifically select within the
+      // dialog, since there is another textbox in the background (the message
+      // composer). In theory the composer shouldn't be visible to Playwright at
+      // all because the invite dialog has trapped focus, but the focus trap
+      // doesn't quite work right on Firefox.
+      await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
+      await ewPage1.getByRole("dialog").getByRole("textbox").click();
+      await ewPage1.getByRole("button", { name: "Invite" }).click();
+
+      // Accept the invite
+      await expect(
+        ewPage2.getByRole("option", { name: "Welcome Room" }),
+      ).toBeVisible();
+      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
+      await ewPage2.getByRole("button", { name: "Accept" }).click();
+      await expect(
+        ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }),
+      ).toBeVisible();
+    } else if (callType === "dm") {
+      await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
+      await ewPage1.getByRole('textbox', { name: 'Search' }).click();
+      await ewPage1.getByRole('textbox', { name: 'Search' }).fill(whistlerMxId);
+      await ewPage1.getByRole("button", { name: "Go" }).click();
+
+      // Wait and send the first message to create the DM
+      await expect(ewPage1.getByText(/Send your first message to invite/)).toBeVisible();
+
+      await ewPage1.locator('.mx_BasicMessageComposer_input > div').click();
+      await ewPage1.getByRole('textbox', { name: 'Send a message…' }).fill('Hello!');
+      await ewPage1.getByRole("button", { name: "Send message" }).click();
+
+      await expect(ewPage1.getByText('This is the beginning of your')).toBeVisible();
+
+
+      // Accept the DM invite from brooks
+      // This how playwright record selects the DM invite in the room list
+      await ewPage2.getByRole('option', { name: 'Open room' }).click();
+      await ewPage2.getByRole('button', { name: 'Start chatting' }).click();
+    }
 
     // Renamed use to pUse, as a workaround for eslint error that was thinking this use was a react use.
     await pUse({
@@ -209,11 +236,13 @@ export const widgetTest = test.extend<MyFixtures>({
         mxId: brooksMxId,
         page: ewPage1,
         clientHandle: brooksClientHandle,
+        displayName: brooksDisplayName
       },
       whistler: {
         mxId: whistlerMxId,
         page: ewPage2,
         clientHandle: whistlerClientHandle,
+        displayName: whistlerDisplayName
       },
     });
   },