update jspdf to 4, cypress to 15 and use alternative image comparison for e2e (#175)

Author: ivmarcos

.gitignore

@@ -10,6 +10,7 @@ umd
 cypress/downloads
 cypress/baseline/diff
 cypress/baseline/png
+cypress/baseline/__snapshots__
 cypress/screenshots
 coverage/
 .playwright/

cypress.config.ts

@@ -1,48 +1,48 @@
 import path from "path";
 import { defineConfig } from "cypress";
-import ComparePdf, { ComparePdfConfig } from "compare-pdf";
+import { comparePdfToSnapshot } from "pdf-visual-diff";
 
-const comparePDFConfig: ComparePdfConfig = {
-  paths: {
-    actualPdfRootFolder: path.join(process.cwd(), "cypress", "downloads"),
-    baselinePdfRootFolder: path.join(process.cwd(), "cypress", "baseline"),
-    actualPngRootFolder: path.join(
-      process.cwd(),
-      "cypress",
-      "downloads",
-      "png"
-    ),
-    baselinePngRootFolder: path.join(
-      process.cwd(),
-      "cypress",
-      "baseline",
-      "png"
-    ),
-    diffPngRootFolder: path.join(process.cwd(), "cypress", "baseline", "diff"),
-  },
-  settings: {
-    imageEngine: "native",
-    density: 150,
-    quality: 80,
-    tolerance: 0,
-    threshold: 0.1,
-    cleanPngPaths: false,
-    matchPageCount: true,
-    disableFontFace: true,
-    verbosity: 0,
-  },
-};
+interface ComparisonResult {
+  status: "passed" | "failed";
+  message?: string;
+}
 
 export default defineConfig({
   e2e: {
     setupNodeEvents(on) {
       on("task", {
-        async compareFile(filename: string) {
-          const comparisonResults = await new ComparePdf(comparePDFConfig)
-            .actualPdfFile(filename)
-            .baselinePdfFile(filename)
-            .compare();
-          return comparisonResults;
+        async compareFile(filename: string): Promise<ComparisonResult> {
+          const actualPath = path.join(process.cwd(), "cypress", "downloads", filename);
+          const snapshotDir = path.join(process.cwd(), "cypress", "baseline");
+
+          try {
+            // comparePdfToSnapshot returns true if PDFs match, false if they don't
+            const matches = await comparePdfToSnapshot(
+              actualPath,
+              snapshotDir,
+              filename,
+              {
+                tolerance: 0.1,
+                pdf2PngOptions: {
+                  dpi: 150,
+                },
+              }
+            );
+
+            if (matches) {
+              return { status: "passed" };
+            } else {
+              return {
+                status: "failed",
+                message: `PDF comparison failed: ${filename} does not match baseline`,
+              };
+            }
+          } catch (error) {
+            return {
+              status: "failed",
+              message: `PDF comparison error: ${error instanceof Error ? error.message : String(error)}`,
+            };
+          }
         },
       });
     },

package.json

@@ -26,6 +26,8 @@
     "clean": "rimraf dist",
     "docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts src/types.ts src/constants.ts",
     "test": "npm run lint && vitest run",
+    "test:e2e": "cypress run",
+    "test:e2e:open": "cypress open",
     "lint": "eslint . && prettier -c .",
     "release": "release-it",
     "prerelease": "npm run clean && npm run build",
@@ -40,11 +42,11 @@
     "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-react": "^4.3.4",
     "canvas": "^3.1.0",
-    "compare-pdf": "^1.1.8",
-    "cypress": "^13.1.0",
+    "cypress": "^15.8.1",
     "eslint": "^8.39.0",
     "eslint-plugin-react": "^7.32.2",
     "jsdom": "^26.0.0",
+    "pdf-visual-diff": "^0.15.2",
     "prettier": "^2.8.4",
     "process": "^0.11.10",
     "react": "^16.8",
@@ -65,7 +67,7 @@
   },
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.4"
+    "jspdf": "^4.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"