test: use odiff-bin to compare screenshots

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 coverage
 dist
+tmp
 analysis.json
 yarn-error.log
 .env

package.json

@@ -59,8 +59,10 @@
     "husky": "^4.3.8",
     "lerna": "^4.0.0",
     "lint-staged": "^11.1.2",
+    "nanoid": "^3.1.25",
     "npm-run-all": "^4.1.5",
     "octokit": "^1.5.0",
+    "odiff-bin": "^2.4.2",
     "prettier": "^2.4.1",
     "replace-in-file": "^6.2.0",
     "rimraf": "^3.0.2",

wtr-odiff.js

@@ -0,0 +1,56 @@
+/* eslint-env node */
+const path = require('path');
+const { compare } = require('odiff-bin');
+const mkdirp = require('mkdirp');
+const fs = require('fs');
+const { nanoid } = require('nanoid');
+const { promisify } = require('util');
+
+const readFile = promisify(fs.readFile);
+const writeFile = promisify(fs.writeFile);
+const removeFile = promisify(fs.unlink);
+
+async function saveImage({ filePath, content }) {
+  await mkdirp(path.dirname(filePath));
+  await writeFile(filePath, content);
+}
+
+async function imageDiff({ baselineImage, image, options }) {
+  const diffOptions = {
+    threshold: options.threshold,
+    antialiasing: true
+  };
+
+  const id = nanoid();
+
+  // TODO: https://github.com/dmtrKovalenko/odiff/issues/53
+  const tmpOldImagePath = path.resolve(`tmp/${id}-baseline.png`);
+  const tmpNewImagePath = path.resolve(`tmp/${id}-actual.png`);
+  const tmpDiffPath = path.resolve(`tmp/${id}-diff.png`);
+
+  await saveImage({ filePath: tmpOldImagePath, content: baselineImage });
+  await saveImage({ filePath: tmpNewImagePath, content: image });
+
+  const { match, reason, diffPercentage } = await compare(tmpOldImagePath, tmpNewImagePath, tmpDiffPath, diffOptions);
+
+  const doNotMatch = match == false;
+
+  const result = {
+    error: doNotMatch ? reason : false,
+    diffPercentage: diffPercentage || 0
+  };
+
+  if (doNotMatch) {
+    result.diffImage = await readFile(tmpDiffPath);
+    await removeFile(tmpDiffPath);
+  }
+
+  await removeFile(tmpOldImagePath);
+  await removeFile(tmpNewImagePath);
+
+  return result;
+}
+
+module.exports = {
+  imageDiff
+};

wtr-utils.js

@@ -6,6 +6,7 @@ const glob = require('glob');
 const { execSync } = require('child_process');
 const { createSauceLabsLauncher } = require('@web/test-runner-saucelabs');
 const { visualRegressionPlugin } = require('@web/test-runner-visual-regression/plugin');
+const { imageDiff } = require('./wtr-odiff.js');
 
 const HIDDEN_WARNINGS = [
   '<vaadin-crud> Unable to autoconfigure form because the data structure is unknown. Either specify `include` or ensure at least one item is available beforehand.',
@@ -326,6 +327,7 @@ const createVisualTestsConfig = (theme) => {
         getBaselineName: getBaselineScreenshotName,
         getDiffName: getDiffScreenshotName,
         getFailedName: getFailedScreenshotName,
+        getImageDiff: imageDiff,
         diffOptions: {
           threshold: 0.2
         },

yarn.lock

@@ -8235,6 +8235,11 @@ nanocolors@^0.1.5:
   resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.6.tgz#bc2350d3edfdbfadd7ac018c855ae7c13905a6ad"
   integrity sha512-2pvTw6vYRaBLGir2xR7MxaJtyWkrn+C53EpW8yPotG+pdAwBvt0Xwk4VJ6VHLY0aLthVZPvDfm9TdZvrvAm5UQ==
 
+nanoid@^3.1.25:
+  version "3.1.25"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
+  integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -8722,6 +8727,11 @@ octokit@^1.5.0:
     "@octokit/plugin-throttling" "^3.5.1"
     "@octokit/types" "^6.26.0"
 
+odiff-bin@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/odiff-bin/-/odiff-bin-2.4.2.tgz#daaced9072fbe38812933970f77b04378f931430"
+  integrity sha512-NEekJemHHvQItmJIPzLHxnqVDbHLYNGk4fpdNx5Di3NySR7Dug2d5kwjCmCGFHPxTTM6m/UJbMJlhXSBPD/i0A==
+
 on-finished@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"