merge: test: Implement Visual Regression Testing for SVG Generators (#8115)

## Description

Fixes #7794

### Summary

This PR implements visual regression testing for the project's SVG
generators using **Vitest**, **@resvg/resvg-js**, and **pixelmatch**.

### Changes

* Added a visual regression test suite covering all primary SVG
generators.
* Added baseline PNG snapshots for visual comparison.
* Added `test:visual` and `test:visual:update` scripts.
* Added `pixelmatch`, `pngjs`, and related development dependencies.
* Configured CI to upload visual regression diff artifacts when tests
fail.
* Ignored generated visual diff outputs via `.gitignore`.
* Fixed `font-family` quoting in the Versus SVG generators to ensure
valid SVG rendering during visual regression testing.

## Pillar

* [ ] 🎨 Pillar 1 — New Theme Design
* [ ] 📐 Pillar 2 — Geometric SVG Improvement
* [ ] 🕐 Pillar 3 — Timezone Logic Optimization
* [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

N/A (Tooling / Testing change)

## Checklist before requesting a review:

* [x] I have read the `CONTRIBUTING.md` file.
* [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
* [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
* [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
* [ ] I have updated `README.md` if I added a new theme or URL
parameter. *(Not applicable)*
* [x] I have starred the repo.
* [x] I have made sure that I have only one commit to merge in this PR.
* [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard.
* [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

### Local Verification

* ✅ `npm run test:visual`

  * Test Files: **1 passed (1)**
  * Tests: **20 passed (20)**

* ✅ `npm test`

  * Test Files: **1333 passed | 2 skipped**
  * Tests: **9283 passed | 1 expected fail | 14 skipped**

Author: JhaSourav07

.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"
@@ -74,19 +76,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",