Test highlighting of prettyDOM explicitly (#1324)

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('<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
+})

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

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(

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('<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()
+            |              ^
+        "
+      
+  `)
+})

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('<div>Hello World!</div>')
@@ -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(
@@ -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',

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

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(`<h1>Hi</h1>`)
   expect(() => getByRole('article')).toThrowErrorMatchingInlineSnapshot(`

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: () => '',

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})
 })

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

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