From e9e9dbc51844f1bdc8e318189b1575673bdd3130 Mon Sep 17 00:00:00 2001
From: Hans Otto Wirtz <hansottowirtz@gmail.com>
Date: Sat, 24 May 2025 10:01:09 +0200
Subject: [PATCH] chore: test against more browsers

---
 .github/workflows/test.yml |  7 +++----
 package.json               |  4 ++--
 pnpm-lock.yaml             | 32 ++++++++++++++++++++++++++------
 test-runner-jest.config.js | 21 ++++++++++++++-------
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c1f8794..a1605ea 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -18,12 +18,11 @@ jobs:
       - run: pnpm build
       - name: Run tests in development
         run: |
-          pnpx playwright install-deps
-          pnpx playwright install
+          pnpx playwright install --with-deps firefox chromium webkit
           pnpx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "pnpm storybook" \
-            "pnpx wait-on tcp:6006 && pnpm test-storybook"
+            "pnpx wait-on tcp:6006 && pnpm test-storybook --browsers firefox chromium webkit"
       - name: Run tests in production
-        run: pnpm test
+        run: pnpm test-storybook --browsers firefox chromium webkit
         env:
           TARGET_URL: "${{ github.event.deployment_status.target_url }}"
diff --git a/package.json b/package.json
index d3a5c6c..82c48c6 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^8.6.12",
+    "playwright": "^1.52.0",
     "tsup": "^8.4.0",
     "typescript": "~5.8.3",
     "vite": "^6.3.4"
@@ -64,8 +65,7 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "@swc/core",
-      "esbuild",
-      "playwright"
+      "esbuild"
     ]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 590f896..f24d1d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ importers:
       globals:
         specifier: ^16.0.0
         version: 16.0.0
+      playwright:
+        specifier: ^1.52.0
+        version: 1.52.0
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -2417,6 +2420,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3351,9 +3359,14 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  playwright@1.29.1:
-    resolution: {integrity: sha512-lasC+pMqsQ2uWhNurt3YK3xo0gWlMjslYUylKbHcqF/NTjwp9KStRGO7S6wwz2f52GcSnop8XUK/GymJjdzrxw==}
-    engines: {node: '>=14'}
+  playwright-core@1.52.0:
+    resolution: {integrity: sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.52.0:
+    resolution: {integrity: sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==}
+    engines: {node: '>=18'}
     hasBin: true
 
   polished@4.2.2:
@@ -5631,7 +5644,7 @@ snapshots:
       jest-serializer-html: 7.1.0
       jest-watch-typeahead: 2.2.1(jest@29.7.0(@types/node@18.11.18))
       nyc: 15.1.0
-      playwright: 1.29.1
+      playwright: 1.52.0
       storybook: 8.6.12
     transitivePeerDependencies:
       - '@swc/helpers'
@@ -6944,6 +6957,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -8086,9 +8102,13 @@ snapshots:
 
   playwright-core@1.29.1: {}
 
-  playwright@1.29.1:
+  playwright-core@1.52.0: {}
+
+  playwright@1.52.0:
     dependencies:
-      playwright-core: 1.29.1
+      playwright-core: 1.52.0
+    optionalDependencies:
+      fsevents: 2.3.2
 
   polished@4.2.2:
     dependencies:
diff --git a/test-runner-jest.config.js b/test-runner-jest.config.js
index 8d7a9b6..5ebd1c1 100644
--- a/test-runner-jest.config.js
+++ b/test-runner-jest.config.js
@@ -1,20 +1,27 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
 import { getJestConfig } from '@storybook/test-runner';
 
+// The default Jest configuration comes from @storybook/test-runner
+const testRunnerConfig = getJestConfig();
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
 export default {
-  // The default configuration comes from @storybook/test-runner
-  ...getJestConfig(),
-  /** Add your own overrides below
+  ...testRunnerConfig,
+  /** Add your own overrides below, and make sure
+   *  to merge testRunnerConfig properties with your own
    * @see https://jestjs.io/docs/configuration
    */
   testEnvironmentOptions: {
+    ...testRunnerConfig.testEnvironmentOptions,
     'jest-playwright': {
-      browser: 'chromium',
+      ...testRunnerConfig.testEnvironmentOptions['jest-playwright'],
+      // eslint-disable-next-line no-undef
       launchOptions: process.env.DEBUG ? {
+        ...testRunnerConfig.testEnvironmentOptions['jest-playwright'].launchOptions,
         headless: false,
         devtools: true,
       } : {}
     }
-  }
+  },
 };