feat: update to Cypress 13

FRSgit · FRSgit · commit 3fe99fac9f0b · 2024-09-14T02:25:28.000+02:00
update vitest to v2

BREAKING CHANGE: following Cypress, we've dropped support for the Node &lt; 14 - please update your Node version.
diff --git a/examples/next/cypress/support/e2e.ts b/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')
diff --git a/examples/next/package.json b/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"
   }
diff --git a/examples/webpack/cypress.config.ts b/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);
diff --git a/examples/webpack/package.json b/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"
   }
 }
diff --git a/package.json b/package.json
@@ -20,11 +20,11 @@
     "test:e2e:ci": "pnpm -r test:e2e:ci"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "packageManager": "pnpm@8.6.12",
   "peerDependencies": {
-    "cypress": ">=4.5.0"
+    "cypress": ">=13.0.0"
   },
   "devDependencies": {
     "@frsource/eslint-config": "1.15.0",
diff --git a/packages/cypress-plugin-visual-regression-diff/package.json b/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": "pnpm@8.6.12",
   "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"
diff --git a/packages/cypress-plugin-visual-regression-diff/src/__snapshots__/support.test.ts.snap b/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>
diff --git a/packages/cypress-plugin-visual-regression-diff/src/__snapshots__/task.hook.test.ts.snap b/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`] = `
 {
diff --git a/packages/cypress-plugin-visual-regression-diff/src/commands.ts b/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) {
diff --git a/packages/cypress-plugin-visual-regression-diff/vitest.config.mts b/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'),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`"@types/node": "18.0.6",`
`22`	`22`	`"@types/react": "18.0.15",`
`23`	`23`	`"@types/react-dom": "18.0.6",`
`24`		`- "cypress": "12.12.0",`
	`24`	`+ "cypress": "13.14.2",`
`25`	`25`	`"start-server-and-test": "1.15.2",`
`26`	`26`	`"typescript": "4.7.4"`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`"@frsource/cypress-plugin-visual-regression-diff": "workspace:*",`
`20`	`20`	`"@vue/cli-plugin-e2e-cypress": "5.0.8",`
`21`	`21`	`"@vue/cli-service": "5.0.8",`
`22`		`- "cypress": "12.12.0",`
	`22`	`+ "cypress": "13.14.2",`
`23`	`23`	`"typescript": "5.0.4"`
`24`	`24`	`}`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// Vitest Snapshot v1`
	`1`	`+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html`
`2`	`2`
`3`	`3`	exports[`compareImagesTask > when images shouldn't be updated > when old screenshot exists > when new image has different resolution > resolves with an error message 1`] = `
`4`	`4`	`{`