Skip to content

Commit 8a399fb

Browse files
eps1loneps1lon
committed
Test colors explicitly
1 parent 5cbf16b commit 8a399fb

11 files changed

+202
-114
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

+12-12
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@ afterEach(() => {
1212
console.log.mockRestore()
1313
})
1414

15-
test('logDOM logs prettyDOM to the console', () => {
15+
test('logDOM logs highlighted prettyDOM to the console', () => {
1616
const {container} = render('<div>Hello World!</div>')
1717
logDOM(container)
1818
expect(console.log).toHaveBeenCalledTimes(1)
1919
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
20-
<div>
21-
<div>
22-
Hello World!
23-
</div>
24-
</div>
20+
[36m<div>[39m
21+
[36m<div>[39m
22+
[0mHello World![0m
23+
[36m</div>[39m
24+
[36m</div>[39m
2525
`)
2626
})
2727

28-
test('logDOM logs prettyDOM with code frame to the console', () => {
28+
test('logDOM logs highlighted prettyDOM with code frame to the console', () => {
2929
getUserCodeFrame.mockImplementationOnce(
3030
() => `"/home/john/projects/sample-error/error-example.js:7:14
3131
5 | document.createTextNode('Hello World!')
@@ -39,11 +39,11 @@ test('logDOM logs prettyDOM with code frame to the console', () => {
3939
logDOM(container)
4040
expect(console.log).toHaveBeenCalledTimes(1)
4141
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
42-
<div>
43-
<div>
44-
Hello World!
45-
</div>
46-
</div>
42+
[36m<div>[39m
43+
[36m<div>[39m
44+
[0mHello World![0m
45+
[36m</div>[39m
46+
[36m</div>[39m
4747
4848
"/home/john/projects/sample-error/error-example.js:7:14
4949
5 | document.createTextNode('Hello World!')

‎src/__tests__/pretty-dom.js

+63-100
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
1-
import {prettyDOM} from '../pretty-dom'
1+
import {prettyDOM as prettyDOMImpl} from '../pretty-dom'
22
import {render, renderIntoDocument} from './helpers/test-utils'
33

4-
test('prettyDOM prints out the given DOM element tree', () => {
4+
function prettyDOM(...args) {
5+
let originalProcess
6+
// this shouldn't be defined in this environment in the first place
7+
if (typeof process !== 'undefined') {
8+
originalProcess = process
9+
// TODO: Delete to test browser environments
10+
// delete globalThis.process
11+
} else {
12+
throw new Error('process is no longer defined. Remove this setup code.')
13+
}
14+
15+
try {
16+
return prettyDOMImpl(...args)
17+
} finally {
18+
globalThis.process = originalProcess
19+
}
20+
}
21+
22+
test('prettyDOM prints out the given DOM element tree highlighted', () => {
523
const {container} = render('<div>Hello World!</div>')
624
expect(prettyDOM(container)).toMatchInlineSnapshot(`
7-
<div>
8-
<div>
9-
Hello World!
10-
</div>
11-
</div>
25+
[36m<div>[39m
26+
[36m<div>[39m
27+
[0mHello World![0m
28+
[36m</div>[39m
29+
[36m</div>[39m
1230
`)
1331
})
1432

@@ -17,21 +35,21 @@ test('prettyDOM supports truncating the output length', () => {
1735
expect(prettyDOM(container, 5)).toMatch(/\.\.\./)
1836
expect(prettyDOM(container, 0)).toMatch('')
1937
expect(prettyDOM(container, Number.POSITIVE_INFINITY)).toMatchInlineSnapshot(`
20-
<div>
21-
<div>
22-
Hello World!
23-
</div>
24-
</div>
38+
[36m<div>[39m
39+
[36m<div>[39m
40+
[0mHello World![0m
41+
[36m</div>[39m
42+
[36m</div>[39m
2543
`)
2644
})
2745

2846
test('prettyDOM defaults to document.body', () => {
2947
const defaultInlineSnapshot = `
30-
<body>
31-
<div>
32-
Hello World!
33-
</div>
34-
</body>
48+
[36m<body>[39m
49+
[36m<div>[39m
50+
[0mHello World![0m
51+
[36m</div>[39m
52+
[36m</body>[39m
3553
`
3654
renderIntoDocument('<div>Hello World!</div>')
3755
expect(prettyDOM()).toMatchInlineSnapshot(defaultInlineSnapshot)
@@ -40,10 +58,10 @@ test('prettyDOM defaults to document.body', () => {
4058

4159
test('prettyDOM supports receiving the document element', () => {
4260
expect(prettyDOM(document)).toMatchInlineSnapshot(`
43-
<html>
44-
<head />
45-
<body />
46-
</html>
61+
[36m<html>[39m
62+
[36m<head />[39m
63+
[36m<body />[39m
64+
[36m</html>[39m
4765
`)
4866
})
4967

@@ -71,11 +89,11 @@ test('prettyDOM ignores script elements and comments nodes by default', () => {
7189
)
7290

7391
expect(prettyDOM(container)).toMatchInlineSnapshot(`
74-
<body>
75-
<p>
76-
Hello, Dave
77-
</p>
78-
</body>
92+
[36m<body>[39m
93+
[36m<p>[39m
94+
[0mHello, Dave[0m
95+
[36m</p>[39m
96+
[36m</body>[39m
7997
`)
8098
})
8199

@@ -87,73 +105,18 @@ test('prettyDOM can include all elements with a custom filter', () => {
87105
expect(
88106
prettyDOM(container, Number.POSITIVE_INFINITY, {filterNode: () => true}),
89107
).toMatchInlineSnapshot(`
90-
<body>
91-
<script
92-
src="context.js"
93-
/>
94-
<!-- Some comment -->
95-
<p>
96-
Hello, Dave
97-
</p>
98-
</body>
108+
[36m<body>[39m
109+
[36m<script[39m
110+
[33msrc[39m=[32m"context.js"[39m
111+
[36m/>[39m
112+
[90m<!-- Some comment -->[39m
113+
[36m<p>[39m
114+
[0mHello, Dave[0m
115+
[36m</p>[39m
116+
[36m</body>[39m
99117
`)
100118
})
101119

102-
test('prettyDOM supports a COLORS environment variable', () => {
103-
const {container} = render('<div>Hello World!</div>')
104-
const noColors = prettyDOM(container, undefined, {highlight: false})
105-
const withColors = prettyDOM(container, undefined, {highlight: true})
106-
107-
// process.env.COLORS is a string, so make sure we test it as such
108-
process.env.COLORS = 'false'
109-
expect(prettyDOM(container)).toEqual(noColors)
110-
111-
process.env.COLORS = 'true'
112-
expect(prettyDOM(container)).toEqual(withColors)
113-
})
114-
115-
test('prettyDOM handles a COLORS env variable of unexpected object type by colorizing for node', () => {
116-
const {container} = render('<div>Hello World!</div>')
117-
const noColors = prettyDOM(container, undefined, {highlight: false})
118-
const withColors = prettyDOM(container, undefined, {highlight: true})
119-
120-
const originalNodeVersion = process.versions.node
121-
process.env.COLORS = '{}'
122-
delete process.versions.node
123-
expect(prettyDOM(container)).toEqual(noColors)
124-
process.versions.node = '1.2.3'
125-
expect(prettyDOM(container)).toEqual(withColors)
126-
process.versions.node = originalNodeVersion
127-
})
128-
129-
test('prettyDOM handles a COLORS env variable of undefined by colorizing for node', () => {
130-
const {container} = render('<div>Hello World!</div>')
131-
const noColors = prettyDOM(container, undefined, {highlight: false})
132-
const withColors = prettyDOM(container, undefined, {highlight: true})
133-
134-
const originalNodeVersion = process.versions.node
135-
process.env.COLORS = undefined
136-
delete process.versions.node
137-
expect(prettyDOM(container)).toEqual(noColors)
138-
process.versions.node = '1.2.3'
139-
expect(prettyDOM(container)).toEqual(withColors)
140-
process.versions.node = originalNodeVersion
141-
})
142-
143-
test('prettyDOM handles a COLORS env variable of empty string by colorizing for node', () => {
144-
const {container} = render('<div>Hello World!</div>')
145-
const noColors = prettyDOM(container, undefined, {highlight: false})
146-
const withColors = prettyDOM(container, undefined, {highlight: true})
147-
148-
const originalNodeVersion = process.versions.node
149-
process.env.COLORS = ''
150-
delete process.versions.node
151-
expect(prettyDOM(container)).toEqual(noColors)
152-
process.versions.node = '1.2.3'
153-
expect(prettyDOM(container)).toEqual(withColors)
154-
process.versions.node = originalNodeVersion
155-
})
156-
157120
test('prettyDOM supports named custom elements', () => {
158121
window.customElements.define(
159122
'my-element-1',
@@ -163,11 +126,11 @@ test('prettyDOM supports named custom elements', () => {
163126
const {container} = render('<my-element-1>Hello World!</my-element-1>')
164127

165128
expect(prettyDOM(container)).toMatchInlineSnapshot(`
166-
<div>
167-
<my-element-1>
168-
Hello World!
169-
</my-element-1>
170-
</div>
129+
[36m<div>[39m
130+
[36m<my-element-1>[39m
131+
[0mHello World![0m
132+
[36m</my-element-1>[39m
133+
[36m</div>[39m
171134
`)
172135
})
173136

@@ -177,10 +140,10 @@ test('prettyDOM supports anonymous custom elements', () => {
177140
const {container} = render('<my-element-2>Hello World!</my-element-2>')
178141

179142
expect(prettyDOM(container)).toMatchInlineSnapshot(`
180-
<div>
181-
<my-element-2>
182-
Hello World!
183-
</my-element-2>
184-
</div>
143+
[36m<div>[39m
144+
[36m<my-element-2>[39m
145+
[0mHello World![0m
146+
[36m</my-element-2>[39m
147+
[36m</div>[39m
185148
`)
186149
})

0 commit comments

Comments
 (0)