feat: img diff when resolution differs

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

closes #94

Signed-off-by: Jakub Freisler <[email protected]>

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,17 @@ 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 +174,22 @@ 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 +204,9 @@ 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,
         };