feature(diff): getDiff even on dimensions missmatch (#114)

Author: maddocnc

.env

@@ -18,3 +18,4 @@ POSTGRES_DB=vrt_db_dev
 
 # features
 AUTO_APPROVE_BASED_ON_HISTORY=true
+ALLOW_DIFF_DIMENSIONS=true

src/test-runs/test-runs.service.spec.ts

@@ -604,6 +604,7 @@ describe('TestRunsService', () => {
     });
 
     it('diff image dimensions mismatch', async () => {
+      delete process.env.ALLOW_DIFF_DIMENSIONS;
       const baseline = new PNG({
         width: 10,
         height: 10,
@@ -625,6 +626,52 @@ describe('TestRunsService', () => {
       });
     });
 
+    it('diff image dimensions mismatch ALLOWED', async () => {
+      process.env.ALLOW_DIFF_DIMENSIONS = 'true';
+      const baseline = new PNG({
+        width: 20,
+        height: 10,
+      });
+      const image = new PNG({
+        width: 10,
+        height: 20,
+      });
+      const diffName = 'diff name';
+      const saveImageMock = jest.fn().mockReturnValueOnce(diffName);
+      mocked(Pixelmatch).mockReturnValueOnce(200);
+      service = await initService({ saveImageMock });
+
+      const result = service.getDiff(baseline, image, baseTestRun);
+
+      expect(mocked(Pixelmatch)).toHaveBeenCalledWith(
+        new PNG({
+          width: 20,
+          height: 20,
+        }).data,
+        new PNG({
+          width: 20,
+          height: 20,
+        }).data,
+        new PNG({
+          width: 20,
+          height: 20,
+        }).data,
+        20,
+        20,
+        {
+          includeAA: true,
+        }
+      );
+      expect(saveImageMock).toHaveBeenCalledTimes(1);
+      expect(result).toStrictEqual({
+        status: TestStatus.unresolved,
+        diffName,
+        pixelMisMatchCount: 200,
+        diffPercent: 50,
+        isSameDimension: false,
+      });
+    });
+
     it('diff not found', async () => {
       const baseline = new PNG({
         width: 10,

src/test-runs/test-runs.service.ts

@@ -271,6 +271,15 @@ export class TestRunsService {
       });
   }
 
+  private scaleImageToSize(image: PNG, width: number, height: number): PNG {
+    if (width > image.width || height > image.height) {
+      const preparedImage = new PNG({ width, height, fill: true });
+      PNG.bitblt(image, preparedImage, 0, 0, image.width, image.height);
+      return preparedImage;
+    }
+    return image;
+  }
+
   getDiff(baseline: PNG, image: PNG, testRun: TestRun): DiffResult {
     const result: DiffResult = {
       status: undefined,
@@ -280,42 +289,47 @@ export class TestRunsService {
       isSameDimension: undefined,
     };
 
-    if (baseline) {
-      result.isSameDimension = baseline.width === image.width && baseline.height === image.height;
-
-      if (result.isSameDimension) {
-        const diff = new PNG({
-          width: baseline.width,
-          height: baseline.height,
-        });
-
-        const ignoreAreas = this.getIgnoteAreas(testRun);
-        // compare
-        result.pixelMisMatchCount = Pixelmatch(
-          this.applyIgnoreAreas(baseline, ignoreAreas),
-          this.applyIgnoreAreas(image, ignoreAreas),
-          diff.data,
-          baseline.width,
-          baseline.height,
-          {
-            includeAA: true,
-          }
-        );
-        result.diffPercent = (result.pixelMisMatchCount * 100) / (image.width * image.height);
-
-        if (result.diffPercent > testRun.diffTollerancePercent) {
-          // save diff
-          result.diffName = this.staticService.saveImage('diff', PNG.sync.write(diff));
-          result.status = TestStatus.unresolved;
-        } else {
-          result.status = TestStatus.ok;
-        }
-      } else {
-        // diff dimensions
-        result.status = TestStatus.unresolved;
-      }
+    if (!baseline) {
+      // no baseline
+      return result;
+    }
+
+    result.isSameDimension = baseline.width === image.width && baseline.height === image.height;
+
+    if (!result.isSameDimension && !process.env.ALLOW_DIFF_DIMENSIONS) {
+      // diff dimensions
+      result.status = TestStatus.unresolved;
+      return result;
     }
+    // scale image to max size
+    const maxWidth = Math.max(baseline.width, image.width);
+    const maxHeight = Math.max(baseline.height, image.height);
+    const scaledBaseline = this.scaleImageToSize(baseline, maxWidth, maxHeight);
+    const scaledImage = this.scaleImageToSize(image, maxWidth, maxHeight);
+
+    // apply ignore areas
+    const ignoreAreas = this.getIgnoteAreas(testRun);
+    const baselineData = this.applyIgnoreAreas(scaledBaseline, ignoreAreas);
+    const imageData = this.applyIgnoreAreas(scaledImage, ignoreAreas);
+
+    // compare
+    const diff = new PNG({
+      width: maxWidth,
+      height: maxHeight,
+    });
+    result.pixelMisMatchCount = Pixelmatch(baselineData, imageData, diff.data, maxWidth, maxHeight, {
+      includeAA: true,
+    });
+    result.diffPercent = (result.pixelMisMatchCount * 100) / (scaledImage.width * scaledImage.height);
 
+    // process result
+    if (result.diffPercent > testRun.diffTollerancePercent) {
+      // save diff
+      result.diffName = this.staticService.saveImage('diff', PNG.sync.write(diff));
+      result.status = TestStatus.unresolved;
+    } else {
+      result.status = TestStatus.ok;
+    }
     return result;
   }