Merge branch 'main' into replacewith

Author: jdufresne

.all-contributorsrc

@@ -1637,6 +1637,15 @@
         "code",
         "bug"
       ]
+    },
+    {
+      "login": "sieem",
+      "name": "sieem",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36861085?v=4",
+      "profile": "https://github.com/sieem",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoHost": "https://github.com",

README.md

@@ -134,7 +134,7 @@ Thanks goes to these people ([emoji key][emojis]):
   <tbody>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3?s=100" width="100px;" alt="Kent C. Dodds"/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=kentcdodds" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=kentcdodds" title="Documentation">📖</a> <a href="#infra-kentcdodds" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/testing-library/dom-testing-library/commits?author=kentcdodds" title="Tests">⚠️</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://www.smooth-code.com"><img src="https://avatars2.githubusercontent.com/u/266302?v=4?s=100" width="100px;" alt="Greg Bergé"/><br /><sub><b>Greg Bergé</b></sub></a><br /><a href="#ideas-neoziro" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://argos-ci.com"><img src="https://avatars2.githubusercontent.com/u/266302?v=4?s=100" width="100px;" alt="Greg Bergé"/><br /><sub><b>Greg Bergé</b></sub></a><br /><a href="#ideas-neoziro" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://audiolion.github.io"><img src="https://avatars1.githubusercontent.com/u/2430381?v=4?s=100" width="100px;" alt="Ryan Castner"/><br /><sub><b>Ryan Castner</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=audiolion" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.dnlsandiego.com"><img src="https://avatars0.githubusercontent.com/u/8008023?v=4?s=100" width="100px;" alt="Daniel Sandiego"/><br /><sub><b>Daniel Sandiego</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=dnlsandiego" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Miklet"><img src="https://avatars2.githubusercontent.com/u/12592677?v=4?s=100" width="100px;" alt="Paweł Mikołajczyk"/><br /><sub><b>Paweł Mikołajczyk</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=Miklet" title="Code">💻</a></td>
@@ -348,6 +348,9 @@ Thanks goes to these people ([emoji key][emojis]):
       <td align="center" valign="top" width="14.28%"><a href="http://everlong.org/"><img src="https://avatars.githubusercontent.com/u/454175?v=4?s=100" width="100px;" alt="Julien Wajsberg"/><br /><sub><b>Julien Wajsberg</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=julienw" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/issues?q=author%3Ajulienw" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/KevinBon"><img src="https://avatars.githubusercontent.com/u/1910927?v=4?s=100" width="100px;" alt="Kevin BON"/><br /><sub><b>Kevin BON</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=KevinBon" title="Code">💻</a> <a href="https://github.com/testing-library/dom-testing-library/issues?q=author%3AKevinBon" title="Bug reports">🐛</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sieem"><img src="https://avatars.githubusercontent.com/u/36861085?v=4?s=100" width="100px;" alt="sieem"/><br /><sub><b>sieem</b></sub></a><br /><a href="https://github.com/testing-library/dom-testing-library/commits?author=sieem" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

src/DOMElementFilter.ts

@@ -158,24 +158,30 @@ const FRAGMENT_NODE = 11
 
 const ELEMENT_REGEXP = /^((HTML|SVG)\w*)?Element$/
 
+const isCustomElement = (val: any) => {
+  const {tagName} = val
+  return Boolean(
+    (typeof tagName === 'string' && tagName.includes('-')) ||
+      (typeof val.hasAttribute === 'function' && val.hasAttribute('is')),
+  )
+}
+
 const testNode = (val: any) => {
   const constructorName = val.constructor.name
-  const {nodeType, tagName} = val
-  const isCustomElement =
-    (typeof tagName === 'string' && tagName.includes('-')) ||
-    (typeof val.hasAttribute === 'function' && val.hasAttribute('is'))
+
+  const {nodeType} = val
 
   return (
     (nodeType === ELEMENT_NODE &&
-      (ELEMENT_REGEXP.test(constructorName) || isCustomElement)) ||
+      (ELEMENT_REGEXP.test(constructorName) || isCustomElement(val))) ||
     (nodeType === TEXT_NODE && constructorName === 'Text') ||
     (nodeType === COMMENT_NODE && constructorName === 'Comment') ||
     (nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment')
   )
 }
 
 export const test: NewPlugin['test'] = (val: any) =>
-  val?.constructor?.name && testNode(val)
+  (val?.constructor?.name || isCustomElement(val)) && testNode(val)
 
 type HandledType = Element | Text | Comment | DocumentFragment
 
@@ -195,7 +201,8 @@ export default function createDOMElementFilter(
   filterNode: (node: Node) => boolean,
 ): NewPlugin {
   return {
-    test: (val: any) => val?.constructor?.name && testNode(val),
+    test: (val: any) =>
+      (val?.constructor?.name || isCustomElement(val)) && testNode(val),
     serialize: (
       node: HandledType,
       config: Config,

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__/events.js

@@ -77,8 +77,8 @@ const eventTypes = [
     elementType: 'img',
   },
   {
-    type: '',
-    events: ['offline', 'online'],
+    type: 'Window',
+    events: ['offline', 'online', 'pageHide', 'pageShow'],
     elementType: 'window',
   },
   {

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