feat: release 4.0.0

README.md

@@ -89,18 +89,18 @@ require("@frsource/cypress-plugin-visual-regression-diff");
 ```ts
 // typescript / ES6
 import { defineConfig } from "cypress";
-import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
+import { initPlugin as initVisualRegressionPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 export default defineConfig({
   // initPlugin must be called in the section where it is used: e2e or component
   e2e: {
     setupNodeEvents(on, config) {
-      initPlugin(on, config);
+      initVisualRegressionPlugin(on, config);
     },
   },
   component: {
     setupNodeEvents(on, config) {
-      initPlugin(on, config);
+      initVisualRegressionPlugin(on, config);
     },
   },
 });
@@ -110,24 +110,24 @@ export default defineConfig({
 
 ```ts
 // typescript / ES6
-import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
+import { initPlugin as initVisualRegressionPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 export default function (
   on: Cypress.PluginEvents,
   config: Cypress.PluginConfigOptions
 ) {
-  initPlugin(on, config);
+  initVisualRegressionPlugin(on, config);
 
   return config;
 }
 
 // javascript
 const {
-  initPlugin,
+  initPlugin: initVisualRegressionPlugin,
 } = require("@frsource/cypress-plugin-visual-regression-diff/plugins");
 
 module.exports = function (on, config) {
-  initPlugin(on, config);
+  initVisualRegressionPlugin(on, config);
 
   return config;
 };

examples/next/cypress/support/e2e.ts

@@ -16,5 +16,18 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
+Cypress.on('window:before:load', win => {
+  // TODO: remove when Cypress update electron to version >= 28.0.0
+  win.URL.canParse = function canParse(url) {
+    const urlString = String(url);
+    const base = length < 2 || arguments[1] === undefined ? undefined : String(arguments[1]);
+    try {
+      return !!new URL(urlString, base);
+    } catch (error) {
+      return false;
+    }
+  };
+});
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

examples/next/package.json

@@ -21,7 +21,7 @@
     "@types/node": "18.0.6",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
-    "cypress": "12.12.0",
+    "cypress": "13.14.2",
     "start-server-and-test": "1.15.2",
     "typescript": "4.7.4"
   }

