Test/add e2e and unit testing (#1282)

* feat: add string utility tests and vitest browser configuration

* feat: add Playwright for end-to-end testing and update snapshots

- Introduced Playwright for E2E testing with a new configuration file.
- Added test scripts to package.json for running E2E tests.
- Updated package-lock.json and package.json with new dependencies for Playwright and types.
- Created new SVG snapshot files for various layers (ruler, scaleBar, temperature, terrain, vignette, zones) to support visual testing.
- Excluded e2e directory from TypeScript compilation.

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Add SVG layer snapshots for various components

- Added ruler layer snapshot with hidden display.
- Added scale bar layer snapshot with detailed structure and styling.
- Added temperature layer snapshot with opacity and stroke settings.
- Added terrain layer snapshot with ocean and land heights groups.
- Added vignette layer snapshot with mask and opacity settings.
- Added zones layer snapshot with specified opacity and stroke settings.

* fix: update Playwright browser installation command to use npx

* Update snapshots

* refactor: remove unused layer tests and their corresponding snapshots as fonts are unpredictable

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.github/workflows/playwright.yml

@@ -0,0 +1,25 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: [ master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v5
+    - uses: actions/setup-node@v5
+      with:
+        node-version: '24'
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test:e2e
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,5 +1,8 @@
 .vscode
 .idea
 /node_modules
+*/node_modules
 /dist
 /coverage
+/playwright-report
+/test-results

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "fantasy-map-generator",
-  "version": "1.109.5",
+  "version": "1.110.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fantasy-map-generator",
-      "version": "1.109.5",
+      "version": "1.110.0",
       "license": "MIT",
       "dependencies": {
         "alea": "^1.0.1",
@@ -15,11 +15,17 @@
         "polylabel": "^2.0.1"
       },
       "devDependencies": {
+        "@playwright/test": "^1.57.0",
         "@types/d3": "^7.4.3",
         "@types/delaunator": "^5.0.3",
+        "@types/node": "^25.0.10",
         "@types/polylabel": "^1.1.3",
+        "@vitest/browser": "^4.0.18",
+        "@vitest/browser-playwright": "^4.0.18",
+        "playwright": "^1.57.0",
         "typescript": "^5.9.3",
-        "vite": "^7.3.1"
+        "vite": "^7.3.1",
+        "vitest": "^4.0.18"
       },
       "engines": {
         "node": ">=24.0.0"
@@ -467,6 +473,36 @@
         "node": ">=18"
       }
     },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+      "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.55.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
@@ -817,6 +853,24 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -1101,6 +1155,13 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/delaunator": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@types/delaunator/-/delaunator-5.0.3.tgz",
@@ -1122,6 +1183,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "25.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.10.tgz",
+      "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/@types/polylabel": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@types/polylabel/-/polylabel-1.1.3.tgz",
@@ -1129,12 +1201,191 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vitest/browser": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/browser/-/browser-4.0.18.tgz",
+      "integrity": "sha512-gVQqh7paBz3gC+ZdcCmNSWJMk70IUjDeVqi+5m5vYpEHsIwRgw3Y545jljtajhkekIpIp5Gg8oK7bctgY0E2Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/mocker": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "magic-string": "^0.30.21",
+        "pixelmatch": "7.1.0",
+        "pngjs": "^7.0.0",
+        "sirv": "^3.0.2",
+        "tinyrainbow": "^3.0.3",
+        "ws": "^8.18.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "4.0.18"
+      }
+    },
+    "node_modules/@vitest/browser-playwright": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/browser-playwright/-/browser-playwright-4.0.18.tgz",
+      "integrity": "sha512-gfajTHVCiwpxRj1qh0Sh/5bbGLG4F/ZH/V9xvFVoFddpITfMta9YGow0W6ZpTTORv2vdJuz9TnrNSmjKvpOf4g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vitest/browser": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "playwright": "*",
+        "vitest": "4.0.18"
+      },
+      "peerDependenciesMeta": {
+        "playwright": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
+      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
+      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.18",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
+      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.18",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
+      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.18",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.18",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/alea": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/alea/-/alea-1.0.1.tgz",
       "integrity": "sha512-QU+wv+ziDXaMxRdsQg/aH7sVfWdhKps5YP97IIwFkHCsbDZA3k87JXoZ5/iuemf4ntytzIWeScrRpae8+lDrXA==",
       "license": "MIT"
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -1555,6 +1806,13 @@
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
@@ -1597,6 +1855,26 @@
         "@esbuild/win32-x64": "0.27.2"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1651,6 +1929,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1670,6 +1968,24 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1691,6 +2007,77 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pixelmatch": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-7.1.0.tgz",
+      "integrity": "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "pngjs": "^7.0.0"
+      },
+      "bin": {
+        "pixelmatch": "bin/pixelmatch"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "playwright-core": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
+      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.19.0"
+      }
+    },
     "node_modules/polylabel": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/polylabel/-/polylabel-2.0.1.tgz",
