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>

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>