visionmedia/mocha — pull request #1349 by papandreou (2014-09-09 08:50:19+00:00)
Title: HTML reporter: Allow the error to contain a formatted HTML error message

For the next version of the [Unexpected](https://github.com/sunesimonsen/unexpected/tree/v5) assertion library we're focusing on adding colored object diffs to error messages in "deep equal" and related cases. We have reached the limits of mocha's current approach with serializing `err.actual` and `err.expected` as JSON and then doing a line-based diff. It imposes too many restrictions on the quality of the output, especially when attempting to shoehorn other types of nested diffs (eg. binary `Buffer` or `Uint8Array`) into the resulting output.

Also, we have implemented a [lightweight type system](https://github.com/sunesimonsen/unexpected/blob/v5/lib/types.js) that allows "userland" to introduce new types and control exactly how they they equal, inspect and diff. It's awkward to make that interoperate with the test framework rendering the diffs.

When running in node.js nothing is preventing us from omitting `err.actual` and `err.expected` and including an ansi-colored diff in `err.message`. We have that working fine already. We also want this to work in the browser, though, where mocha currently doesn't render diffs at all for some reason. We found that the simplest way of accomplishing that in mocha-land is for the HTML reporter to look for an HTML-formatted message on the error object and use it if available.

We have implemented it here: https://github.com/papandreou/mocha/tree/htmlMessage

What do you think, is this something you would consider merging in?

Alternatively, the type system and all formatting of output could be adopted by mocha and maybe other test runners, but we're afraid that would be a premature standardization that would make it too cumbersome to iterate the concept further.

Here's a showcase of some of the diffs we have implemented so far (we temporarily removed the scrollbars for a better overview):

![unexpectedobjectdiff](https://cloud.githubusercontent.com/assets/373545/4198830/39e5f006-37fe-11e4-8ddc-ff166d56bf56.png)

![unexpectedhexdiff](https://cloud.githubusercontent.com/assets/373545/4198831/3ea44b24-37fe-11e4-9fde-a3e749220857.png)

![unexpectedfunction](https://cloud.githubusercontent.com/assets/373545/4198833/42c14400-37fe-11e4-9b42-688511a8c50f.png)