test(desktop): stabilize flaky smoke interactions

Allow relay initialization polling to wait for its seam and drive section reordering with deterministic pointer events.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
This commit is contained in:
Thomas Petersen
2026-08-15 19:43:21 -04:00
parent 424376a6c8
commit e0918e8fc2
2 changed files with 68 additions and 11 deletions
+1 -2
View File
@@ -186,8 +186,7 @@ test("failed initial relay dial retries automatically", async ({ page }) => {
__BUZZ_E2E_GET_RELAY_CONNECTION_STATE__?: () => string;
}
).__BUZZ_E2E_GET_RELAY_CONNECTION_STATE__;
if (!getState) throw new Error("Relay state seam is not installed.");
return getState();
return getState?.() ?? null;
}),
{ timeout: 10_000 },
)
+67 -9
View File
@@ -32,15 +32,69 @@ async function seedChannelSections(page: Page) {
// the sequence dnd-kit needs to fire onDragEnd and commit the reorder.
async function dragOver(page: Page, source: Locator, target: Locator) {
const from = await source.boundingBox();
const to = await target.boundingBox();
if (!from || !to) throw new Error("drag handles not laid out");
await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2);
await page.mouse.down();
await page.mouse.move(from.x + from.width / 2, from.y + from.height / 2 + 10);
await page.mouse.move(to.x + to.width / 2, to.y + to.height / 2, {
steps: 10,
if (!from) throw new Error("drag source not laid out");
const pointer = {
x: from.x + from.width / 2,
y: from.y + from.height / 2,
};
await source.dispatchEvent("pointerdown", {
button: 0,
buttons: 1,
clientX: pointer.x,
clientY: pointer.y,
isPrimary: true,
pointerId: 1,
pointerType: "mouse",
});
await page.mouse.up();
await page.evaluate(({ x, y }) => {
document.dispatchEvent(
new PointerEvent("pointermove", {
bubbles: true,
buttons: 1,
clientX: x,
clientY: y + 8,
isPrimary: true,
pointerId: 1,
pointerType: "mouse",
}),
);
}, pointer);
await expect(page.getByTestId("sidebar-section-drag-overlay")).toBeVisible();
const to = await target.boundingBox();
if (!to) throw new Error("drag target not laid out");
const destination = {
x: to.x + to.width / 2,
y: to.y + to.height - 2,
};
await page.evaluate(async ({ x, y }) => {
document.dispatchEvent(
new PointerEvent("pointermove", {
bubbles: true,
buttons: 1,
clientX: x,
clientY: y,
isPrimary: true,
pointerId: 1,
pointerType: "mouse",
}),
);
await new Promise<void>((resolve) => {
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
});
document.dispatchEvent(
new PointerEvent("pointerup", {
bubbles: true,
button: 0,
buttons: 0,
clientX: x,
clientY: y,
isPrimary: true,
pointerId: 1,
pointerType: "mouse",
}),
);
}, destination);
}
test.describe("list virtualization", () => {
@@ -160,6 +214,10 @@ test.describe("list virtualization", () => {
const headers = page.locator('[aria-roledescription="sortable"]');
const topHeader = headers.filter({ hasText: "Priority" });
const bottomHeader = headers.filter({ hasText: "Archive" });
const topHeaderButton = topHeader.getByRole("button", {
name: "Priority",
exact: true,
});
await expect(topHeader).toBeVisible();
await expect(bottomHeader).toBeVisible();
await expect(headers).toHaveCount(2);
@@ -176,7 +234,7 @@ test.describe("list virtualization", () => {
// Drag "Priority" past "Archive" — onDragEnd commits arrayMove and persists
// the new order. The drop must land for the order to flip.
await dragOver(page, topHeader, bottomHeader);
await dragOver(page, topHeaderButton, bottomHeader);
// The drop landed: order flipped. A no-op drag would leave it unchanged.
await expect.poll(sectionOrder).toEqual(["Archive", "Priority"]);