Skip to content

Commit 33555a3

Browse files
eps1loneps1lon
authored
Test highlighting of prettyDOM explicitly (#1324)
1 parent 20d9894 commit 33555a3

11 files changed

+201
-70
lines changed

‎src/__node_tests__/pretty-dom.js

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import {JSDOM} from 'jsdom'
2+
import {prettyDOM} from '../pretty-dom'
3+
4+
function render(html) {
5+
const {window} = new JSDOM()
6+
const container = window.document.createElement('div')
7+
container.innerHTML = html
8+
return {container}
9+
}
10+
11+
jest.mock('../get-user-code-frame')
12+
13+
test('prettyDOM supports a COLORS environment variable', () => {
14+
const {container} = render('<div>Hello World!</div>')
15+
16+
// process.env.COLORS is a string, so make sure we test it as such
17+
process.env.COLORS = 'false'
18+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
19+
<div>
20+
<div>
21+
Hello World!
22+
</div>
23+
</div>
24+
`)
25+
26+
process.env.COLORS = 'true'
27+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
28+
<div>
29+
<div>
30+
Hello World!
31+
</div>
32+
</div>
33+
`)
34+
})
35+
36+
test('prettyDOM handles a COLORS env variable of unexpected object type by colorizing for node', () => {
37+
const {container} = render('<div>Hello World!</div>')
38+
39+
const originalNodeVersion = process.versions.node
40+
process.env.COLORS = '{}'
41+
delete process.versions.node
42+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
43+
<div>
44+
<div>
45+
Hello World!
46+
</div>
47+
</div>
48+
`)
49+
process.versions.node = '1.2.3'
50+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
51+
<div>
52+
<div>
53+
Hello World!
54+
</div>
55+
</div>
56+
`)
57+
process.versions.node = originalNodeVersion
58+
})
59+
60+
test('prettyDOM handles a COLORS env variable of undefined by colorizing for node', () => {
61+
const {container} = render('<div>Hello World!</div>')
62+
63+
const originalNodeVersion = process.versions.node
64+
process.env.COLORS = undefined
65+
delete process.versions.node
66+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
67+
<div>
68+
<div>
69+
Hello World!
70+
</div>
71+
</div>
72+
`)
73+
process.versions.node = '1.2.3'
74+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
75+
<div>
76+
<div>
77+
Hello World!
78+
</div>
79+
</div>
80+
`)
81+
process.versions.node = originalNodeVersion
82+
})
83+
84+
test('prettyDOM handles a COLORS env variable of empty string by colorizing for node', () => {
85+
const {container} = render('<div>Hello World!</div>')
86+
87+
const originalNodeVersion = process.versions.node
88+
process.env.COLORS = ''
89+
delete process.versions.node
90+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
91+
<div>
92+
<div>
93+
Hello World!
94+
</div>
95+
</div>
96+
`)
97+
process.versions.node = '1.2.3'
98+
expect(prettyDOM(container)).toMatchInlineSnapshot(`
99+
<div>
100+
<div>
101+
Hello World!
102+
</div>
103+
</div>
104+
`)
105+
process.versions.node = originalNodeVersion
106+
})

‎src/__tests__/element-queries.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
12
import {configure, getConfig} from '../config'
23
import {render, renderIntoDocument} from './helpers/test-utils'
34

5+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
6+
47
// set original config
58
let originalConfig
69
beforeAll(() => {

‎src/__tests__/get-user-code-frame.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import fs from 'fs'
2+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
23
import {getUserCodeFrame} from '../get-user-code-frame'
34

5+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
6+
47
jest.mock('fs', () => ({
58
// We setup the contents of a sample file
69
readFileSync: jest.fn(

‎src/__tests__/log-dom.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import {getUserCodeFrame} from '../get-user-code-frame'
2+
import {logDOM} from '../pretty-dom'
3+
import {render} from './helpers/test-utils'
4+
5+
jest.mock('../get-user-code-frame')
6+
7+
beforeEach(() => {
8+
jest.spyOn(console, 'log').mockImplementation(() => {})
9+
})
10+
11+
afterEach(() => {
12+
console.log.mockRestore()
13+
})
14+
15+
test('logDOM logs highlighted prettyDOM to the console', () => {
16+
const {container} = render('<div>Hello World!</div>')
17+
logDOM(container)
18+
expect(console.log).toHaveBeenCalledTimes(1)
19+
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
20+
<div>
21+
<div>
22+
Hello World!
23+
</div>
24+
</div>
25+
`)
26+
})
27+
28+
test('logDOM logs highlighted prettyDOM with code frame to the console', () => {
29+
getUserCodeFrame.mockImplementationOnce(
30+
() => `"/home/john/projects/sample-error/error-example.js:7:14
31+
5 | document.createTextNode('Hello World!')
32+
6 | )
33+
> 7 | screen.debug()
34+
| ^
35+
"
36+
`,
37+
)
38+
const {container} = render('<div>Hello World!</div>')
39+
logDOM(container)
40+
expect(console.log).toHaveBeenCalledTimes(1)
41+
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
42+
<div>
43+
<div>
44+
Hello World!
45+
</div>
46+
</div>
47+
48+
"/home/john/projects/sample-error/error-example.js:7:14
49+
5 | document.createTextNode('Hello World!')
50+
6 | )
51+
> 7 | screen.debug()
52+
| ^
53+
"
54+
55+
`)
56+
})

‎src/__tests__/pretty-dom.js

+18-68
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
import {prettyDOM, logDOM} from '../pretty-dom'
2-
import {getUserCodeFrame} from '../get-user-code-frame'
1+
/* global globalThis */
2+
import {prettyDOM as prettyDOMImpl} from '../pretty-dom'
33
import {render, renderIntoDocument} from './helpers/test-utils'
44

5-
jest.mock('../get-user-code-frame')
6-
7-
beforeEach(() => {
8-
jest.spyOn(console, 'log').mockImplementation(() => {})
9-
})
10-
11-
afterEach(() => {
12-
console.log.mockRestore()
13-
})
5+
function prettyDOM(...args) {
6+
let originalProcess
7+
// this shouldn't be defined in this environment in the first place
8+
if (typeof process === 'undefined') {
9+
throw new Error('process is no longer defined. Remove this setup code.')
10+
} else {
11+
originalProcess = process
12+
delete globalThis.process
13+
}
14+
15+
try {
16+
return prettyDOMImpl(...args)
17+
} finally {
18+
globalThis.process = originalProcess
19+
}
20+
}
1421

1522
test('prettyDOM prints out the given DOM element tree', () => {
1623
const {container} = render('<div>Hello World!</div>')
@@ -58,49 +65,6 @@ test('prettyDOM supports receiving the document element', () => {
5865
`)
5966
})
6067

