Merge pull request #27 from happo/assumed-background

Assumed background

Author: trotzig

snapshots/different-widths/after.png

@@ -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();
   });
 });

snapshots/different-widths/before.png

@@ -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);
 });

snapshots/different-widths/diff.png

@@ -1,4 +1,5 @@
 const alignArrays = require('./alignArrays');
+const compose = require('./compose');
 const similarEnough = require('./similarEnough');
 
 function imageTo2DArray({ data, width, height }, paddingRight) {
@@ -8,16 +9,16 @@ function imageTo2DArray({ data, width, height }, paddingRight) {
 
   const newData = [];
   for (let row = 0; row < height; row += 1) {
-    const pixelsInRow = new Uint8ClampedArray(rowSize + (paddingRight * 4));
+    const pixelsInRow = new Uint8ClampedArray(rowSize + paddingRight * 4);
     for (let location = 0; location < rowSize; location += 1) {
-      pixelsInRow[location] = data[(row * rowSize) + location];
+      pixelsInRow[location] = data[row * rowSize + location];
     }
     newData.push(pixelsInRow);
   }
   return newData;
 }
 
-function hashFn() {
+function resolveHashFn() {
   // Safari has a bug where trying to reference `btoa` inside a web worker will
   // result in an error, so we fall back to the slower (?) `JSON.stringify`. The
   // only way to prevent this seems to be by using a try/catch. We do this in its
@@ -38,42 +39,41 @@ function hashFn() {
   }
 }
 
-const HASH_FN = hashFn();
+const HASH_FN = resolveHashFn();
 
-function align({
-  image1Data,
-  image2Data,
-  maxWidth,
-  hashFunction,
-}) {
+function transparentLine(rawBgPixel, width) {
+  const bgPixel = compose([200, 200, 200, 50], rawBgPixel);
+  const result = new Uint8ClampedArray(width * 4);
+  for (let i = 0; i < width * 4; i += 4) {
+    result[i] = bgPixel[0];
+    result[i + 1] = bgPixel[1];
+    result[i + 2] = bgPixel[2];
+    result[i + 3] = 122;
+  }
+  return result;
+}
+
+function align({ image1Data, image2Data, maxWidth, hashFunction }) {
   if (similarEnough({ image1Data, image2Data })) {
     return;
   }
 
   const hashedImage1Data = image1Data.map(hashFunction);
   const hashedImage2Data = image2Data.map(hashFunction);
 
-  alignArrays(
-    hashedImage1Data,
-    hashedImage2Data,
-  );
-
-  const transparentLine = new Uint8ClampedArray(maxWidth * 4);
-  for (let i = 0; i < maxWidth * 4; i++) {
-    if ((i + 1) % 4 !== 0) {
-      transparentLine[i] = 1;
-    }
-  }
+  alignArrays(hashedImage1Data, hashedImage2Data);
 
+  const image1Bg = image1Data[0].slice(0, 4);
   hashedImage1Data.forEach((hashedLine, i) => {
     if (hashedLine === alignArrays.PLACEHOLDER) {
-      image1Data.splice(i, 0, transparentLine);
+      image1Data.splice(i, 0, transparentLine(image1Bg, maxWidth));
     }
   });
 
+  const image2Bg = image2Data[0].slice(0, 4);
   hashedImage2Data.forEach((hashedLine, i) => {
     if (hashedLine === alignArrays.PLACEHOLDER) {
-      image2Data.splice(i, 0, transparentLine);
+      image2Data.splice(i, 0, transparentLine(image2Bg, maxWidth));
     }
   });
 }
@@ -90,7 +90,11 @@ function align({
  * @param {Array} image2
  * @return {Object}
  */
-module.exports = function computeAndInjectDiffs({ image1, image2, hashFunction = HASH_FN }) {
+module.exports = function computeAndInjectDiffs({
+  image1,
+  image2,
+  hashFunction = HASH_FN,
+}) {
   const maxWidth = Math.max(image1.width, image2.width);
 
   const image1Data = imageTo2DArray(image1, maxWidth - image1.width);