minor symfony#2146 Upgrade Vitest, use a real browser for Map Bridges tests (Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Upgrade Vitest, use a real browser for Map Bridges tests

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Follow symfony#2138 (comment).

It looks like Google Maps changed a bit their implementation and now manipulates [`SVGImageElement`](developer.mozilla.org/en-us/docs/web/api/svgimageelement) and [`SVGAnimatedString`](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString):
<img width="1559" alt="image" src="https://github.com/user-attachments/assets/3d82559d-500a-45fa-9730-1a1ccd3adde8">

But, this API is not supported by https://github.com/capricorn86/happy-dom.

Instead of reimplementing things ourselves, I think it's more clever to use a **real browser** (here Chromium) through [Playwright](playwright.dev/), when using [Vitest's Browser mode](https://vitest.dev/guide/browser/).

This PR also upgrade Vitest from ^0.34 to ^2.0, and Vite from 4.5.0 to 5.4.3, which comes with https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated (that I fixed in a second commit)

Commits
-------

eaab0f6 chore: rename vitest.config.js to vitest.config.mjs, to get rid of https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated
cebd8e2 Upgrade Vitest, use a real browser for Map Bridges tests

Author: Kocal

.github/workflows/test.yaml

@@ -141,4 +141,5 @@ jobs:
                   restore-keys: |
                       ${{ runner.os }}-yarn-
             - run: yarn --immutable
+            - run: yarn playwright install  
             - run: yarn test

package.json

@@ -19,10 +19,12 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-typescript": "^11.1.6",
         "@symfony/stimulus-testing": "^2.0.1",
+        "@vitest/browser": "^2.0.5",
         "clean-css-cli": "^5.6.2",
+        "playwright": "^1.47.0",
         "rollup": "^4.21.0",
         "tslib": "^2.6.3",
         "typescript": "^5.5.4",
-        "vitest": "^0.34.6"
+        "vitest": "^2.0.5"
     }
 }

src/Chartjs/assets/vitest.config.js renamed to src/Chartjs/assets/vitest.config.mjs

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.js'
+import configShared from '../../../vitest.config.mjs'
 import path from 'path';
 
 export default mergeConfig(

src/Map/src/Bridge/Google/assets/package.json

@@ -33,7 +33,6 @@
     "devDependencies": {
         "@googlemaps/js-api-loader": "^1.16.6",
         "@hotwired/stimulus": "^3.0.0",
-        "@types/google.maps": "^3.55.9",
-        "happy-dom": "^14.12.3"
+        "@types/google.maps": "^3.55.9"
     }
 }

src/Map/src/Bridge/Google/assets/vitest.config.js

@@ -0,0 +1,29 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import configShared from '../../../../../../vitest.config.mjs'
+
+export default mergeConfig(
+    configShared,
+    defineConfig({
+        resolve: {
+            alias: {
+                '@symfony/ux-map/abstract-map-controller': __dirname + '/../../../../assets/src/abstract_map_controller.ts',
+            },
+        },
+        define: {
+            // Prevent the following error:
+            //      ReferenceError: global is not defined
+            //       ❯ ../../../../../../node_modules/pretty-format/build/plugins/AsymmetricMatcher.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:139:19
+            //       ❯ ../../../../../../node_modules/pretty-format/build/index.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:805:7
+            //       ❯ ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:13445:36
+            global: {}
+        },
+        test: {
+            browser: {
+                enabled: true,
+                provider: 'playwright', // or 'webdriverio'
+                name: 'chromium', // browser name is required
+                headless: true,
+            },
+        },
+    })
+);

src/Map/src/Bridge/Google/assets/vitest.config.mjs

@@ -33,7 +33,6 @@
     "devDependencies": {
         "@hotwired/stimulus": "^3.0.0",
         "@types/leaflet": "^1.9.12",
-        "happy-dom": "^14.12.3",
         "leaflet": "^1.9.4"
     }
 }

src/Map/src/Bridge/Leaflet/assets/package.json

@@ -0,0 +1,30 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import configShared from '../../../../../../vitest.config.mjs'
+
+export default mergeConfig(
+    configShared,
+    defineConfig({
+        resolve: {
+            alias: {
+                '@symfony/ux-map/abstract-map-controller': __dirname + '/../../../../assets/src/abstract_map_controller.ts',
+                'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',
+            },
+        },
+        define: {
+            // Prevent the following error:
+            //      ReferenceError: global is not defined
+            //       ❯ ../../../../../../node_modules/pretty-format/build/plugins/AsymmetricMatcher.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:139:19
+            //       ❯ ../../../../../../node_modules/pretty-format/build/index.js ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:805:7
+            //       ❯ ../../../../../../../../../../node_modules/.vite/deps/@testing-library_dom.js:13445:36
+            global: {}
+        },
+        test: {
+            browser: {
+                enabled: true,
+                provider: 'playwright', // or 'webdriverio'
+                name: 'chromium', // browser name is required
+                headless: true,
+            },
+        },
+    })
+);

src/Map/src/Bridge/Leaflet/assets/vitest.config.js

@@ -1,11 +1,11 @@
 // vitest.config.ts
 import { defineConfig, mergeConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
-import configShared from '../../../vitest.config.js'
+import configShared from '../../../vitest.config.mjs'
 
 export default mergeConfig(
     configShared,
     defineConfig({
          plugins: [react()],
      })
-);
+);