jest-image-snapshot 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [5.1.0](https://github.com/americanexpress/jest-image-snapshot/compare/v5.0.0...v5.1.0) (2022-05-30)
+
+
+### Features
+
+* allow storing received screenshot on failure ([#298](https://github.com/americanexpress/jest-image-snapshot/issues/298)) ([cfb81c9](https://github.com/americanexpress/jest-image-snapshot/commit/cfb81c99e1465420f007e180a59559c5d62d1c67))
+
 # [5.0.0](https://github.com/americanexpress/jest-image-snapshot/compare/v4.5.1...v5.0.0) (2022-05-30)
 
 

package/README.md

@@ -109,6 +109,8 @@ See [the examples](./examples/README.md) for more detailed usage or read about a
 * `comparisonMethod`: (default: `pixelmatch`) (options `pixelmatch` or `ssim`) The method by which images are compared.  `pixelmatch` does a pixel by pixel comparison, whereas `ssim` does a structural similarity comparison.  `ssim` is a new experimental feature for jest-image-snapshot, but may become the default comparison method in the future.  For a better understanding of how to use SSIM, see [Recommendations when using SSIM Comparison](#recommendations-when-using-ssim-comparison).
 * `customSnapshotsDir`: A custom absolute path of a directory to keep this snapshot in
 * `customDiffDir`: A custom absolute path of a directory to keep this diff in
+* `storeReceivedOnFailure`: (default: `false`) Store the received images seperately from the composed diff images on failure. This can be useful when updating baseline images from CI.
+* `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
 * `noColors`: Removes coloring from console output, useful if storing the results in a file

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jest-image-snapshot",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Jest matcher for image comparisons. Most commonly used for visual regression testing.",
   "main": "src/index.js",
   "engines": {

package/src/diff-snapshot.js

@@ -189,6 +189,8 @@ function diffImageToSnapshot(options) {
     receivedImageBuffer,
     snapshotIdentifier,
     snapshotsDir,
+    storeReceivedOnFailure,
+    receivedDir,
     diffDir,
     diffDirection,
     updateSnapshot = false,
@@ -209,6 +211,9 @@ function diffImageToSnapshot(options) {
     fs.writeFileSync(baselineSnapshotPath, receivedImageBuffer);
     result = { added: true };
   } else {
+    const receivedSnapshotPath = path.join(receivedDir, `${snapshotIdentifier}-received.png`);
+    rimraf.sync(receivedSnapshotPath);
+
     const diffOutputPath = path.join(diffDir, `${snapshotIdentifier}-diff.png`);
     rimraf.sync(diffOutputPath);
 
@@ -269,6 +274,12 @@ function diffImageToSnapshot(options) {
     });
 
     if (isFailure({ pass, updateSnapshot })) {
+      if (storeReceivedOnFailure) {
+        mkdirp.sync(path.dirname(receivedSnapshotPath));
+        fs.writeFileSync(receivedSnapshotPath, receivedImageBuffer);
+        result = { receivedSnapshotPath };
+      }
+
       mkdirp.sync(path.dirname(diffOutputPath));
       const composer = new ImageComposer({
         direction: diffDirection,
@@ -298,6 +309,7 @@ function diffImageToSnapshot(options) {
       fs.writeFileSync(diffOutputPath, pngBuffer);
 
       result = {
+        ...result,
         pass: false,
         diffSize,
         imageDimensions,

package/src/index.js

@@ -135,6 +135,8 @@ function configureToMatchImageSnapshot({
   customDiffConfig: commonCustomDiffConfig = {},
   customSnapshotIdentifier: commonCustomSnapshotIdentifier,
   customSnapshotsDir: commonCustomSnapshotsDir,
+  storeReceivedOnFailure: commonStoreReceivedOnFailure = false,
+  customReceivedDir: commonCustomReceivedDir,
   customDiffDir: commonCustomDiffDir,
   diffDirection: commonDiffDirection = 'horizontal',
   noColors: commonNoColors,
@@ -151,6 +153,8 @@ function configureToMatchImageSnapshot({
   return function toMatchImageSnapshot(received, {
     customSnapshotIdentifier = commonCustomSnapshotIdentifier,
     customSnapshotsDir = commonCustomSnapshotsDir,
+    storeReceivedOnFailure = commonStoreReceivedOnFailure,
+    customReceivedDir = commonCustomReceivedDir,
     customDiffDir = commonCustomDiffDir,
     diffDirection = commonDiffDirection,
     customDiffConfig = {},
@@ -189,6 +193,7 @@ function configureToMatchImageSnapshot({
     });
 
     const snapshotsDir = customSnapshotsDir || path.join(path.dirname(testPath), SNAPSHOTS_DIR);
+    const receivedDir = customReceivedDir || path.join(snapshotsDir, '__received_output__');
     const diffDir = customDiffDir || path.join(snapshotsDir, '__diff_output__');
     const baselineSnapshotPath = path.join(snapshotsDir, `${snapshotIdentifier}-snap.png`);
     OutdatedSnapshotReporter.markTouchedFile(baselineSnapshotPath);
@@ -208,6 +213,8 @@ function configureToMatchImageSnapshot({
       imageToSnapshot({
         receivedImageBuffer: received,
         snapshotsDir,
+        storeReceivedOnFailure,
+        receivedDir,
         diffDir,
         diffDirection,
         snapshotIdentifier,