Refactor compare image to async function with better error handling

Author: Dan Ristea

src/chromyRunner.js

@@ -5,12 +5,9 @@ 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 filePath = testType === configTypes.test ? testReportPath : screenshotsPath;
+  logger.log(`screenshot saved in -> ${filePath}/${filename}.png`);
+  return fs.writeFileSync(`${filePath}/${filename}.png`, image);
 };
 
 const run = async (chromy, options, test) => {

src/compareImage.js

@@ -1,33 +1,40 @@
-
 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`;
+
+  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) {
+    const diffPath = `${options.testReportPath}/${testName}_differencified.png`;
+    logger.log(`${testName}: Saving the diff image to disk at ${diffPath}`);
+    diff.image.write(diffPath);
+  }
+  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');
+    }
+  });
 });