Merge branch 'worktree-playwright-tests'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-21 17:12:37 +02:00
parent 5160368407 b79c0da808
commit db7c102da1
21 changed files with 1656 additions and 160 deletions
@@ -0,0 +1,127 @@
+// @ts-check
+// Tests: M1–M4 — MapLibre GL canvas renders on all three map surfaces
+// Requires demo data: run `make demo-load` before this suite.
+const { test, expect } = require('@playwright/test');
+
+// ── M1: Full map page renders MapLibre canvas ─────────────────────────────────
+test('M1: /map page renders MapLibre GL canvas without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    expect(errors, 'No JS errors on map page').toHaveLength(0);
+});
+
+// ── M2: Full map page — dot markers are in the DOM ───────────────────────────
+test('M2: /map page has at least one dot marker', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    // Markers are added in map.on('load') — wait for first to appear in the DOM
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+    const markerCount = await page.locator('.maplibregl-marker').count();
+    expect(markerCount, 'At least one marker present').toBeGreaterThan(0);
+});
+
+// ── M3: Dailies mini-map renders MapLibre canvas ─────────────────────────────
+test('M3: Dailies mini-map renders MapLibre GL canvas without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/dailies');
+    await expect(page.locator('#feed-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    expect(errors, 'No JS errors on dailies page').toHaveLength(0);
+});
+
+// ── M4: Home map renders MapLibre canvas ─────────────────────────────────────
+test('M4: Home page map renders MapLibre GL canvas without JS errors', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/');
+    await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    expect(errors, 'No JS errors on home page').toHaveLength(0);
+});
+
+// ── M5: Italy map — no JS errors with GPX present ────────────────────────────
+test('M5: Italy map page renders without JS errors (GPX present)', async ({ page }) => {
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/trips/italy-2026-demo/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    // Wait for markers to confirm map.on('load') completed
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+    // Give Promise.all time to resolve
+    await page.waitForTimeout(3000);
+
+    expect(errors, 'No JS errors on Italy map page').toHaveLength(0);
+});
+
+// ── M6: Italy map — journey source exists after GPX loads ────────────────────
+test('M6: Italy map has a journey MapLibre source after GPX settles', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo/map');
+    await expect(page.locator('canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    // Wait until the journey source appears — addJourneySegments runs inside Promise.all.then()
+    // `var map = ...` in map.html.twig is a plain <script> var → available as window.map.
+    await page.waitForFunction(function () {
+        return window.map &&
+               (window.map.getSource('journey') !== undefined ||
+                window.map.getSource('journey-0') !== undefined);
+    }, { timeout: 15000 });
+
+    const hasSource = await page.evaluate(function () {
+        return !!(window.map.getSource('journey') || window.map.getSource('journey-0'));
+    });
+
+    expect(hasSource).toBe(true);
+});
+
+// ── M7: Clicking a trip-page map marker adds is-highlighted to the entry card ──
+test('M7: clicking map marker briefly highlights the corresponding entry card', async ({ page }) => {
+    await page.goto('/trips/italy-2026-demo');
+    // Wait for map canvas and at least one marker
+    await expect(page.locator('#trip-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('.maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    // Wait for tripMap to finish animating (fitBounds animation completes)
+    await page.waitForFunction(function () {
+        return window.tripMap &&
+               !window.tripMap.isMoving() &&
+               !window.tripMap.isZooming() &&
+               !window.tripMap.isRotating();
+    }, { timeout: 15000 });
+
+    // Click the first marker (force bypasses overlap when start/end share the same location)
+    await page.locator('.maplibregl-marker').first().click({ force: true });
+
+    // Within 500ms of click + delay, one journal-post should have is-highlighted
+    await expect(page.locator('.journal-post.is-highlighted')).toBeVisible({ timeout: 1500 });
+});
+
+// ── M8: Home map has GPX journey source on active trip ────────────────────────
+test('M8: home map has a journey source after GPX settles (active trip)', async ({ page }) => {
+    // Requires travelling: true in user/config/site.yaml (set in Task 1).
+    // Requires GPX files attached to the active trip (italy-2026-demo has 7).
+    const errors = [];
+    page.on('pageerror', e => errors.push(e.message));
+
+    await page.goto('/');
+    await expect(page.locator('#home-map canvas.maplibregl-canvas')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('#home-map .maplibregl-marker').first()).toBeVisible({ timeout: 15000 });
+
+    await page.waitForFunction(function () {
+        return window.homeMap &&
+               (window.homeMap.getSource('home-journey') !== undefined ||
+                window.homeMap.getSource('home-gpx-0') !== undefined);
+    }, { timeout: 20000 });
+
+    const hasSource = await page.evaluate(function () {
+        return !!(window.homeMap.getSource('home-journey') || window.homeMap.getSource('home-gpx-0'));
+    });
+
+    expect(hasSource, 'Home map has a journey or GPX source').toBe(true);
+    expect(errors, 'No JS errors on home page').toHaveLength(0);
+});