@@ -1792,6 +2179,28 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1802,6 +2211,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1825,6 +2265,26 @@
       "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==",
       "license": "ISC"
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -1839,12 +2299,20 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -1913,6 +2381,124 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vitest": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
+      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vitest/expect": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/pretty-format": "4.0.18",
+        "@vitest/runner": "4.0.18",
+        "@vitest/snapshot": "4.0.18",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/browser-preview": "4.0.18",
+        "@vitest/browser-webdriverio": "4.0.18",
+        "@vitest/ui": "4.0.18",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -16,14 +16,23 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:browser": "vitest --config=vitest.browser.config.ts",
+    "test:e2e": "playwright test"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@types/d3": "^7.4.3",
     "@types/delaunator": "^5.0.3",
+    "@types/node": "^25.0.10",
     "@types/polylabel": "^1.1.3",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "playwright": "^1.57.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "dependencies": {
     "alea": "^1.0.1",

playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const isCI = !!process.env.CI
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: isCI,
+  retries: isCI ? 2 : 0,
+  workers: isCI ? 1 : undefined,
+  reporter: 'html',
+  // Use OS-independent snapshot names (HTML content is the same across platforms)
+  snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
+  use: {
+    baseURL: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
+    trace: 'on-first-retry',
+    // Fixed viewport to ensure consistent map rendering
+    viewport: { width: 1280, height: 720 },
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    // In CI: build and preview for production-like testing
+    // In dev: use vite dev server (faster, no rebuild needed)
+    command: isCI ? 'npm run build && npm run preview' : 'npm run dev',
+    url: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
+    reuseExistingServer: !isCI,
+    timeout: 120000,
+  },
+})

public/main.js

