From 8caff1c6f2ea0014edffef919e46c0fc74c8937a Mon Sep 17 00:00:00 2001 From: Wintermute Date: Fri, 9 Oct 2026 13:35:46 -0400 Subject: [PATCH] test(desktop): e2e coverage for ```map blocks Renders a map message against a stubbed tile style and asserts the MapLibre canvas, markers, and the invalid-spec error message. Signed-off-by: Wintermute --- desktop/playwright.config.ts | 1 + desktop/tests/e2e/markdown-map.spec.ts | 87 ++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 desktop/tests/e2e/markdown-map.spec.ts diff --git a/desktop/playwright.config.ts b/desktop/playwright.config.ts index bb26f55880..6b0fa25ad5 100644 --- a/desktop/playwright.config.ts +++ b/desktop/playwright.config.ts @@ -122,6 +122,7 @@ export default defineConfig({ "**/live-broadcast-reply-timeline.spec.ts", "**/markdown-parse-cache.spec.ts", "**/markdown-tables.spec.ts", + "**/markdown-map.spec.ts", "**/overscroll-boundary.spec.ts", "**/terminal-wheel.spec.ts", "**/cold-switch-longtask.perf.ts", diff --git a/desktop/tests/e2e/markdown-map.spec.ts b/desktop/tests/e2e/markdown-map.spec.ts new file mode 100644 index 0000000000..28ec0ab6cb --- /dev/null +++ b/desktop/tests/e2e/markdown-map.spec.ts @@ -0,0 +1,87 @@ +import { expect, type Page, test } from "@playwright/test"; +import { installMockBridge } from "../helpers/bridge"; + +const spec = { + height: 320, + markers: [ + { lng: -122.4, lat: 37.79, label: "Store A", color: "#e11d48" }, + { lng: -122.45, lat: 37.76, label: "Store B" }, + ], + lines: [ + { + coordinates: [ + [-122.4, 37.79], + [-122.45, 37.76], + ], + }, + ], +}; + +// Keep the test hermetic: serve a blank style instead of remote tiles. +async function stubTiles(page: Page) { + await page.route("https://tiles.openfreemap.org/**", (route) => + route.fulfill({ + contentType: "application/json", + body: JSON.stringify({ + version: 8, + sources: {}, + layers: [ + { + id: "bg", + type: "background", + paint: { "background-color": "#dde" }, + }, + ], + }), + }), + ); +} + +async function emitMessage(page: Page, content: string) { + return page.evaluate((body) => { + const root = window.__BUZZ_E2E_EMIT_MOCK_MESSAGE__?.({ + channelName: "general", + content: body, + }); + if (!root) throw new Error("Mock message was not emitted"); + return root.id; + }, content); +} + +test("```map blocks render an interactive map and report bad specs", async ({ + page, +}) => { + await stubTiles(page); + await installMockBridge(page); + await page.goto("/"); + await page.getByTestId("channel-general").click(); + await expect(page.getByTestId("chat-title")).toHaveText("general"); + await page.waitForFunction(() => + window.__BUZZ_E2E_HAS_MOCK_LIVE_SUBSCRIPTION__?.({ + channelName: "general", + }), + ); + + const mapId = await emitMessage( + page, + `Route plan\n\n\`\`\`map\n${JSON.stringify(spec, null, 2)}\n\`\`\``, + ); + const message = page.locator(`[data-message-id="${mapId}"]`); + const map = message.getByTestId("markdown-map-block"); + await expect(map).toBeVisible(); + await expect(map).toHaveCSS("height", "320px"); + await expect(map.locator("canvas.maplibregl-canvas")).toBeVisible(); + await expect(map.locator(".maplibregl-marker")).toHaveCount(2); + await expect(map.locator('[title="Store A"]')).toBeVisible(); + await expect(message.locator("[data-code-block]")).toHaveCount(0); + + const badId = await emitMessage( + page, + '```map\n{"markers": [{"lng": 500}]}\n```', + ); + await expect( + page + .locator(`[data-message-id="${badId}"]`) + .getByText("markers[0] needs valid lng/lat."), + ).toBeVisible(); +});