Merge pull request #17 from happo/different-size-diffs

Improve showing different dimension diffs

Author: trotzig

.circleci/config.yml

@@ -7,4 +7,4 @@ jobs:
     steps:
       - checkout
       - run: yarn install
-      - run: yarn test
+      - run: yarn test-ci

package.json

@@ -12,12 +12,15 @@
   ],
   "license": "MIT",
   "scripts": {
+    "start-server": "http-server -p 5411 -c1 src/__tests__/test-images",
+    "test-ci": "yarn start-server & yarn test",
     "test": "jest"
   },
   "dependencies": {
     "imagetracerjs": "^1.2.5"
   },
   "devDependencies": {
+    "http-server": "^0.12.3",
     "jest": "^24.8.0",
     "jimp": "^0.8.5"
   }

snapshots/logo/diff.png

@@ -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', () => {
@@ -22,12 +22,14 @@ it('is medium when comparing red and blue', () => {
   expect(delta).toBeLessThan(0.51);
 });
 
-it('is zero when comparing transparent and white', () => {
-  expect(colorDelta([0, 0, 0, 0], [255, 255, 255, 255]))
-    .toEqual(0);
+it('is one when comparing transparent and white', () => {
+  expect(colorDelta([0, 0, 0, 0], [255, 255, 255, 255])).toEqual(1);
 });
 
 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);
 });

snapshots/long-example/diff.png

@@ -11,12 +11,8 @@ let image2;
 let subject;
 
 beforeEach(async () => {
-  image1 = (await Jimp.read(
-    'https://dummyimage.com/200/000/ffffff.png&text=aa',
-  )).bitmap;
-  image2 = (await Jimp.read(
-    'https://dummyimage.com/200/000/f7f7f7.png&text=aa',
-  )).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__/colorDelta-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__/createDiffImage-test.js

@@ -37,6 +37,6 @@ it('produces a trace svg', () => {
 
 it('has meta-data', () => {
   const { diff, maxDiff } = subject();
-  expect(diff).toEqual(0.049155430620799745);
-  expect(maxDiff).toEqual(0.7809273602519097);
+  expect(diff).toEqual(0.20505992912433182);
+  expect(maxDiff).toEqual(1);
 });

src/__tests__/getDiffPixel-test.js

@@ -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__/index-test.js

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