fix: Ignore comment nodes in toBeEmptyDOMElement (#317)

Co-authored-by: Ernesto García <[email protected]>

README.md

@@ -232,17 +232,21 @@ expect(getByTestId('not-empty')).not.toBeEmpty()
 toBeEmptyDOMElement()
 ```
 
-This allows you to assert whether an element has content or not.
+This allows you to assert whether an element has no visible content for the user.
+It ignores comments but will fail if the element contains white-space.
 
 #### Examples
 
 ```html
 <span data-testid="not-empty"><span data-testid="empty"></span></span>
+<span data-testid="with-whitespace"> </span>
+<span data-testid="with-comment"><!-- comment --></span>
 ```
 
 ```javascript
 expect(getByTestId('empty')).toBeEmptyDOMElement()
 expect(getByTestId('not-empty')).not.toBeEmptyDOMElement()
+expect(getByTestId('with-whitespace')).not.toBeEmptyDOMElement()
 ```
 
 <hr />

src/__tests__/to-be-empty-dom-element.js

@@ -5,17 +5,35 @@ test('.toBeEmptyDOMElement', () => {
     <span data-testid="not-empty">
         <span data-testid="empty"></span>
         <svg data-testid="svg-empty"></svg>
-    </span>`)
+    </span>
+    <span data-testid="with-comment"><!-- This Comment --></span>
+    <span data-testid="with-multiple-comments"><!-- Comment1 --><!-- Comment2 --></span>
+    <span data-testid="with-element"><span></span></span>
+    <span data-testid="with-element-and-comment"><!--Comment--><span></span></span>
+    <span data-testid="with-whitespace"> </span>
+    <span data-testid="with-text">Text</span>`)
 
   const empty = queryByTestId('empty')
   const notEmpty = queryByTestId('not-empty')
   const svgEmpty = queryByTestId('svg-empty')
+  const withComment = queryByTestId('with-comment')
+  const withMultipleComments = queryByTestId('with-multiple-comments')
+  const withElement = queryByTestId('with-element')
+  const withElementAndComment = queryByTestId('with-element-and-comment')
+  const withWhitespace = queryByTestId('with-whitespace')
+  const withText = queryByTestId('with-whitespace')
   const nonExistantElement = queryByTestId('not-exists')
   const fakeElement = {thisIsNot: 'an html element'}
 
   expect(empty).toBeEmptyDOMElement()
   expect(svgEmpty).toBeEmptyDOMElement()
   expect(notEmpty).not.toBeEmptyDOMElement()
+  expect(withComment).toBeEmptyDOMElement()
+  expect(withMultipleComments).toBeEmptyDOMElement()
+  expect(withElement).not.toBeEmptyDOMElement()
+  expect(withElementAndComment).not.toBeEmptyDOMElement()
+  expect(withWhitespace).not.toBeEmptyDOMElement()
+  expect(withText).not.toBeEmptyDOMElement()
 
   // negative test cases wrapped in throwError assertions for coverage.
   expect(() => expect(empty).not.toBeEmptyDOMElement()).toThrowError()
@@ -24,6 +42,18 @@ test('.toBeEmptyDOMElement', () => {
 
   expect(() => expect(notEmpty).toBeEmptyDOMElement()).toThrowError()
 
+  expect(() => expect(withComment).not.toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withMultipleComments).not.toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withElement).toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withElementAndComment).toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withWhitespace).toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withText).toBeEmptyDOMElement()).toThrowError()
+
   expect(() => expect(fakeElement).toBeEmptyDOMElement()).toThrowError()
 
   expect(() => {

src/to-be-empty-dom-element.js

@@ -4,7 +4,7 @@ export function toBeEmptyDOMElement(element) {
   checkHtmlElement(element, toBeEmptyDOMElement, this)
 
   return {
-    pass: element.innerHTML === '',
+    pass: isEmptyElement(element),
     message: () => {
       return [
         this.utils.matcherHint(
@@ -19,3 +19,16 @@ export function toBeEmptyDOMElement(element) {
     },
   }
 }
+
+/**
+ * Identifies if an element doesn't contain child nodes (excluding comments)
+ * ℹ Node.COMMENT_NODE can't be used because of the following issue 
+ * https://github.com/jsdom/jsdom/issues/2220
+ *
+ * @param {*} element an HtmlElement or SVGElement
+ * @return {*} true if the element only contains comments or none
+ */
+function isEmptyElement(element){
+  const nonCommentChildNodes = [...element.childNodes].filter(node => node.nodeType !== 8);
+  return nonCommentChildNodes.length === 0;
+}