mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-10 21:55:19 +00:00
Valere
ace78de749
The widget tests cannot reach what makes a component different, because the iframe used to guarantee it: that Element Call stays inside the space it was given, and that two of them can exist in one page. So the development harness gets driven by Playwright. Three tests. Two components in one page holding a real call between two devices of one account. The settings dialog and the reaction picker staying inside the container the host gave, asserted by bounding box. And the host bridge reporting in both directions, including a host-initiated mute coming back as a report of the new state. The containment test is the one worth having: both of the escapes found by running the harness by hand — the settings dialog centred on the window, and the reaction picker at 82vh landing below the container — would have failed it, and neither was visible to typechecking, linting or the unit tests. Users and rooms are created through the Synapse admin and client-server APIs rather than by driving an interface, and the harness now takes its credentials from its own query string so that a test can say which account and room to use. A host reading its own URL is proper; it was Element Call doing so that was the mistake. Playwright gains a second web server for the harness on port 3001, a Vite dev server whether or not the app itself is served from Docker, since the harness is a development page with nothing to build.
111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
/*
|
|
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, type Locator, type Page } from "@playwright/test";
|
|
|
|
import { SynapseAdmin } from "../utils/synapse-admin.ts";
|
|
|
|
/**
|
|
* Where the component harness is served — `component/dev`, which embeds Element
|
|
* Call the way a host application would. Not the `baseURL` the rest of the
|
|
* suite uses: these tests drive a page that contains Element Call rather than
|
|
* Element Call itself.
|
|
*/
|
|
export const COMPONENT_HARNESS_URL = "https://localhost:3001";
|
|
|
|
const HOMESERVER_URL = "https://synapse.m.localhost";
|
|
const PASSWORD = "foobarbaz1!";
|
|
|
|
/**
|
|
* Registers a user through the Synapse admin API and creates a room for it to
|
|
* call in, without touching a browser. The harness signs into this account
|
|
* twice, giving two devices in one page and so a real call between the two
|
|
* components.
|
|
*/
|
|
export async function createUserAndRoom(
|
|
name: string,
|
|
): Promise<{ username: string; roomId: string }> {
|
|
const username = `${name}_${Date.now()}`;
|
|
const { access_token: accessToken } = await SynapseAdmin.forHomeserver(
|
|
HOMESERVER_URL,
|
|
).registerUser(username, PASSWORD, name);
|
|
|
|
const response = await fetch(
|
|
`${HOMESERVER_URL}/_matrix/client/v3/createRoom`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: `Bearer ${accessToken}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ name: `${name}'s call`, preset: "private_chat" }),
|
|
},
|
|
);
|
|
if (!response.ok)
|
|
throw new Error(
|
|
`Could not create a room: ${response.status} ${await response.text()}`,
|
|
);
|
|
const { room_id: roomId } = (await response.json()) as { room_id: string };
|
|
|
|
return { username, roomId };
|
|
}
|
|
|
|
/**
|
|
* Opens the harness signed in as the given user, and waits for both embedded
|
|
* calls to appear.
|
|
*
|
|
* @returns The two containers the host gave Element Call, in order.
|
|
*/
|
|
export async function startHarness(
|
|
page: Page,
|
|
username: string,
|
|
roomId: string,
|
|
): Promise<Locator> {
|
|
const query = new URLSearchParams({
|
|
homeserver: HOMESERVER_URL,
|
|
username,
|
|
password: PASSWORD,
|
|
room: roomId,
|
|
});
|
|
await page.goto(`${COMPONENT_HARNESS_URL}/?${query.toString()}`);
|
|
await page.getByRole("button", { name: "Start" }).click();
|
|
|
|
const panes = page.getByTestId("call-pane");
|
|
// Two logins, two crypto setups and two initial syncs happen first
|
|
await expect(panes).toHaveCount(2, { timeout: 120_000 });
|
|
return panes;
|
|
}
|
|
|
|
/**
|
|
* Asserts that one element is drawn entirely inside another.
|
|
*
|
|
* This is the check that being a component rather than an iframe costs us: an
|
|
* iframe could not paint outside itself whatever its stylesheets said, whereas
|
|
* a component shares the page and has to be made to stay put.
|
|
*/
|
|
export async function expectWithin(
|
|
inner: Locator,
|
|
outer: Locator,
|
|
): Promise<void> {
|
|
await expect(inner).toBeVisible();
|
|
const innerBox = await inner.boundingBox();
|
|
const outerBox = await outer.boundingBox();
|
|
if (innerBox === null || outerBox === null)
|
|
throw new Error("Expected both elements to be laid out");
|
|
|
|
// A pixel of slack, for subpixel layout
|
|
const slack = 1;
|
|
expect(innerBox.x).toBeGreaterThanOrEqual(outerBox.x - slack);
|
|
expect(innerBox.y).toBeGreaterThanOrEqual(outerBox.y - slack);
|
|
expect(innerBox.x + innerBox.width).toBeLessThanOrEqual(
|
|
outerBox.x + outerBox.width + slack,
|
|
);
|
|
expect(innerBox.y + innerBox.height).toBeLessThanOrEqual(
|
|
outerBox.y + outerBox.height + slack,
|
|
);
|
|
}
|