feat: first implementation

FRSgit · FRSgit · commit 388cccf5f033 · 2021-10-25T03:33:19.000+02:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+coverage
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  plugins: [
+    '@typescript-eslint',
+    'eslint-comments',
+    "cypress"
+  ],
+  env: {
+    es6: true,
+    node: true,
+    'cypress/globals': true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:eslint-comments/recommended',
+    'prettier'
+  ],
+  overrides: [
+    {
+      files: ['**.ts'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        sourceType: 'module',
+        project: [
+          './tsconfig.json',
+          './packages/*/tsconfig.json',
+        ],
+        tsconfigRootDir: __dirname,
+        warnOnUnsupportedTypeScriptVersion: false,
+        EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+      },
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off'
+      }
+    },
+  ],
+};
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,16 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
+# Yarn
+.yarn/*
+*/.yarn
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
diff --git a/.yarn/releases/yarn-3.1.0-rc.13.cjs b/.yarn/releases/yarn-3.1.0-rc.13.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-3.1.0-rc.13.cjs
diff --git a/README.md b/README.md
@@ -1,2 +1,71 @@
 # cypress-plugin-visual-regression-diff
-Perform visual regression test with a nice GUI as help. 💅 Only for Cypress!
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@frsource/cypress-plugin-visual-regression-diff">
+    <img src="https://img.shields.io/npm/v/@frsource/cypress-plugin-visual-regression-diff" alt="NPM version badge">
+  </a>
+  <a href="https://github.com/semantic-release/semantic-release">
+    <img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic-relase badge">
+  </a>
+  <a href="https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/FRSOURCE/cypress-plugin-visual-regression-diff" alt="license MIT badge">
+  </a>
+</p>
+
+<h1 align="center">Cypress Plugin Visual Regresion Diff - perform visual regression test with a nice GUI as help. 💅 Only for Cypress!</h1>
+
+<p align="center">
+  <a href="#getting-started">Getting Started</a>
+  ·
+  <a href="#documentation">Documentation</a>
+  ·
+  <a href="https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/issues">File an Issue</a>
+  ·
+  <a href="https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/discussions">Have a question or an idea?</a>
+  <br>
+</p>
+
+<p align="center">
+  <br>
+  <i>Plugin for visual regression testing that provides smooth experience:
+    <br>Specify threshold below which the test will fail.
+    <br>Quickly preview old/new screenshots and a visual diff between the two directly in the Cypress UI.
+    <br>Published as treeshakeable bundles, separate for JS ES5 or modern browsers thanks to <a href="https://www.npmjs.com/package/microbundle">microbundle</a>.
+    <br>Provides proper typings as is written completely in <a href="https://www.typescriptlang.org">typescript</a>.</i>
+  <br>
+  <br>
+</p>
+
+<p align="center">
+  <img src="https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/blob/master/src/assets/logo.svg" alt="Cypress Plugin Visual Regression Diff logo" height="120px"/>
+  <br>
+  <a href="https://www.npmjs.com/package/@frsource/cypress-plugin-visual-regression-diff"><strong>@frsource/cypress-plugin-visual-regression-diff</strong></a>
+  <br>
+  <br>
+</p>
+
+## Getting started
+
+
+## Documentation
+
+
+## Questions
+
+Don’t hesitate to ask a question directly on the [discussions board](https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/discussions)!
+
+## Changelog
+
+Changes for every release are documented in the [release notes](https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/releases) and [CHANGELOG files of every package](https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/tree/master/packages).
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2021-present, Jakub FRS Freisler, [FRSOURCE](https://www.frsource.org/)
+
+<p align="center">
+<a href="https://www.frsource.org/" title="Click to visit FRSOURCE page!">
+<img src="https://www.frsource.org/logo.jpg" alt="FRSOURCE logo" height="60px"/>
+</a>
+</p>
diff --git a/package.json b/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@frsource/cypress-plugin-visual-regression-diff",
+  "description": "Perform visual regression test with a nice GUI as help. 💅 Only for Cypress!",
+  "version": "0.0.1",
+  "author": "Jakub Freisler <jakub.freisler@frsource.org>",
+  "repository": "https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff.git",
+  "sideEffects": false,
+  "license": "MIT",
+  "scripts": {
+    "build": "del-cli dist && microbundle src/*.ts -f cjs,esm",
+    "lint": "eslint '**/*.ts' --ignore-pattern '**/*.d.ts'",
+    "lint.fix": "yarn lint --fix",
+    "lint.ci": "yarn lint --max-warnings 0",
+    "prettify": "prettier --write src",
+    "prepack": "yarn build",
+    "release": "semantic-release",
+    "release:ci": "yarn release --yes",
+    "release:test": "yarn release --no-git-tag-version --no-push --skip-npm"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "packageManager": "yarn@3.1.0-rc.13",
+  "peerDependencies": {
+    "cypress": ">=4.5.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/commit-analyzer": "^9.0.1",
+    "@semantic-release/git": "^10.0.0",
+    "@semantic-release/npm": "^8.0.2",
+    "@semantic-release/release-notes-generator": "^10.0.2",
+    "@types/pixelmatch": "^5.2.4",
+    "@types/pngjs": "^6.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.1.0",
+    "@typescript-eslint/parser": "^5.1.0",
+    "cypress": "^8.6.0",
+    "del-cli": "^4.0.1",
+    "eslint": "^8.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "microbundle": "^0.14.1",
+    "prettier": "^2.4.1",
+    "semantic-release": "^18.0.0",
+    "typescript": "^4.4.4"
+  },
+  "keywords": [
+    "Cypress",
+    "Cypress plugin",
+    "visual regression testing",
+    "visual diff",
+    "image diff",
+    "visual comparison",
+    "image comparison",
+    "Cypress visual regression",
+    "regression testing",
+    "visual snapshot",
+    "image snapshot",
+    "Cypress image snapshot"
+  ],
+  "dependencies": {
+    "pixelmatch": "^5.2.1",
+    "pngjs": "^6.0.0"
+  }
+}
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 72 72">
+  <circle cx="35.5" cy="36.5" r="27.5" fill="#4A4A4D" stroke="#FFF"/>
+  <g fill="#FFF" transform="matrix(.075 0 0 .075 16 17)">
+    <circle cx="259.8" cy="259.9" r="80"/>
+    <path d="M511.7 237.7C450.2 163.4 357 92 259.8 92 162.5 91.9 69.4 163.4 8 237.7A34.8 34.8 0 0 0 8 282a520.8 520.8 0  0 0 91 86.2c109 79.3 212.4 79.5 321.6 0a520.8 520.8 0 0 0 91-86.2 34.8 34.8 0 0 0 0-44.3zM259.8 148a112.1 112.1 0 0  1 0 224 112.1 112.1 0 0 1 0-224z"/>
+  </g>
+</svg>
diff --git a/src/commands.ts b/src/commands.ts
@@ -0,0 +1,95 @@
+import { FILE_SUFFIX, LINK_PREFIX, TASK } from "./constants";
+import type pixelmatch from "pixelmatch";
+
+const nameCacheCounter: Record<string, number> = {};
+
+Cypress.Commands.add(
+  "matchImage",
+  { prevSubject: "optional" },
+  (
+    subject?: JQuery<HTMLElement>,
+    options: {
+      suffix?: string;
+      screenshotConfig?: Partial<Cypress.ScreenshotDefaultsOptions>;
+      diffConfig?: Parameters<typeof pixelmatch>[5];
+    } = {}
+  ) => {
+    let title = Cypress.currentTest.titlePath.join(" ");
+    if (typeof nameCacheCounter[title] === "undefined")
+      nameCacheCounter[title] = -1;
+    title += ` #${++nameCacheCounter[title]}`;
+
+    return cy
+      .log("visual regression diff")
+      .then(() =>
+        cy.task(TASK.getScreenshotPath, {
+          title,
+          specPath: Cypress.spec.relative,
+        })
+      )
+      .then((screenshotPath) => {
+        let imgPath: string;
+        return (subject ? cy.wrap(subject) : cy)
+          .screenshot(screenshotPath as string, {
+            onAfterScreenshot(_el, props) {
+              imgPath = props.path;
+            },
+          })
+          .then(() => imgPath);
+      })
+      .then((imgPath) =>
+        cy
+          .task(TASK.compareImages, {
+            imgNew: imgPath,
+            imgOld: imgPath.replace(FILE_SUFFIX.actual, ""),
+            ...(options.diffConfig || {}),
+          })
+          .then((res) => ({
+            res: res as null | {
+              error?: boolean;
+              message?: string;
+              imgDiff?: number;
+              maxDiffThreshold?: number;
+            },
+            imgPath,
+          }))
+      )
+      .then(({ res, imgPath }) => {
+        const log = Cypress.log({
+          name: "log",
+          displayName: "Match image",
+          $el: subject,
+        });
+
+        if (!res) {
+          log.set("message", "Unexpected error!");
+          const err = new Error("Unexpected error!");
+          // only way to throw & log the message properly in Cypress
+          // https://github.com/cypress-io/cypress/blob/5f94cad3cb4126e0567290b957050c33e3a78e3c/packages/driver/src/cypress/error_utils.ts#L214-L216
+          (err as unknown as { onFail: (e: Error) => void }).onFail = (
+            err: Error
+          ) => log.error(err);
+          throw err;
+        }
+
+        if (res.error) {
+          log.set(
+            "message",
+            `${res.message}\n[See comparison](${LINK_PREFIX}${btoa(
+              JSON.stringify({ title, imgPath })
+            )})`
+          );
+          log.set("consoleProps", () => res);
+          const err = new Error(res.message);
+          // only way to throw & log the message properly in Cypress
+          // https://github.com/cypress-io/cypress/blob/5f94cad3cb4126e0567290b957050c33e3a78e3c/packages/driver/src/cypress/error_utils.ts#L214-L216
+          (err as unknown as { onFail: (e: Error) => void }).onFail = (
+            err: Error
+          ) => log.error(err);
+          throw err;
+        } else {
+          log.set("message", res.message);
+        }
+      });
+  }
+);
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,15 @@
+const PLUGIN_NAME = "cp-visual-regression-diff";
+export const LINK_PREFIX = `#${PLUGIN_NAME}-`;
+export const OVERLAY_CLASS = `${PLUGIN_NAME}-overlay`;
+export const IMAGE_SNAPSHOT_PREFIX = `__${PLUGIN_NAME}_snapshots__`;
+
+export enum FILE_SUFFIX {
+  diff = ".diff",
+  actual = ".actual",
+}
+
+export const TASK = {
+  getScreenshotPath: `${PLUGIN_NAME}-getScreenshotPath`,
+  compareImages: `${PLUGIN_NAME}-compareImages`,
+  approveImage: `${PLUGIN_NAME}-approveImage`,
+};
diff --git a/src/plugin.ts b/src/plugin.ts
diff --git a/src/support.ts b/src/support.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+nodeLinker: node-modules`
	`2`	`+yarnPath: .yarn/releases/yarn-3.1.0-rc.13.cjs`