jest-image-snapshot 2.9.0 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/.travis.yml +8 -0
  2. package/CODEOWNERS +3 -0
  3. package/README.md +145 -74
  4. package/jest-image-snapshot.png +0 -0
  5. package/package.json +2 -1
  6. package/src/diff-snapshot.js +10 -1
  7. package/src/index.js +23 -7
  8. package/__tests__/.eslintrc.json +0 -3
  9. package/__tests__/__image_snapshots__/integration-6-snap.png +0 -0
  10. package/__tests__/__image_snapshots__/integration-spec-js-to-match-image-snapshot-happy-path-matches-an-identical-snapshot-1-snap.png +0 -0
  11. package/__tests__/__image_snapshots__/integration-update-snap.png +0 -0
  12. package/__tests__/__snapshots__/diff-snapshot.spec.js.snap +0 -3
  13. package/__tests__/__snapshots__/index.spec.js.snap +0 -32
  14. package/__tests__/diff-snapshot.spec.js +0 -584
  15. package/__tests__/image-composer.spec.js +0 -81
  16. package/__tests__/index.spec.js +0 -514
  17. package/__tests__/integration.spec.js +0 -310
  18. package/__tests__/stubs/TestImage.png +0 -0
  19. package/__tests__/stubs/TestImage150x150.png +0 -0
  20. package/__tests__/stubs/TestImageFailure.png +0 -0
  21. package/__tests__/stubs/TestImageFailureOversize.png +0 -0
  22. package/__tests__/stubs/TestImageUpdate1pxOff.png +0 -0
  23. package/examples/.eslintrc.json +0 -3
  24. package/examples/README.md +0 -9
  25. package/examples/__tests__/__image_snapshots__/local-image-spec-js-works-reading-an-image-from-the-local-file-system-1-snap.png +0 -0
  26. package/examples/__tests__/__image_snapshots__/puppeteer-example-spec-js-jest-image-snapshot-usage-with-an-image-received-from-puppeteer-works-1-snap.png +0 -0
  27. package/examples/__tests__/local-image.spec.js +0 -24
  28. package/examples/__tests__/puppeteer-example.spec.js +0 -37
  29. package/examples/__tests__/stubs/image.png +0 -0
  30. package/examples/image-reporter.js +0 -46
  31. package/examples/jest-setup.js +0 -19
  32. package/examples/package.json +0 -26
package/.travis.yml CHANGED
@@ -4,3 +4,11 @@ node_js:
4
4
  - "8"
5
5
  - "9"
6
6
  - "10"
7
+ deploy:
8
+ on:
9
+ tags: true
10
+ branch: master
11
+ provider: npm
12
+ email: open-source-ops@aexp.com
13
+ api_key:
14
+ secure: lhhShzouUcVTerUWMJDjS4ChuRCNXlCKo4wLJINNjcg5MP1d7XrlU6zbv7JPfQKU4pYoMcEKeldzWNGIEtKePStr4bWaiCFzgjiskdxt80mtMLC+t0bWWUZPQPGQeoEVQb7v3RLEXhFZHqqjiDFmp4TPXfcyCyzSIn6YpNEGFydtMaf8TN0haPAI4k43ZFqA2JrMD4/lARR7WDFkP9otywxOtQVQGnrLVSNMuNtJV6MvImDJoeh6AIeZl9kuRn5EZMQw7cDuLp+yjRs4O76Lz8EkfT8gq1flUYwLv0DgIuEwgbb4h8LFv1gaS7lWkoADRfTufeToau7KSMgk70h/IvOQ4CB+R5wLZdDoin1zLZx+fEPU7PQQSaXHk0nn6XeFQG+j2lJnde3YVs5AeaaAYUhvHyHs+btWoGLvXREeYA61bEn7p46GAh/JjZ3ydyqHBTHU2dh11QV6B3gjyFlfD1ul6NJvMnwd64vpeWWlG0gci0P1RAwgc2gGvNZ00/Qv6XoNiZpPkp7GQkpGocN+Vr4/zgPpaApk5HjSQL/4X7vh4M2eAhslT91vxcKzjyhAvwjAbFd5ZUd2lAjwIzEfzSzsXe7YS2KhsSf/+qln2Sx4nxCmraUtebAYxPpaeYWd3jbXzHBt8K51mzO8OuOKtAG1Ck0zB3W5XENhxJpfU0I=
package/CODEOWNERS ADDED
@@ -0,0 +1,3 @@
1
+ # https://help.github.com/en/articles/about-code-owners
2
+
3
+ * @americanexpress/one
package/README.md CHANGED
@@ -1,31 +1,94 @@
1
- # jest-image-snapshot
1
+ <h1 align="center">
2
+ <img src='https://github.com/americanexpress/jest-image-snapshot/raw/master/jest-image-snapshot.png' alt="Jest Image Snapshot - One Amex" width='50%'/>
3
+ </h1>
2
4
 