61-
test('logDOM logs prettyDOM to the console', () => {
62-
const {container} = render('<div>Hello World!</div>')
63-
logDOM(container)
64-
expect(console.log).toHaveBeenCalledTimes(1)
65-
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
66-
<div>
67-
<div>
68-
Hello World!
69-
</div>
70-
</div>
71-
`)
72-
})
73-
74-
test('logDOM logs prettyDOM with code frame to the console', () => {
75-
getUserCodeFrame.mockImplementationOnce(
76-
() => `"/home/john/projects/sample-error/error-example.js:7:14
77-
5 | document.createTextNode('Hello World!')
78-
6 | )
79-
> 7 | screen.debug()
80-
| ^
81-
"
82-
`,
83-
)
84-
const {container} = render('<div>Hello World!</div>')
85-
logDOM(container)
86-
expect(console.log).toHaveBeenCalledTimes(1)
87-
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
88-
<div>
89-
<div>
90-
Hello World!
91-
</div>
92-
</div>
93-
94-
"/home/john/projects/sample-error/error-example.js:7:14
95-
5 | document.createTextNode('Hello World!')
96-
6 | )
97-
> 7 | screen.debug()
98-
| ^
99-
"
100-
101-
`)
102-
})
103-
10468
describe('prettyDOM fails with first parameter without outerHTML field', () => {
10569
test('with array', () => {
10670
expect(() => prettyDOM(['outerHTML'])).toThrowErrorMatchingInlineSnapshot(
@@ -153,20 +117,6 @@ test('prettyDOM can include all elements with a custom filter', () => {
153117
`)
154118
})
155119

156-
test('prettyDOM supports a COLORS environment variable', () => {
157-
const {container} = render('<div>Hello World!</div>')
158-
159-
const noColors = prettyDOM(container, undefined, {highlight: false})
160-
const withColors = prettyDOM(container, undefined, {highlight: true})
161-
162-
// process.env.COLORS is a string, so make sure we test it as such
163-
process.env.COLORS = 'false'
164-
expect(prettyDOM(container)).toEqual(noColors)
165-
166-
process.env.COLORS = 'true'
167-
expect(prettyDOM(container)).toEqual(withColors)
168-
})
169-
170120
test('prettyDOM supports named custom elements', () => {
171121
window.customElements.define(
172122
'my-element-1',

‎src/__tests__/role-helpers.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
12
import {
23
getRoles,
34
logRoles,
@@ -6,6 +7,8 @@ import {
67
} from '../role-helpers'
78
import {render} from './helpers/test-utils'
89

10+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
11+
912
beforeEach(() => {
1013
jest.spyOn(console, 'log').mockImplementation(() => {})
1114
})

‎src/__tests__/role.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
12
import {configure, getConfig} from '../config'
23
import {getQueriesForElement} from '../get-queries-for-element'
34
import {render, renderIntoDocument} from './helpers/test-utils'
45

6+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
7+
58
test('by default logs accessible roles when it fails', () => {
69
const {getByRole} = render(`<h1>Hi</h1>`)
710
expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`

‎src/__tests__/screen.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
12
import {screen} from '..'
23
import {render, renderIntoDocument} from './helpers/test-utils'
34

5+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
6+
47
// Since screen.debug internally calls getUserCodeFrame, we mock it so it doesn't affect these tests
58
jest.mock('../get-user-code-frame', () => ({
69
getUserCodeFrame: () => '',

‎src/__tests__/suggestions.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
12
import {configure} from '../config'
23
import {screen, getSuggestedQuery} from '..'
34
import {renderIntoDocument, render} from './helpers/test-utils'
45

6+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
7+
58
beforeAll(() => {
69
configure({throwSuggestions: true})
710
})

‎src/__tests__/wait-for.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
12
import {waitFor} from '../'
23
import {configure, getConfig} from '../config'
34
import {renderIntoDocument} from './helpers/test-utils'
45

6+
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
7+
58
function deferred() {
69
let resolve, reject
710
const promise = new Promise((res, rej) => {

‎tests/setup-env.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import '@testing-library/jest-dom/extend-expect'
2-
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
32

4-
expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
53
// add serializer for MutationRecord
64
expect.addSnapshotSerializer({
75
print: (record, serialize) => {

0 commit comments

Comments
 (0)