Fixed screenshot tolerance algorithm

Author: gosha212

e2e/Utils.js

@@ -1,14 +1,39 @@
 import { readFileSync } from 'fs';
-function bitmapDiff(imagePath, expectedImagePath) {
-  const PNG = require('pngjs').PNG;
-  const pixelmatch = require('pixelmatch');
-  const img1 = PNG.sync.read(readFileSync(imagePath));
-  const img2 = PNG.sync.read(readFileSync(expectedImagePath));
-  const { width, height } = img1;
-  const diff = new PNG({ width, height });
-
-  return pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.01 });
+import { PNG } from 'pngjs';
+import { ssim } from 'ssim.js';
+
+const SSIM_SCORE_THRESHOLD = 0.997;
+
+function convertToSSIMFormat(image) {
+  return {
+    data: new Uint8ClampedArray(image.data),
+    width: image.width,
+    height: image.height
+}
+  ;
+}
+
+function loadImage(path) {
+  const image = PNG.sync.read(readFileSync(path));
+
+  return convertToSSIMFormat(image);
+}
+
+function bitmapDiff(imagePath, expectedImagePath, ssimThreshold = SSIM_SCORE_THRESHOLD) {
+  const image = loadImage(imagePath);
+  const expectedImage = loadImage(expectedImagePath);
+
+  const { mssim, performance } = ssim(image, expectedImage);
+
+  if (mssim < ssimThreshold) {
+    throw new Error(
+      `Expected bitmaps at '${imagePath}' and '${expectedImagePath}' to have an SSIM score ` +
+      `of at least ${SSIM_SCORE_THRESHOLD}, but got ${mssim}. This means the snapshots are different ` +
+      `(comparison took ${performance}ms)`,
+    );
+  }
 }
+
 const utils = {
   elementByLabel: (label) => {
     // uncomment for running tests with rn's new arch
@@ -35,15 +60,21 @@ const utils = {
   },
   sleep: (ms) => new Promise((res) => setTimeout(res, ms)),
   expectImagesToBeEqual: (imagePath, expectedImagePath) => {
-    let diff = bitmapDiff(imagePath, expectedImagePath);
-    if (diff > 7000) {
-      throw Error(`${imagePath} should be the same as ${expectedImagePath}, with diff: ${diff}`);
-    }
+    bitmapDiff(imagePath, expectedImagePath);
+
   },
   expectImagesToBeNotEqual: (imagePath, expectedImagePath) => {
-    let diff = bitmapDiff(imagePath, expectedImagePath);
-    if (diff === 0) {
-      throw Error(`${imagePath} should be the same as ${expectedImagePath}, with diff: ${diff}`);
+    let isDifferent = false;
+    try {
+      bitmapDiff(imagePath, expectedImagePath);
+    } catch (error) {
+      isDifferent = true;
+    }
+
+    if (!isDifferent) {
+      throw new Error(
+        `Expected bitmaps at '${imagePath}' and '${expectedImagePath}' to be different`,
+      );
     }
   },
 };

package-lock.json

@@ -66,6 +66,7 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-native-redash": "^12.6.1",
     "reanimated-color-picker": "^3.0.6",
+    "ssim.js": "^3.5.0",
     "tslib": "1.9.3"
   },
   "devDependencies": {