Skip to content

Commit 999ef68

Browse files
authored
test: add bbox selection overlay mode e2e test (#933)
## Summary Adds e2e test coverage for bbox selection in overlay render mode, validating the functionality introduced in #921. ## Changes - Add `bbox-select-overlay.spec.ts`: test suite for overlay mode bbox selection - Add `maplibre.ts` helper for MapLibre-specific bbox drawing - Adjust timing: increase overlay init wait (2s → 5s) ## How to verify ```bash npm run test:e2e ``` Ready for review.
1 parent 22e6e7d commit 999ef68

File tree

2 files changed

+75
-0
lines changed

2 files changed

+75
-0
lines changed
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { test, expect } from "@playwright/test";
2+
import {
3+
openNotebookFresh,
4+
runFirstNCells,
5+
executeCellAndWaitForOutput,
6+
} from "./helpers/notebook";
7+
import { validateBounds } from "./helpers/assertions";
8+
import { drawBboxOnMapLibre } from "./helpers/maplibre";
9+
10+
test.describe("BBox selection - Overlay render mode", () => {
11+
test("draws bbox and syncs selected_bounds to Python with overlay render_mode", async ({
12+
page,
13+
}) => {
14+
const { notebookRoot } = await openNotebookFresh(
15+
page,
16+
"simple-map-overlay.ipynb",
17+
{
18+
workspaceId: `bbox-overlay-${Date.now()}`,
19+
},
20+
);
21+
await runFirstNCells(page, notebookRoot, 2);
22+
await page.waitForTimeout(5000);
23+
24+
// Start bbox selection mode
25+
const bboxButton = page.getByRole("button", { name: "Select BBox" });
26+
await expect(bboxButton).toBeVisible({ timeout: 10000 });
27+
await bboxButton.click();
28+
29+
// Verify drawing mode is active
30+
const cancelButton = page.getByRole("button", { name: "Cancel drawing" });
31+
await expect(cancelButton).toBeVisible({ timeout: 5000 });
32+
33+
// Draw bbox using simple mouse events
34+
await drawBboxOnMapLibre(page, { x: 200, y: 200 }, { x: 400, y: 400 });
35+
36+
// Verify bbox was drawn successfully
37+
const finalClearButton = page.getByRole("button", {
38+
name: "Clear bounding box",
39+
});
40+
await expect(finalClearButton).toBeVisible({ timeout: 5000 });
41+
42+
// Execute cell to check selected bounds
43+
const output = await executeCellAndWaitForOutput(notebookRoot, 2);
44+
const outputText = await output.textContent();
45+
validateBounds(outputText);
46+
});
47+
});

tests/e2e/helpers/maplibre.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { Page } from "@playwright/test";
2+
3+
/**
4+
* Draws a bounding box on the MapLibre map using click-click pattern.
5+
* In overlay mode, MapLibre handles events and forwards them to deck.gl via MapboxOverlay.
6+
*
7+
* The bbox selection pattern matches deck-first mode: click at start, hover at end, click at end.
8+
*/
9+
export async function drawBboxOnMapLibre(
10+
page: Page,
11+
start: { x: number; y: number },
12+
end: { x: number; y: number },
13+
): Promise<void> {
14+
// Find the map canvas (MapLibre renders the map canvas directly)
15+
const canvas = page.locator("canvas").first();
16+
await canvas.waitFor({ state: "visible", timeout: 10000 });
17+
18+
// Bbox selection pattern: click at start, hover at end, click at end
19+
// Use locator-based actions which are more robust than page.mouse
20+
await canvas.click({ position: { x: start.x, y: start.y } });
21+
await page.waitForTimeout(500);
22+
23+
await canvas.hover({ position: { x: end.x, y: end.y } });
24+
await page.waitForTimeout(500);
25+
26+
await canvas.click({ position: { x: end.x, y: end.y } });
27+
await page.waitForTimeout(1000);
28+
}

0 commit comments

Comments
 (0)