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>

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,
+  },
+})