Merge pull request #19 from NimaSoroush/refactor-compare-image

Refactor compare image

Author: NimaSoroush

.gitignore

@@ -32,6 +32,5 @@ dist/
 # Built docs
 docs/
 .vscode/
-dist/
 differencify_report/
 screenshots/

.npmignore

@@ -1,2 +1,13 @@
 src/
 examples/
+.circleci/
+.vscode/
+.idea/
+.babelrc
+.editorconfig
+.eslintignore
+.gitignore
+.eslintrc
+.nvmrc
+_config.yml
+Dockerfile

CHANGELOG.md

@@ -28,7 +28,7 @@
 
 ## [0.0.5] - 2017-07-06
 ### Changed
-- Decreased default threashhold to 0.01
+- Decreased default threshold to 0.01
 - Updated logging to log difference error
 - Update Readme.md
 - Added a Dockerfile for local/CI usage

README.md

@@ -30,7 +30,7 @@ const differencify = new Differencify(GlobalOptions);
 ```js
 async () => {
   const result = await differencify.update(TestOptions);
-  console.log(result); //true if update succeded
+  console.log(result); //true if update succeeded
 }
 ```
 ### Validate your changes

src/chromyRunner.js

@@ -5,12 +5,10 @@ import actions from './actions';
 import { configTypes } from './defaultConfig';
 
 const saveImage = (filename, image, testType, screenshotsPath, testReportPath) => {
-  if (testType === configTypes.test) {
-    logger.log(`screenshot saved in -> ${testReportPath}/${filename}.png`);
-    return fs.writeFileSync(`${testReportPath}/${filename}.png`, image);
-  }
-  logger.log(`screenshot saved in -> ${screenshotsPath}/${filename}.png`);
-  return fs.writeFileSync(`${screenshotsPath}/${filename}.png`, image);
+  const directory = testType === configTypes.test ? testReportPath : screenshotsPath;
+  const filePath = `${directory}/${filename}.png`;
+  logger.log(`screenshot saved in -> ${filePath}`);
+  return fs.writeFileSync(filePath, image);
 };
 
 const run = async (chromy, options, test) => {
@@ -32,7 +30,7 @@ const run = async (chromy, options, test) => {
             try {
               logger.log('Capturing screenshot of whole DOM');
               const png = await chromy.screenshotDocument();
-              await saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
+              saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
             } catch (error) {
               logger.error(error);
               return false;
@@ -42,7 +40,7 @@ const run = async (chromy, options, test) => {
             try {
               logger.log('Capturing screenshot of chrome window');
               const png = await chromy.screenshot();
-              await saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
+              saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
             } catch (error) {
               logger.error(error);
               return false;
@@ -52,7 +50,7 @@ const run = async (chromy, options, test) => {
             try {
               logger.log(`Capturing screenshot of ${action.value} selector`);
               const png = await chromy.screenshotSelector(action.value);
-              await saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
+              saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
             } catch (error) {
               logger.error(error);
               return false;
@@ -62,8 +60,6 @@ const run = async (chromy, options, test) => {
         break;
       case actions.test:
         try {
-          logger.log(`comparing -> ${options.testReportPath}/${test.name}.png
-            and ${options.screenshots}/${test.name}.png`);
           const result = await compareImage(options, test.name);
           logger.log(result);
         } catch (error) {

src/chromyRunner.test.js

@@ -69,7 +69,6 @@ describe('ChromyRunner', () => {
       expect(loggerCalls[0]).toEqual('goto -> www.example.com');
       expect(loggerCalls[1]).toEqual('Capturing screenshot of whole DOM');
       expect(loggerCalls[2]).toEqual('screenshot saved in -> ./differencify_report/default.png');
-      expect(loggerCalls[4]).toEqual('Saving the diff image to disk');
       expect(writeFileSyncCalls).toEqual(['./differencify_report/default.png', 'png file']);
     });
     it('Step runner: update action', async () => {

src/compareImage.js

@@ -1,33 +1,48 @@
-
 import Jimp from 'jimp';
 import logger from './logger';
 
-const compareImage = (options, testName) =>
-  new Promise((resolve, reject) => {
-    const referenceFile = `${options.screenshots}/${testName}.png`;
-    const testFile = `${options.testReportPath}/${testName}.png`;
-    Jimp.read(referenceFile).then((referenceImage) => {
-      Jimp.read(testFile).then((testImage) => {
-        const distance = Jimp.distance(referenceImage, testImage);
-        const diff = Jimp.diff(referenceImage, testImage, options.mismatchThreshold);
-        if (distance < options.mismatchThreshold || diff.percent < options.mismatchThreshold) {
-          return resolve('No mismatch found!');
-        }
-        if (options.saveDifferencifiedImage) {
-          logger.log('Saving the diff image to disk');
-          diff.image.write(`${options.testReportPath}/${testName}_differencified.png`);
-        }
-        logger.error(`Result ->  distance:${distance} diff:${diff.percent} 
-          misMatchThreshold:${options.mismatchThreshold}`);
-        return reject('Mismatch found!');
-      }).catch((err) => {
-        logger.error(err);
-        return reject('Failed to read test image!');
-      });
-    }).catch((err) => {
-      logger.error(err);
-      return reject('Failed to read reference image!');
-    });
-  });
+const compareImage = async (options, testName) => {
+  const referenceFile = `${options.screenshots}/${testName}.png`;
+  const testFile = `${options.testReportPath}/${testName}.png`;
+
+  logger.log(`${testName}: comparing ${referenceFile} and ${testFile}`);
+
+  let referenceImage;
+  try {
+    referenceImage = await Jimp.read(referenceFile);
+  } catch (err) {
+    throw new Error(`${testName}: failed to read reference image ${err}`);
+  }
+
+  let testImage;
+  try {
+    testImage = await Jimp.read(testFile);
+  } catch (err) {
+    throw new Error(`${testName}: failed to read test image ${err}`);
+  }
+
+  const distance = Jimp.distance(referenceImage, testImage);
+  const diff = Jimp.diff(referenceImage, testImage, options.mismatchThreshold);
+  if (distance < options.mismatchThreshold || diff.percent < options.mismatchThreshold) {
+    return `${testName}: no mismatch found ✅`;
+  }
+
+  if (options.saveDifferencifiedImage) {
+    try {
+      const diffPath = `${options.testReportPath}/${testName}_differencified.png`;
+      diff.image.write(diffPath);
+      logger.log(`${testName}: saved the diff image to disk at ${diffPath}`);
+    } catch (err) {
+      throw new Error(`${testName}: failed to save the diff image ${err}`);
+    }
+  }
+
+  throw new Error(`${testName}: mismatch found❗
+    Result:
+      distance: ${distance}
+      diff: ${diff.percent}
+      misMatchThreshold: ${options.mismatchThreshold}
+  `);
+};
 
 export default compareImage;

src/compareImage.test.js

@@ -1,38 +1,108 @@
 import Jimp from 'jimp';
 import compareImage from './compareImage';
-import logger from './logger';
-import { globalConfig } from './defaultConfig';
 
-Jimp.read = path =>
-  new Promise((resolve, reject) => {
-    if (path === './screenshots/test1.png' || path === './differencify_report/test1.png') {
-      return resolve('image');
+const mockConfig = {
+  screenshots: './screenshots',
+  testReportPath: './differencify_report',
+  saveDifferencifiedImage: false,
+  mismatchThreshold: 0.01,
+};
+
+jest.mock('jimp', () => ({
+  read: jest.fn(),
+  distance: jest.fn(),
+  diff: jest.fn(),
+}));
+
+
+jest.mock('./logger', () => ({
+  log: jest.fn(),
+}));
+
+describe('Compare Image', () => {
+  beforeEach(() => {
+    Jimp.distance.mockReturnValue(0);
+    Jimp.diff.mockReturnValue({ percent: 0 });
+  });
+
+  it('calls Jimp with correct image names', async () => {
+    expect.assertions(2);
+    await compareImage(mockConfig, 'test');
+    expect(Jimp.read).toHaveBeenCalledWith('./differencify_report/test.png');
+    expect(Jimp.read).toHaveBeenCalledWith('./screenshots/test.png');
+  });
+
+  it('throws correct error if it cannot read image', async () => {
+    expect.assertions(2);
+    Jimp.read
+      .mockReturnValueOnce(Promise.reject('error1'))
+      .mockReturnValueOnce(Promise.resolve())
+      .mockReturnValueOnce(Promise.reject('error2'));
+
+    try {
+      await compareImage(mockConfig, 'test1');
+    } catch (err) {
+      expect(err.message).toEqual('test1: failed to read reference image error1');
+    }
+
+    try {
+      expect(await compareImage(mockConfig, 'test2')).toThrow();
+    } catch (err) {
+      expect(err.message).toEqual('test2: failed to read test image error2');
     }
-    return reject('error');
   });
 
-Jimp.distance = (referenceImage, testImage) => {
-  if (referenceImage === 'image' && testImage === 'image') {
-    return 0;
-  }
-  return 1;
-};
+  it('returns correct value if difference below threshold', async () => {
+    const result = await compareImage(mockConfig, 'test');
+    expect(result).toEqual('test: no mismatch found ✅');
+  });
 
-Jimp.diff = () => jest.fn();
+  it('returns correct value if only difference above threshold', async () => {
+    Jimp.diff.mockReturnValue({ percent: 0.02 });
 
-let loggerCalls = [];
-logger.log = (...args) => {
-  loggerCalls.push(...args);
-};
+    const result = await compareImage(mockConfig, 'test');
+    expect(result).toEqual('test: no mismatch found ✅');
+  });
 
-describe('Compare Image', () => {
-  afterEach(() => {
-    loggerCalls = [];
-  });
-  it('returns correct values', async () =>
-    compareImage(globalConfig, 'test1')
-    .catch((result) => {
-      expect(result).toEqual('Failed to read test image!');
-      expect(loggerCalls[0]).toEqual('Saving the diff image to disk');
-    }));
+  it('returns correct value if only distance above threshold', async () => {
+    Jimp.distance.mockReturnValue(0.02);
+
+    const result = await compareImage(mockConfig, 'test');
+    expect(result).toEqual('test: no mismatch found ✅');
+  });
+
+  it('throws error if distance and difference are above threshold', async () => {
+    expect.assertions(1);
+    Jimp.distance.mockReturnValue(0.02);
+    Jimp.diff.mockReturnValue({ percent: 0.02 });
+
+    try {
+      await compareImage(mockConfig, 'test');
+    } catch (err) {
+      expect(err.message).toEqual(`test: mismatch found❗
+    Result:
+      distance: 0.02
+      diff: 0.02
+      misMatchThreshold: 0.01
+  `);
+    }
+  });
+
+  it('writes to disk diff image if saveDifferencifiedImage is true', async () => {
+    expect.assertions(1);
+    Jimp.distance.mockReturnValue(0.02);
+    const mockWrite = jest.fn();
+    Jimp.diff.mockReturnValue({
+      percent: 0.02,
+      image: {
+        write: mockWrite,
+      },
+    });
+    try {
+      // eslint-disable-next-line prefer-object-spread/prefer-object-spread
+      await compareImage(Object.assign({}, mockConfig, { saveDifferencifiedImage: true }), 'test');
+    } catch (err) {
+      expect(mockWrite).toHaveBeenCalledWith('./differencify_report/test_differencified.png');
+    }
+  });
 });

src/index.js

@@ -29,6 +29,7 @@ export default class Differencify {
     createDir(this.configuration.screenshots);
     createDir(this.configuration.testReportPath);
   }
+
   _createChromeInstance(testConfig) {
     const width = testConfig.resolution.width || CHROME_WIDTH;
     const height = testConfig.resolution.height || CHROME_HEIGHT;
@@ -41,19 +42,22 @@ export default class Differencify {
     });
     return chromy;
   }
+
   _updateChromeInstances(id, chromy) {
     this.chromeInstances[id] = chromy;
     this.chromeInstancesId += 1;
   }
+
   async _closeChrome(id, chromy) {
     try {
       logger.log('closing browser');
-      chromy.close();
+      await chromy.close();
       delete this.chromeInstances[id];
     } catch (error) {
       logger.error(error);
     }
   }
+
   async _run(config, type, step) {
     const testConfig = sanitiseTestConfiguration(config);
     const chromy = this._createChromeInstance(testConfig);
@@ -67,13 +71,16 @@ export default class Differencify {
     await this._closeChrome(testId, chromy);
     return result;
   }
+
   async update(config) {
     return await this._run(config, configTypes.update, null);
   }
+
   async test(config) {
     const testStep = { name: actions.test, value: this.configuration.testReportPath };
     return await this._run(config, configTypes.test, testStep);
   }
+
   async cleanup() {
     await Promise.all(
       Object.values(this.chromeInstances).map(chromeInstance => chromeInstance.close()),

src/index.test.js

@@ -4,7 +4,7 @@ import Differencify from './index';
 import logger from './logger';
 
 let chromyCloseCallsCounter = 0;
-jest.mock('chromy', () => jest.fn().mockImplementation(() =>
+jest.mock('chromy', () => jest.fn(() =>
     ({
       goto: jest.fn(),
       close: jest.fn(() => { chromyCloseCallsCounter += 1; }),
@@ -78,7 +78,6 @@ describe('Differencify', () => {
     expect(loggerCalls[0]).toEqual('goto -> www.example.com');
     expect(loggerCalls[1]).toEqual('Capturing screenshot of whole DOM');
     expect(loggerCalls[2]).toEqual('screenshot saved in -> ./differencify_report/default.png');
-    expect(loggerCalls[4]).toEqual('Saving the diff image to disk');
     expect(writeFileSyncCalls).toEqual(['./differencify_report/default.png', 'png file']);
   });
   it('cleanup fn', async () => {