search

KonnorRogers / shadow-dom-testing-library

An extension of DOM-testing-library to provide hooks into the shadow dom
MIT License
98 stars 2 forks source link

`screen.debug()` deletes elements from output #42

Closed CreativeTechGuy closed 1 year ago

CreativeTechGuy commented 2 years ago

Take the following example which is very similar to how toJSDOM is implemented in this library:

const htmlString = "<tr><td>Cell 1 <a>Link in Cell 1</a></td><td>Cell 2</td>";
const dom = new DOMParser().parseFromString(htmlString, "text/html");
console.log(dom.body.firstElementChild.outerHTML);

This will return just "<a>Link in Cell 1</a>".

The reason being, <tr> and <td> aren't valid tags in HTML if it isn't inside of a <table>. So when parsing, it seems to throw those away since they aren't correct. (As the very forgiving HTML parser likes to do.) As a result, the dom.body looks like: <body>Cell 1 <a>Link in Cell 1</a>Cell 2</body> as it has stripped all of those tags. Now since the next line is expecting just one root node, when it picks the first element, it ends up picking the a since that is the only element which remains.

In my testing, it seems like using the XML parser doesn't have this issue, but I'm not sure what other issues/differences the XML parser might introduce.

KonnorRogers commented 2 years ago

@CreativeTechGuy Hmm...perhaps its time I just bite the bullet and introduce a proper pretty-printer.

https://github.com/testing-library/dom-testing-library/issues/1188#issuecomment-1317311558

^ this offers a possible way to do it. It's signficantly more code, but is the "proper" way to introduce printing.

Its pretty much almost exactly like whats implemented by PrettyDOM.