Skip to content

Commit 607f42f

Browse files
eps1loneps1lon
committed
Test colors explicitly
1 parent f85459e commit 607f42f

11 files changed

+157
-29
lines changed

‎src/__node_tests__/pretty-dom.js

Lines changed: 106 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 12 additions & 12 deletions
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

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
1-
import {prettyDOM} from '../pretty-dom'
1+
import {prettyDOM as prettyDOMImpl} from '../pretty-dom'
22
import {render, renderIntoDocument} from './helpers/test-utils'
33

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+
delete globalThis.process
10+
} else {
11+
throw new Error('process is no longer defined. Remove this setup code.')
12+
}
13+
14+
try {
15+
return prettyDOMImpl(...args)
16+
} finally {
17+
globalThis.process = originalProcess
18+
}
19+
}
20+
421
test('prettyDOM prints out the given DOM element tree', () => {
522
const {container} = render('<div>Hello World!</div>')
623
expect(prettyDOM(container)).toMatchInlineSnapshot(`
@@ -99,20 +116,6 @@ test('prettyDOM can include all elements with a custom filter', () => {
99116
`)
100117
})
101118

102-
test('prettyDOM supports a COLORS environment variable', () => {
103-
const {container} = render('<div>Hello World!</div>')
104-
105-
const noColors = prettyDOM(container, undefined, {highlight: false})
106-
const withColors = prettyDOM(container, undefined, {highlight: true})
107-
108-
// process.env.COLORS is a string, so make sure we test it as such
109-
process.env.COLORS = 'false'
110-
expect(prettyDOM(container)).toEqual(noColors)
111-
112-
process.env.COLORS = 'true'
113-
expect(prettyDOM(container)).toEqual(withColors)
114-
})
115-
116119
test('prettyDOM supports named custom elements', () => {
117120
window.customElements.define(
118121
'my-element-1',

‎src/__tests__/role-helpers.js

Lines changed: 3 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 0 additions & 2 deletions
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)