ui: fix running storybook tests in ci

pkgs/clan-app/flake-module.nix

@@ -22,7 +22,6 @@
           clan-ts-api = config.packages.clan-ts-api;
           fonts = config.packages.fonts;
         };
-
       };
       #        //
       # todo add darwin support
@@ -45,8 +44,8 @@
 
       checks =
         config.packages.clan-app.tests
-        # Clan's darwin CI is a sandbox too limiting to spawn a headless brwoser
-        // lib.optionalAttrs (!lib.hasSuffix system "darwin") {
+        # Sandboxed Darwin nix build can't spawn a headless brwoser
+        // lib.optionalAttrs (!lib.hasSuffix "darwin" system) {
           inherit (config.packages.clan-app-ui.tests) clan-app-ui-storybook;
         };
     };

pkgs/clan-app/shell.nix

@@ -128,8 +128,8 @@ mkShell {
       export PLAYWRIGHT_BROWSERS_PATH=${
         playwright.browsers.override {
           withFfmpeg = false;
-          withFirefox = false;
-          withWebkit = true;
+          withFirefox = true;
+          withWebkit = false;
           withChromium = false;
           withChromiumHeadlessShell = false;
         }
@@ -142,7 +142,7 @@ mkShell {
 
       # 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
+      export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=1
     fi
   '';
 }

pkgs/clan-app/ui.nix

@@ -58,8 +58,8 @@ buildNpmPackage (finalAttrs: {
         env = {
           PLAYWRIGHT_BROWSERS_PATH = "${playwright.browsers.override {
             withFfmpeg = false;
-            withFirefox = false;
-            withWebkit = true;
+            withFirefox = true;
+            withWebkit = false;
             withChromium = false;
             withChromiumHeadlessShell = false;
           }}";
@@ -68,6 +68,7 @@ buildNpmPackage (finalAttrs: {
           # the playwright nix package does not support:
           # https://github.com/NixOS/nixpkgs/blob/f9c3b27aa3f9caac6717973abcc549dbde16bdd4/pkgs/development/web/playwright/driver.nix#L261
           PLAYWRIGHT_HOST_PLATFORM_OVERRIDE = "nixos";
+          DEBUG = "vitest:*";
         };
         preBuild = finalAttrs.preBuild + ''
           playwright_ver=$(jq --raw-output .devDependencies.playwright ${./ui/package.json})

pkgs/clan-app/ui/package.json

@@ -15,7 +15,7 @@
     "storybook": "storybook",
     "knip": "knip --fix",
     "storybook-dev": "storybook dev -p 6006",
-    "test-storybook": "vitest run --project storybook --reporter verbose",
+    "test-storybook": "vitest run --project storybook",
     "test-storybook-update-snapshots": "vitest run --project storybook --update"
   },
   "license": "MIT",

pkgs/clan-app/ui/vite.config.ts

@@ -94,7 +94,16 @@ export default defineConfig({
             provider: "playwright",
             instances: [
               {
-                browser: "webkit",
+                // Ideally we should use webkit to match clan-app, but inside a
+                // sandboxed nix build, webkit takes forever to finish
+                // launching. Chromium randomly closes itself during testing, as
+                // reported here:
+                // https://github.com/vitest-dev/vitest/discussions/7981
+                //
+                // Firefox is the only browser that can reliably finish the
+                // tests. We want to test storybook only, and the differences
+                // between browsers are probably neglegible to us
+                browser: "firefox",
               },
             ],
           },