feat: add onlyDiff in options

README.md

@@ -113,6 +113,7 @@ See [the examples](./examples/README.md) for more detailed usage or read about a
 * `customReceivedDir`: A custom absolute path of a directory to keep this received image in
 * `customSnapshotIdentifier`: A custom name to give this snapshot. If not provided one is computed automatically. When a function is provided it is called with an object containing `testPath`, `currentTestName`, `counter` and `defaultIdentifier` as its first argument. The function must return an identifier to use for the snapshot. If a path is given, the path will be created inside the snapshot/diff directories.
 * `diffDirection`: (default: `horizontal`) (options `horizontal` or `vertical`) Changes diff image layout direction
+* `onlyDiff`: (default: `false`) Either only include the difference between the baseline and the received image in the diff image, or include the 3 images (following the direction set by `diffDirection`).
 * `noColors`: Removes coloring 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.
 * `failureThresholdType`: (default `pixel`) (options `percent` or `pixel`) Sets the type of threshold that would trigger a failure.

__tests__/__snapshots__/index.spec.js.snap

@@ -47,6 +47,7 @@ exports[`toMatchImageSnapshot passes diffImageToSnapshot everything it needs to
   "diffDirection": "horizontal",
   "failureThreshold": 0,
   "failureThresholdType": "pixel",
+  "onlyDiff": false,
   "receivedDir": undefined,
   "receivedImageBuffer": "pretendthisisanimagebuffer",
   "snapshotIdentifier": "test-spec-js-test-1-snap",

__tests__/diff-snapshot.spec.js

@@ -695,6 +695,26 @@ describe('diff-snapshot', () => {
       expect(diffResult).toHaveProperty('diffOutputPath', path.join(mockSnapshotsDir, '__diff_output__', `${mockSnapshotIdentifier}-diff.png`));
     });
 
+    it('should only generate an image with the diff when onlyDiff is set to true', () => {
+      const diffImageToSnapshot = setupTest({ snapshotExists: true, pixelmatchResult: 250 });
+      const diffResult = diffImageToSnapshot({
+        receivedImageBuffer: mockFailImageBuffer,
+        snapshotIdentifier: mockSnapshotIdentifier,
+        snapshotsDir: mockSnapshotsDir,
+        receivedDir: mockReceivedDir,
+        diffDir: mockDiffDir,
+        updateSnapshot: false,
+        failureThreshold: 0,
+        failureThresholdType: 'pixel',
+        onlyDiff: true,
+      });
+
+      expect(diffResult).toHaveProperty('pass', false);
+      // White image without the baseline, nor the received (white because we mock pixelmatch)
+      expect(diffResult).toHaveProperty('imgSrcString', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAA30lEQVR4Ae3BIQEAAACDMAT9M78G4ptcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcilyKXIpcygA9UAGR3m7UvwAAAABJRU5ErkJggg==');
+      expect(diffResult).toHaveProperty('diffOutputPath', path.join(mockSnapshotsDir, '__diff_output__', `${mockSnapshotIdentifier}-diff.png`));
+    });
+
     it('should throw an error if an unknown threshold type is supplied', () => {
       const diffImageToSnapshot = setupTest({ snapshotExists: true });
 

__tests__/index.spec.js

@@ -443,6 +443,7 @@ describe('toMatchImageSnapshot', () => {
       comparisonMethod: 'pixelmatch',
       customDiffConfig: {},
       diffDirection: 'horizontal',
+      onlyDiff: false,
       failureThreshold: 0,
       failureThresholdType: 'pixel',
       receivedImageBuffer: undefined,
@@ -513,6 +514,7 @@ describe('toMatchImageSnapshot', () => {
       storeReceivedOnFailure: true,
       diffDir: path.join('path', 'to', 'my-custom-diff-dir'),
       diffDirection: 'vertical',
+      onlyDiff: false,
       updateSnapshot: false,
       updatePassedSnapshot: true,
       failureThreshold: 1,
@@ -572,6 +574,7 @@ describe('toMatchImageSnapshot', () => {
       receivedDir: path.join('path', 'to', 'my-custom-received-dir'),
       diffDir: path.join('path', 'to', 'my-custom-diff-dir'),
       diffDirection: 'horizontal',
+      onlyDiff: false,
       storeReceivedOnFailure: true,
       updateSnapshot: false,
       updatePassedSnapshot: false,

src/diff-snapshot.js

@@ -184,6 +184,24 @@ const shouldFail = ({
   };
 };
 
+function composeDiff(options) {
+  const {
+    diffDirection, baselineImage, diffImage, receivedImage, imageWidth, imageHeight, onlyDiff,
+  } = options;
+  const composer = new ImageComposer({
+    direction: diffDirection,
+  });
+
+  if (!onlyDiff) {
+    composer.addImage(baselineImage, imageWidth, imageHeight);
+  }
+  composer.addImage(diffImage, imageWidth, imageHeight);
+  if (!onlyDiff) {
+    composer.addImage(receivedImage, imageWidth, imageHeight);
+  }
+  return composer;
+}
+
 function diffImageToSnapshot(options) {
   const {
     receivedImageBuffer,
@@ -193,6 +211,7 @@ function diffImageToSnapshot(options) {
     receivedDir = path.join(options.snapshotsDir, '__received_output__'),
     diffDir = path.join(options.snapshotsDir, '__diff_output__'),
     diffDirection,
+    onlyDiff = false,
     updateSnapshot = false,
     updatePassedSnapshot = false,
     customDiffConfig = {},
@@ -281,14 +300,10 @@ function diffImageToSnapshot(options) {
       }
 
       mkdirp.sync(path.dirname(diffOutputPath));
-      const composer = new ImageComposer({
-        direction: diffDirection,
+      const composer = composeDiff({
+        diffDirection, baselineImage, diffImage, receivedImage, imageWidth, imageHeight, onlyDiff,
       });
 
-      composer.addImage(baselineImage, imageWidth, imageHeight);
-      composer.addImage(diffImage, imageWidth, imageHeight);
-      composer.addImage(receivedImage, imageWidth, imageHeight);
-
       const composerParams = composer.getParams();
 
       const compositeResultImage = new PNG({
@@ -335,6 +350,7 @@ function diffImageToSnapshot(options) {
   return result;
 }
 
+
 function runDiffImageToSnapshot(options) {
   options.receivedImageBuffer = options.receivedImageBuffer.toString('base64');
 

src/index.js

@@ -138,6 +138,7 @@ function configureToMatchImageSnapshot({
   storeReceivedOnFailure: commonStoreReceivedOnFailure = false,
   customReceivedDir: commonCustomReceivedDir,
   customDiffDir: commonCustomDiffDir,
+  onlyDiff: commonOnlyDiff = false,
   diffDirection: commonDiffDirection = 'horizontal',
   noColors: commonNoColors,
   failureThreshold: commonFailureThreshold = 0,
@@ -156,6 +157,7 @@ function configureToMatchImageSnapshot({
     storeReceivedOnFailure = commonStoreReceivedOnFailure,
     customReceivedDir = commonCustomReceivedDir,
     customDiffDir = commonCustomDiffDir,
+    onlyDiff = commonOnlyDiff,
     diffDirection = commonDiffDirection,
     customDiffConfig = {},
     noColors = commonNoColors,
@@ -218,6 +220,7 @@ function configureToMatchImageSnapshot({
         receivedDir,
         diffDir,
         diffDirection,
+        onlyDiff,
         snapshotIdentifier,
         updateSnapshot: snapshotState._updateSnapshot === 'all',
         customDiffConfig: Object.assign({}, commonCustomDiffConfig, customDiffConfig),