`html`assertions for `outerHTML` or `isEqualNode`

[mAAdhaTTah]

I'm trying to assert that a node matches an expected HTML structure, and I noticed the html asserts on the innerHTML of the node. Any interest in either an html for outerHTML or using the browser's isEqualNode to compare one node to another?

[nathanboktae]

Honestly no, innerHTML is way more common and el.outerHTML.should.equal reads well. I've never even heard of isEqualNode... Also what scenario do you have where you compare an entire node to another? Does it check against click handlers or just classes and attributes?

[mAAdhaTTah]

In this case, I'm writing a library w/ a vdom and I want to compare the end result of the rendering process to what the DOM should look like. That would include any attributes on the node itself. Ostensibly, I can still the node in a wrapper then compare

isEqualNode is a browser API that checks whether two node are equivalent in the sense that they're the same value but not necessarily the same reference. I only proposed the alternative because I have an easy-ish way to create a node from the desired end result.

There are obviously ways around this on my end; just thought this might interest you.

[mAAdhaTTah]

As an alternative, a configuration option to say outer: true e.g.:

expect(node).to.have.html('<div></div>', { outer: true });

[nathanboktae]

chai makes it really easy to add assertions custom to the domain of the code your testing, like this one I wrote for knockout observables in 6 lines. I would recommend you do that for your library vdom tests.

As an alternative, a configuration option to say outer: true e.g.:

expect(node).to.have.html('<div></div>', { outer: true });

That's a lot less readable English than expect(node.outerHTML).to.equal('<div></div>')

[nathanboktae]

oh @mAAdhaTTah an idea I had for outerHTML would be to use a chain flag:

expect(fooDiv).to.have.outer.html('<div class="foo"></div>')

That's pretty clean.