Add e2e coverage for the main interaction paths (WS3 M2)

Cover the solid paths with real-browser Playwright tests: entrance and
edge-docking, expand/collapse, panel switching, Escape, activate();
both drag-to-dismiss paths (docked group and individual open-row) with
dismiss-before-remove event ordering and a no-leaked-frames check;
keyboard roaming, Delete-with-focus-handoff, and Enter-to-expand; plus
a reduced-motion run that confirms the preference applied. Adds
dragToDismiss/focusedLabel helpers. (13 specs, all Chromium.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: githyperplexed

tests/e2e/dismiss.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import { bubble, dragToDismiss, settled } from "./helpers";
+
+// Drag-to-dismiss — the marquee gesture. Both paths: a docked stack drags as
+// a group (dismisses all), an open-row bubble dismisses individually.
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.waitForFunction(() => !!window.bubbles);
+});
+
+const events = (page: import("@playwright/test").Page) =>
+	page.evaluate(() => window.bubbles.events());
+
+test("dragging a docked bubble onto the target dismisses it", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "A" });
+	});
+	await settled(page);
+
+	await dragToDismiss(page, "A");
+
+	// The bubble leaves, and a "user" remove follows the commit-time dismiss.
+	await expect(bubble(page, "A")).toHaveCount(0);
+	const log = await events(page);
+	expect(log).toContainEqual({ event: "dismiss", detail: { id: "a" } });
+	expect(log).toContainEqual({ event: "remove", detail: { id: "a", reason: "user" } });
+
+	// dismiss precedes remove.
+	const names = log.map((e) => e.event);
+	expect(names.indexOf("dismiss")).toBeLessThan(names.indexOf("remove"));
+
+	// Teardown leaves no animation loops running.
+	await expect.poll(() => page.evaluate(() => window.bubbles.liveFrames())).toBe(0);
+});
+
+test("dragging one open-row bubble dismisses only it", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "A" });
+		window.bubbles.add({ id: "b", label: "B", panelText: "B" });
+		window.bubbles.activate("b");
+	});
+	await expect.poll(() => page.evaluate(() => window.bubbles.state())).toBe("open");
+	await settled(page);
+
+	await dragToDismiss(page, "A");
+
+	await expect(bubble(page, "A")).toHaveCount(0);
+	await expect(bubble(page, "B")).toBeVisible();
+
+	const log = await events(page);
+	expect(log).toContainEqual({ event: "dismiss", detail: { id: "a" } });
+	expect(log.filter((e) => e.event === "dismiss")).toHaveLength(1);
+});

tests/e2e/helpers.ts

@@ -4,6 +4,28 @@ import { type Page } from "@playwright/test";
 export const bubble = (page: Page, label: string) =>
 	page.locator(`[role="button"][aria-label="${label}"]`);
 