examples/webpack/cypress.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from "cypress";
 import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 module.exports = defineConfig({
-  video: false,
   e2e: {
     setupNodeEvents(on, config) {
       initPlugin(on, config);

examples/webpack/package.json

@@ -19,7 +19,7 @@
     "@frsource/cypress-plugin-visual-regression-diff": "workspace:*",
     "@vue/cli-plugin-e2e-cypress": "5.0.8",
     "@vue/cli-service": "5.0.8",
-    "cypress": "12.12.0",
+    "cypress": "13.14.2",
     "typescript": "5.0.4"
   }
 }

package.json

@@ -20,11 +20,11 @@
     "test:e2e:ci": "pnpm -r test:e2e:ci"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "packageManager": "[email protected]",
   "peerDependencies": {
-    "cypress": ">=4.5.0"
+    "cypress": ">=13.0.0"
   },
   "devDependencies": {
     "@frsource/eslint-config": "1.15.0",

packages/cypress-plugin-visual-regression-diff/package.json

@@ -57,11 +57,11 @@
     "test:integration:ci": "CI=true vitest run --coverage"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "packageManager": "[email protected]",
   "peerDependencies": {
-    "cypress": ">=4.5.0"
+    "cypress": ">=13.0.0"
   },
   "devDependencies": {
     "@frsource/prettier-config": "^1.11.0",
@@ -70,17 +70,16 @@
     "@types/pngjs": "6.0.4",
     "@types/sharp": "0.32.0",
     "@types/tmp": "0.2.6",
-    "@vitest/coverage-c8": "0.33.0",
     "cpy-cli": "4.2.0",
-    "cypress": "12.14.0",
+    "cypress": "13.14.2",
     "del-cli": "5.0.1",
     "microbundle": "0.15.1",
     "prettier": "3.3.2",
     "sanitize-filename": "1.6.3",
     "tmp-promise": "3.0.3",
-    "typescript": "5.1.6",
-    "vite-tsconfig-paths": "4.2.1",
-    "vitest": "0.33.0"
+    "typescript": "5.6.2",
+    "vite-tsconfig-paths": "5.0.1",
+    "vitest": "2.1.1"
   },
   "keywords": [
     "Cypress",
@@ -97,13 +96,13 @@
     "Cypress image snapshot"
   ],
   "dependencies": {
-    "@frsource/base64": "1.0.30",
+    "@frsource/base64": "1.0.76",
     "glob": "8.1.0",
     "meta-png": "1.0.6",
     "move-file": "2.1.0",
     "pixelmatch": "5.3.0",
     "pngjs": "7.0.0",
-    "sharp": "0.32.6"
+    "sharp": "0.33.5"
   },
   "publishConfig": {
     "access": "public"

packages/cypress-plugin-visual-regression-diff/src/__snapshots__/support.test.ts.snap

@@ -1,101 +1,101 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`generateOverlayTemplate > generates proper template 1`] = `
-"<div class=\\"cp-visual-regression-diff-overlay runner\\" style=\\"position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column\\">
-  <header style=\\"position:static\\">
-  <nav style=\\"display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;\\">
+"<div class="cp-visual-regression-diff-overlay runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
+  <header style="position:static">
+  <nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
     <h2>some title - screenshot diff</h2>
-    <form style=\\"display:flex;align-items:center;gap:5px;text-align:right\\">
-      <button type=\\"submit\\"><i class=\\"fa fa-check\\"></i> Update screenshot</button>
-      <button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
+    <form style="display:flex;align-items:center;gap:5px;text-align:right">
+      <button type="submit"><i class="fa fa-check"></i> Update screenshot</button>
+      <button type="button" data-type="close"><i class="fa fa-times"></i> Close</button>
     <form>
   </nav>
   </header>
-  <div style=\\"padding:15px;overflow:auto\\">
-    <div style=\\"display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px\\">
+  <div style="padding:15px;overflow:auto">
+    <div style="display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px">
       <div
-        style=\\"position:relative;background:#fff;border:solid 15px #fff\\"
-        onmouseover=\\"this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1\\"
-        onmouseleave=\\"this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0\\"
+        style="position:relative;background:#fff;border:solid 15px #fff"
+        onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
+        onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
       >
         <h3>New screenshot (hover mouse away too see the old one):</h3>
-        <img style=\\"min-width:300px;width:100%;opacity:0\\" src=\\"data:image/png;base64,img-new-base64\\" />
-        <div style=\\"position:absolute;top:0;left:0;background:#fff\\">
+        <img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,img-new-base64" />
+        <div style="position:absolute;top:0;left:0;background:#fff">
           <h3>Old screenshot (hover over to see the new one):</h3>
-          <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-old-base64\\" />
+          <img style="min-width:300px;width:100%" src="data:image/png;base64,img-old-base64" />
         </div>
       </div>
-      <div style=\\"background:#fff;border:solid 15px #fff\\">
+      <div style="background:#fff;border:solid 15px #fff">
         <h3>Diff between new and old screenshot</h3>
-        <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-diff-base64\\" />
+        <img style="min-width:300px;width:100%" src="data:image/png;base64,img-diff-base64" />
       </div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`generateOverlayTemplate > generates proper template 2`] = `
-"<div class=\\"cp-visual-regression-diff-overlay runner\\" style=\\"position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column\\">
-  <header style=\\"position:static\\">
-  <nav style=\\"display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;\\">
+"<div class="cp-visual-regression-diff-overlay runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
+  <header style="position:static">
+  <nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
     <h2>some title - screenshot diff</h2>
-    <form style=\\"display:flex;align-items:center;gap:5px;text-align:right\\">
+    <form style="display:flex;align-items:center;gap:5px;text-align:right">
       Image was already updated, rerun test to see new comparison
-      <button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
+      <button type="button" data-type="close"><i class="fa fa-times"></i> Close</button>
     <form>
   </nav>
   </header>
-  <div style=\\"padding:15px;overflow:auto\\">
-    <div style=\\"display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px\\">
+  <div style="padding:15px;overflow:auto">
+    <div style="display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px">
       <div
-        style=\\"position:relative;background:#fff;border:solid 15px #fff\\"
-        onmouseover=\\"this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1\\"
-        onmouseleave=\\"this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0\\"
+        style="position:relative;background:#fff;border:solid 15px #fff"
+        onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
+        onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
       >
         <h3>New screenshot (hover mouse away too see the old one):</h3>
-        <img style=\\"min-width:300px;width:100%;opacity:0\\" src=\\"data:image/png;base64,img-new-base64\\" />
-        <div style=\\"position:absolute;top:0;left:0;background:#fff\\">
+        <img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,img-new-base64" />
+        <div style="position:absolute;top:0;left:0;background:#fff">
           <h3>Old screenshot (hover over to see the new one):</h3>
-          <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-old-base64\\" />
+          <img style="min-width:300px;width:100%" src="data:image/png;base64,img-old-base64" />
         </div>
       </div>
-      <div style=\\"background:#fff;border:solid 15px #fff\\">
+      <div style="background:#fff;border:solid 15px #fff">
         <h3>Diff between new and old screenshot</h3>
-        <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-diff-base64\\" />
+        <img style="min-width:300px;width:100%" src="data:image/png;base64,img-diff-base64" />
       </div>
     </div>
   </div>
 </div>"
 `;
 
 exports[`generateOverlayTemplate > generates proper template 3`] = `
-"<div class=\\"cp-visual-regression-diff-overlay runner\\" style=\\"position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column\\">
-  <header style=\\"position:static\\">
-  <nav style=\\"display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;\\">
+"<div class="cp-visual-regression-diff-overlay runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0;display:flex;flex-flow:column">
+  <header style="position:static">
+  <nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
     <h2>some title - screenshot diff</h2>
-    <form style=\\"display:flex;align-items:center;gap:5px;text-align:right\\">
+    <form style="display:flex;align-items:center;gap:5px;text-align:right">
 
-      <button type=\\"button\\" data-type=\\"close\\"><i class=\\"fa fa-times\\"></i> Close</button>
+      <button type="button" data-type="close"><i class="fa fa-times"></i> Close</button>
     <form>
   </nav>
   </header>
-  <div style=\\"padding:15px;overflow:auto\\">
-    <div style=\\"display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px\\">
+  <div style="padding:15px;overflow:auto">
+    <div style="display:flex;justify-content:space-evenly;align-items:flex-start;gap:15px">
       <div
-        style=\\"position:relative;background:#fff;border:solid 15px #fff\\"
-        onmouseover=\\"this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1\\"
-        onmouseleave=\\"this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0\\"
+        style="position:relative;background:#fff;border:solid 15px #fff"
+        onmouseover="this.querySelector('div').style.opacity=0,this.querySelector('img').style.opacity=1"
+        onmouseleave="this.querySelector('div').style.opacity=1,this.querySelector('img').style.opacity=0"
       >
         <h3>New screenshot (hover mouse away too see the old one):</h3>
-        <img style=\\"min-width:300px;width:100%;opacity:0\\" src=\\"data:image/png;base64,img-new-base64\\" />
-        <div style=\\"position:absolute;top:0;left:0;background:#fff\\">
+        <img style="min-width:300px;width:100%;opacity:0" src="data:image/png;base64,img-new-base64" />
+        <div style="position:absolute;top:0;left:0;background:#fff">
           <h3>Old screenshot (hover over to see the new one):</h3>
-          <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-old-base64\\" />
+          <img style="min-width:300px;width:100%" src="data:image/png;base64,img-old-base64" />
         </div>
       </div>
-      <div style=\\"background:#fff;border:solid 15px #fff\\">
+      <div style="background:#fff;border:solid 15px #fff">
         <h3>Diff between new and old screenshot</h3>
-        <img style=\\"min-width:300px;width:100%\\" src=\\"data:image/png;base64,img-diff-base64\\" />
+        <img style="min-width:300px;width:100%" src="data:image/png;base64,img-diff-base64" />
       </div>
     </div>
   </div>

packages/cypress-plugin-visual-regression-diff/src/__snapshots__/task.hook.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compareImagesTask > when images shouldn't be updated > when old screenshot exists > when new image has different resolution > resolves with an error message 1`] = `
 {

packages/cypress-plugin-visual-regression-diff/src/commands.ts

@@ -165,7 +165,7 @@ Cypress.Commands.add(
       .then(({ screenshotPath, title: titleFromTask }) => {
         title = titleFromTask;
         let imgPath: string;
-        return ($el ? cy.wrap($el) : cy)
+        return (($el ? cy.wrap($el) : cy) as Cypress.Chainable<unknown>)
           .screenshot(screenshotPath, {
             ...screenshotConfig,
             onAfterScreenshot(el, props) {

packages/cypress-plugin-visual-regression-diff/vitest.config.ts → packages/cypress-plugin-visual-regression-diff/vitest.config.mts

@@ -13,14 +13,16 @@ export default defineConfig({
     exclude: exludeFiles,
     include: [testsGlob],
     coverage: {
-      provider: 'c8',
+      provider: 'v8',
       reporter: isCI
         ? ['text', ['lcovonly', { projectRoot: '../..' }]]
         : ['text', 'lcov'],
-      lines: 90,
-      functions: 90,
-      branches: 90,
-      statements: 90,
+      thresholds: {
+        lines: 90,
+        functions: 90,
+        branches: 90,
+        statements: 90,
+      },
     },
     alias: {
       '@fixtures/*': path.resolve(__dirname, '__tests__', 'partials'),