@@ -1229,8 +1229,12 @@ function showStatistics() {
     Cultures: ${pack.cultures.length - 1}`;
 
   mapId = Date.now(); // unique map id is it's creation date number
+  window.mapId = mapId; // expose for test automation
   mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId});
   INFO && console.info(stats);
+
+  // Dispatch event for test automation and external integrations
+  window.dispatchEvent(new CustomEvent('map:generated', { detail: { seed, mapId } }));
 }
 
 const regenerateMap = debounce(async function (options) {

src/utils/stringUtils.test.ts

@@ -0,0 +1,8 @@
+import { expect, describe, it } from 'vitest'
+import { round } from './stringUtils'
+
+describe('round', () => {
+  it('should be able to handle undefined input', () => {
+    expect(round(undefined)).toBe("");
+  });
+})

tests/e2e/layers.spec.ts

@@ -0,0 +1,241 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('map layers', () => {
+  test.beforeEach(async ({ context, page }) => {
+    // Clear all storage to ensure clean state
+    await context.clearCookies()
+    
+    await page.goto('/')
+    await page.evaluate(() => {
+      localStorage.clear()
+      sessionStorage.clear()
+    })
+
+    // Navigate with seed parameter and wait for full load
+    // NOTE:
+    // - We use a fixed seed ("test-seed") to make map generation deterministic for snapshot tests.
+    // - Snapshots are OS-independent (configured in playwright.config.ts).
+    await page.goto('/?seed=test-seed&&width=1280&height=720')
+    
+    // Wait for map generation to complete by checking window.mapId
+    // mapId is exposed on window at the very end of showStatistics()
+    await page.waitForFunction(() => (window as any).mapId !== undefined, { timeout: 60000 })
+    
+    // Additional wait for any rendering/animations to settle
+    await page.waitForTimeout(500)
+  })
+
+  // Ocean and water layers
+  test('ocean layer', async ({ page }) => {
+    const ocean = page.locator('#ocean')
+    await expect(ocean).toBeAttached()
+    const html = await ocean.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('ocean.html')
+  })
+
+  test('lakes layer', async ({ page }) => {
+    const lakes = page.locator('#lakes')
+    await expect(lakes).toBeAttached()
+    const html = await lakes.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('lakes.html')
+  })
+
+  test('coastline layer', async ({ page }) => {
+    const coastline = page.locator('#coastline')
+    await expect(coastline).toBeAttached()
+    const html = await coastline.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('coastline.html')
+  })
+
+  // Terrain and heightmap layers
+  test('terrain layer', async ({ page }) => {
+    const terrs = page.locator('#terrs')
+    await expect(terrs).toBeAttached()
+    const html = await terrs.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('terrain.html')
+  })
+
+  test('landmass layer', async ({ page }) => {
+    const landmass = page.locator('#landmass')
+    await expect(landmass).toBeAttached()
+    const html = await landmass.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('landmass.html')
+  })
+
+  // Climate and environment layers
+  test('biomes layer', async ({ page }) => {
+    const biomes = page.locator('#biomes')
+    await expect(biomes).toBeAttached()
+    const html = await biomes.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('biomes.html')
+  })
+
+  test('ice layer', async ({ page }) => {
+    const ice = page.locator('#ice')
+    await expect(ice).toBeAttached()
+    const html = await ice.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('ice.html')
+  })
+
+  test('temperature layer', async ({ page }) => {
+    const temperature = page.locator('#temperature')
+    await expect(temperature).toBeAttached()
+    const html = await temperature.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('temperature.html')
+  })
+
+  test('precipitation layer', async ({ page }) => {
+    const prec = page.locator('#prec')
+    await expect(prec).toBeAttached()
+    const html = await prec.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('precipitation.html')
+  })
+
+  // Geographic features
+  test('rivers layer', async ({ page }) => {
+    const rivers = page.locator('#rivers')
+    await expect(rivers).toBeAttached()
+    const html = await rivers.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('rivers.html')
+  })
+
+  test('relief layer', async ({ page }) => {
+    const terrain = page.locator('#terrain')
+    await expect(terrain).toBeAttached()
+    const html = await terrain.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('relief.html')
+  })
+
+  // Political layers
+  test('states/regions layer', async ({ page }) => {
+    const regions = page.locator('#regions')
+    await expect(regions).toBeAttached()
+    const html = await regions.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('regions.html')
+  })
+
+  test('provinces layer', async ({ page }) => {
+    const provs = page.locator('#provs')
+    await expect(provs).toBeAttached()
+    const html = await provs.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('provinces.html')
+  })
+
+  test('borders layer', async ({ page }) => {
+    const borders = page.locator('#borders')
+    await expect(borders).toBeAttached()
+    const html = await borders.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('borders.html')
+  })
+
+  // Cultural layers
+  test('cultures layer', async ({ page }) => {
+    const cults = page.locator('#cults')
+    await expect(cults).toBeAttached()
+    const html = await cults.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('cultures.html')
+  })
+
+  test('religions layer', async ({ page }) => {
+    const relig = page.locator('#relig')
+    await expect(relig).toBeAttached()
+    const html = await relig.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('religions.html')
+  })
+
+  // Infrastructure layers
+  test('routes layer', async ({ page }) => {
+    const routes = page.locator('#routes')
+    await expect(routes).toBeAttached()
+    const html = await routes.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('routes.html')
+  })
+
+  // Settlement layers
+  test('burgs/icons layer', async ({ page }) => {
+    const icons = page.locator('#icons')
+    await expect(icons).toBeAttached()
+    const html = await icons.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('icons.html')
+  })
+
+  test('anchors layer', async ({ page }) => {
+    const anchors = page.locator('#anchors')
+    await expect(anchors).toBeAttached()
+    const html = await anchors.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('anchors.html')
+  })
+
+  // Labels layer (without text content due to font rendering)
+  test('labels layer', async ({ page }) => {
+    const labels = page.locator('#labels')
+    await expect(labels).toBeAttached()
+    // Remove text content but keep structure (text rendering varies)
+    const html = await labels.evaluate((el) => {
+      const clone = el.cloneNode(true) as Element
+      clone.querySelectorAll('text, tspan').forEach((t) => t.remove())
+      return clone.outerHTML
+    })
+    expect(html).toMatchSnapshot('labels.html')
+  })
+
+  // Military and markers
+  test('markers layer', async ({ page }) => {
+    const markers = page.locator('#markers')
+    await expect(markers).toBeAttached()
+    const html = await markers.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('markers.html')
+  })
+
+  test('armies layer', async ({ page }) => {
+    const armies = page.locator('#armies')
+    await expect(armies).toBeAttached()
+    const html = await armies.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('armies.html')
+  })
+
+  // Special features
+  test('zones layer', async ({ page }) => {
+    const zones = page.locator('#zones')
+    await expect(zones).toBeAttached()
+    const html = await zones.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('zones.html')
+  })
+
+  test('emblems layer', async ({ page }) => {
+    const emblems = page.locator('#emblems')
+    await expect(emblems).toBeAttached()
+    const html = await emblems.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('emblems.html')
+  })
+
+  // Grid and coordinates
+  test('cells layer', async ({ page }) => {
+    const cells = page.locator('g#cells')
+    await expect(cells).toBeAttached()
+    const html = await cells.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('cells.html')
+  })
+
+  test('coordinates layer', async ({ page }) => {
+    const coordinates = page.locator('#coordinates')
+    await expect(coordinates).toBeAttached()
+    const html = await coordinates.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('coordinates.html')
+  })
+
+  test('compass layer', async ({ page }) => {
+    const compass = page.locator('#compass')
+    await expect(compass).toBeAttached()
+    const html = await compass.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('compass.html')
+  })
+
+  // Population layer
+  test('population layer', async ({ page }) => {
+    const population = page.locator('#population')
+    await expect(population).toBeAttached()
+    const html = await population.evaluate((el) => el.outerHTML)
+    expect(html).toMatchSnapshot('population.html')
+  })
+})

tests/e2e/layers.spec.ts-snapshots/armies.html

@@ -0,0 +1 @@
+<g id="armies" font-size="6" box-size="3" stroke="#000" stroke-width="0.3" fill-opacity="1"></g>

tests/e2e/layers.spec.ts-snapshots/biomes.html

@@ -0,0 +1 @@
+<g id="biomes" mask="url(#land)"></g>

tests/e2e/layers.spec.ts-snapshots/cells.html

@@ -0,0 +1 @@
+<g id="cells" stroke="#808080" stroke-width="0.1"></g>

tests/e2e/layers.spec.ts-snapshots/coastline.html

@@ -0,0 +1 @@
+<g id="coastline"><g id="sea_island" opacity="0.5" stroke="#1f3846" stroke-width="0.7" filter="url(#dropShadow)" auto-filter="1" style="filter: none;"><use href="#feature_2" data-f="2"></use><use href="#feature_3" data-f="3"></use><use href="#feature_4" data-f="4"></use><use href="#feature_5" data-f="5"></use><use href="#feature_6" data-f="6"></use><use href="#feature_15" data-f="15"></use></g><g id="lake_island" opacity="1" stroke="#7c8eaf" stroke-width="0.35"></g></g>

tests/e2e/layers.spec.ts-snapshots/compass.html

@@ -0,0 +1 @@
+<g id="compass" opacity="0.8" mask="url(#water)" shape-rendering="optimizespeed" style="display: none;"><use xlink:href="#defs-compass-rose" transform="translate(80 80) scale(0.25)"></use></g>

tests/e2e/layers.spec.ts-snapshots/coordinates.html

@@ -0,0 +1 @@
+<g id="coordinates" opacity="1" data-size="12" font-size="12" stroke="#d4d4d4" stroke-width="1" stroke-dasharray="5"></g>

tests/e2e/layers.spec.ts-snapshots/cultures.html

@@ -0,0 +1 @@
+<g id="cults" opacity="0.6" stroke="#777777" stroke-width="0.5"></g>

tests/e2e/layers.spec.ts-snapshots/emblems.html

@@ -0,0 +1 @@
+<g id="emblems" opacity="0.9" stroke-width="1" style="display: none;"><g id="burgEmblems" data-size="1"></g><g id="provinceEmblems" data-size="1"></g><g id="stateEmblems" data-size="1"></g></g>

tests/e2e/layers.spec.ts-snapshots/labels.html

@@ -0,0 +1 @@
+<g id="labels" style="display: inline;"><g id="states" opacity="1" fill="#3e3e4b" stroke="#3a3a3a" stroke-width="0" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="22" font-size="22" font-family="Almendra SC"></g><g id="addedLabels" opacity="1" fill="#3e3e4b" stroke="#3a3a3a" stroke-width="0" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="18" font-size="18" font-family="Almendra SC"></g><g id="burgLabels"><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="2" font-size="2" font-family="Almendra SC" data-dy="-0.4" id="hamlet" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="3" font-size="3" font-family="Almendra SC" data-dy="-0.4" id="village" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="2" font-size="2" font-family="Almendra SC" data-dy="-0.5" id="trading_post" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="2" font-size="2" font-family="Almendra SC" data-dy="-0.5" id="caravanserai" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="2" font-size="2" font-family="Almendra SC" data-dy="-0.5" id="monastery" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="2" font-size="2" font-family="Almendra SC" data-dy="-0.5" id="fort" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="4" font-size="4" font-family="Almendra SC" data-dy="-0.4" id="town" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="5" font-size="5" font-family="Almendra SC" data-dy="-0.4" id="city" class="hidden"></g><g opacity="1" fill="#3e3e4b" style="text-shadow: white 0px 0px 4px" letter-spacing="0" data-size="6" font-size="6" font-family="Almendra SC" data-dy="-0.5" id="capital"></g></g></g>

tests/e2e/layers.spec.ts-snapshots/lakes.html

@@ -0,0 +1 @@
+<g id="lakes"><g id="freshwater" opacity="0.5" fill="#a6c1fd" stroke="#5f799d" stroke-width="0.7"><use href="#feature_7" data-f="7"></use><use href="#feature_8" data-f="8"></use><use href="#feature_9" data-f="9"></use><use href="#feature_10" data-f="10"></use><use href="#feature_11" data-f="11"></use><use href="#feature_12" data-f="12"></use><use href="#feature_13" data-f="13"></use><use href="#feature_14" data-f="14"></use></g><g id="salt" opacity="0.5" fill="#409b8a" stroke="#388985" stroke-width="0.7"></g><g id="sinkhole" opacity="1" fill="#5bc9fd" stroke="#53a3b0" stroke-width="0.7"></g><g id="frozen" opacity="0.95" fill="#cdd4e7" stroke="#cfe0eb" stroke-width="0"></g><g id="lava" opacity="0.7" fill="#90270d" stroke="#f93e0c" stroke-width="2" filter="url(#crumpled)"></g><g id="dry" opacity="1" fill="#c9bfa7" stroke="#8e816f" stroke-width="0.7"></g></g>

tests/e2e/layers.spec.ts-snapshots/landmass.html

@@ -0,0 +1 @@
+<g id="landmass" opacity="1" fill="#eef6fb"><rect x="0" y="0" width="1280" height="720"></rect></g>

tests/e2e/layers.spec.ts-snapshots/markers.html

@@ -0,0 +1 @@
+<g id="markers" rescale="1"></g>

tests/e2e/layers.spec.ts-snapshots/population.html

@@ -0,0 +1 @@
+<g id="population" stroke-width="1.6" stroke-linecap="butt"><g id="rural" stroke="#0000ff"></g><g id="urban" stroke="#ff0000"></g></g>

tests/e2e/layers.spec.ts-snapshots/precipitation.html

@@ -0,0 +1 @@
+<g id="prec" stroke="#000000" stroke-width="0" fill="#003dff" style="display: none;"><g id="wind"><text text-rendering="optimizeSpeed" x="1228" y="60.904999999999994">⇇</text><text text-rendering="optimizeSpeed" x="20" y="187.95">⇉</text><text text-rendering="optimizeSpeed" x="1228" y="305.625">⇇</text><text text-rendering="optimizeSpeed" x="1228" y="428.15">⇇</text><text text-rendering="optimizeSpeed" x="20" y="547.8299999999999">⇉</text><text text-rendering="optimizeSpeed" x="1228" y="661.2449999999999">⇇</text><text text-rendering="optimizeSpeed" x="640" y="42">⇊</text><text text-rendering="optimizeSpeed" x="640" y="700">⇈</text></g></g>

tests/e2e/layers.spec.ts-snapshots/provinces.html

@@ -0,0 +1 @@
+<g id="provs" opacity="0.7" fill="#000000" font-size="10" font-family="Georgia"></g>

tests/e2e/layers.spec.ts-snapshots/relief.html

@@ -0,0 +1 @@
+<g id="terrain" set="simple" size="1" density="0.4"></g>

tests/e2e/layers.spec.ts-snapshots/religions.html

@@ -0,0 +1 @@
+<g id="relig" opacity="0.7" stroke="#777777" stroke-width="0"></g>

tests/e2e/layers.spec.ts-snapshots/temperature.html

@@ -0,0 +1 @@
+<g id="temperature" font-size="8px" fill="#000000" fill-opacity="0.3" stroke-width="1.8"></g>

tests/e2e/layers.spec.ts-snapshots/terrain.html

@@ -0,0 +1 @@
+<g id="terrs"><g id="oceanHeights" data-render="0" opacity="1" scheme="bright" terracing="0" skip="0" relax="1" curve="curveBasisClosed"></g><g id="landHeights" opacity="1" scheme="bright" terracing="0" skip="5" relax="0" curve="curveBasisClosed" mask="url(#land)"></g></g>

tests/e2e/layers.spec.ts-snapshots/zones.html

@@ -0,0 +1 @@
+<g id="zones" opacity="0.6" stroke="#333333" stroke-width="0" stroke-linecap="butt"></g>

tsconfig.json

@@ -22,5 +22,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/e2e"]
 }

vitest.browser.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config'
+import { playwright } from '@vitest/browser-playwright'
+
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      // https://vitest.dev/config/browser/playwright
+      instances: [
+        { name: 'chromium', browser: 'chromium' },
+      ],
+      locators: {
+        testIdAttribute: 'id',
+      },
+    },
+  },
+})