trails/e2e/planner-coloring.test.ts
Ullrich Schäfer 0b146f9b32
Split planner E2E tests into focused feature files
Breaks the monolithic planner.test.ts (581 lines, 25 tests) into five
focused files grouped by feature area, with BRouter mocked by default
via test.beforeEach in files that need routing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-22 21:58:10 +02:00

71 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { test, expect } from "./fixtures/test";
import { mockBRouter } from "./fixtures/brouter-mock";
import { createSession } from "./helpers/planner";
test.beforeEach(async ({ page }) => {
await mockBRouter(page);
});
const WITH_ROUTE = encodeURIComponent(JSON.stringify([
{ lat: 52.520, lon: 13.405 },
{ lat: 52.515, lon: 13.351 },
]));
test.describe("Planner route coloring", () => {
test("session has color mode toggle", async ({ page, request }) => {
const url = await createSession(request);
await page.goto(`${url}?waypoints=${WITH_ROUTE}`);
await expect(page.locator(".leaflet-container")).toBeVisible({ timeout: 10000 });
await expect(page.getByText("Connected")).toBeVisible({ timeout: 15000 });
await expect(page.locator("canvas")).toBeVisible({ timeout: 10000 });
const select = page.locator("select", { has: page.locator("option[value='highway']") });
await expect(select).toBeVisible({ timeout: 5000 });
await expect(select).toHaveValue("plain");
await select.selectOption("elevation");
await expect(select).toHaveValue("elevation");
});
test("road type color mode renders chart and shows legend", async ({ page, request }) => {
const url = await createSession(request);
await page.goto(`${url}?waypoints=${WITH_ROUTE}`);
await expect(page.locator(".leaflet-container")).toBeVisible({ timeout: 10000 });
await expect(page.getByText("Connected")).toBeVisible({ timeout: 15000 });
await expect(page.locator("canvas")).toBeVisible({ timeout: 10000 });
const select = page.locator("select", { has: page.locator("option[value='highway']") });
await expect(select).toBeVisible({ timeout: 5000 });
await select.selectOption("highway");
await expect(select).toHaveValue("highway");
await expect(page.getByText("Road Type Profile")).toBeVisible({ timeout: 5000 });
await expect(page.getByText("secondary")).toBeVisible({ timeout: 5000 });
await expect(page.getByText("residential")).toBeVisible({ timeout: 5000 });
});
test("road type hover label shows highway type", async ({ page, request }) => {
const url = await createSession(request);
await page.goto(`${url}?waypoints=${WITH_ROUTE}`);
await expect(page.locator(".leaflet-container")).toBeVisible({ timeout: 10000 });
await expect(page.getByText("Connected")).toBeVisible({ timeout: 15000 });
await expect(page.locator("canvas")).toBeVisible({ timeout: 10000 });
const select = page.locator("select", { has: page.locator("option[value='highway']") });
await expect(select).toBeVisible({ timeout: 5000 });
await select.selectOption("highway");
const canvas = page.locator("canvas");
await expect(canvas).toBeVisible({ timeout: 5000 });
const box = await canvas.boundingBox();
if (box) {
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
}
await expect(canvas).toBeVisible();
});
});