From 9cc85b36c6e943778d95f8f0520b8db99bf7bedf Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Mon, 29 Sep 2025 15:53:03 +0100
Subject: [PATCH] feat(ui): switch to webkit for storybook tests

---
 pkgs/clan-app/shell.nix            | 18 +++++++++++++++---
 pkgs/clan-app/ui/package-lock.json | 16 ++++++++--------
 pkgs/clan-app/ui/package.json      |  2 +-
 pkgs/clan-app/ui/tsconfig.json     |  6 +++++-
 pkgs/clan-app/ui/vitest.config.ts  |  9 ++++++++-
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/pkgs/clan-app/shell.nix b/pkgs/clan-app/shell.nix
index 5778d9e55..215d6cb97 100644
--- a/pkgs/clan-app/shell.nix
+++ b/pkgs/clan-app/shell.nix
@@ -113,15 +113,27 @@ mkShell {
     # todo darwin support needs some work
     (lib.optionalString stdenv.hostPlatform.isLinux ''
       # configure playwright for storybook snapshot testing
-      export PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+      # we only want webkit as that matches what the app is rendered with
+
       export PLAYWRIGHT_BROWSERS_PATH=${
         playwright-driver.browsers.override {
           withFfmpeg = false;
           withFirefox = false;
+          withWebkit = true;
           withChromium = false;
-          withChromiumHeadlessShell = true;
+          withChromiumHeadlessShell = false;
         }
       }
-      export PLAYWRIGHT_HOST_PLATFORM_OVERRIDE="ubuntu-24.04"
+
+      # stop playwright from trying to validate it has downloaded the necessary browsers
+      # we are providing them manually via nix
+
+      export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
+
+      # playwright browser drivers are versioned e.g. webkit-2191
+      # this helps us avoid having to update the playwright js dependency everytime we update nixpkgs and vice versa
+      # see vitest.config.js for corresponding launch configuration
+
+      export PLAYWRIGHT_WEBKIT_EXECUTABLE=$(find -L "$PLAYWRIGHT_BROWSERS_PATH" -type f -name "pw_run.sh")
     '');
 }
diff --git a/pkgs/clan-app/ui/package-lock.json b/pkgs/clan-app/ui/package-lock.json
index e7076b902..0803bd39b 100644
--- a/pkgs/clan-app/ui/package-lock.json
+++ b/pkgs/clan-app/ui/package-lock.json
@@ -53,7 +53,7 @@
         "jsdom": "^26.1.0",
         "knip": "^5.61.2",
         "markdown-to-jsx": "^7.7.10",
-        "playwright": "~1.53.2",
+        "playwright": "~1.55.1",
         "postcss": "^8.4.38",
         "postcss-url": "^10.1.3",
         "prettier": "^3.2.5",
@@ -6956,13 +6956,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.53.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.2.tgz",
-      "integrity": "sha512-6K/qQxVFuVQhRQhFsVZ9fGeatxirtrpPgxzBYWyZLEXJzqYwuL4fuNmfOfD5et1tJE4GScKyPNeLhZeRwuTU3A==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.53.2"
+        "playwright-core": "1.55.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6975,9 +6975,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.53.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.2.tgz",
-      "integrity": "sha512-ox/OytMy+2w1jcYEYlOo1Hhp8hZkLCximMTUTMBXjGUA1KoFfiSZ+DU+3a739jsPY0yoKH2TFy9S2fsJas8yAw==",
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/pkgs/clan-app/ui/package.json b/pkgs/clan-app/ui/package.json
index a1e37647d..36e5a7851 100644
--- a/pkgs/clan-app/ui/package.json
+++ b/pkgs/clan-app/ui/package.json
@@ -48,7 +48,7 @@
     "jsdom": "^26.1.0",
     "knip": "^5.61.2",
     "markdown-to-jsx": "^7.7.10",
-    "playwright": "~1.53.2",
+    "playwright": "~1.55.1",
     "postcss": "^8.4.38",
     "postcss-url": "^10.1.3",
     "prettier": "^3.2.5",
diff --git a/pkgs/clan-app/ui/tsconfig.json b/pkgs/clan-app/ui/tsconfig.json
index 3544efda6..5e4b93ca3 100644
--- a/pkgs/clan-app/ui/tsconfig.json
+++ b/pkgs/clan-app/ui/tsconfig.json
@@ -9,7 +9,11 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client", "vite-plugin-solid-svg/types-component-solid"],
+    "types": [
+      "vite/client",
+      "vite-plugin-solid-svg/types-component-solid",
+      "@vitest/browser/providers/playwright"
+    ],
     "noEmit": true,
     "resolveJsonModule": true,
     "allowJs": true,
diff --git a/pkgs/clan-app/ui/vitest.config.ts b/pkgs/clan-app/ui/vitest.config.ts
index 30ccb0860..ea912c4a6 100644
--- a/pkgs/clan-app/ui/vitest.config.ts
+++ b/pkgs/clan-app/ui/vitest.config.ts
@@ -40,7 +40,14 @@ export default mergeConfig(
               enabled: true,
               headless: true,
               provider: "playwright",
-              instances: [{ browser: "chromium" }],
+              instances: [
+                {
+                  browser: "webkit",
+                  launch: {
+                    executablePath: process.env.PLAYWRIGHT_WEBKIT_EXECUTABLE,
+                  },
+                },
+              ],
             },
             // This setup file applies Storybook project annotations for Vitest
             // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations