test: add visual regression testing for SVG generators

Author: sureshsuriya

.github/workflows/ci.yml

@@ -47,6 +47,14 @@ jobs:
       - name: Run Unit Tests (Vitest)
         run: npm run test:coverage
 
+      - name: Upload Visual Regression Diffs
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-test-diffs
+          path: tests/visual/diffs/
+          if-no-files-found: ignore
+
   build:
     name: Production Build
     runs-on: ubuntu-latest

.gitignore

@@ -12,6 +12,7 @@
 
 # testing
 /coverage
+/tests/visual/diffs/
 
 # next.js
 /.next/

lib/svg/generator.ts

@@ -2488,7 +2488,7 @@ export function generateVersusSVG(
 
   <g transform="translate(${singleW}, ${H / 2})">
     <circle cx="0" cy="0" r="${s(24)}" fill="${bg}" stroke="${accent}" stroke-width="2" />
-    <text x="0" y="${s(6)}" text-anchor="middle" font-family="${statsFont}" fill="${accent}" font-size="${s(16)}" font-weight="bold">VS</text>
+    <text x="0" y="${s(6)}" text-anchor="middle" font-family="${statsFont.replace(/"/g, "'")}" fill="${accent}" font-size="${s(16)}" font-weight="bold">VS</text>
   </g>
 </svg>`;
 }
@@ -2595,7 +2595,7 @@ function generateAutoThemeVersusSVG(
 
   <g transform="translate(${singleW}, ${H / 2})">
     <circle cx="0" cy="0" r="${s(24)}" class="cp-bg-fill" stroke="var(--cp-accent)" stroke-width="2" />
-    <text x="0" y="${s(6)}" text-anchor="middle" font-family="${statsFont}" class="cp-accent-fill" font-size="${s(16)}" font-weight="bold">VS</text>
+    <text x="0" y="${s(6)}" text-anchor="middle" font-family="${statsFont.replace(/"/g, "'")}" class="cp-accent-fill" font-size="${s(16)}" font-weight="bold">VS</text>
   </g>
 </svg>`;
 }

package-lock.json

@@ -14,6 +14,8 @@
     "test": "vitest run",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
+    "test:visual": "vitest run tests/visual",
+    "test:visual:update": "cross-env UPDATE_VISUAL_BASELINES=true vitest run tests/visual",
     "bench:svg": "tsx scripts/benchmark-svg.ts",
     "check:api-breaking": "tsx scripts/detect-breaking-api-changes.ts",
     "prepare": "husky"
@@ -72,19 +74,24 @@
     "@types/jspdf": "^1.3.3",
     "@types/node": "^20",
     "@types/pdf-parse": "^1.1.5",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/coverage-v8": "^4.1.4",
     "@vitest/ui": "^4.1.4",
     "autoprefixer": "^10.5.0",
+    "cross-env": "^10.1.0",
     "eslint": "^9",
     "eslint-config-next": "16.2.3",
     "eslint-config-prettier": "^10.1.8",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
     "lint-staged": "^15.2.11",
     "node-mocks-http": "^1.17.2",
+    "pixelmatch": "^7.2.0",
+    "pngjs": "^7.0.0",
     "postcss": "^8.5.10",
     "prettier": "^3.8.3",
     "react-is": "^19.2.6",