feat(logging): don't log DOM in Cypress, don't highlight in the browser (#45)

* fix: don't crash when jsdom's document is passed to prettyDOM.

* feat(logging): don't log DOM in Cypress, don't highlight in the browser.

- added test to check whether Cypress doesn't log DOM
- ignore .idea folder (JetBrains IDE's)
- added myself to contributors

* fix: `.control` support landed in jsdom, updated istanbul ignore comments for improved coverage.

* Updated error message code style. Updated istanbul ignore.

* Improved error handling code style.

* Updated environment check.

Author: npeterkamps

.all-contributorsrc

@@ -209,6 +209,17 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "npeterkamps",
+      "name": "Peter Kamps",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/25429764?v=4",
+      "profile": "https://github.com/npeterkamps",
+      "contributions": [
+        "bug",
+        "code",
+        "test"
+      ]
     }
   ]
 }

.gitignore

@@ -6,6 +6,7 @@ dist
 .DS_Store
 .eslintcache
 yarn-error.log
+.idea/
 
 # these cause more harm than good
 # when working with contributors

README.md

@@ -16,7 +16,7 @@
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-20-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-21-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 
@@ -857,13 +857,11 @@ light-weight, simple, and understandable.
 Thanks goes to these people ([emoji key][emojis]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-
 <!-- prettier-ignore -->
 | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Apbomb "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=pbomb "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=pbomb "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=pbomb "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Tests") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Tests") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💬](#question-gnapse "Answering Questions") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/2747424?v=4" width="100px;"/><br /><sub><b>Josef Maxx Blake</b></sub>](http://jomaxx.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Tests") |
-| [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [💡](#example-alecook "Examples") | [<img src="https://avatars3.githubusercontent.com/u/10348212?v=4" width="100px;"/><br /><sub><b>Daniel Cook</b></sub>](https://github.com/dfcook)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Tests") | [<img src="https://avatars2.githubusercontent.com/u/21194045?s=400&v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>Tim Deschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") | [<img src="https://avatars3.githubusercontent.com/u/1571667?v=4" width="100px;"/><br /><sub><b>Alex Krolick</b></sub>](https://alexkrolick.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=alexkrolick "Code") | [<img src="https://avatars2.githubusercontent.com/u/2224291?v=4" width="100px;"/><br /><sub><b>Maddi Joyce</b></sub>](http://www.maddijoyce.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=maddijoyce "Code") |
-
+| [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [💡](#example-alecook "Examples") | [<img src="https://avatars3.githubusercontent.com/u/10348212?v=4" width="100px;"/><br /><sub><b>Daniel Cook</b></sub>](https://github.com/dfcook)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=dfcook "Tests") | [<img src="https://avatars2.githubusercontent.com/u/21194045?s=400&v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Athchia "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=thchia "Code") | [<img src="https://avatars1.githubusercontent.com/u/28659384?v=4" width="100px;"/><br /><sub><b>Tim Deschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=tdeschryver "Tests") | [<img src="https://avatars3.githubusercontent.com/u/1571667?v=4" width="100px;"/><br /><sub><b>Alex Krolick</b></sub>](https://alexkrolick.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=alexkrolick "Code") | [<img src="https://avatars2.githubusercontent.com/u/2224291?v=4" width="100px;"/><br /><sub><b>Maddi Joyce</b></sub>](http://www.maddijoyce.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=maddijoyce "Code") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Anpeterkamps "Bug reports") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=npeterkamps "Tests") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

src/__tests__/__snapshots__/element-queries.js.snap

@@ -1,63 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`get throws a useful error message 1`] = `
-"Unable to find a label with the text of: LucyRicardo 
+"Unable to find a label with the text of: LucyRicardo
 
 <div>
   <div />
 </div>"
 `;
 
 exports[`get throws a useful error message 2`] = `
-"Unable to find an element with the placeholder text of: LucyRicardo 
+"Unable to find an element with the placeholder text of: LucyRicardo
 
 <div>
   <div />
 </div>"
 `;
 
 exports[`get throws a useful error message 3`] = `
-"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. 
+"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
 
 <div>
   <div />
 </div>"
 `;
 
 exports[`get throws a useful error message 4`] = `
-"Unable to find an element by: [data-testid=\\"LucyRicardo\\"] 
+"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]
 
 <div>
   <div />
 </div>"
 `;
 
 exports[`get throws a useful error message 5`] = `
-"Unable to find an element with the alt text: LucyRicardo 
+"Unable to find an element with the alt text: LucyRicardo
 
 <div>
   <div />
 </div>"
 `;
 
 exports[`get throws a useful error message 6`] = `
-"Unable to find an element with the title: LucyRicardo. 
+"Unable to find an element with the title: LucyRicardo.
 
 <div>
   <div />
 </div>"
 `;
 
 exports[`get throws a useful error message 7`] = `
-"Unable to find an element with the value: LucyRicardo. 
+"Unable to find an element with the value: LucyRicardo.
 
 <div>
   <div />
 </div>"
 `;
 
+exports[`get throws a useful error message without DOM in Cypress 1`] = `"Unable to find a label with the text of: LucyRicardo"`;
+
+exports[`get throws a useful error message without DOM in Cypress 2`] = `"Unable to find an element with the placeholder text of: LucyRicardo"`;
+
+exports[`get throws a useful error message without DOM in Cypress 3`] = `"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible."`;
+
+exports[`get throws a useful error message without DOM in Cypress 4`] = `"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]"`;
+
+exports[`get throws a useful error message without DOM in Cypress 5`] = `"Unable to find an element with the alt text: LucyRicardo"`;
+
+exports[`get throws a useful error message without DOM in Cypress 6`] = `"Unable to find an element with the title: LucyRicardo."`;
+
+exports[`get throws a useful error message without DOM in Cypress 7`] = `"Unable to find an element with the value: LucyRicardo."`;
+
 exports[`label with no form control 1`] = `
-"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly. 
+"Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
 
 <div>
   <label>
@@ -67,7 +81,7 @@ exports[`label with no form control 1`] = `
 `;
 
 exports[`totally empty label 1`] = `
-"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly. 
+"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly.
 
 <div>
   <label />

src/__tests__/__snapshots__/pretty-dom.js.snap

@@ -7,3 +7,10 @@ exports[`it prints out the given DOM element tree 1`] = `
   </div>
 </div>"
 `;
+
+exports[`it supports receiving the document element 1`] = `
+"<html>
+  <head />
+  <body />
+</html>"
+`;

src/__tests__/__snapshots__/wait-for-element.js.snap

@@ -24,7 +24,7 @@ exports[`it throws if timeout is exceeded 2`] = `
 
 exports[`it throws the same error that the callback has thrown if timeout is exceeded 1`] = `
 Array [
-  [Error: Unable to find an element by: [data-testid="test"] 
+  [Error: Unable to find an element by: [data-testid="test"]
 
 <div
   data-test-attribute="something changed twice"

src/__tests__/element-queries.js

@@ -1,6 +1,10 @@
 import 'jest-dom/extend-expect'
 import {render} from './helpers/test-utils'
 
+beforeEach(() => {
+  window.Cypress = null;
+});
+
 test('query can return null', () => {
   const {
     queryByLabelText,
@@ -368,4 +372,26 @@ test('test the debug helper prints the dom state here', () => {
   process.env.DEBUG_PRINT_LIMIT = originalDebugPrintLimit
 })
 
+test('get throws a useful error message without DOM in Cypress', () => {
+  window.Cypress = {}
+  const {
+    getByLabelText,
+    getByPlaceholderText,
+    getByText,
+    getByTestId,
+    getByAltText,
+    getByTitle,
+    getByValue,
+  } = render('<div />')
+  expect(() => getByLabelText('LucyRicardo')).toThrowErrorMatchingSnapshot()
+  expect(() =>
+    getByPlaceholderText('LucyRicardo'),
+  ).toThrowErrorMatchingSnapshot()
+  expect(() => getByText('LucyRicardo')).toThrowErrorMatchingSnapshot()
+  expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
+  expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingSnapshot()
+  expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingSnapshot()
+  expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
+})
+
 /* eslint jsx-a11y/label-has-for:0 */

src/__tests__/pretty-dom.js

@@ -10,3 +10,7 @@ test('it supports truncating the output length', () => {
   const {container} = render('<div>Hello World!</div>')
   expect(prettyDOM(container, 5)).toMatch(/\.\.\./)
 })
+
+test('it supports receiving the document element', () => {
+  expect(prettyDOM(document)).toMatchSnapshot()
+})

src/pretty-dom.js

@@ -2,12 +2,16 @@ import prettyFormat from 'pretty-format'
 
 const {DOMElement, DOMCollection} = prettyFormat.plugins
 
-function prettyDOM(htmlElement, maxLength) {
-  const debugContent = prettyFormat(htmlElement, {
+function prettyDOM(htmlElement, maxLength, options) {
+  if (htmlElement.documentElement) {
+    htmlElement = htmlElement.documentElement
+  }
+
+  const debugContent = prettyFormat(htmlElement, Object.assign({
     plugins: [DOMElement, DOMCollection],
     printFunctionName: false,
     highlight: true,
-  })
+  }, options))
   return maxLength !== undefined && htmlElement.outerHTML.length > maxLength
     ? `${debugContent.slice(0, maxLength)}...`
     : debugContent