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.
- package/.travis.yml +8 -0
- package/CODEOWNERS +3 -0
- package/README.md +145 -74
- package/jest-image-snapshot.png +0 -0
- package/package.json +2 -1
- package/src/diff-snapshot.js +10 -1
- package/src/index.js +23 -7
- package/__tests__/.eslintrc.json +0 -3
- package/__tests__/__image_snapshots__/integration-6-snap.png +0 -0
- package/__tests__/__image_snapshots__/integration-spec-js-to-match-image-snapshot-happy-path-matches-an-identical-snapshot-1-snap.png +0 -0
- package/__tests__/__image_snapshots__/integration-update-snap.png +0 -0
- package/__tests__/__snapshots__/diff-snapshot.spec.js.snap +0 -3
- package/__tests__/__snapshots__/index.spec.js.snap +0 -32
- package/__tests__/diff-snapshot.spec.js +0 -584
- package/__tests__/image-composer.spec.js +0 -81
- package/__tests__/index.spec.js +0 -514
- package/__tests__/integration.spec.js +0 -310
- package/__tests__/stubs/TestImage.png +0 -0
- package/__tests__/stubs/TestImage150x150.png +0 -0
- package/__tests__/stubs/TestImageFailure.png +0 -0
- package/__tests__/stubs/TestImageFailureOversize.png +0 -0
- package/__tests__/stubs/TestImageUpdate1pxOff.png +0 -0
- package/examples/.eslintrc.json +0 -3
- package/examples/README.md +0 -9
- package/examples/__tests__/__image_snapshots__/local-image-spec-js-works-reading-an-image-from-the-local-file-system-1-snap.png +0 -0
- 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
- package/examples/__tests__/local-image.spec.js +0 -24
- package/examples/__tests__/puppeteer-example.spec.js +0 -37
- package/examples/__tests__/stubs/image.png +0 -0
- package/examples/image-reporter.js +0 -46
- package/examples/jest-setup.js +0 -19
- 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
package/README.md
CHANGED
@@ -1,31 +1,94 @@
|
|
1
|
-
|
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
|
-
[](https://www.npmjs.com/package/jest-image-snapshot)
|
6
|
+
[](https://travis-ci.org/americanexpress/jest-image-snapshot)
|
5
7
|
[](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
|
-
|
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
|
-
##
|
13
|
-
|
14
|
-
|
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
|
-
|
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
|
-
|
22
|
-
|
84
|
+
```javascript
|
85
|
+
const { toMatchImageSnapshot } = require('jest-image-snapshot');
|
23
86
|
|
24
|
-
|
25
|
-
|
87
|
+
expect.extend({ toMatchImageSnapshot });
|
88
|
+
```
|
26
89
|
|
27
90
|
2. Use `toMatchImageSnapshot()` in your tests!
|
28
|
-
|
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
|
-
|
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
|
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
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
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
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
191
|
+
```javascript
|
192
|
+
async function removeBanners(page){
|
193
|
+
await page.evaluate(() => {
|
194
|
+
(document.querySelectorAll('.banner') || []).forEach(el => el.remove());
|
195
|
+
});
|
196
|
+
}
|
126
197
|
|
127
|
-
|
128
|
-
|
129
|
-
|
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
|
-
|
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
|
-
|
212
|
+
## 📜 Available Scripts
|
142
213
|
|
143
|
-
|
214
|
+
**`npm run lint`**
|
144
215
|
|
145
|
-
|
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
|
-
|
218
|
+
**`npm test`**
|
148
219
|
|
149
|
-
|
220
|
+
Runs unit tests **and** verifies the format of all commit messages on the current branch.
|
150
221
|
|
151
|
-
|
222
|
+
**`npm posttest`**
|
152
223
|
|
153
|
-
|
224
|
+
Runs linting on the current branch.
|
154
225
|
|
155
|
-
|
226
|
+
## 🏆 Contributing
|
156
227
|
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
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
|
-
|
236
|
+
Please feel free to open pull requests and see [CONTRIBUTING.md](./CONTRIBUTING.md) for commit formatting details.
|
166
237
|
|
167
|
-
|
238
|
+
## 🗝️ License
|
168
239
|
|
169
|
-
|
170
|
-
|
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
|
-
|
243
|
+
## 🗣️ Code of Conduct
|
173
244
|
|
174
|
-
|
175
|
-
|
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.
|
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",
|
package/src/diff-snapshot.js
CHANGED
@@ -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
|
-
|
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
|
-
|
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
|
}
|
package/__tests__/.eslintrc.json
DELETED
Binary file
|
Binary file
|
Binary file
|
@@ -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
|
-
[1m[31mSee diff for details:[39m[22m [31mpath/to/result.png[39m"
|
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"`;
|