diff --git a/src/__node_tests__/pretty-dom.js b/src/__node_tests__/pretty-dom.js new file mode 100644 index 00000000..6aca2443 --- /dev/null +++ b/src/__node_tests__/pretty-dom.js @@ -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('
Hello World!
') + + // process.env.COLORS is a string, so make sure we test it as such + process.env.COLORS = 'false' + expect(prettyDOM(container)).toMatchInlineSnapshot(` +
+
+ Hello World! +
+
+ `) + + process.env.COLORS = 'true' + expect(prettyDOM(container)).toMatchInlineSnapshot(` + 
 + 
 + Hello World! + 
 + 
 + `) +}) + +test('prettyDOM handles a COLORS env variable of unexpected object type by colorizing for node', () => { + const {container} = render('
Hello World!
') + + const originalNodeVersion = process.versions.node + process.env.COLORS = '{}' + delete process.versions.node + expect(prettyDOM(container)).toMatchInlineSnapshot(` +
+
+ Hello World! +
+
+ `) + process.versions.node = '1.2.3' + expect(prettyDOM(container)).toMatchInlineSnapshot(` + 
 + 
 + Hello World! + 
 + 
 + `) + process.versions.node = originalNodeVersion +}) + +test('prettyDOM handles a COLORS env variable of undefined by colorizing for node', () => { + const {container} = render('
Hello World!
') + + const originalNodeVersion = process.versions.node + process.env.COLORS = undefined + delete process.versions.node + expect(prettyDOM(container)).toMatchInlineSnapshot(` +
+
+ Hello World! +
+
+ `) + process.versions.node = '1.2.3' + expect(prettyDOM(container)).toMatchInlineSnapshot(` + 
 + 
 + Hello World! + 
 + 
 + `) + process.versions.node = originalNodeVersion +}) + +test('prettyDOM handles a COLORS env variable of empty string by colorizing for node', () => { + const {container} = render('
Hello World!
') + + const originalNodeVersion = process.versions.node + process.env.COLORS = '' + delete process.versions.node + expect(prettyDOM(container)).toMatchInlineSnapshot(` +
+
+ Hello World! +
+
+ `) + process.versions.node = '1.2.3' + expect(prettyDOM(container)).toMatchInlineSnapshot(` + 
 + 
 + Hello World! + 
 + 
 + `) + process.versions.node = originalNodeVersion +}) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index f3bc0ab0..a8e00011 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -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(() => { diff --git a/src/__tests__/get-user-code-frame.js b/src/__tests__/get-user-code-frame.js index 8d2bd058..59a1123b 100644 --- a/src/__tests__/get-user-code-frame.js +++ b/src/__tests__/get-user-code-frame.js @@ -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( diff --git a/src/__tests__/log-dom.js b/src/__tests__/log-dom.js new file mode 100644 index 00000000..d6a52e62 --- /dev/null +++ b/src/__tests__/log-dom.js @@ -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('
Hello World!
') + logDOM(container) + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + 
 + 
 + Hello World! + 
 + 
 + `) +}) + +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('
Hello World!
') + logDOM(container) + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` + 
 + 
 + Hello World! + 
 + 
 + + "/home/john/projects/sample-error/error-example.js:7:14 + 5 | document.createTextNode('Hello World!') + 6 | ) + > 7 | screen.debug() + | ^ + " + + `) +}) diff --git a/src/__tests__/pretty-dom.js b/src/__tests__/pretty-dom.js index 69229995..2b6ae6b4 100644 --- a/src/__tests__/pretty-dom.js +++ b/src/__tests__/pretty-dom.js @@ -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('
Hello World!
') @@ -58,49 +65,6 @@ test('prettyDOM supports receiving the document element', () => { `) }) -test('logDOM logs prettyDOM to the console', () => { - const {container} = render('
Hello World!
') - logDOM(container) - expect(console.log).toHaveBeenCalledTimes(1) - expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` -
-
- Hello World! -
-
- `) -}) - -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('
Hello World!
') - logDOM(container) - expect(console.log).toHaveBeenCalledTimes(1) - expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(` -
-
- Hello World! -
-
- - "/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( @@ -153,20 +117,6 @@ test('prettyDOM can include all elements with a custom filter', () => { `) }) -test('prettyDOM supports a COLORS environment variable', () => { - const {container} = render('
Hello World!
') - - 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', diff --git a/src/__tests__/role-helpers.js b/src/__tests__/role-helpers.js index 1ed32464..f47daa42 100644 --- a/src/__tests__/role-helpers.js +++ b/src/__tests__/role-helpers.js @@ -1,3 +1,4 @@ +import jestSnapshotSerializerAnsi from 'jest-snapshot-serializer-ansi' import { getRoles, logRoles, @@ -6,6 +7,8 @@ import { } from '../role-helpers' import {render} from './helpers/test-utils' +expect.addSnapshotSerializer(jestSnapshotSerializerAnsi) + beforeEach(() => { jest.spyOn(console, 'log').mockImplementation(() => {}) }) diff --git a/src/__tests__/role.js b/src/__tests__/role.js index 447a6e8b..cf598583 100644 --- a/src/__tests__/role.js +++ b/src/__tests__/role.js @@ -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(`

Hi

`) expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(` diff --git a/src/__tests__/screen.js b/src/__tests__/screen.js index 7c57de4a..42356436 100644 --- a/src/__tests__/screen.js +++ b/src/__tests__/screen.js @@ -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: () => '', diff --git a/src/__tests__/suggestions.js b/src/__tests__/suggestions.js index 160f7ee5..64761025 100644 --- a/src/__tests__/suggestions.js +++ b/src/__tests__/suggestions.js @@ -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}) }) diff --git a/src/__tests__/wait-for.js b/src/__tests__/wait-for.js index 5295543c..38f5b3dd 100644 --- a/src/__tests__/wait-for.js +++ b/src/__tests__/wait-for.js @@ -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) => { diff --git a/tests/setup-env.js b/tests/setup-env.js index 1590dc53..9271f36b 100644 --- a/tests/setup-env.js +++ b/tests/setup-env.js @@ -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) => {