Test colors explicitly

Author: eps1lon

src/__node_tests__/pretty-dom.js

@@ -0,0 +1,107 @@
+import {JSDOM} from 'jsdom'
+import {prettyDOM} from '../pretty-dom'
+import {getUserCodeFrame} from '../get-user-code-frame'
+
+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

@@ -12,20 +12,20 @@ afterEach(() => {
   console.log.mockRestore()
 })
 
-test('logDOM logs prettyDOM to the console', () => {
+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>
+    [36m<div>[39m
+      [36m<div>[39m
+        [0mHello World![0m
+      [36m</div>[39m
+    [36m</div>[39m
   `)
 })
 
-test('logDOM logs prettyDOM with code frame to the console', () => {
+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!')
@@ -39,11 +39,11 @@ test('logDOM logs prettyDOM with code frame to the console', () => {
   logDOM(container)
   expect(console.log).toHaveBeenCalledTimes(1)
   expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
-    <div>
-      <div>
-        Hello World!
-      </div>
-    </div>
+    [36m<div>[39m
+      [36m<div>[39m
+        [0mHello World![0m
+      [36m</div>[39m
+    [36m</div>[39m
 
     "/home/john/projects/sample-error/error-example.js:7:14
           5 |         document.createTextNode('Hello World!')

src/__tests__/pretty-dom.js

@@ -1,14 +1,32 @@
-import {prettyDOM} from '../pretty-dom'
+import {prettyDOM as prettyDOMImpl} from '../pretty-dom'
 import {render, renderIntoDocument} from './helpers/test-utils'
 
-test('prettyDOM prints out the given DOM element tree', () => {
+function prettyDOM(...args) {
+  let originalProcess
+  // this shouldn't be defined in this environment in the first place
+  if (typeof process !== 'undefined') {
+    originalProcess = process
+    // TODO: Delete to test browser environments
+    // delete globalThis.process
+  } else {
+    throw new Error('process is no longer defined. Remove this setup code.')
+  }
+
+  try {
+    return prettyDOMImpl(...args)
+  } finally {
+    globalThis.process = originalProcess
+  }
+}
+
+test('prettyDOM prints out the given DOM element tree highlighted', () => {
   const {container} = render('<div>Hello World!</div>')
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
-    <div>
-      <div>
-        Hello World!
-      </div>
-    </div>
+    [36m<div>[39m
+      [36m<div>[39m
+        [0mHello World![0m
+      [36m</div>[39m
+    [36m</div>[39m
   `)
 })
 
@@ -17,21 +35,21 @@ test('prettyDOM supports truncating the output length', () => {
   expect(prettyDOM(container, 5)).toMatch(/\.\.\./)
   expect(prettyDOM(container, 0)).toMatch('')
   expect(prettyDOM(container, Number.POSITIVE_INFINITY)).toMatchInlineSnapshot(`
-    <div>
-      <div>
-        Hello World!
-      </div>
-    </div>
+    [36m<div>[39m
+      [36m<div>[39m
+        [0mHello World![0m
+      [36m</div>[39m
+    [36m</div>[39m
   `)
 })
 
 test('prettyDOM defaults to document.body', () => {
   const defaultInlineSnapshot = `
-  <body>
-    <div>
-      Hello World!
-    </div>
-  </body>
+  [36m<body>[39m
+    [36m<div>[39m
+      [0mHello World![0m
+    [36m</div>[39m
+  [36m</body>[39m
 `
   renderIntoDocument('<div>Hello World!</div>')
   expect(prettyDOM()).toMatchInlineSnapshot(defaultInlineSnapshot)
@@ -40,10 +58,10 @@ test('prettyDOM defaults to document.body', () => {
 
 test('prettyDOM supports receiving the document element', () => {
   expect(prettyDOM(document)).toMatchInlineSnapshot(`
-    <html>
-      <head />
-      <body />
-    </html>
+    [36m<html>[39m
+      [36m<head />[39m
+      [36m<body />[39m
+    [36m</html>[39m
   `)
 })
 
@@ -71,11 +89,11 @@ test('prettyDOM ignores script elements and comments nodes by default', () => {
   )
 
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
-    <body>
-      <p>
-        Hello, Dave
-      </p>
-    </body>
+    [36m<body>[39m
+      [36m<p>[39m
+        [0mHello, Dave[0m
+      [36m</p>[39m
+    [36m</body>[39m
   `)
 })
 
@@ -87,73 +105,18 @@ test('prettyDOM can include all elements with a custom filter', () => {
   expect(
     prettyDOM(container, Number.POSITIVE_INFINITY, {filterNode: () => true}),
   ).toMatchInlineSnapshot(`
-    <body>
-      <script
-        src="context.js"
-      />
-      <!-- Some comment -->
-      <p>
-        Hello, Dave
-      </p>
-    </body>
+    [36m<body>[39m
+      [36m<script[39m
+        [33msrc[39m=[32m"context.js"[39m
+      [36m/>[39m
+      [90m<!-- Some comment -->[39m
+      [36m<p>[39m
+        [0mHello, Dave[0m
+      [36m</p>[39m
+    [36m</body>[39m
   `)
 })
 
-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 handles a COLORS env variable of unexpected object type by colorizing for node', () => {
-  const {container} = render('<div>Hello World!</div>')
-  const noColors = prettyDOM(container, undefined, {highlight: false})
-  const withColors = prettyDOM(container, undefined, {highlight: true})
-
-  const originalNodeVersion = process.versions.node
-  process.env.COLORS = '{}'
-  delete process.versions.node
-  expect(prettyDOM(container)).toEqual(noColors)
-  process.versions.node = '1.2.3'
-  expect(prettyDOM(container)).toEqual(withColors)
-  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 noColors = prettyDOM(container, undefined, {highlight: false})
-  const withColors = prettyDOM(container, undefined, {highlight: true})
-
-  const originalNodeVersion = process.versions.node
-  process.env.COLORS = undefined
-  delete process.versions.node
-  expect(prettyDOM(container)).toEqual(noColors)
-  process.versions.node = '1.2.3'
-  expect(prettyDOM(container)).toEqual(withColors)
-  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 noColors = prettyDOM(container, undefined, {highlight: false})
-  const withColors = prettyDOM(container, undefined, {highlight: true})
-
-  const originalNodeVersion = process.versions.node
-  process.env.COLORS = ''
-  delete process.versions.node
-  expect(prettyDOM(container)).toEqual(noColors)
-  process.versions.node = '1.2.3'
-  expect(prettyDOM(container)).toEqual(withColors)
-  process.versions.node = originalNodeVersion
-})
-
 test('prettyDOM supports named custom elements', () => {
   window.customElements.define(
     'my-element-1',
@@ -163,11 +126,11 @@ test('prettyDOM supports named custom elements', () => {
   const {container} = render('<my-element-1>Hello World!</my-element-1>')
 
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
-    <div>
-      <my-element-1>
-        Hello World!
-      </my-element-1>
-    </div>
+    [36m<div>[39m
+      [36m<my-element-1>[39m
+        [0mHello World![0m
+      [36m</my-element-1>[39m
+    [36m</div>[39m
   `)
 })
 
@@ -177,10 +140,10 @@ test('prettyDOM supports anonymous custom elements', () => {
   const {container} = render('<my-element-2>Hello World!</my-element-2>')
 
   expect(prettyDOM(container)).toMatchInlineSnapshot(`
-    <div>
-      <my-element-2>
-        Hello World!
-      </my-element-2>
-    </div>
+    [36m<div>[39m
+      [36m<my-element-2>[39m
+        [0mHello World![0m
+      [36m</my-element-2>[39m
+    [36m</div>[39m
   `)
 })