+/** The accessible name of whatever's focused — the suite's single-tab-stop probe. */
+export const focusedLabel = (page: Page): Promise<string | null> =>
+	page.evaluate(() => document.activeElement?.getAttribute("aria-label") ?? null);
+
+/**
+ * Drags a bubble onto the dismiss target with a real pointer. Moves to the
+ * bottom-center where the target rests (well inside its capture radius on a
+ * desktop viewport), in steps so the velocity tracker and the target's
+ * capture both see the motion, then releases.
+ */
+export const dragToDismiss = async (page: Page, label: string): Promise<void> => {
+	const box = await bubble(page, label).boundingBox();
+	const vp = page.viewportSize();
+	if (!box || !vp) throw new Error(`cannot drag "${label}": no box/viewport`);
+
+	await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+	await page.mouse.down();
+	await page.mouse.move(vp.width / 2, vp.height - 60, { steps: 24 });
+	await page.mouse.move(vp.width / 2, vp.height - 56, { steps: 4 });
+	await page.mouse.up();
+};
+
 /**
  * Resolves once every bubble has held its position for a few consecutive
  * animation frames — the black-box settle the suite waits on instead of

tests/e2e/keyboard.spec.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "@playwright/test";
+import { bubble, focusedLabel, settled } from "./helpers";
+
+// Keyboard model: the open row is one tab stop with arrow-key roaming,
+// Enter/Space activates, Delete dismisses the focused bubble.
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.waitForFunction(() => !!window.bubbles);
+});
+
+test("arrow keys move focus across the open row", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "A" });
+		window.bubbles.add({ id: "b", label: "B", panelText: "B" });
+		window.bubbles.add({ id: "c", label: "C", panelText: "C" });
+		window.bubbles.toggle();
+	});
+	await expect.poll(() => page.evaluate(() => window.bubbles.state())).toBe("open");
+	await settled(page);
+
+	// Row order is newest-first (C B A); the active newest bubble holds focus.
+	expect(await focusedLabel(page)).toBe("C");
+	await page.keyboard.press("ArrowRight");
+	expect(await focusedLabel(page)).toBe("B");
+	await page.keyboard.press("ArrowRight");
+	expect(await focusedLabel(page)).toBe("A");
+	// Clamps at the end rather than wrapping.
+	await page.keyboard.press("ArrowRight");
+	expect(await focusedLabel(page)).toBe("A");
+	await page.keyboard.press("ArrowLeft");
+	expect(await focusedLabel(page)).toBe("B");
+});
+
+test("Delete dismisses the focused row bubble and moves focus to a neighbor", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "A" });
+		window.bubbles.add({ id: "b", label: "B", panelText: "B" });
+		window.bubbles.toggle();
+	});
+	await expect.poll(() => page.evaluate(() => window.bubbles.state())).toBe("open");
+	await settled(page);
+
+	// Row B A; focus is on B (newest, active).
+	expect(await focusedLabel(page)).toBe("B");
+	await page.keyboard.press("Delete");
+
+	await expect(bubble(page, "B")).toHaveCount(0);
+	await expect.poll(() => focusedLabel(page)).toBe("A");
+});
+
+test("Enter on the docked stack expands it", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "A" });
+	});
+	await settled(page);
+
+	await bubble(page, "A").focus();
+	await page.keyboard.press("Enter");
+	await expect.poll(() => page.evaluate(() => window.bubbles.state())).toBe("open");
+});

tests/e2e/lifecycle.spec.ts

@@ -0,0 +1,114 @@
+import { expect, test } from "@playwright/test";
+import { bubble, focusedLabel, settled } from "./helpers";
+
+// The open/close lifecycle: entering and docking, expanding into the row,
+// switching panels, collapsing, and programmatic activate().
+
+test.beforeEach(async ({ page }) => {
+	await page.goto("/");
+	await page.waitForFunction(() => !!window.bubbles);
+});
+
+const state = (page: import("@playwright/test").Page) =>
+	page.evaluate(() => window.bubbles.state());
+const active = (page: import("@playwright/test").Page) =>
+	page.evaluate(() => window.bubbles.active());
+
+test("the first bubble flies in and docks against the edge", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A" });
+	});
+
+	const a = bubble(page, "A");
+	await expect(a).toBeVisible();
+	await settled(page);
+
+	// Default side is "right": it rests in the right half, near the edge.
+	const box = await a.boundingBox();
+	const vp = page.viewportSize();
+	expect(box && vp).toBeTruthy();
+	expect(box!.x).toBeGreaterThan(vp!.width / 2);
+	expect(box!.x + box!.width).toBeGreaterThan(vp!.width - 24);
+});
+
+test("tap expands the stack and shows the panel; tapping the active bubble collapses", async ({
+	page
+}) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "Panel A" });
+	});
+	await settled(page);
+
+	await bubble(page, "A").click();
+	await expect.poll(() => state(page)).toBe("open");
+	await expect(page.locator('[data-panel-content="a"]')).toBeVisible();
+
+	await bubble(page, "A").click();
+	await expect.poll(() => state(page)).toBe("docked");
+});
+
+test("tapping another bubble switches the active panel", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "Panel A" });
+		window.bubbles.add({ id: "b", label: "B", panelText: "Panel B" });
+		window.bubbles.activate("a");
+	});
+	await expect.poll(() => active(page)).toBe("a");
+	await expect(page.locator('[data-panel-content="a"]')).toBeVisible();
+
+	await bubble(page, "B").click();
+	await expect.poll(() => active(page)).toBe("b");
+	await expect(page.locator('[data-panel-content="b"]')).toBeVisible();
+});
+
+test("Escape collapses the group and returns focus to the stack", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "Panel A" });
+		window.bubbles.activate("a");
+	});
+	await expect.poll(() => state(page)).toBe("open");
+	await settled(page);
+
+	await page.keyboard.press("Escape");
+	await expect.poll(() => state(page)).toBe("docked");
+	expect(await focusedLabel(page)).toBe("A");
+});
+
+test("activate() expands a docked group onto the chosen bubble", async ({ page }) => {
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "A" });
+		window.bubbles.add({ id: "b", label: "B", panelText: "B" });
+	});
+	await settled(page);
+	expect(await state(page)).toBe("docked");
+
+	await page.evaluate(() => window.bubbles.activate("a"));
+	await expect.poll(() => state(page)).toBe("open");
+	await expect.poll(() => active(page)).toBe("a");
+	await expect(page.locator('[data-panel-content="a"]')).toBeVisible();
+});
+
+test("with reduced motion, expand and tap-away still reach their end states", async ({ page }) => {
+	await page.emulateMedia({ reducedMotion: "reduce" });
+	// The library reads the preference live per animation, so confirm it took
+	// — otherwise this would pass without exercising the reduced-motion paths.
+	expect(await page.evaluate(() => matchMedia("(prefers-reduced-motion: reduce)").matches)).toBe(
+		true
+	);
+
+	await page.evaluate(() => {
+		window.bubbles.create();
+		window.bubbles.add({ id: "a", label: "A", panelText: "Panel A" });
+		window.bubbles.activate("a");
+	});
+	await expect.poll(() => state(page)).toBe("open");
+	await expect(page.locator('[data-panel-content="a"]')).toBeVisible();
+
+	await page.locator("#outside").click();
+	await expect.poll(() => state(page)).toBe("docked");
+});

tests/e2e/tsconfig.json

@@ -5,7 +5,6 @@
 	// is editor-only and doesn't change the lint/CI gate.
 	"extends": "../../tsconfig.json",
 	"compilerOptions": {
-		"types": ["@playwright/test", "vite/client", "node"],
 		"paths": {
 			"$src/*": ["../../src/*"]
 		}