Improve showing different dimension diffs

If two images were of different size but had overlapping content, we
wouldn't display diffs properly. Instead of highlighting the "added"
areas, we would simply ignore them and show a total/max diff of zero.

It all boiled down to `colorDelta` not handling zero alpha values
properly. I added a shortcut so that if one image has a fully
transparent alpha and the other image doesn't, we show it as fully
diffing. This will work for all web screenshots that we produce from
Happo, but might look a little funky when providing own images through
the api which are semi-transparent. For now I'm happpy to live with that
limitation however, at least this is better than before (even for
semi-transparent images).

Author: trotzig

src/__tests__/colorDelta-test.js

@@ -1,13 +1,13 @@
 const colorDelta = require('../colorDelta');
 
 it('is large when comparing black and white', () => {
-  expect(colorDelta([0, 0, 0, 255], [255, 255, 255, 255]))
-    .toBeGreaterThan(0.92);
+  expect(colorDelta([0, 0, 0, 255], [255, 255, 255, 255])).toBeGreaterThan(
+    0.92,
+  );
 });
 
 it('is small when comparing black and very dark grey', () => {
-  expect(colorDelta([0, 0, 0, 255], [10, 10, 10, 255]))
-    .toBeLessThan(0.02);
+  expect(colorDelta([0, 0, 0, 255], [10, 10, 10, 255])).toBeLessThan(0.02);
 });
 
 it('is medium when comparing black and medium grey', () => {
@@ -23,11 +23,13 @@ it('is medium when comparing red and blue', () => {
 });
 
 it('is zero when comparing transparent and white', () => {
-  expect(colorDelta([0, 0, 0, 0], [255, 255, 255, 255]))
-    .toEqual(0);
+  expect(colorDelta([0, 0, 0, 0], [255, 255, 255, 255])).toEqual(0);
 });
 
 it('is large when comparing transparent and black', () => {
-  expect(colorDelta([0, 0, 0, 0], [0, 0, 0, 255]))
-    .toBeGreaterThan(0.92);
+  expect(colorDelta([0, 0, 0, 0], [0, 0, 0, 255])).toBeGreaterThan(0.92);
+});
+
+it('is large when comparing white and transparent', () => {
+  expect(colorDelta([255, 255, 255, 255], [0, 0, 0, 0])).toBeGreaterThan(0.92);
 });

src/__tests__/createDiffImage-test.js

@@ -11,12 +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://localhost:5411/aa-ffffff.png')).bitmap;
+  image2 = (await Jimp.read('http://localhost:5411/aa-f7f7f7.png')).bitmap;
   subject = () =>
     createDiffImage(
       computeAndInjectDiffs({
@@ -31,3 +27,29 @@ it('has a total diff value and a max diff', async () => {
   expect(diff).toEqual(0.000013924627638992437);
   expect(maxDiff).toEqual(0.0009183359547574563);
 });
+
+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;
+  });
+
+  it('has a total diff and a max diff', async () => {
+    const { diff, maxDiff } = await subject();
+    expect(diff).toEqual(0.20997431506849315);
+    expect(maxDiff).toEqual(1);
+  });
+});
+
+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;
+  });
+
+  it('has a total diff and a max diff', async () => {
+    const { diff, maxDiff } = await subject();
+    expect(diff).toEqual(0.0078125);
+    expect(maxDiff).toEqual(1);
+  });
+});

src/__tests__/getDiffPixel-test.js

@@ -0,0 +1,39 @@
+const getDiffPixel = require('../getDiffPixel');
+
+let subject;
+let previousPixel;
+let currentPixel;
+
+beforeEach(() => {
+  previousPixel = [255, 255, 255, 255];
+  currentPixel = [255, 255, 255, 255];
+  subject = () => getDiffPixel(previousPixel, currentPixel);
+});
+
+it('returns semi-opaque source if no diff', () => {
+  expect(subject()).toEqual({ diff: 0, pixel: [255, 255, 255, 140] });
+});
+
+it('returns magenta when diff', () => {
+  currentPixel = [120, 120, 255, 255];
+  expect(subject()).toEqual({
+    diff: 0.23089126029146917,
+    pixel: [179, 54, 130, 58.877271374324636],
+  });
+});
+
+it('returns diff when after alpha is zero', () => {
+  currentPixel[3] = 0;
+  expect(subject()).toEqual({
+    diff: 1,
+    pixel: [179, 54, 130, 255],
+  });
+});
+
+it('returns diff when before alpha is zero', () => {
+  previousPixel[3] = 0;
+  expect(subject()).toEqual({
+    diff: 1,
+    pixel: [179, 54, 130, 255],
+  });
+});

src/__tests__/test-images/alert-after.png

@@ -30,6 +30,10 @@ module.exports = function colorDelta(previousPixel, currentPixel) {
     return 0;
   }
 
+  if ((a2 === 0 && a1 > 0) || (a1 === 0 && a2 > 0)) {
+    return 1;
+  }
+
   if (a1 < 255) {
     a1 /= 255;
     r1 = blend(r1, a1);

src/__tests__/test-images/alert-before.png

@@ -5,10 +5,11 @@ const GREEN = [106, 133, 0, 255];
 const MAGENTA = [197, 39, 114, 255];
 
 function getDataIndex(row, width, index) {
-  return (width * row) + index;
+  return width * row + index;
 }
 
 module.exports = function createDiffImage({ image1Data, image2Data }) {
+  // Images have the same width and height here
   const width = image1Data[0].length;
   const height = image1Data.length;