Add Playwright regression tests

kort7/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+playwright-report/
+test-results/

kort7/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "kort7",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "test:e2e": "playwright test"
+  },
+  "devDependencies": {
+    "playwright": "^1.52.0"
+  }
+}

kort7/playwright.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: './tests',
+  timeout: 30000,
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    headless: true,
+    viewport: { width: 1440, height: 900 }
+  },
+  webServer: {
+    command: 'python3 -m http.server 4173 --bind 127.0.0.1',
+    port: 4173,
+    reuseExistingServer: true,
+    timeout: 10000
+  }
+});

kort7/tests/kort7.spec.js

@@ -0,0 +1,62 @@
+const { test, expect } = require('@playwright/test');
+
+async function waitForVehicleMarkers(page) {
+  await page.waitForSelector('.leaflet-marker-icon', { state: 'attached' });
+  await expect(page.locator('.leaflet-marker-icon')).toHaveCount(5, { timeout: 10000 });
+}
+
+test.describe('kort7 vehicle map', () => {
+  test('loads map and renders vehicles', async ({ page }) => {
+    await page.goto('/kort7.html');
+    await expect(page.locator('#map')).toBeVisible();
+    await waitForVehicleMarkers(page);
+    await expect(page.locator('#status')).toContainText('Simuleret tid');
+  });
+
+  test('shows vehicle popup with details when clicking a marker', async ({ page }) => {
+    await page.goto('/kort7.html');
+    await waitForVehicleMarkers(page);
+
+    const firstMarker = page.locator('.leaflet-marker-icon').first();
+    await firstMarker.click();
+
+    const popup = page.locator('.leaflet-popup');
+    await expect(popup).toBeVisible();
+    await expect(popup).toContainText(/Bil \d/);
+    await expect(popup).toContainText('Tid:');
+    await expect(popup).toContainText('Lat:');
+    await expect(popup).toContainText('Lon:');
+    await expect(popup).toContainText('Hastighed:');
+    await expect(popup).toContainText('Retning:');
+    await expect(popup).toContainText('Usikkerhed:');
+    await expect(popup).toContainText('På kortet:');
+  });
+
+  test('renders uncertainty circles for vehicles with uncertainty', async ({ page }) => {
+    await page.goto('/kort7.html');
+    await waitForVehicleMarkers(page);
+
+    await expect.poll(async () => {
+      return await page.locator('path.leaflet-interactive').evaluateAll((nodes) =>
+        nodes.filter((node) => {
+          const strokeDasharray = node.getAttribute('stroke-dasharray');
+          return strokeDasharray && strokeDasharray.length > 0;
+        }).length
+      );
+    }).toBeGreaterThan(0);
+  });
+
+  test('playback updates simulation status over time', async ({ page }) => {
+    await page.goto('/kort7.html');
+
+    const status = page.locator('#status');
+    await expect(status).toContainText('Simuleret tid: 0.0 s');
+
+    await page.waitForTimeout(1800);
+
+    const text = await status.textContent();
+    const match = text.match(/Simuleret tid: ([\d.]+) s/);
+    expect(match).not.toBeNull();
+    expect(Number(match[1])).toBeGreaterThan(0.5);
+  });
+});