3
- [![npm version](https://badge.fury.io/js/jest-image-snapshot.svg)](https://badge.fury.io/js/jest-image-snapshot)
4
- [![Build Status](https://travis-ci.org/americanexpress/jest-image-snapshot.svg?branch=master)](https://travis-ci.org/americanexpress/jest-image-snapshot)
5
+ [![npm](https://img.shields.io/npm/v/jest-image-snapshot)](https://www.npmjs.com/package/jest-image-snapshot)
6
+ [![Travis (.org) branch](https://img.shields.io/travis/americanexpress/jest-image-snapshot/master)](https://travis-ci.org/americanexpress/jest-image-snapshot)
5
7
  [![Mentioned in Awesome Jest](https://awesome.re/mentioned-badge.svg)](https://github.com/jest-community/awesome-jest)
6
8
 
7
- 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.
9
+ > 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.
8
10
 
9
- > Want to get paid for your contributions to `jest-image-snapshot`?
11
+ ## 👩‍💻 Hiring 👨‍💻
12
+
13
+ Want to get paid for your contributions to `jest-image-snapshot`?
10
14
  > Send your resume to oneamex.careers@aexp.com
11
15
 
12
- ## Installation:
13
- ```bash
14
- npm i --save-dev jest-image-snapshot
15
- ```
16
+ ## 📖 Table of Contents
17
+
18
+ * [Features](#-features)
19
+ * [Usage](#-usage)
20
+ * [API](#-api)
21
+ * [Available Scripts](#-available-scripts)
22
+ * [Contributing](#-contributing)
23
+
24
+ ## ✨ Features
25
+
26
+ * Take image snapshots of your React components
27
+ * Ability to compare snapshots from a baseline
28
+ * Update snapshots when you're good with changes
29
+ * Customize a difference threshold
30
+ * Add a Gaussian blur for noise
31
+ * Adjust the diff layout horizontal vs vertical
32
+
33
+ ### How it works
34
+
35
+ Given an image (Buffer instance with PNG image data) the `toMatchImageSnapshot()` matcher will create a `__image_snapshots__` directory in the directory the test is in and will store the baseline snapshot image there on the first run. Note that if `customSnapshotsDir` option is given then it will store baseline snapshot there instead.
36
+
37
+ On subsequent test runs the matcher will compare the image being passed against the stored snapshot.
38
+
39
+ To update the stored image snapshot run Jest with `--updateSnapshot` or `-u` argument. All this works the same way as [Jest snapshots](https://facebook.github.io/jest/docs/snapshot-testing.html).
40
+
41
+ ### See it in action
42
+
43
+ Typically this matcher is used to for visual tests that run on a browser. For example let's say I finish working on a feature and want to write a test to prevent visual regressions:
44
+
45
+ ```javascript
46
+ ...
47
+ it('renders correctly', async () => {
48
+ const page = await browser.newPage();
49
+ await page.goto('https://localhost:3000');
50
+ const image = await page.screenshot();
51
+
52
+ expect(image).toMatchImageSnapshot();
53
+ });
54
+ ...
55
+ ```
56
+
57
+ <img title="Adding an image snapshot" src="./images/create-snapshot.gif" width="50%">
58
+
59
+ Then after a few days as I finish adding another feature to my component I notice one of my tests failing!
60
+
61
+ <img title="A failing image snapshot test" src="./images/fail-snapshot.gif" width="50%">
62
+
63
+ Oh no! I must have introduced a regression! Let's see what the diff looks like to identify what I need to fix:
64
+
65
+ <img title="Image diff" src="./images/image-diff.png" width="50%">
66
+
67
+ And now that I know that I broke the card art I can fix it!
68
+
69
+ Thanks `jest-image-snapshot`, that broken header would not have looked good in production!
70
+
71
+ ## 🤹‍ Usage
16
72
 
17
- Please note that `Jest` `>=20 <=24` is a peerDependency. `jest-image-snapshot` will **not** work with anything below Jest 20.x.x
73
+ ### Installation
74
+
75
+ ```bash
76
+ npm i --save-dev jest-image-snapshot
77
+ ```
78
+
79
+ Please note that `Jest` `>=20 <=24` is a peerDependency. `jest-image-snapshot` will **not** work with anything below Jest 20.x.x
80
+
81
+ ### Invocation
18
82
 
19
- ## Usage:
20
83
  1. Extend Jest's `expect`
21
- ```javascript
22
- const { toMatchImageSnapshot } = require('jest-image-snapshot');
84
+ ```javascript
85
+ const { toMatchImageSnapshot } = require('jest-image-snapshot');
23
86
 
24
- expect.extend({ toMatchImageSnapshot });
25
- ```
87
+ expect.extend({ toMatchImageSnapshot });
88
+ ```
26
89
 
27
90
  2. Use `toMatchImageSnapshot()` in your tests!
28
- ```javascript
91
+ ```javascript
29
92
  it('should demonstrate this matcher`s usage', () => {
30
93
  ...
31
94
  expect(image).toMatchImageSnapshot();
@@ -34,7 +97,7 @@ Jest matcher that performs image comparisons using [pixelmatch](https://github.c
34
97
 
35
98
  See [the examples](./examples/README.md) for more detailed usage or read about an example use case in the [American Express Technology Blog](https://americanexpress.io/smile-for-the-camera/)
36
99
 
37
- ### Optional configuration:
100
+ ## 🎛️ API
38
101
 
39
102
  `toMatchImageSnapshot()` takes an optional options object with the following properties:
40
103
 
@@ -45,33 +108,36 @@ See [the examples](./examples/README.md) for more detailed usage or read about a
45
108
  * `customDiffDir`: A custom absolute path of a directory to keep this diff in
46
109
  * `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.
47
110
  * `diffDirection`: (default: `horizontal`) (options `horizontal` or `vertical`) Changes diff image layout direction
48
- * `noColors`: (default `false`) Removes colouring from console output, useful if storing the results in a file
111
+ * `noColors`: (default `false`) Removes coloring from console output, useful if storing the results in a file
49
112
  * `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.
50
113
  * `failureThresholdType`: (default `pixel`) (options `percent` or `pixel`) Sets the type of threshold that would trigger a failure.
51
114
  * `updatePassedSnapshot`: (default `false`) Updates a snapshot even if it passed the threshold against the existing one.
115
+ * `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.
116
+ * `runInProcess`: (default `false`) Runs the diff in process without spawning a child process.
117
+ * `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.
52
118
 
53
119
  ```javascript
54
- it('should demonstrate this matcher`s usage with a custom pixelmatch config', () => {
55
- ...
56
- const customConfig = { threshold: 0.5 };
57
- expect(image).toMatchImageSnapshot({
58
- customDiffConfig: customConfig,
59
- customSnapshotIdentifier: 'customSnapshotName',
60
- noColors: true
61
- });
120
+ it('should demonstrate this matcher`s usage with a custom pixelmatch config', () => {
121
+ ...
122
+ const customConfig = { threshold: 0.5 };
123
+ expect(image).toMatchImageSnapshot({
124
+ customDiffConfig: customConfig,
125
+ customSnapshotIdentifier: 'customSnapshotName',
126
+ noColors: true
62
127
  });
128
+ });
63
129
  ```
64
130
 
65
131
  The failure threshold can be set in percent, in this case if the difference is over 1%.
66
132
 
67
133
  ```javascript
68
- it('should fail if there is more than a 1% difference', () => {
69
- ...
70
- expect(image).toMatchImageSnapshot({
71
- failureThreshold: '0.01',
72
- failureThresholdType: 'percent'
73
- });
134
+ it('should fail if there is more than a 1% difference', () => {
135
+ ...
136
+ expect(image).toMatchImageSnapshot({
137
+ failureThreshold: 0.01,
138
+ failureThresholdType: 'percent'
74
139
  });
140
+ });
75
141
  ```
76
142
 
77
143
  Custom defaults can be set with a configurable extension. This will allow for customization of this module's defaults. For example, a 0% default threshold can be shared across all tests with the configuration below:
@@ -100,12 +166,13 @@ If you are using jest-image-snapshot in an ephemeral environment (like a Continu
100
166
 
101
167
  To enable this image reporter, add it to your `jest.config.js` "reporters" definition:
102
168
 
103
- "reporters": [ "default", "<rootDir>/image-reporter.js" ]
104
-
105
-
169
+ ```javascript
170
+ "reporters": [ "default", "<rootDir>/image-reporter.js" ]
171
+ ```
172
+
106
173
  #### Usage in TypeScript
107
174
 
108
- In TypeScript, you can declare `toMatchImageSnapshot` like this:
175
+ In TypeScript, you can declare `toMatchImageSnapshot` like this:
109
176
 
110
177
  ```
111
178
  declare global {
@@ -117,59 +184,63 @@ declare global {
117
184
  }
118
185
  ```
119
186
 
120
- ## How it works
121
- Given an image (Buffer instance with PNG image data) the `toMatchImageSnapshot()` matcher will create a `__image_snapshots__` directory in the directory the test is in and will store the baseline snapshot image there on the first run. Note that if `customSnapshotsDir` option is given then it will store baseline snapshot there instead.
187
+ #### Ignoring parts of the image snapshot if using [Puppeteer](https://github.com/GoogleChrome/puppeteer)
122
188
 
123
- On subsequent test runs the matcher will compare the image being passed against the stored snapshot.
189
+ If you want to to ignore parts of the snapshot (for example some banners or other dynamic blocks) you can find DOM elements with Puppeteer and remove/modify them (setting visibility: hidden on block, if removing it breaks your layout, should help):
124
190
 
125
- To update the stored image snapshot run Jest with `--updateSnapshot` or `-u` argument. All this works the same way as [Jest snapshots](https://facebook.github.io/jest/docs/snapshot-testing.html).
191
+ ```javascript
192
+ async function removeBanners(page){
193
+ await page.evaluate(() => {
194
+ (document.querySelectorAll('.banner') || []).forEach(el => el.remove());
195
+ });
196
+ }
126
197
 
127
- ## See it in action
128
- Typically this matcher is used to for visual tests that run on a browser. For example let's say I finish working on a feature and want to write a test to prevent visual regressions:
129
- ```javascript
130
- ...
131
- it('renders correctly', async () => {
132
- const page = await browser.newPage();
133
- await page.goto('https://localhost:3000');
134
- const image = await page.screenshot();
198
+ ...
199
+ it('renders correctly', async () => {
200
+ const page = await browser.newPage();
201
+ await page.goto('https://localhost:3000');
135
202
 
136
- expect(image).toMatchImageSnapshot();
137
- });
138
- ...
139
- ```
203
+ await removeBanners(page);
204
+
205
+ const image = await page.screenshot();
206
+
207
+ expect(image).toMatchImageSnapshot();
208
+ });
209
+ ...
210
+ ```
140
211
 
141
- <img title="Adding an image snapshot" src="./images/create-snapshot.gif" width="50%">
212
+ ## 📜 Available Scripts
142
213
 
143
- Then after a few days as I finish adding another feature to my component I notice one of my tests failing!
214
+ **`npm run lint`**
144
215
 
145
- <img title="A failing image snapshot test" src="./images/fail-snapshot.gif" width="50%">
216
+ Verifies that your code matches the American Express code style defined in [`eslint-config-amex`](https://github.com/americanexpress/eslint-config-amex).
146
217
 
147
- Oh no! I must have introduced a regression! Let's see what the diff looks like to identify what I need to fix:
218
+ **`npm test`**
148
219
 
149
- <img title="Image diff" src="./images/image-diff.png" width="50%">
220
+ Runs unit tests **and** verifies the format of all commit messages on the current branch.
150
221
 
151
- And now that I know that I broke the card art I can fix it!
222
+ **`npm posttest`**
152
223
 
153
- Thanks `jest-image-snapshot`, that broken header would not have looked good in production!
224
+ Runs linting on the current branch.
154
225
 
155
- ## Contributing
226
+ ## 🏆 Contributing
156
227
 
157
- We welcome Your interest in the American Express Open Source Community on Github.
158
- Any Contributor to any Open Source Project managed by the American Express Open
159
- Source Community must accept and sign an Agreement indicating agreement to the
160
- terms below. Except for the rights granted in this Agreement to American Express
161
- and to recipients of software distributed by American Express, You reserve all
162
- right, title, and interest, if any, in and to Your Contributions. Please [fill
163
- out the Agreement](https://cla-assistant.io/americanexpress/jest-image-snapshot).
228
+ We welcome Your interest in the American Express Open Source Community on Github.
229
+ Any Contributor to any Open Source Project managed by the American Express Open
230
+ Source Community must accept and sign an Agreement indicating agreement to the
231
+ terms below. Except for the rights granted in this Agreement to American Express
232
+ and to recipients of software distributed by American Express, You reserve all
233
+ right, title, and interest, if any, in and to Your Contributions. Please [fill
234
+ out the Agreement](https://cla-assistant.io/americanexpress/jest-image-snapshot).
164
235
 
165
- Please feel free to open pull requests and see [CONTRIBUTING.md](./CONTRIBUTING.md) for commit formatting details.
236
+ Please feel free to open pull requests and see [CONTRIBUTING.md](./CONTRIBUTING.md) for commit formatting details.
166
237
 
167
- ## License
238
+ ## 🗝️ License
168
239
 
169
- Any contributions made under this project will be governed by the [Apache License
170
- 2.0](https://github.com/americanexpress/jest-image-snapshot/blob/master/LICENSE.txt).
240
+ Any contributions made under this project will be governed by the [Apache License
241
+ 2.0](https://github.com/americanexpress/jest-image-snapshot/blob/master/LICENSE.txt).
171
242
 
172
- ## Code of Conduct
243
+ ## 🗣️ Code of Conduct
173
244
 
174
- This project adheres to the [American Express Community Guidelines](https://github.com/americanexpress/jest-image-snapshot/wiki/Code-of-Conduct).
175
- By participating, you are expected to honor these guidelines.
245
+ This project adheres to the [American Express Community Guidelines](https://github.com/americanexpress/jest-image-snapshot/wiki/Code-of-Conduct).
246
+ By participating, you are expected to honor these guidelines.
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jest-image-snapshot",
3
- "version": "2.9.0",
3
+ "version": "2.12.0",
4
4
  "description": "Jest matcher for image comparisons. Most commonly used for visual regression testing.",
5
5
  "main": "src/index.js",
6
6
  "engines": {
@@ -53,6 +53,7 @@
53
53
  "dependencies": {
54
54
  "chalk": "^1.1.3",
55
55
  "get-stdin": "^5.0.1",
56
+ "glur": "^1.1.2",
56
57
  "lodash": "^4.17.4",
57
58
  "mkdirp": "^0.5.1",
58
59
  "pixelmatch": "^4.0.2",
@@ -20,6 +20,7 @@ const pixelmatch = require('pixelmatch');
20
20
  const { PNG } = require('pngjs');
21
21
  const rimraf = require('rimraf');
22
22
  const { createHash } = require('crypto');
23
+ const glur = require('glur');
23
24
  const ImageComposer = require('./image-composer');
24
25
 
25
26
  /**
@@ -84,6 +85,7 @@ const shouldUpdate = ({ pass, updateSnapshot, updatePassedSnapshot }) => (
84
85
  );
85
86
 
86
87
  function diffImageToSnapshot(options) {
88
+ /* eslint complexity: ["error", 12] */
87
89
  const {
88
90
  receivedImageBuffer,
89
91
  snapshotIdentifier,
@@ -95,6 +97,7 @@ function diffImageToSnapshot(options) {
95
97
  customDiffConfig = {},
96
98
  failureThreshold,
97
99
  failureThresholdType,
100
+ blur,
98
101
  } = options;
99
102
 
100
103
  let result = {};
@@ -131,6 +134,12 @@ function diffImageToSnapshot(options) {
131
134
  : [rawReceivedImage, rawBaselineImage];
132
135
  const imageWidth = receivedImage.width;
133
136
  const imageHeight = receivedImage.height;
137
+
138
+ if (typeof blur === 'number' && blur > 0) {
139
+ glur(receivedImage.data, imageWidth, imageHeight, blur);
140
+ glur(baselineImage.data, imageWidth, imageHeight, blur);
141
+ }
142
+
134
143
  const diffImage = new PNG({ width: imageWidth, height: imageHeight });
135
144
 
136
145
  let pass = false;
@@ -204,6 +213,7 @@ function diffImageToSnapshot(options) {
204
213
  diffOutputPath,
205
214
  diffRatio,
206
215
  diffPixelCount,
216
+ imgSrcString: `data:image/png;base64,${pngBuffer}`,
207
217
  };
208
218
  } else if (shouldUpdate({ pass, updateSnapshot, updatePassedSnapshot })) {
209
219
  mkdirp.sync(snapshotsDir);
@@ -221,7 +231,6 @@ function diffImageToSnapshot(options) {
221
231
  return result;
222
232
  }
223
233
 
224
-
225
234
  function runDiffImageToSnapshot(options) {
226
235
  options.receivedImageBuffer = options.receivedImageBuffer.toString('base64');
227
236
 
package/src/index.js CHANGED
@@ -16,7 +16,7 @@ const kebabCase = require('lodash/kebabCase');
16
16
  const merge = require('lodash/merge');
17
17
  const path = require('path');
18
18
  const Chalk = require('chalk').constructor;
19
- const { runDiffImageToSnapshot } = require('./diff-snapshot');
19
+ const { diffImageToSnapshot, runDiffImageToSnapshot } = require('./diff-snapshot');
20
20
  const fs = require('fs');
21
21
 
22
22
  const timesCalled = new Map();
@@ -36,6 +36,7 @@ function checkResult({
36
36
  retryTimes,
37
37
  snapshotIdentifier,
38
38
  chalk,
39
+ dumpDiffToConsole,
39
40
  }) {
40
41
  let pass = true;
41
42
  /*
@@ -65,11 +66,15 @@ function checkResult({
65
66
  message = () => {
66
67
  let failure;
67
68
  if (result.diffSize) {
68
- 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`
69
- + `${chalk.bold.red('See diff for details:')} ${chalk.red(result.diffOutputPath)}`;
69
+ 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`;
70
70
  } else {
71
- failure = `Expected image to match or be a close match to snapshot but was ${differencePercentage}% different from snapshot (${result.diffPixelCount} differing pixels).\n`
72
- + `${chalk.bold.red('See diff for details:')} ${chalk.red(result.diffOutputPath)}`;
71
+ failure = `Expected image to match or be a close match to snapshot but was ${differencePercentage}% different from snapshot (${result.diffPixelCount} differing pixels).\n`;
72
+ }
73
+
74
+ failure += `${chalk.bold.red('See diff for details:')} ${chalk.red(result.diffOutputPath)}`;
75
+
76
+ if (dumpDiffToConsole) {
77
+ failure += `\n${chalk.bold.red('Or paste below image diff string to your browser`s URL bar.')}\n ${result.imgSrcString}`;
73
78
  }
74
79
 
75
80
  return failure;
@@ -118,6 +123,7 @@ function createSnapshotIdentifier({
118
123
 
119
124
  function configureToMatchImageSnapshot({
120
125
  customDiffConfig: commonCustomDiffConfig = {},
126
+ customSnapshotIdentifier: commonCustomSnapshotIdentifier,
121
127
  customSnapshotsDir: commonCustomSnapshotsDir,
122
128
  customDiffDir: commonCustomDiffDir,
123
129
  diffDirection: commonDiffDirection = 'horizontal',
@@ -125,9 +131,12 @@ function configureToMatchImageSnapshot({
125
131
  failureThreshold: commonFailureThreshold = 0,
126
132
  failureThresholdType: commonFailureThresholdType = 'pixel',
127
133
  updatePassedSnapshot: commonUpdatePassedSnapshot = false,
134
+ blur: commonBlur = 0,
135
+ runInProcess: commonRunInProcess = false,
136
+ dumpDiffToConsole: commonDumpDiffToConsole = false,
128
137
  } = {}) {
129
138
  return function toMatchImageSnapshot(received, {
130
- customSnapshotIdentifier = '',
139
+ customSnapshotIdentifier = commonCustomSnapshotIdentifier,
131
140
  customSnapshotsDir = commonCustomSnapshotsDir,
132
141
  customDiffDir = commonCustomDiffDir,
133
142
  diffDirection = commonDiffDirection,
@@ -136,6 +145,9 @@ function configureToMatchImageSnapshot({
136
145
  failureThreshold = commonFailureThreshold,
137
146
  failureThresholdType = commonFailureThresholdType,
138
147
  updatePassedSnapshot = commonUpdatePassedSnapshot,
148
+ blur = commonBlur,
149
+ runInProcess = commonRunInProcess,
150
+ dumpDiffToConsole = commonDumpDiffToConsole,
139
151
  } = {}) {
140
152
  const {
141
153
  testPath, currentTestName, isNot, snapshotState,
@@ -169,8 +181,10 @@ function configureToMatchImageSnapshot({
169
181
  };
170
182
  }
171
183
 
184
+ const imageToSnapshot = runInProcess ? diffImageToSnapshot : runDiffImageToSnapshot;
185
+
172
186
  const result =
173
- runDiffImageToSnapshot({
187
+ imageToSnapshot({
174
188
  receivedImageBuffer: received,
175
189
  snapshotsDir,
176
190
  diffDir,
@@ -181,6 +195,7 @@ function configureToMatchImageSnapshot({
181
195
  failureThreshold,
182
196
  failureThresholdType,
183
197
  updatePassedSnapshot,
198
+ blur,
184
199
  });
185
200
 
186
201
  return checkResult({
@@ -189,6 +204,7 @@ function configureToMatchImageSnapshot({
189
204
  retryTimes,
190
205
  snapshotIdentifier,
191
206
  chalk,
207
+ dumpDiffToConsole,
192
208
  });
193
209
  };
194
210
  }
@@ -1,3 +0,0 @@
1
- {
2
- "extends": "amex/test"
3
- }
@@ -1,3 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`diff-snapshot diffImageToSnapshot should throw an error if an unknown threshold type is supplied 1`] = `"Unknown failureThresholdType: banana. Valid options are \\"pixel\\" or \\"percent\\"."`;
@@ -1,32 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`toMatchImageSnapshot passes diffImageToSnapshot everything it needs to create a snapshot and compare if needed 1`] = `
4
- Object {
5
- "customDiffConfig": Object {},
6
- "diffDir": "path/to/__image_snapshots__/__diff_output__",
7
- "diffDirection": "horizontal",
8
- "failureThreshold": 0,
9
- "failureThresholdType": "pixel",
10
- "receivedImageBuffer": "pretendthisisanimagebuffer",
11
- "snapshotIdentifier": "test-spec-js-test-1",
12
- "snapshotsDir": "path/to/__image_snapshots__",
13
- "updatePassedSnapshot": false,
14
- "updateSnapshot": false,
15
- }
16
- `;
17
-
18
- exports[`toMatchImageSnapshot should fail when snapshot has a difference beyond allowed threshold 2`] = `
19
- "Expected image to match or be a close match to snapshot but was 80% different from snapshot (600 differing pixels).
20
- See diff for details: path/to/result.png"
21
- `;
22
-
23
- exports[`toMatchImageSnapshot should throw an error if used with .not matcher 1`] = `"Jest: \`.not\` cannot be used with \`.toMatchImageSnapshot()\`."`;
24
-
25
- exports[`toMatchImageSnapshot should use noColors options if passed as true and not style error message 2`] = `
26
- "Expected image to match or be a close match to snapshot but was 40% different from snapshot (600 differing pixels).
27
- See diff for details: path/to/result.png"
28
- `;
29
-
30
- exports[`toMatchImageSnapshot when retryTimes is set should throw an error when called without customSnapshotIdentifier 2`] = `"A unique customSnapshotIdentifier must be set when jest.retryTimes() is used"`;
31
-
32
- exports[`toMatchImageSnapshot when retryTimes is set should throw an error when called without customSnapshotIdentifier 4`] = `"A unique customSnapshotIdentifier must be set when jest.retryTimes() is used"`;