jest-image-snapshot 2.11.1 → 2.12.0

package/README.md

@@ -1,13 +1,9 @@
-<h1>
-  <center>
-    <br />
-    <img src="./jest-image-snapshot.png" alt="Jest Image Snapshot - One Amex" width="50%" />
-    <br /><br />
-  </center>
+<h1 align="center">
+  <img src='https://github.com/americanexpress/jest-image-snapshot/raw/master/jest-image-snapshot.png' alt="Jest Image Snapshot - One Amex" width='50%'/>
 </h1>
 
-[![npm version](https://badge.fury.io/js/jest-image-snapshot.svg)](https://badge.fury.io/js/jest-image-snapshot)
-[![Build Status](https://travis-ci.org/americanexpress/jest-image-snapshot.svg?branch=master)](https://travis-ci.org/americanexpress/jest-image-snapshot)
+[![npm](https://img.shields.io/npm/v/jest-image-snapshot)](https://www.npmjs.com/package/jest-image-snapshot)
+[![Travis (.org) branch](https://img.shields.io/travis/americanexpress/jest-image-snapshot/master)](https://travis-ci.org/americanexpress/jest-image-snapshot)
 [![Mentioned in Awesome Jest](https://awesome.re/mentioned-badge.svg)](https://github.com/jest-community/awesome-jest)
 
 > Jest matcher that performs image comparisons using [pixelmatch](https://github.com/mapbox/pixelmatch) and behaves just like [Jest snapshots](https://facebook.github.io/jest/docs/snapshot-testing.html) do! Very useful for visual regression testing.
@@ -19,11 +15,11 @@ Want to get paid for your contributions to `jest-image-snapshot`?
 
 ## 📖 Table of Contents
 
-* [Features](#Features)
-* [Usage](#Usage)
-* [API](#API)
-* [Available Scripts](#Available%20Scripts)
-* [Contributing](#Contributing)
+* [Features](#-features)
+* [Usage](#-usage)
+* [API](#-api)
+* [Available Scripts](#-available-scripts)
+* [Contributing](#-contributing)
 
 ## ✨ Features
 
@@ -118,6 +114,7 @@ See [the examples](./examples/README.md) for more detailed usage or read about a
 * `updatePassedSnapshot`: (default `false`) Updates a snapshot even if it passed the threshold against the existing one.
 * `blur`: (default `0`) Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you have noise after scaling images per different resolutions on your target website, usually setting it's value to 1-2 should be enough to solve that problem.
 * `runInProcess`: (default `false`) Runs the diff in process without spawning a child process.
+* `dumpDiffToConsole`: (default `false`) Will output base64 string of a diff image to console in case of failed tests (in addition to creating a diff image). This string can be copy-pasted to a browser address string to preview the diff for a failed test.
 
 ```javascript
 it('should demonstrate this matcher`s usage with a custom pixelmatch config', () => {

package/package.json

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

package/src/diff-snapshot.js

@@ -213,6 +213,7 @@ function diffImageToSnapshot(options) {
         diffOutputPath,
         diffRatio,
         diffPixelCount,
+        imgSrcString: `data:image/png;base64,${pngBuffer}`,
       };
     } else if (shouldUpdate({ pass, updateSnapshot, updatePassedSnapshot })) {
       mkdirp.sync(snapshotsDir);

package/src/index.js

@@ -36,6 +36,7 @@ function checkResult({
   retryTimes,
   snapshotIdentifier,
   chalk,
+  dumpDiffToConsole,
 }) {
   let pass = true;
   /*
@@ -65,11 +66,15 @@ function checkResult({
       message = () => {
         let failure;
         if (result.diffSize) {
-          failure = `Expected image to be the same size as the snapshot (${result.imageDimensions.baselineWidth}x${result.imageDimensions.baselineHeight}), but was different (${result.imageDimensions.receivedWidth}x${result.imageDimensions.receivedHeight}).\n`
-          + `${chalk.bold.red('See diff for details:')} ${chalk.red(result.diffOutputPath)}`;
+          failure = `Expected image to be the same size as the snapshot (${result.imageDimensions.baselineWidth}x${result.imageDimensions.baselineHeight}), but was different (${result.imageDimensions.receivedWidth}x${result.imageDimensions.receivedHeight}).\n`;
         } else {
-          failure = `Expected image to match or be a close match to snapshot but was ${differencePercentage}% different from snapshot (${result.diffPixelCount} differing pixels).\n`
-          + `${chalk.bold.red('See diff for details:')} ${chalk.red(result.diffOutputPath)}`;
+          failure = `Expected image to match or be a close match to snapshot but was ${differencePercentage}% different from snapshot (${result.diffPixelCount} differing pixels).\n`;
+        }
+
+        failure += `${chalk.bold.red('See diff for details:')} ${chalk.red(result.diffOutputPath)}`;
+
+        if (dumpDiffToConsole) {
+          failure += `\n${chalk.bold.red('Or paste below image diff string to your browser`s URL bar.')}\n ${result.imgSrcString}`;
         }
 
         return failure;
@@ -128,6 +133,7 @@ function configureToMatchImageSnapshot({
   updatePassedSnapshot: commonUpdatePassedSnapshot = false,
   blur: commonBlur = 0,
   runInProcess: commonRunInProcess = false,
+  dumpDiffToConsole: commonDumpDiffToConsole = false,
 } = {}) {
   return function toMatchImageSnapshot(received, {
     customSnapshotIdentifier = commonCustomSnapshotIdentifier,
@@ -141,6 +147,7 @@ function configureToMatchImageSnapshot({
     updatePassedSnapshot = commonUpdatePassedSnapshot,
     blur = commonBlur,
     runInProcess = commonRunInProcess,
+    dumpDiffToConsole = commonDumpDiffToConsole,
   } = {}) {
     const {
       testPath, currentTestName, isNot, snapshotState,
@@ -197,6 +204,7 @@ function configureToMatchImageSnapshot({
       retryTimes,
       snapshotIdentifier,
       chalk,
+      dumpDiffToConsole,
     });
   };
 }