Skip to content

Commit 7df4cda

Browse files
pedrottimarkpedrottimark
authored
jest-snapshot: Ignore indentation for most serialized objects (#9203)
* jest-snapshot: Ignore indentation for most serialized objects * Simplify markup delete test * Update CHANGELOG.md * Replace 3 tests with each iteration in dedentLines
1 parent 8d3ddd5 commit 7df4cda

File tree

7 files changed

+624
-3
lines changed

7 files changed

+624
-3
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
- `[jest-snapshot]` Display change counts in annotation lines ([#8982](https://github.com/facebook/jest/pull/8982))
2929
- `[jest-snapshot]` [**BREAKING**] Improve report when the matcher has properties ([#9104](https://github.com/facebook/jest/pull/9104))
3030
- `[jest-snapshot]` Improve colors when snapshots are updatable ([#9132](https://github.com/facebook/jest/pull/9132))
31+
- `[jest-snapshot]` Ignore indentation for most serialized objects ([#9203](https://github.com/facebook/jest/pull/9203))
3132
- `[@jest/test-result]` Create method to create empty `TestResult` ([#8867](https://github.com/facebook/jest/pull/8867))
3233
- `[jest-worker]` [**BREAKING**] Return a promise from `end()`, resolving with the information whether workers exited gracefully ([#8206](https://github.com/facebook/jest/pull/8206))
3334
- `[jest-reporters]` Transform file paths into hyperlinks ([#8980](https://github.com/facebook/jest/pull/8980))

‎packages/jest-snapshot/src/__tests__/__snapshots__/printSnapshot.test.ts.snap‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,90 @@ Snapshot: <m>"delete"</>
375375
Received: <t>"insert"</>
376376
`;
377377

378+
exports[`printSnapshotAndReceived ignore indentation markup delete 1`] = `
379+
<m>- Snapshot - 2</>
380+
<t>+ Received + 0</>
381+
382+
<d> <div></>
383+
<m>- <div></>
384+
<d> <h3></>
385+
<d> Ignore indentation for most serialized objects</>
386+
<d> </h3></>
387+
<d> <p></>
388+
<d> Call<Y> </Y></>
389+
<d> <code></>
390+
<d> diffLinesUnified2</>
391+
<d> </code></>
392+
<d> to compare without indentation</>
393+
<d> </p></>
394+
<m>- </div></>
395+
<d> </div></>
396+
`;
397+
398+
exports[`printSnapshotAndReceived ignore indentation markup fall back 1`] = `
399+
<m>- Snapshot - 5</>
400+
<t>+ Received + 7</>
401+
402+
<m>- <pre</>
403+
<m>- className="language-js"</>
404+
<m>- ></>
405+
<m>- for (key in foo) {</>
406+
<t>+ <div></>
407+
<t>+ <pre</>
408+
<t>+ className="language-js"</>
409+
<t>+ ></>
410+
<t>+ for (key in foo) {</>
411+
<d> if (Object.prototype.hasOwnProperty.call(foo, key)) {</>
412+
<d> doSomething(key);</>
413+
<d> }</>
414+
<d> }</>
415+
<m>- </pre></>
416+
<t>+ </pre></>
417+
<t>+ </div></>
418+
`;
419+
420+
exports[`printSnapshotAndReceived ignore indentation markup insert 1`] = `
421+
<m>- Snapshot - 0</>
422+
<t>+ Received + 7</>
423+
424+
<d> <th></>
425+
<t>+ <span></>
426+
<d> when</>
427+
<t>+ </span></>
428+
<t>+ <abbr</>
429+
<t>+ title="ascending from older to newer"</>
430+
<t>+ ></>
431+
<t>+ ↓</>
432+
<t>+ </abbr></>
433+
<d> </th></>
434+
`;
435+
436+
exports[`printSnapshotAndReceived ignore indentation object delete 1`] = `
437+
<m>- Snapshot - 2</>
438+
<t>+ Received + 0</>
439+
440+
<d> Object {</>
441+
<m>- "payload": Object {</>
442+
<d> "text": "Ignore indentation in snapshot",</>
443+
<d> "time": "2019-11-11",</>
444+
<m>- },</>
445+
<d> "type": "CREATE_ITEM",</>
446+
<d> }</>
447+
`;
448+
449+
exports[`printSnapshotAndReceived ignore indentation object insert 1`] = `
450+
<m>- Snapshot - 0</>
451+
<t>+ Received + 2</>
452+
453+
<d> Object {</>
454+
<t>+ "payload": Object {</>
455+
<d> "text": "Ignore indentation in snapshot",</>
456+
<d> "time": "2019-11-11",</>
457+
<t>+ },</>
458+
<d> "type": "CREATE_ITEM",</>
459+
<d> }</>
460+
`;
461+
378462
exports[`printSnapshotAndReceived isLineDiffable false asymmetric matcher 1`] = `
379463
Snapshot: <m>null</>
380464
Received: <t>Object {</>

‎packages/jest-snapshot/src/__tests__/dedentLines.test.ts‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import format = require('pretty-format');
9+
import {dedentLines} from '../dedentLines';
10+
11+
const $$typeof = Symbol.for('react.test.json');
12+
const plugins = [format.plugins.ReactTestComponent];
13+
14+
const formatLines2 = val => format(val, {indent: 2, plugins}).split('\n');
15+
const formatLines0 = val => format(val, {indent: 0, plugins}).split('\n');
16+
17+
describe('dedentLines non-null', () => {
18+
test('no lines', () => {
19+
const indented = [];
20+
const dedented = indented;
21+
22+
expect(dedentLines(indented)).toEqual(dedented);
23+
});
24+
25+
test('one line empty string', () => {
26+
const indented = [''];
27+
const dedented = indented;
28+
29+
expect(dedentLines(indented)).toEqual(dedented);
30+
});
31+
32+
test('one line empty object', () => {
33+
const val = {};
34+
const indented = formatLines2(val);
35+
const dedented = formatLines0(val);
36+
37+
expect(dedentLines(indented)).toEqual(dedented);
38+
});
39+
40+
test('one line self-closing element', () => {
41+
const val = {
42+
$$typeof,
43+
children: null,
44+
type: 'br',
45+
};
46+
const indented = formatLines2(val);
47+
const dedented = formatLines0(val);
48+
49+
expect(dedentLines(indented)).toEqual(dedented);
50+
});
51+
52+
test('object value empty string', () => {
53+
const val = {
54+
key: '',
55+
};
56+
const indented = formatLines2(val);
57+
const dedented = formatLines0(val);
58+
59+
expect(dedentLines(indented)).toEqual(dedented);
60+
});
61+
62+
test('object value string includes double-quote marks', () => {
63+
const val = {
64+
key: '"Always bet on JavaScript",',
65+
};
66+
const indented = formatLines2(val);
67+
const dedented = formatLines0(val);
68+
69+
expect(dedentLines(indented)).toEqual(dedented);
70+
});
71+
72+
test('markup with props and text', () => {
73+
const val = {
74+
$$typeof,
75+
children: [
76+
{
77+
$$typeof,
78+
props: {
79+
alt: 'Jest logo',
80+
src: 'jest.svg',
81+
},
82+
type: 'img',
83+
},
84+
{
85+
$$typeof,
86+
children: ['Delightful JavaScript testing'],
87+
type: 'h2',
88+
},
89+
],
90+
type: 'header',
91+
};
92+
const indented = formatLines2(val);
93+
const dedented = formatLines0(val);
94+
95+
expect(dedentLines(indented)).toEqual(dedented);
96+
});
97+
98+
test('markup with components as props', () => {
99+
// https://daveceddia.com/pluggable-slots-in-react-components/
100+
const val = {
101+
$$typeof,
102+
children: null,
103+
props: {
104+
content: {
105+
$$typeof,
106+
children: ['main content here'],
107+
type: 'Content',
108+
},
109+
sidebar: {
110+
$$typeof,
111+
children: null,
112+
props: {
113+
user: '0123456789abcdef',
114+
},
115+
type: 'UserStats',
116+
},
117+
},
118+
type: 'Body',
119+
};
120+
const indented = formatLines2(val);
121+
const dedented = formatLines0(val);
122+
123+
expect(dedentLines(indented)).toEqual(dedented);
124+
});
125+
});
126+
127+
describe('dedentLines null', () => {
128+
test.each([
129+
['object key multi-line', {'multi\nline\nkey': false}],
130+
['object value multi-line', {key: 'multi\nline\nvalue'}],
131+
['object key and value multi-line', {'multi\nline': '\nleading nl'}],
132+
])('%s', (name, val) => {
133+
expect(dedentLines(formatLines2(val))).toEqual(null);
134+
});
135+
136+
test('markup prop multi-line', () => {
137+
const val = {
138+
$$typeof,
139+
children: null,
140+
props: {
141+
alt: 'trailing newline\n',
142+
src: 'jest.svg',
143+
},
144+
type: 'img',
145+
};
146+
const indented = formatLines2(val);
147+
148+
expect(dedentLines(indented)).toEqual(null);
149+
});
150+
151+
test('markup prop component with multi-line text', () => {
152+
// https://daveceddia.com/pluggable-slots-in-react-components/
153+
const val = {
154+
$$typeof,
155+
children: [
156+
{
157+
$$typeof,
158+
children: null,
159+
props: {
160+
content: {
161+
$$typeof,
162+
children: ['\n'],
163+
type: 'Content',
164+
},
165+
sidebar: {
166+
$$typeof,
167+
children: null,
168+
props: {
169+
user: '0123456789abcdef',
170+
},
171+
type: 'UserStats',
172+
},
173+
},
174+
type: 'Body',
175+
},
176+
],
177+
type: 'main',
178+
};
179+
const indented = formatLines2(val);
180+
181+
expect(dedentLines(indented)).toEqual(null);
182+
});
183+
184+
test('markup text multi-line', () => {
185+
const text = [
186+
'for (key in foo) {',
187+
' if (Object.prototype.hasOwnProperty.call(foo, key)) {',
188+
' doSomething(key);',
189+
' }',
190+
'}',
191+
].join('\n');
192+
const val = {
193+
$$typeof,
194+
children: [
195+
{
196+
$$typeof,
197+
children: [text],
198+
props: {
199+
className: 'language-js',
200+
},
201+
type: 'pre',
202+
},
203+
],
204+
type: 'div',
205+
};
206+
const indented = formatLines2(val);
207+
208+
expect(dedentLines(indented)).toEqual(null);
209+
});
210+
211+
test('markup text multiple lines', () => {
212+
const lines = [
213+
'for (key in foo) {',
214+
' if (Object.prototype.hasOwnProperty.call(foo, key)) {',
215+
' doSomething(key);',
216+
' }',
217+
'}',
218+
];
219+
const val = {
220+
$$typeof,
221+
children: [
222+
{
223+
$$typeof,
224+
children: lines,
225+
props: {
226+
className: 'language-js',
227+
},
228+
type: 'pre',
229+
},
230+
],
231+
type: 'div',
232+
};
233+
const indented = formatLines2(val);
234+
235+
expect(dedentLines(indented)).toEqual(null);
236+
});
237+
238+
test('markup unclosed self-closing start tag', () => {
239+
const indented = ['<img', ' alt="Jest logo"', ' src="jest.svg"'];
240+
241+
expect(dedentLines(indented)).toEqual(null);
242+
});
243+
244+
test('markup unclosed because no end tag', () => {
245+
const indented = ['<p>', ' Delightful JavaScript testing'];
246+
247+
expect(dedentLines(indented)).toEqual(null);
248+
});
249+
});

0 commit comments

Comments
 (0)