Skip to content

Commit

Permalink
Test highlighting of prettyDOM explicitly (#1324)
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon authored Jul 22, 2024
1 parent 20d9894 commit 33555a3
Show file tree
Hide file tree
Showing 11 changed files with 201 additions and 70 deletions.
106 changes: 106 additions & 0 deletions src/__node_tests__/pretty-dom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import {JSDOM} from 'jsdom'
import {prettyDOM} from '../pretty-dom'

function render(html) {
const {window} = new JSDOM()
const container = window.document.createElement('div')
container.innerHTML = html
return {container}
}

jest.mock('../get-user-code-frame')

test('prettyDOM supports a COLORS environment variable', () => {
const {container} = render('<div>Hello World!</div>')

// process.env.COLORS is a string, so make sure we test it as such
process.env.COLORS = 'false'
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)

process.env.COLORS = 'true'
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
})

test('prettyDOM handles a COLORS env variable of unexpected object type by colorizing for node', () => {
const {container} = render('<div>Hello World!</div>')

const originalNodeVersion = process.versions.node
process.env.COLORS = '{}'
delete process.versions.node
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
process.versions.node = '1.2.3'
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
process.versions.node = originalNodeVersion
})

test('prettyDOM handles a COLORS env variable of undefined by colorizing for node', () => {
const {container} = render('<div>Hello World!</div>')

const originalNodeVersion = process.versions.node
process.env.COLORS = undefined
delete process.versions.node
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
process.versions.node = '1.2.3'
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
process.versions.node = originalNodeVersion
})

test('prettyDOM handles a COLORS env variable of empty string by colorizing for node', () => {
const {container} = render('<div>Hello World!</div>')

const originalNodeVersion = process.versions.node
process.env.COLORS = ''
delete process.versions.node
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
process.versions.node = '1.2.3'
expect(prettyDOM(container)).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
process.versions.node = originalNodeVersion
})
3 changes: 3 additions & 0 deletions src/__tests__/element-queries.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {configure, getConfig} from '../config'
import {render, renderIntoDocument} from './helpers/test-utils'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

