Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 33555a3

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

File tree

11 files changed

+201
-70
lines changed

11 files changed

+201
-70
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: 56 additions & 0 deletions
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‎

Lines changed: 18 additions & 68 deletions
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 {prettyDOMasprettyDOMImpl} 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‎

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) => {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /