feat: img diff when resolution differs (#108)

BREAKING CHANGE: different resolution doesn't fail test immediately - img diff is being done
closes #94

Author: FRSgit

src/plugins.ts

@@ -9,6 +9,8 @@ import sanitize from "sanitize-filename";
 
 type NotFalsy<T> = T extends false | null | undefined ? never : T;
 
+const round = (n: number) => Math.ceil(n * 1000) / 1000;
+
 const createImageResizer = (width: number, height: number) => (source: PNG) => {
   const resized = new PNG({ width, height, fill: true });
   PNG.bitblt(source, resized, 0, 0, source.width, source.height, 0, 0);
@@ -131,9 +133,15 @@ export const initPlugin = (
         maxDiffThreshold: number;
         diffConfig: Parameters<typeof pixelmatch>[5];
       } & Parameters<typeof pixelmatch>[5]
-    ) {
+    ): Promise<null | {
+      error?: boolean;
+      message?: string;
+      imgDiff?: number;
+      maxDiffThreshold?: number;
+    }> {
+      const messages = [] as string[];
       let imgDiff: number | undefined;
-      let errorMsg: string | undefined;
+      let error = false;
 
       if (fs.existsSync(cfg.imgOld) && !cfg.updateImages) {
         const rawImgNew = await importAndScaleImage({
@@ -164,20 +172,30 @@ export const initPlugin = (
         imgDiff = diffPixels / (width * height);
 
         if (isImgSizeDifferent) {
-          errorMsg = `Images size mismatch - new screenshot is ${rawImgNew.width}px by ${rawImgNew.height}px while old one is ${rawImgOld.width}px by ${rawImgOld.height} (width x height).`;
-        } else if (imgDiff > cfg.maxDiffThreshold) {
-          const roundedImgDiff = Math.ceil(imgDiff * 1000) / 1000;
-          errorMsg = `Image diff factor (${roundedImgDiff}) is bigger than maximum threshold option ${cfg.maxDiffThreshold}`;
+          messages.push(
+            `Warning: Images size mismatch - new screenshot is ${rawImgNew.width}px by ${rawImgNew.height}px while old one is ${rawImgOld.width}px by ${rawImgOld.height} (width x height).`
+          );
+        }
+
+        if (imgDiff > cfg.maxDiffThreshold) {
+          messages.unshift(
+            `Image diff factor (${round(
+              imgDiff
+            )}) is bigger than maximum threshold option ${
+              cfg.maxDiffThreshold
+            }.`
+          );
+          error = true;
         }
 
-        if (errorMsg) {
+        if (error) {
           fs.writeFileSync(
             cfg.imgNew.replace(FILE_SUFFIX.actual, FILE_SUFFIX.diff),
             PNG.sync.write(diff)
           );
           return {
-            error: true,
-            message: errorMsg,
+            error,
+            message: messages.join("\n"),
             imgDiff,
             maxDiffThreshold: cfg.maxDiffThreshold,
           };
@@ -192,9 +210,15 @@ export const initPlugin = (
       }
 
       if (typeof imgDiff !== "undefined") {
-        const roundedImgDiff = Math.ceil(imgDiff * 1000) / 1000;
+        messages.unshift(
+          `Image diff (${round(
+            imgDiff
+          )}%) is within boundaries of maximum threshold option ${
+            cfg.maxDiffThreshold
+          }.`
+        );
         return {
-          message: `Image diff (${roundedImgDiff}%) is within boundaries of maximum threshold option ${cfg.maxDiffThreshold}`,
+          message: messages.join("\n"),
           imgDiff,
           maxDiffThreshold: cfg.maxDiffThreshold,
         };