// set original config
let originalConfig
beforeAll(() => {
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/get-user-code-frame.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import fs from 'fs'
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {getUserCodeFrame} from '../get-user-code-frame'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

jest.mock('fs', () => ({
// We setup the contents of a sample file
readFileSync: jest.fn(
Expand Down
56 changes: 56 additions & 0 deletions src/__tests__/log-dom.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import {getUserCodeFrame} from '../get-user-code-frame'
import {logDOM} from '../pretty-dom'
import {render} from './helpers/test-utils'

jest.mock('../get-user-code-frame')

beforeEach(() => {
jest.spyOn(console, 'log').mockImplementation(() => {})
})

afterEach(() => {
console.log.mockRestore()
})

test('logDOM logs highlighted prettyDOM to the console', () => {
const {container} = render('<div>Hello World!</div>')
logDOM(container)
expect(console.log).toHaveBeenCalledTimes(1)
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
})

test('logDOM logs highlighted prettyDOM with code frame to the console', () => {
getUserCodeFrame.mockImplementationOnce(
() => `"/home/john/projects/sample-error/error-example.js:7:14
5 | document.createTextNode('Hello World!')
6 | )
> 7 | screen.debug()
| ^
"
`,
)
const {container} = render('<div>Hello World!</div>')
logDOM(container)
expect(console.log).toHaveBeenCalledTimes(1)
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
"/home/john/projects/sample-error/error-example.js:7:14
5 | document.createTextNode('Hello World!')
6 | )
> 7 | screen.debug()
| ^
"
`)
})
86 changes: 18 additions & 68 deletions src/__tests__/pretty-dom.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import {prettyDOM, logDOM} from '../pretty-dom'
import {getUserCodeFrame} from '../get-user-code-frame'
/* global globalThis */
import {prettyDOM as prettyDOMImpl} from '../pretty-dom'
import {render, renderIntoDocument} from './helpers/test-utils'

jest.mock('../get-user-code-frame')

beforeEach(() => {
jest.spyOn(console, 'log').mockImplementation(() => {})
})

afterEach(() => {
console.log.mockRestore()
})
function prettyDOM(...args) {
let originalProcess
// this shouldn't be defined in this environment in the first place
if (typeof process === 'undefined') {
throw new Error('process is no longer defined. Remove this setup code.')
} else {
originalProcess = process
delete globalThis.process
}

try {
return prettyDOMImpl(...args)
} finally {
globalThis.process = originalProcess
}
}

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

test('logDOM logs prettyDOM to the console', () => {
const {container} = render('<div>Hello World!</div>')
logDOM(container)
expect(console.log).toHaveBeenCalledTimes(1)
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
`)
})

test('logDOM logs prettyDOM with code frame to the console', () => {
getUserCodeFrame.mockImplementationOnce(
() => `"/home/john/projects/sample-error/error-example.js:7:14
5 | document.createTextNode('Hello World!')
6 | )
> 7 | screen.debug()
| ^
"
`,
)
const {container} = render('<div>Hello World!</div>')
logDOM(container)
expect(console.log).toHaveBeenCalledTimes(1)
expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
<div>
<div>
Hello World!
</div>
</div>
"/home/john/projects/sample-error/error-example.js:7:14
5 | document.createTextNode('Hello World!')
6 | )
> 7 | screen.debug()
| ^
"
`)
})

describe('prettyDOM fails with first parameter without outerHTML field', () => {
test('with array', () => {
expect(() => prettyDOM(['outerHTML'])).toThrowErrorMatchingInlineSnapshot(
Expand Down Expand Up @@ -153,20 +117,6 @@ test('prettyDOM can include all elements with a custom filter', () => {
`)
})

test('prettyDOM supports a COLORS environment variable', () => {
const {container} = render('<div>Hello World!</div>')

const noColors = prettyDOM(container, undefined, {highlight: false})
const withColors = prettyDOM(container, undefined, {highlight: true})

// process.env.COLORS is a string, so make sure we test it as such
process.env.COLORS = 'false'
expect(prettyDOM(container)).toEqual(noColors)

process.env.COLORS = 'true'
expect(prettyDOM(container)).toEqual(withColors)
})

test('prettyDOM supports named custom elements', () => {
window.customElements.define(
'my-element-1',
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/role-helpers.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {
getRoles,
logRoles,
Expand All @@ -6,6 +7,8 @@ import {
} from '../role-helpers'
import {render} from './helpers/test-utils'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

beforeEach(() => {
jest.spyOn(console, 'log').mockImplementation(() => {})
})
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/role.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {configure, getConfig} from '../config'
import {getQueriesForElement} from '../get-queries-for-element'
import {render, renderIntoDocument} from './helpers/test-utils'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

test('by default logs accessible roles when it fails', () => {
const {getByRole} = render(`<h1>Hi</h1>`)
expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/screen.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {screen} from '..'
import {render, renderIntoDocument} from './helpers/test-utils'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

// Since screen.debug internally calls getUserCodeFrame, we mock it so it doesn't affect these tests
jest.mock('../get-user-code-frame', () => ({
getUserCodeFrame: () => '',
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/suggestions.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {configure} from '../config'
import {screen, getSuggestedQuery} from '..'
import {renderIntoDocument, render} from './helpers/test-utils'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

beforeAll(() => {
configure({throwSuggestions: true})
})
Expand Down
3 changes: 3 additions & 0 deletions src/__tests__/wait-for.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'
import {waitFor} from '../'
import {configure, getConfig} from '../config'
import {renderIntoDocument} from './helpers/test-utils'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)

function deferred() {
let resolve, reject
const promise = new Promise((res, rej) => {
Expand Down
2 changes: 0 additions & 2 deletions tests/setup-env.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import '@testing-library/jest-dom/extend-expect'
import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi'

expect.addSnapshotSerializer(jestSnapshotSerializerAnsi)
// add serializer for MutationRecord
expect.addSnapshotSerializer({
print: (record, serialize) => {
Expand Down

0 comments on commit 33555a3

Please sign in to comment.