Setup keychain image snapshots

.github/workflows/test.yml

@@ -93,4 +93,67 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
       - run: pnpm keychain exec playwright install
-      - run: pnpm test:storybook
+
+      # Run tests and capture the output
+      - run: pnpm test:storybook:ci || echo "SNAPSHOT_FAILED=true" >> $GITHUB_ENV
+        continue-on-error: true
+        id: test-storybook
+
+      # Upload image diffs as artifacts
+      - uses: actions/upload-artifact@v4
+        if: failure() && github.event_name == 'pull_request'
+        with:
+          name: image-snapshots
+          path: |
+            packages/ui-next/__image_snapshots__/__diff_output__
+            packages/keychain/__image_snapshots__/__diff_output__
+
+      # Create PR comment with results
+      - uses: actions/github-script@v7
+        if: github.event_name == 'pull_request'
+        with:
+          script: |
+            const fs = require('fs');
+            
+            let comment = '### 🎨 Visual Regression Test Results\n\n';
+            
+            if (process.env.SNAPSHOT_FAILED === 'true') {
+              comment += '❌ Visual differences detected\n\n';
+              
+              // Find and process diff images
+              const uiNextDiffs = './packages/ui-next/__image_snapshots__/__diff_output__';
+              const keychainDiffs = './packages/keychain/__image_snapshots__/__diff_output__';
+              
+              async function processDiffs(directory, packageName) {
+                if (fs.existsSync(directory)) {
+                  const files = fs.readdirSync(directory);
+                  if (files.length > 0) {
+                    comment += `#### ${packageName} Changes:\n\n`;
+                    for (const file of files) {
+                      if (file.endsWith('.png')) {
+                        const base64Image = fs.readFileSync(`${directory}/${file}`, 'base64');
+                        const storyName = file.replace('-diff.png', '');
+                        comment += `<details><summary><b>${storyName}</b></summary>\n\n`;
+                        comment += `![${storyName}][data:image/png;base64,${base64Image}]\n\n`;
+                        comment += '</details>\n\n';
+                      }
+                    }
+                  }
+                }
+              }
+              
+              await processDiffs(uiNextDiffs, '@cartridge/ui-next');
+              await processDiffs(keychainDiffs, '@cartridge/keychain');
+              
+              comment += '\n[View All Artifacts](' + 
+                `${process.env.GITHUB_SERVER_URL}/${process.env.GITHUB_REPOSITORY}/actions/runs/${process.env.GITHUB_RUN_ID})`;
+            } else {
+              comment += '✅ All visual tests passed!\n';
+            }
+            
+            await github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: comment
+            });

package.json

@@ -28,7 +28,8 @@
     "example:svelte": "pnpm --filter @cartridge/controller-example-svelte",
     "test": "pnpm keychain test",
     "test:ci": "pnpm keychain test:ci",
-    "test:storybook": "pnpm turbo build:deps test:storybook"
+    "test:storybook": "pnpm turbo build:deps test:storybook",
+    "test:storybook:update": "pnpm turbo build:deps test:storybook:update"
   },
   "dependencies": {
     "@cartridge/presets": "github:cartridge-gg/presets#b0def0f"
@@ -42,4 +43,4 @@
     "vercel": "^37.4.2",
     "@types/react": "^18.3.12"
   }
-}
+}

packages/keychain/.storybook/test-runner.ts

@@ -0,0 +1,33 @@
+import { TestRunnerConfig, waitForPageReady } from "@storybook/test-runner";
+import { toMatchImageSnapshot } from "jest-image-snapshot";
+import path from "path";
+
+const customSnapshotsDir = path.join(process.cwd(), "__image_snapshots__");
+
+const config: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async postVisit(page, context) {
+    // Wait for the page to be ready before taking a screenshot
+    await waitForPageReady(page);
+
+    // Wait an extra second for transitions to complete
+    await page.waitForTimeout(1000);
+
+    // Get browser name to handle different browsers if needed
+    const browserName =
+      page.context().browser()?.browserType().name() ?? "unknown";
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      customSnapshotsDir,
+      customSnapshotIdentifier: `${context.id}-${browserName}`,
+      // Add some threshold to handle minor rendering differences
+      failureThreshold: 0.01,
+      failureThresholdType: "percent",
+    });
+  },
+};
+
+export default config;

packages/keychain/__image_snapshots__/.gitignore

@@ -0,0 +1 @@
+__diff_output__

packages/keychain/package.json

@@ -15,7 +15,9 @@
     "test:ci": "vitest run",
     "storybook": "storybook dev -p 6001",
     "storybook:build": "storybook build",
-    "test:storybook": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook:build --quiet && pnpm http-server storybook-static --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\""
+    "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6006 --silent",
+    "test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook -u'",
+    "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook'"
   },
   "dependencies": {
     "@cartridge/account-wasm": "workspace:*",
@@ -66,30 +68,31 @@
     "@storybook/test": "^8.4.7",
     "@storybook/test-runner": "^0.21.0",
     "@testing-library/react": "^13.4.0",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^20.6.0",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-v8": "2.1.8",
     "autoprefixer": "^10.4.18",
-    "concurrently": "^9.0.1",
     "eslint": "^9.12.0",
     "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^14.1.1",
+    "jest-image-snapshot": "^6.4.0",
     "jsdom": "^25.0.1",
     "playwright": "^1.47.1",
     "postcss": "^8.4.35",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.12.0",
+    "start-server-and-test": "^2.0.9",
     "storybook": "^8.4.7",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^6.0.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^2.1.8",
-    "wait-on": "^8.0.1"
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^2.8.1",

packages/ui-next/.storybook/test-runner.ts

@@ -0,0 +1,30 @@
+import { TestRunnerConfig, waitForPageReady } from "@storybook/test-runner";
+import { toMatchImageSnapshot } from "jest-image-snapshot";
+import path from "path";
+
+const customSnapshotsDir = path.join(process.cwd(), "__image_snapshots__");
+
+const config: TestRunnerConfig = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async postVisit(page, context) {
+    // Wait for the page to be ready before taking a screenshot
+    await waitForPageReady(page);
+
+    // Get browser name to handle different browsers if needed
+    const browserName =
+      page.context().browser()?.browserType().name() ?? "unknown";
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      customSnapshotsDir,
+      customSnapshotIdentifier: `${context.id}-${browserName}`,
+      // Add some threshold to handle minor rendering differences
+      failureThreshold: 0.01,
+      failureThresholdType: "percent",
+    });
+  },
+};
+
+export default config;

packages/ui-next/__image_snapshots__/.gitignore

@@ -0,0 +1 @@
+__diff_output__

packages/ui-next/package.json

@@ -28,7 +28,10 @@
     "format:check": "prettier --check ./src",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6003",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6007 --silent",
+    "test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007 -u'",
+    "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007'"
   },
   "dependencies": {
     "@cartridge/utils": "workspace:*",
@@ -82,7 +85,9 @@
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.21.0",
     "@storybook/theming": "^8.4.7",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
@@ -92,12 +97,16 @@
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.13",
+    "http-server": "^14.1.1",
+    "jest-image-snapshot": "^6.4.0",
+    "playwright": "^1.47.1",
     "postcss": "^8.4.35",
+    "start-server-and-test": "^2.0.9",
     "storybook": "^8.4.7",
     "tailwindcss": "^3.4.3",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.4.3",
     "typescript-transform-paths": "^3.4.7",
     "vite": "^5.1.4"
   }
-}
+}

packages/ui-next/src/components/primitives/checkbox.tsx

@@ -30,8 +30,8 @@ const Checkbox = React.forwardRef<
           checked === "indeterminate"
             ? "minus-line"
             : checked
-            ? "line"
-            : "unchecked-line"
+              ? "line"
+              : "unchecked-line"
         }
       />
     </CheckboxPrimitive.Root>