search

avik-das / react-dom-assertion

A DOM comparison library intended to make testing React components easier by comparing only the parts that will typically need to be validated in such components.
Other
1 stars 0 forks source link

Provide a visual diff for mismatched inputs #3

Closed avik-das closed 9 years ago

avik-das commented 9 years ago

The prettydiff module supports intelligent XML diffs, so I should look into that.

In case this doesn't work out, it looks like mocha uses the diff module. This would be harder to deal with due to discrepancies between how the expected string is formatted and how the DOM nodes would be stringified.

avik-das commented 9 years ago

It turns out that prettydiff is meant to be used as a web application, so it actually renders HTML as the output! Unless I missed some way of getting some sort of diff object, this rules out the module.

It also turns out that if the error that's thrown contains the showDiff, expected and actual properties, then mocha will automatically show the diff using the diff module. All that's needed is a way to construct the strings that will be compared, and I've been able to do that in a way that's deterministic, so the diffs are looking great!

All that's left is to figure out how to get jest to show the diff at all.

avik-das commented 9 years ago

Just to document the current status, this is what the diff looks like when shown by mocha:

screen shot 2015-06-13 at 10 55 49 am

Jest, or rather Jasmine, doesn't work this way. Instead, I'm going to look into creating a custom matcher with a custom output.

avik-das commented 9 years ago

I didn't bother with providing a nice visual diff when using Jest, but I added a custom matcher that outputs at least the two DOM trees for the purposes of visual inspection. Available in v0.5.3.