Add playwright test to check EW error screen dismiss on room switch

locales/en/app.json

@@ -88,6 +88,7 @@
     },
     "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
+    "throw_error_button": "Throw test error",
     "url_params": "URL parameters"
   },
   "disconnected_banner": "Connectivity to the server has been lost.",

playwright/widget/call-error-room-switch.spec.ts

@@ -0,0 +1,64 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+
+import { widgetTest } from "../fixtures/widget-user.ts";
+import { TestHelpers } from "./test-helpers.ts";
+
+widgetTest.skip(
+  ({ browserName }) => browserName === "firefox",
+  "Widget specs only run on Chromium, see simple-create.spec.ts",
+);
+
+widgetTest(
+  "Switching rooms away from a crashed call dismisses it for good",
+  async ({ asWidget }) => {
+    test.slow();
+    const { brooks } = asWidget;
+    const page = brooks.page;
+    const call = page.locator('iframe[title="Element Call"]');
+    const callFrame = call.contentFrame();
+
+    // Somewhere to switch to once the call has crashed
+    await TestHelpers.createRoom("Other Room", page);
+    await TestHelpers.switchToRoomNamed(page, "Welcome Room");
+
+    await TestHelpers.startCallInCurrentRoom(page);
+    // A dev server compiles the widget on first load
+    await expect(callFrame.getByTestId("lobby_joinCall")).toBeVisible({
+      timeout: 30000,
+    });
+    await TestHelpers.joinCallFromLobby(page);
+    await expect(
+      callFrame.getByRole("button", { name: "End call" }),
+    ).toBeVisible();
+
+    // Crash the call from its developer settings
+    await callFrame.getByRole("button", { name: "Settings" }).click();
+    await callFrame.getByRole("tab", { name: "Preferences" }).click();
+    await callFrame.getByText("Developer mode", { exact: true }).check();
+    await callFrame.getByRole("tab", { name: "Developer" }).click();
+    await callFrame.getByRole("button", { name: "Throw test error" }).click();
+    await expect(callFrame.getByText("Something went wrong")).toBeVisible();
+
+    // Showing the call collapses the room list
+    await TestHelpers.expandRoomList(page);
+    await TestHelpers.switchToRoomNamed(page, "Other Room");
+    await expect(
+      page.getByRole("banner").getByRole("heading", { name: "Other Room" }),
+    ).toBeVisible();
+
+    // The crashed call is gone and stays gone: no restart, no reconnect
+    await expect(call).toHaveCount(0);
+    await page.waitForTimeout(5000);
+    await expect(call).toHaveCount(0);
+    await expect(
+      page.getByRole("banner").getByRole("heading", { name: "Other Room" }),
+    ).toBeVisible();
+  },
+);

src/settings/DeveloperSettingsTab.test.tsx

@@ -30,6 +30,9 @@ import {
 } from "@element-hq/matrixrtc-sdk";
 import type * as MatrixRTCSdk from "@element-hq/matrixrtc-sdk";
 import { exampleTransport, mockConfig } from "../utils/test";
+import { GroupCallErrorBoundary } from "../room/GroupCallErrorBoundary";
+import { LeaveToHomeProvider } from "../LeaveToHomeContext";
+import { ElementCallError, ErrorCode } from "../utils/errors";
 
 // Mock url params hook to avoid environment-dependent snapshot churn.
 vi.mock("../UrlParams", () => ({
@@ -493,4 +496,38 @@ describe("DeveloperSettingsTab", () => {
       );
     });
   });
+  describe("throw test error", () => {
+    it("throws an ElementCallError that the error boundary shows", async () => {
+      const user = userEvent.setup();
+      const client = createMockMatrixClient();
+      const onError = vi.fn();
+
+      render(
+        <LeaveToHomeProvider value={vi.fn()}>
+          <GroupCallErrorBoundary
+            onError={onError}
+            recoveryActionHandler={vi.fn()}
+          >
+            <TooltipProvider>
+              <DeveloperSettingsTab
+                client={client}
+                env={{} as unknown as ImportMetaEnv}
+                vm={outOfCallDeveloperSettingsTabViewModel}
+              />
+            </TooltipProvider>
+          </GroupCallErrorBoundary>
+        </LeaveToHomeProvider>,
+      );
+
+      await user.click(
+        screen.getByRole("button", { name: "Throw test error" }),
+      );
+
+      expect(await screen.findByText("Something went wrong")).toBeVisible();
+      expect(onError).toHaveBeenCalledOnce();
+      const error = onError.mock.calls[0][0] as unknown;
+      expect(error).toBeInstanceOf(ElementCallError);
+      expect((error as ElementCallError).code).toBe(ErrorCode.UNKNOWN_ERROR);
+    });
+  });
 });

src/settings/DeveloperSettingsTab.tsx

@@ -22,6 +22,7 @@ import {
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
+  Button,
   EditInPlace,
   ErrorMessage,
   Root as Form,
@@ -72,6 +73,7 @@ import {
 } from "@element-hq/matrixrtc-sdk";
 import { useBehavior } from "../useBehavior";
 import { type ViewModel } from "../state/ViewModel.ts";
+import { type ElementCallError, UnknownCallError } from "../utils/errors.ts";
 
 /**
  * The state of MatrixRTC's media key rotation.
@@ -189,6 +191,22 @@ export const DeveloperSettingsTab: FC<Props> = ({
 
   const urlParams = useUrlParams();
 
+  // An error thrown from a click handler never reaches an error boundary, so
+  // the button only records it and the next render throws it instead.
+  const [errorToThrow, setErrorToThrow] = useState<ElementCallError | null>(
+    null,
+  );
+  const throwTestError = useCallback(
+    () =>
+      setErrorToThrow(
+        new UnknownCallError(
+          new Error("Test error thrown from the developer settings"),
+        ),
+      ),
+    [],
+  );
+  if (errorToThrow !== null) throw errorToThrow;
+
   const MediaQualitySettings: React.FC<{
     id: string;
     header: string;
@@ -649,6 +667,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
       <Separator />
       <AudioProcessingSettings />
       <Separator />
+      <Button kind="secondary" destructive onClick={throwTestError}>
+        {t("developer_mode.throw_error_button")}
+      </Button>
+      <Separator />
       <p>{t("developer_mode.environment_variables")}</p>
       <pre className={styles.pre}>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -635,6 +635,21 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     data-orientation="horizontal"
     role="separator"
   />
+  <button
+    class="_button_1nw83_8 _destructive_1nw83_110"
+    data-kind="secondary"
+    data-size="lg"
+    role="button"
+    tabindex="0"
+  >
+    Throw test error
+  </button>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
   <p>
     Environment variables
   </p>