dom-testing-library - npm Package Compare versions

Comparing version 1.7.1 to 1.8.0

dist/index.js

@@ -92,2 +92,14 @@ 'use strict';
 
+var _prettyDom = require('./pretty-dom');
+
+Object.keys(_prettyDom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _prettyDom[key];
+    }
+  });
+});
+
 var queries = _interopRequireWildcard(_queries);
@@ -94,0 +106,0 @@

dist/queries.js

@@ -8,6 +8,2 @@ 'use strict';
 
-var _prettyFormat = require('pretty-format');
-
-var _prettyFormat2 = _interopRequireDefault(_prettyFormat);
-
 var _matches = require('./matches');
@@ -17,7 +13,7 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _prettyDom = require('./pretty-dom');
 
-var _prettyFormat$plugins = _prettyFormat2.default.plugins,
-    DOMElement = _prettyFormat$plugins.DOMElement,
-    DOMCollection = _prettyFormat$plugins.DOMCollection;
+function debugDOM(htmlElement) {
+  return (0, _prettyDom.prettyDOM)(htmlElement, process.env.DEBUG_PRINT_LIMIT || 7000);
+}
 
@@ -97,3 +93,3 @@ // Here are the queries for the library.
   if (!el) {
-    throw new Error(`Unable to find an element by: [data-testid="${id}"] \n\n${htmlElementToDisplay(container)}`);
+    throw new Error(`Unable to find an element by: [data-testid="${id}"] \n\n${debugDOM(container)}`);
   }
@@ -110,3 +106,3 @@ return el;
   if (!el) {
-    throw new Error(`Unable to find an element with the placeholder text of: ${text} \n\n${htmlElementToDisplay(container)}`);
+    throw new Error(`Unable to find an element with the placeholder text of: ${text} \n\n${debugDOM(container)}`);
   }
@@ -125,5 +121,5 @@ return el;
     if (label) {
-      throw new Error(`Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. \n\n${htmlElementToDisplay(container)}`);
+      throw new Error(`Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. \n\n${debugDOM(container)}`);
     } else {
-      throw new Error(`Unable to find a label with the text of: ${text} \n\n${htmlElementToDisplay(container)}`);
+      throw new Error(`Unable to find a label with the text of: ${text} \n\n${debugDOM(container)}`);
     }
@@ -141,3 +137,3 @@ }
   if (!el) {
-    throw new Error(`Unable to find an element with the text: ${text}. 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. \n\n${htmlElementToDisplay(container)}`);
+    throw new Error(`Unable to find an element with the text: ${text}. 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. \n\n${debugDOM(container)}`);
   }
@@ -156,3 +152,3 @@ return el;
   if (!el) {
-    throw new Error(`Unable to find an element with the alt text: ${alt} \n\n${htmlElementToDisplay(container)}`);
+    throw new Error(`Unable to find an element with the alt text: ${alt} \n\n${debugDOM(container)}`);
   }
@@ -162,12 +158,2 @@ return el;
 
-function htmlElementToDisplay(htmlElement) {
-  var debugContent = (0, _prettyFormat2.default)(htmlElement, {
-    plugins: [DOMElement, DOMCollection],
-    printFunctionName: false,
-    highlight: true
-  });
-  var maxLength = process.env.DEBUG_PRINT_LIMIT || 7000;
-  return htmlElement.outerHTML.length > maxLength ? `${debugContent.slice(0, maxLength)}...` : debugContent;
-}
-
 exports.queryByPlaceholderText = queryByPlaceholderText;
@@ -174,0 +160,0 @@ exports.getByPlaceholderText = getByPlaceholderText;

package.json

 {
   "name": "dom-testing-library",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Simple and complete DOM testing utilities that encourage good testing practices.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -88,2 +88,3 @@ <div align="center">
 * [Debugging](#debugging)
+  * [`prettyDOM`](#prettydom)
 * [Implementations](#implementations)
@@ -534,2 +535,30 @@ * [FAQ](#faq)
 
+### `prettyDOM`
+
+This helper function can be used to print out readable representation of the DOM
+tree of a node. This can be helpful for instance when debugging tests.
+
+It is defined as:
+
+```typescript
+function prettyDOM(node: HTMLElement, maxLength?: number): string
+```
+
+It receives the root node to print out, and an optional extra argument to limit
+the size of the resulting string, for cases when it becomes too large.
+
+This function is usually used alongside `console.log` to temporarily print out
+DOM trees during tests for debugging purposes:
+
+```javascript
+const div = document.createElement('div')
+div.innerHTML = '<div><h1>Hello World</h1></div>'
+console.log(prettyDOM(div))
+// <div>
+//   <h1>Hello World</h1>
+// </div>
+```
+
+This function is what also powers [the automatic debugging output described above](#debugging).
+
 ## Implementations
@@ -536,0 +565,0 @@

No alert changes

Improved metrics

Total package byte prevSize

62414

increased by2.22%

Number of package files

14

increased by7.69%

Lines of code

700

increased by2.64%

Number of lines in readme file

754

increased by4%

No dependency changes