Use playwright for higher fidelity testing

package.json

@@ -31,6 +31,9 @@
     "coverage:watch": "vitest watch --coverage"
   },
   "devDependencies": {
+    "@playwright/test": "^1.44.1",
+    "@vitest/browser": "^1.6.0",
+    "@vitest/coverage-istanbul": "^1.6.0",
     "@vitest/coverage-v8": "^1.6.0",
     "happy-dom": "^14.10.1",
     "microbundle": "^0.15.1",

src/generator.test.js

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { circle, polyline, polygon, rectangle, latLng, latLngBounds } from "leaflet";
-import { it, expect } from "vitest";
+import { it, expect, vi } from "vitest";
 import "./index.js"
 
 it("should render <l-polyline lat-lng='[]'>", () => {
@@ -211,8 +211,9 @@ it("should change zoom on <l-map /> tag", () => {
   el.setAttribute("zoom", "3")
   el.setAttribute("center", "[0, 0]")
   document.body.appendChild(el)
+  const setZoom = vi.spyOn(el.map, "setZoom")
   el.setAttribute("zoom", "5")
-  expect(el.map.getZoom()).toEqual(5)
+  expect(setZoom).toHaveBeenCalledWith(5)
 })
 
 it("should change center on <l-map /> tag", () => {

vite.config.js

@@ -2,6 +2,15 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   test: {
+    browser: {
+      enabled: true,
+      headless: true,
+      name: "chromium",
+      provider: "playwright"
+    },
+    coverage: {
+      provider: "istanbul"
+    },
     includeSource: ["src/**/*.{js,ts}"],
   },
 });