Skip to content

Commit 3e2a129

Browse files
thymikeethymikee
committed
Initial implementation
1 parent 6fca111 commit 3e2a129

File tree

11 files changed

+3786
-1
lines changed

11 files changed

+3786
-1
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["babel-preset-react", "flow", ["env", {"targets": {"node": 4}}]]
3+
}

‎.flowconfig‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[version]
2+
^0.51.0

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,3 @@ typings/
5656

5757
# dotenv environment variables file
5858
.env
59-

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/src

‎__tests__/__snapshots__/snapshotDiff.test.js.snap‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`can colorize diff 1`] = `
4+
"- Second value
5+
+ Received
6+
7+
 
8+
   some
9+
   some
10+
   some
11+
   some
12+
   some
13+
   some
14+
   some
15+
   not
16+
+  so
17+
   very
18+
   long
19+
   script"
20+
`;
21+
22+
exports[`can expand diff 1`] = `
23+
"- Second value
24+
+ Received
25+
26+
27+
some
28+
some
29+
some
30+
some
31+
some
32+
some
33+
some
34+
not
35+
+ so
36+
very
37+
long
38+
script"
39+
`;
40+
41+
exports[`collapses diffs and strips ansi by default 1`] = `
42+
"- Second value
43+
+ Received
44+
45+
@@ -5,8 +5,9 @@
46+
some
47+
some
48+
some
49+
some
50+
not
51+
+ so
52+
very
53+
long
54+
script"
55+
`;
56+
57+
exports[`detects React components 1`] = `
58+
"- <Component test=\\"say\\" />
59+
+ <Component test=\\"my name\\" />
60+
61+
@@ -1,14 +1,14 @@
62+
<div>
63+
<span />
64+
<span />
65+
<span />
66+
<span>
67+
- say
68+
+ my name
69+
</span>
70+
<span>
71+
- say
72+
+ my name
73+
</span>
74+
<span />
75+
<span />
76+
<span />
77+
<span />
78+
@@ -27,11 +27,11 @@
79+
<span />
80+
<span />
81+
<span />
82+
<span />
83+
<span>
84+
- say
85+
+ my name
86+
</span>
87+
<span />
88+
<span />
89+
<span />
90+
<span />"
91+
`;

‎__tests__/snapshotDiff.test.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
// @flow
2+
3+
const React = require('react');
4+
const snapshotDiff = require('../src/index');
5+
6+
const a = `
7+
some
8+
some
9+
some
10+
some
11+
some
12+
some
13+
some
14+
not
15+
very
16+
long
17+
script
18+
`;
19+
const b = `
20+
some
21+
some
22+
some
23+
some
24+
some
25+
some
26+
some
27+
not
28+
so
29+
very
30+
long
31+
script
32+
`;
33+
34+
class Component extends React.Component {
35+
render() {
36+
return (
37+
<div>
38+
<span />
39+
<span />
40+
<span />
41+
<span>
42+
{this.props.test}
43+
</span>
44+
<span>
45+
{this.props.test}
46+
</span>
47+
<span />
48+
<span />
49+
<span />
50+
<span />
51+
<span />
52+
<span />
53+
<span />
54+
<span />
55+
<span />
56+
<span />
57+
<span />
58+
<span />
59+
<span />
60+
<span />
61+
<span />
62+
<span />
63+
<span />
64+
<span />
65+
<span />
66+
<span />
67+
<span>
68+
{this.props.test}
69+
</span>
70+
<span />
71+
<span />
72+
<span />
73+
<span />
74+
<span />
75+
<span />
76+
<span />
77+
<span />
78+
<span />
79+
<span />
80+
<span />
81+
<span />
82+
<span />
83+
<span />
84+
<span />
85+
<span />
86+
<span />
87+
<span />
88+
<span />
89+
<span />
90+
<span />
91+
<span />
92+
<span />
93+
<span />
94+
<span />
95+
<span />
96+
<span />
97+
<span />
98+
<span />
99+
<span />
100+
<span />
101+
<span />
102+
<span />
103+
<span />
104+
<span />
105+
<span />
106+
<span />
107+
<span />
108+
<span />
109+
<span />
110+
<span />
111+
<span />
112+
<span />
113+
<span />
114+
</div>
115+
);
116+
}
117+
}
118+
119+
test('collapses diffs and strips ansi by default', () => {
120+
expect(snapshotDiff(a, b)).toMatchSnapshot();
121+
});
122+
123+
test('can expand diff', () => {
124+
expect(snapshotDiff(a, b, {expand: true})).toMatchSnapshot();
125+
});
126+
127+
test('can colorize diff', () => {
128+
expect(snapshotDiff(a, b, {colors: true})).toMatchSnapshot();
129+
});
130+
131+
test('detects React components', () => {
132+
expect(
133+
snapshotDiff(<Component test="say" />, <Component test="my name" />)
134+
).toMatchSnapshot();
135+
});

‎build/index.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
'use strict';
2+
3+
var diff = require('jest-diff');
4+
var prettyFormat = require('pretty-format');
5+
var ReactElement = prettyFormat.plugins.ReactElement;
6+
7+
var reactElement = Symbol.for('react.element');
8+
9+
var defaultOptions = {
10+
expand: false,
11+
colors: false
12+
};
13+
14+
var snapshotDiff = function snapshotDiff(valueA, valueB) {
15+
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultOptions;
16+
17+
var difference = void 0;
18+
19+
if (isReactComponent(valueA) && isReactComponent(valueB)) {
20+
difference = diffReactComponents(valueA, valueB, options);
21+
} else {
22+
difference = diffStrings(valueA, valueB, options);
23+
}
24+
25+
if (!options.colors) {
26+
var stripAnsi = require('strip-ansi');
27+
return stripAnsi(difference);
28+
}
29+
30+
return difference;
31+
};
32+
33+
var isReactComponent = function isReactComponent(valueA) {
34+
return valueA && valueA.$$typeof === reactElement;
35+
};
36+
37+
function diffStrings(valueA, valueB, options) {
38+
return diff(valueA, valueB, {
39+
expand: options.expand,
40+
aAnnotation: 'First value',
41+
aAnnotation: 'Second value'
42+
});
43+
}
44+
45+
function diffReactComponents(valueA, valueB, options) {
46+
var renderer = require('react-test-renderer');
47+
var reactValueA = renderer.create(valueA).toJSON();
48+
var reactValueB = renderer.create(valueB).toJSON();
49+
var aAnnotation = valueA.type.displayName || valueA.type.name || 'Unknown';
50+
var bAnnotation = valueB.type.displayName || valueB.type.name || 'Unknown';
51+
var prettyFormatOptions = { plugins: [ReactElement], min: true };
52+
53+
return diff(reactValueA, reactValueB, {
54+
expand: options.expand,
55+
aAnnotation: prettyFormat(valueA, prettyFormatOptions),
56+
bAnnotation: prettyFormat(valueB, prettyFormatOptions)
57+
});
58+
}
59+
60+
module.exports = snapshotDiff;

0 commit comments

Comments
 (0)