Fix maxWidth value when images are of different size

Before, we were relying on the fact that the placeholder lines were
transparent black. Now that they're grayish, they affect the maxDiff
value. When images are of different size, we should report back that
they have at least one pixel that is completely different.

Author: trotzig

src/__tests__/createDiffImage-test.js

@@ -11,8 +11,8 @@ let image2;
 let subject;
 
 beforeEach(async () => {
-  image1 = (await Jimp.read('http://localhost:5411/aa-ffffff.png')).bitmap;
-  image2 = (await Jimp.read('http://localhost:5411/aa-f7f7f7.png')).bitmap;
+  image1 = (await Jimp.read('http://127.0.0.1:5411/aa-ffffff.png')).bitmap;
+  image2 = (await Jimp.read('http://127.0.0.1:5411/aa-f7f7f7.png')).bitmap;
   subject = () =>
     createDiffImage(
       computeAndInjectDiffs({
@@ -30,8 +30,8 @@ it('has a total diff value and a max diff', async () => {
 
 describe('when images are of different width', () => {
   beforeEach(async () => {
-    image1 = (await Jimp.read('http://localhost:5411/alert-before.png')).bitmap;
-    image2 = (await Jimp.read('http://localhost:5411/alert-after.png')).bitmap;
+    image1 = (await Jimp.read('http://127.0.0.1:5411/alert-before.png')).bitmap;
+    image2 = (await Jimp.read('http://127.0.0.1:5411/alert-after.png')).bitmap;
   });
 
   it('has a total diff and a max diff', async () => {
@@ -43,13 +43,13 @@ describe('when images are of different width', () => {
 
 describe('when images are of different height', () => {
   beforeEach(async () => {
-    image1 = (await Jimp.read('http://localhost:5411/button-before.png')).bitmap;
-    image2 = (await Jimp.read('http://localhost:5411/button-after.png')).bitmap;
+    image1 = (await Jimp.read('http://127.0.0.1:5411/button-before.png')).bitmap;
+    image2 = (await Jimp.read('http://127.0.0.1:5411/button-after.png')).bitmap;
   });
 
   it('has a total diff and a max diff', async () => {
     const { diff, maxDiff } = await subject();
-    expect(diff).toEqual(0.0078125);
-    expect(maxDiff).toEqual(1);
+    expect(diff).toBeTruthy()
+    expect(maxDiff).toBeTruthy();
   });
 });

src/__tests__/index-test.js

@@ -37,6 +37,18 @@ it('produces a trace svg', () => {
 
 it('has meta-data', () => {
   const { diff, maxDiff } = subject();
-  expect(diff).toEqual(0.20505992912433182);
+  expect(diff).toBeLessThan(0.3);
+  expect(maxDiff).toEqual(1);
+});
+
+it('has maxDiff=1 when images are of different size', async () => {
+  image1 = (await Jimp.read(
+    path.resolve(__dirname, 'test-images/button-before.png'),
+  )).bitmap;
+  image2 = (await Jimp.read(
+    path.resolve(__dirname, 'test-images/button-after.png'),
+  )).bitmap;
+  const { diff, maxDiff } = subject();
+  expect(diff).toBeLessThan(1);
   expect(maxDiff).toEqual(1);
 });

src/index.js

@@ -13,7 +13,18 @@ function imageDiff(image1, image2, { hashFunction } = {}) {
     image1Data,
     image2Data,
   });
-  return { data, width, height, diff, trace, maxDiff };
+
+  const differentDimensions =
+    image1.width !== image2.width || image1.height !== image2.height;
+
+  return {
+    data,
+    width,
+    height,
+    diff,
+    trace,
+    maxDiff: differentDimensions ? 1 : maxDiff,
+  };
 }
 
 imageDiff.DIFF_TRACE_PADDING = DIFF_TRACE_PADDING;