feat: automated UI testing with Playwright

.gitignore

@@ -30,3 +30,7 @@ node_modules
 .env
 .env.local
 .env.*.local
+
+# Playwright test artifacts
+test-results/
+playwright-report/

docs/api/map.md

@@ -10,4 +10,4 @@ https://mkdocstrings.github.io/python/usage/configuration/members/#filters
       filters:
 
 
-::: lonboard.models.ViewState
+::: lonboard.models.ViewState

lonboard/_map.py

@@ -268,6 +268,32 @@ def on_click(self, callback: Callable, *, remove: bool = False) -> None:
         ```
     """
 
+    projection = t.Unicode("mercator").tag(sync=True)
+    """
+    Map projection type.
+
+    - Type: `str`
+    - Options: `"mercator"` (default) or `"globe"`
+    - Default: `"mercator"`
+
+    The globe projection displays the map on a 3D globe, providing a more realistic
+    representation of the Earth. This feature requires MapLibre GL JS 5.0+.
+
+    **Example:**
+
+        ```py
+        m = Map(
+            layers,
+            projection="globe"
+        )
+        ```
+
+    !!! note
+        Globe projection may behave differently than Mercator projection at certain
+        zoom levels. Some rendering features may have different performance
+        characteristics in globe mode.
+    """
+
     # TODO: We'd prefer a "Strict union of bool and float" but that doesn't
     # work here because `Union[bool, float]` would coerce `1` to `True`, which we don't
     # want, and `Union[float, bool]` would coerce `True` to `1`, which we also don't

package.json

@@ -4,12 +4,13 @@
   },
   "dependencies": {
     "@anywidget/react": "^0.2.0",
+    "@babel/runtime": "^7.28.4",
     "@deck.gl/core": "^9.1.15",
     "@deck.gl/extensions": "^9.1.15",
     "@deck.gl/layers": "^9.1.15",
+    "@deck.gl/mapbox": "^9.1.15",
     "@deck.gl/react": "^9.1.15",
     "@geoarrow/deck.gl-layers": "^0.3.1",
-    "@babel/runtime": "^7.28.4",
     "@nextui-org/react": "^2.4.8",
     "@xstate/react": "^6.0.0",
     "apache-arrow": "^21.0.0",
@@ -31,6 +32,7 @@
     "@anywidget/types": "^0.2.0",
     "@eslint/js": "^9.36.0",
     "@jupyter-widgets/base": "^6.0.10",
+    "@playwright/test": "^1.55.1",
     "@statelyai/inspect": "^0.4.0",
     "@types/lodash": "^4.17.13",
     "@types/lodash.debounce": "^4.0.9",
@@ -63,7 +65,11 @@
     "prettier:check": "prettier './src/**/*.{ts,tsx,css}' --check",
     "prettier": "prettier './src/**/*.{ts,tsx,css}' --write",
     "lint": "eslint src",
-    "test": "vitest run"
+    "test": "vitest run",
+    "pretest:e2e": "npm run build",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "jupyter:test": "uv run --group dev jupyter lab --no-browser --port=8889 --notebook-dir=tests/e2e/fixtures --IdentityProvider.token=''"
   },
   "volta": {
     "node": "18.18.2",

playwright.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  timeout: 60000,
+  expect: {
+    timeout: 30000,
+  },
+  reporter: 'list',
+
+  use: {
+    baseURL: 'http://localhost:8889',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    navigationTimeout: 30000,
+    browserName: 'chromium',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'uv run --group dev jupyter lab --no-browser --port=8889 --notebook-dir=tests/e2e/fixtures --IdentityProvider.token=""',
+    url: 'http://localhost:8889',
+    reuseExistingServer: false, // Always restart for clean state
+    timeout: 30000,
+  },
+});