Add custom path example (#78)

Author: NimaSoroush

API.md

@@ -338,6 +338,26 @@ In this example, differencify will got to different pages and compare screenshot
 ```
 In this example, differencify will got to different pages and compare screenshots with reference screenshots.
 
+## Custom test path
+
+```js
+(async () => {
+  const differencify = new Differencify({ imageSnapshotPath: './custom_test_path' });
+  const target = differencify.init({ chain: false });
+  await target.launch();
+  const page = await target.newPage();
+  await page.setViewport({ width: 1600, height: 1200 });
+  await page.goto('http://example.com/');
+  await page.waitFor(1000);
+  const image = await page.screenshot();
+  const result = await target.toMatchSnapshot(image);
+  await page.close();
+  console.log(result); // True or False
+  console.log(result2); // True or False
+})();
+```
+In this example, you can specify the custom path for storing images.
+
 
 
 

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.3.1] - 2018-6-6
+### Fixed
+- Bug fixed for custom test path
+
 ## [1.3.1] - 2018-5-25
 ### Fixed
 - Bug fixed for testName not being picked up correctly

README.md

@@ -188,7 +188,7 @@ RUN npm install differencify
 
 ## Links
 
-See [examples](examples) for usages and CI integration with jest
+See [examples](./src/integration.tests) for usages and CI integration with jest
 
 Visit project [Gitter Chat](https://gitter.im/differencify/QA) for general Q/A around project
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "differencify",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Perceptual diffing tool",
   "main": "dist/index.js",
   "scripts": {

src/__snapshots__/sanitiser.test.js.snap

@@ -4,6 +4,7 @@ exports[`sanitiser sanitise global configuration sanitise if no config provided
 Object {
   "debug": false,
   "imageSnapshotPath": "differencify_reports",
+  "imageSnapshotPathProvided": false,
   "mismatchThreshold": 0.001,
   "saveDifferencifiedImage": true,
 }
@@ -13,6 +14,7 @@ exports[`sanitiser sanitise global configuration sanitise if puppeteer specific
 Object {
   "debug": false,
   "imageSnapshotPath": "differencify_reports",
+  "imageSnapshotPathProvided": false,
   "mismatchThreshold": 0.001,
   "saveDifferencifiedImage": true,
 }
@@ -22,6 +24,7 @@ exports[`sanitiser sanitise global configuration sanitise if screenshots config
 Object {
   "debug": false,
   "imageSnapshotPath": "differencify_reports",
+  "imageSnapshotPathProvided": false,
   "mismatchThreshold": 0.001,
   "saveDifferencifiedImage": true,
 }

src/compareImage.js

@@ -14,8 +14,7 @@ const saveDiff = (diff, diffPath) =>
     diff.image.write(diffPath, cb);
   });
 
-const compareImage = async (capturedImage, globalConfig, testConfig) => {
-  const prefixedLogger = logger.prefix(testConfig.testName);
+const getSnapshotsDir = (testConfig, globalConfig) => {
   let testRoot;
   if (testConfig.isJest) {
     testRoot = path.dirname(testConfig.testPath);
@@ -26,8 +25,16 @@ const compareImage = async (capturedImage, globalConfig, testConfig) => {
       fs.mkdirSync(testRoot);
     }
   }
+  return path.join(testRoot, '__image_snapshots__');
+};
+
+const compareImage = async (capturedImage, globalConfig, testConfig) => {
+  const prefixedLogger = logger.prefix(testConfig.testName);
+
+  const snapshotsDir = globalConfig.imageSnapshotPathProvided ?
+    globalConfig.imageSnapshotPath :
+    getSnapshotsDir(testConfig, globalConfig);
 
-  const snapshotsDir = path.join(testRoot, '__image_snapshots__');
   const snapshotPath = path.join(snapshotsDir, `${testConfig.testName}.snap.${testConfig.imageType || 'png'}`);
 
   const diffDir = path.join(snapshotsDir, '__differencified_output__');

src/compareImage.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-object-spread/prefer-object-spread */
 import Jimp from 'jimp';
 import fs from 'fs';
 import compareImage from './compareImage';
@@ -33,6 +34,7 @@ jest.mock('./utils/logger', () => ({
 
 const mockConfig = {
   imageSnapshotPath: './differencify_report',
+  imageSnapshotPathProvided: false,
   saveDifferencifiedImage: true,
   mismatchThreshold: 0.01,
 };
@@ -74,6 +76,22 @@ describe('Compare Image', () => {
       expect(result).toEqual({ updated: true });
       expect(fs.writeFileSync).toHaveBeenCalledWith('/parent/__image_snapshots__/test.snap.png', Object);
     });
+    it('respects to imageSnapshotPath when in jest mode', async () => {
+      const newGlobalConfig = Object.assign({}, mockConfig,
+        {
+          imageSnapshotPath: './someImagePath',
+          imageSnapshotPathProvided: true,
+        });
+      const result = await compareImage(Object, newGlobalConfig, {
+        isUpdate: true,
+        isJest: true,
+        testName: 'test',
+        testPath: '/src/test.js',
+        imageType: 'png',
+      });
+      expect(result).toEqual({ updated: true });
+      expect(fs.writeFileSync).toHaveBeenCalledWith('./someImagePath/test.snap.png', Object);
+    });
   });
 
   describe('non-jest mode', () => {
@@ -210,10 +228,8 @@ describe('Compare Image', () => {
         write: mockWrite,
       },
     });
-    // eslint-disable-next-line prefer-object-spread/prefer-object-spread
     const result = await compareImage(
       Object,
-      // eslint-disable-next-line prefer-object-spread/prefer-object-spread
       Object.assign({}, mockConfig, { saveDifferencifiedImage: true }),
       mockTestConfig,
     );

src/index.test.js

@@ -79,6 +79,7 @@ describe('Differencify', () => {
         mismatchThreshold: 0.001,
         saveDifferencifiedImage: true,
         imageSnapshotPath: 'differencify_reports',
+        imageSnapshotPathProvided: false,
       },
       {
         chain: false,

src/integration.tests/__image_snapshots__/custom_test_path/Differencify Custom test path.snap.png

@@ -185,4 +185,23 @@ describe('Differencify', () => {
     await page.close();
     expect(result).toEqual(true);
   }, 20000);
+  it('Custom test path', async () => {
+    const customDifferencify = new Differencify({
+      imageSnapshotPath: './src/integration.tests/__image_snapshots__/custom_test_path',
+      debug: true,
+    });
+    await customDifferencify.launchBrowser({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
+    const target = customDifferencify.init({
+      chain: false,
+    });
+    const page = await target.newPage();
+    await page.setViewport({ width: 1600, height: 1200 });
+    await page.goto('http://example.com/');
+    await page.waitFor(1000);
+    const image = await page.screenshot();
+    const result = await target.toMatchSnapshot(image);
+    await page.close();
+    await customDifferencify.cleanup();
+    expect(result).toEqual(true);
+  }, 20000);
 });