jest-image-snapshot 5.2.0 → 6.1.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [6.1.0](https://github.com/americanexpress/jest-image-snapshot/compare/v6.0.0...v6.1.0) (2022-12-02)
+
+
+### Features
+
+* add onlyDiff in options ([#317](https://github.com/americanexpress/jest-image-snapshot/issues/317)) ([4bad752](https://github.com/americanexpress/jest-image-snapshot/commit/4bad752571bb567861ddfa2cc9073f33c4239352))
+
+# [6.0.0](https://github.com/americanexpress/jest-image-snapshot/compare/v5.2.0...v6.0.0) (2022-11-03)
+
+
+* chore(jest)!: add support for jest v29 (#309) ([79e53fc](https://github.com/americanexpress/jest-image-snapshot/commit/79e53fc010793f574cd9da783ced895af6987712)), closes [#309](https://github.com/americanexpress/jest-image-snapshot/issues/309)
+
+
+### BREAKING CHANGES
+
+* Drop support for Node v12 and Node v17,
+                 as Jest v29 does not support these versions.
+
+* ci(release): use Node v16 for release action
+
+Node v16 is the current active LTS release of Node.JS
+
+Co-authored-by: Jamie King <hello@jamieking.me>
+
+Co-authored-by: Jamie King <hello@jamieking.me>
+
 # [5.2.0](https://github.com/americanexpress/jest-image-snapshot/compare/v5.1.1...v5.2.0) (2022-08-31)
 
 

package/README.md

@@ -75,7 +75,7 @@ Thanks `jest-image-snapshot`, that broken header would not have looked good in p
 npm i --save-dev jest-image-snapshot
 ```
 
-Please note that `Jest` `>=20 <=27` is a peerDependency. `jest-image-snapshot` will **not** work with anything below Jest 20.x.x
+Please note that `Jest` `>=20 <=29` is a peerDependency. `jest-image-snapshot` will **not** work with anything below Jest 20.x.x
 
 ### Invocation
 
@@ -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.

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "jest-image-snapshot",
-  "version": "5.2.0",
+  "version": "6.1.0",
   "description": "Jest matcher for image comparisons. Most commonly used for visual regression testing.",
   "main": "src/index.js",
   "engines": {
-    "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
+    "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
   },
   "scripts": {
     "lint": "eslint ./ --ignore-path .gitignore --ext .js",
@@ -53,14 +53,14 @@
     "eslint-config-amex": "^7.0.0",
     "husky": "^4.2.1",
     "image-size": "^0.8.3",
-    "jest": "^28.0.3",
-    "jest-snapshot": "^28.0.3",
+    "jest": "^29.0.0",
+    "jest-snapshot": "^29.0.0",
     "lockfile-lint": "^4.0.0",
     "mock-spawn": "^0.2.6",
     "semantic-release": "^17.0.4"
   },
   "dependencies": {
-    "chalk": "^1.1.3",
+    "chalk": "^4.0.0",
     "get-stdin": "^5.0.1",
     "glur": "^1.1.2",
     "lodash": "^4.17.4",
@@ -71,7 +71,7 @@
     "ssim.js": "^3.1.1"
   },
   "peerDependencies": {
-    "jest": ">=20 <=28"
+    "jest": ">=20 <=29"
   },
   "husky": {
     "hooks": {

package/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(diffImage, imageWidth, imageHeight);
+  } else {
+    composer.addImage(baselineImage, imageWidth, imageHeight);
+    composer.addImage(diffImage, imageWidth, imageHeight);
+    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');
 

package/src/index.js

@@ -15,7 +15,7 @@
 const kebabCase = require('lodash/kebabCase');
 const merge = require('lodash/merge');
 const path = require('path');
-const Chalk = require('chalk').constructor;
+const Chalk = require('chalk').Instance;
 const { diffImageToSnapshot, runDiffImageToSnapshot } = require('./diff-snapshot');
 const fs = require('fs');
 const OutdatedSnapshotReporter = require('./outdated-snapshot-reporter');
@@ -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,
@@ -174,7 +176,8 @@ function configureToMatchImageSnapshot({
     } = this;
     const chalkOptions = {};
     if (typeof noColors !== 'undefined') {
-      chalkOptions.enabled = !noColors;
+      // 1 means basic ANSI 16-color support, 0 means no support
+      chalkOptions.level = noColors ? 0 : 1;
     }
     const chalk = new Chalk(chalkOptions);
 
@@ -217,6 +220,7 @@ function configureToMatchImageSnapshot({
         receivedDir,
         diffDir,
         diffDirection,
+        onlyDiff,
         snapshotIdentifier,
         updateSnapshot: snapshotState._updateSnapshot === 'all',
         customDiffConfig: Object.assign({}, commonCustomDiffConfig, customDiffConfig),