feat(configOption): Allow using custom directory for snapshots (mapbo…

…x#25)

README.md

@@ -36,8 +36,9 @@ Jest matcher that performs image comparisons using [pixelmatch](https://github.c
 `toMatchImageSnapshot()` takes an optional options object with the following properties:
 
 * `customDiffConfig`: Custom config passed [pixelmatch](https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options) (See options section)
-  * By default we have set the `threshold` to 0.01, you can increase that value by passing a customDiffConfig as demonstrated below. 
+  * By default we have set the `threshold` to 0.01, you can increase that value by passing a customDiffConfig as demonstrated below.
   * Please note the `threshold` set in the `customDiffConfig` is the per pixel sensitivity threshold. For example with a source pixel colour of `#ffffff` (white) and a comparison pixel colour of `#fcfcfc` (really light grey) if you set the threshold to 0 then it would trigger a failure *on that pixel*. However if you were to use say 0.5 then it wouldn't, the colour difference would need to be much more extreme to trigger a failure on that pixel, say `#000000` (black)
+* `customSnapshotsDir`: A custom directory to keep this snapshot in
 * `customSnapshotIdentifier`: A custom name to give this snapshot. If not provided one is computed automatically
 * `noColors`: (default `false`) Removes colouring from console output, useful if storing the results in a file
 * `failureThreshold`: (default `0`) Sets the threshold that would trigger a test failure based on the `failureThresholdType` selected. This is different to the `customDiffConfig.threshold` above, that is the per pixel failure threshold, this is the failure threshold for the entire comparison.

__tests__/src/diff-snapshot.spec.js

@@ -12,6 +12,7 @@
  * the License.
  */
 
+/* eslint-disable global-require */
 const fs = require('fs');
 const path = require('path');
 

__tests__/src/index.spec.js

@@ -12,6 +12,7 @@
  * the License.
  */
 
+/* eslint-disable global-require */
 const fs = require('fs');
 const path = require('path');
 

__tests__/src/integration.spec.js

@@ -29,7 +29,7 @@ describe('integration tests', () => {
     const intercept = require.requireActual('../../src');
     const originalToMatchImageSnapshot = intercept.toMatchImageSnapshot;
 
-    intercept.toMatchImageSnapshot = function (...args) {
+    intercept.toMatchImageSnapshot = function toMatchImageSnapshot(...args) {
       const ctx = this;
       let originalUpdateSnapshot = null;
 
@@ -54,8 +54,10 @@ describe('integration tests', () => {
     return intercept;
   };
 
-  const cleanSnapshot = function (customSnapshotIdentifier) {
-    const snapPath = path.join(snapDir, `${customSnapshotIdentifier}-snap.png`);
+  const getSnapshotBasename = identifier => `${identifier}-snap.png`;
+
+  const cleanSnapshot = (customSnapshotIdentifier, snapshotsDir = snapDir) => {
+    const snapPath = path.join(snapshotsDir, getSnapshotBasename(customSnapshotIdentifier));
 
     if (fs.exists(snapPath)) {
       fs.unlink(snapPath);
@@ -112,4 +114,17 @@ describe('integration tests', () => {
     // Test against an image much larger than the snapshot.
     expect(() => expect(failImageData).toMatchImageSnapshot({ customSnapshotIdentifier })).toThrowError(); // eslint-disable-line max-len
   });
+
+  it('creates snapshot in custom directory if such is specified.', () => {
+    const customSnapshotsDir = path.resolve(__dirname, '__custom_snapshots_dir__');
+    const customSnapshotIdentifier = 'integration-5';
+
+    cleanSnapshot(customSnapshotIdentifier, customSnapshotsDir);
+
+    // First we need to write a new snapshot image
+    expect(() => expect(imageData).toMatchImageSnapshot({ customSnapshotsDir, customSnapshotIdentifier })).not.toThrowError(); // eslint-disable-line max-len
+
+    // Then we check if the file was created in custom directory
+    expect(() => fs.readFileSync(path.resolve(customSnapshotsDir, getSnapshotBasename(customSnapshotIdentifier)))).not.toThrowError(); // eslint-disable-line max-len
+  });
 });

src/index.js

@@ -18,6 +18,8 @@ const path = require('path');
 const Chalk = require('chalk').constructor;
 const { diffImageToSnapshot } = require('./diff-snapshot');
 
+const SNAPSHOTS_DIR = '__image_snapshots__';
+
 function updateSnapshotState(oldSnapshotState, newSnapshotState) {
   return merge({}, oldSnapshotState, newSnapshotState);
 }
@@ -30,6 +32,7 @@ function configureToMatchImageSnapshot({
 } = {}) {
   return function toMatchImageSnapshot(received, {
     customSnapshotIdentifier = '',
+    customSnapshotsDir,
     customDiffConfig = {},
     noColors = commonNoColors,
     failureThreshold = commonFailureThreshold,
@@ -47,7 +50,7 @@ function configureToMatchImageSnapshot({
     const result = diffImageToSnapshot({
       imageData: received,
       snapshotIdentifier,
-      snapshotsDir: path.join(path.dirname(testPath), '__image_snapshots__'),
+      snapshotsDir: customSnapshotsDir || path.join(path.dirname(testPath), SNAPSHOTS_DIR),
       updateSnapshot: snapshotState._updateSnapshot === 'all',
       customDiffConfig: Object.assign({}, commonCustomDiffConfig, customDiffConfig),
       failureThreshold,
@@ -85,4 +88,5 @@ module.exports = {
   toMatchImageSnapshot: configureToMatchImageSnapshot(),
   configureToMatchImageSnapshot,
   updateSnapshotState,
+  SNAPSHOTS_DIR,
 };