Mocha: No diff in html report

Created on 8 Sep 2014 · 29Comments · Source: mochajs/mocha

I've created a simple test example using latest [email protected] and [email protected]

describe("a suite", function() {
    it("a spec", function() {
        expect(['a', 'b', 'c']).to.deep.equal(['a', 'x', 'c']);
    });
});

When I am running the test in console, it works good and I see a diff in output
But in browser I can't see a diff.
If need, there is a code of runner.html

<html>
<head>
  <meta charset="utf-8">
  <title>Mocha Tests</title>
  <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
  <div id="mocha"></div>
  <script src="node_modules/chai/chai.js"></script>
  <script src="node_modules/mocha/mocha.js"></script>
  <script>mocha.setup('bdd')</script>
  <script>
    var expect = chai.expect;
    describe("a suite", function() {
      it("a spec", function() {
        expect(['a', 'b', 'c']).to.deep.equal(['a', 'x', 'c']);
      });
    });
    mocha.run();
  </script>
</body>
</html>

browser feature help wanted reporter

Source

just-boris

👍6 ❤3

Most helpful comment

We won't be removing the HTML reporter smile

Great to hear, but then you may need to add these stuff still missing in that reporter.

I was hoping for "let's use module X, because it fulfills all of the requirements," or a proposal to create a module which does.

We don't even have a list of requirements, but aside from this lib, which already has been mentioned, but does not provide HTML support as it seems, there are a lot libraries:

https://github.com/prettydiff/prettydiff/
this, whose demo looks great
this seems to be low level

I'd say diff2html looks promising and up-to-date (it's also easily to embed in a browser), but generally one may also have a look at what GitLab/GitHub/etc. use. They all have this implemented.

@boneskull It's clear you see some missing other stuff about the reporter and more important6 things to do. However, please acknowledge this issue here is valid and unsolved, and as such re-open it. I see no reason why it should be closed. You may mark it as "blocked" indicating no one should/can work on this, but acknowledge the general idea that this is missing.
Then, https://github.com/mochajs/mocha/issues/3071 is the issue this is blocking, is it?
But actually a PR is already open in https://github.com/mochajs/mocha/pull/3102.

rugk on 11 Aug 2018

👍5

All 29 comments

I can confirm this.

NiGhTTraX on 7 Jan 2015

Try changing your chai truncation threshold to disable truncation, like so:

chai.config.truncateThreshold = 0;

callmevlad on 8 Jan 2015

👍2

@callmevlad It helped me, but not solves issue at all.
In console report I see a nice difference between expected and actual result

But in html version I see just two values without any hints

just-boris on 9 Jan 2015

I have the same problem with the tdd ui.
It seems that Assertions are uncaught errors and therefore do not generate the diff...

geowarin on 17 Feb 2015

Wait. Uncaught errors? That's not the same problem as the one mentioned above, right?

dasilvacontin on 17 Feb 2015

I too have this issue. It'd be great to get the diffs in the browser version.

CRogers on 13 Mar 2015

chai.config.truncateThreshold = 0; simply tells chai to render more of the inspected values - it is not a diff, however. Diffing output is handled through the test runner (mocha) not the assertion lib.

The actual problem here is that the HTML reporter literally doesn't show diffs.

The code of how the HTML reporter constructs the failure HTML is between L158-188. It does not check if the error has a diff, and so does not render one. It needs something along the lines of the Base Reporters diff logic (which it does upon summary); around L193-215.

Has the HTML reporter ever shown diffs for anyone?

keithamus on 12 Aug 2015

No, the HTML reporter has never shown diffs. I requested this in #1071, which was recently closed in favour of letting the assertion library do it. So this is actually a duplicate.

lydell on 15 Aug 2015

@lydell I'm not sure it'd make much sense for an assertion library to do diffs, because of the variety of output formats that'd be needed. Mocha's reporters can send coloured escape codes for terminal, and HTML tags for HTML reporting - because a mocha reporter is context aware, assertion libraries are not.

keithamus on 16 Aug 2015

I reported this issue in karma-mocha

In this bit of code:
https://github.com/mochajs/mocha/blob/58e94445beb722372589cbd2a0372bf741e7f0b7/lib/reporters/html.js#L168

The error object can have an expected actual properties with this data. The html runner right now is not leveraging that in its report.

The base runner currently is leveraging it

I can work on adding this to the html reporter.

oveddan on 8 Oct 2015

I can work on adding this to the html reporter.

Yes do!

vvo on 14 Oct 2015

Ok, I'll work on it!

oveddan on 20 Oct 2015

ponelat on 20 Oct 2015

+1 Any workaround for this currently?

tnrich on 26 Oct 2015

I'm using modern-diff to generate little diffs that look like...

dif({a: 1, b: 2, c: 3}, {b: 22, c: 3, d: 4})
/*
[
  ['-', ['a'], 1],
  ['r', ['b'], 2, 22],
  ['+', ['d'], 4]
]
*/

and my own little chai.expect helper for the error message.
Perhaps it'll help you in the mean-time :smile:

ponelat on 26 Oct 2015

In the meantime - if you're using chai - you can set chai.config.truncateThreshold = 0 which disables chai's inspector truncating objects for the error messages. Be warned: this is not a diff, it just shows you every property on an object and so can be pretty messy.

keithamus on 26 Oct 2015

I'm running into the same problem.

isiahmeadows on 31 Oct 2015

Diffing has been an issue for a long time. I would like to leverage a third-party lib (or libs) for this.

Requirements:

colors; console and CSS (could necessitate some ansi-to-css converter)
human-readable output
type-based: intuitive diffs for numbers, strings, objects, functions, Dates, Buffers.
proper handling of strict equality comparisons (though that may be something we would still need to implement); if two objects are otherwise equivalent but are different objects, this should be apparent.

nice to have:

option for machine-readable output (which it looks like modern-diff is doing)
option for GNU diff-style output.

I'm welcome to suggestions for modules that would fulfill the requirements. If nothing exists, maybe we should write one with Mocha in mind?

boneskull on 31 Oct 2015

@boneskull Multiple things on npm that might catch your eye. They simply create a machine-readable diff, which walking the two objects to format it wouldn't be that hard to do (although not quite trivial).

isiahmeadows on 1 Nov 2015

unexpected. js has really nice string and object diffs. Don't know how that's implemented, though. Hopefully in a modular way :)

lydell on 1 Nov 2015

@boneskull there are currently no tests on the html reporter. I'm thinking of adding some. Would you be ok with jsdom being added to the dev dependencies for use in testing the generated html?

oveddan on 14 Nov 2015

:+1:

amir-arad on 7 Mar 2016

👎3

I came from this issue and it's title describes precisely my problem. Using karma/mocha/chai with deepEqual I get the following output in console:

✖ supports predefined proxy PhantomJS 2.1.1 (Linux 0.0.0) expected { Object (url, headers, ...) } to deeply equal { Object (url, headers, ...) }

HamsterCoder on 14 Mar 2016

👍

valentin-radulescu-hs on 8 Nov 2016

👎7 👍1

actually I'm going to kill this because it's not really actionable aside from the continuing lack of tests of the html reporter. if we want better / different diffs, someone should propose something concrete.

boneskull on 18 Oct 2017

👎8

Here is "something concrete":

Do make this:

looks this:

In the browser too. Not only in the console.

How can one be more concrete? It's a missing feature, it's very obvious what "concrete thing" is requested here.

Also I'd say this is the biggest feature Mocha is missing. Not being able to render diffs is a major drawback!

And don't know what you mean by "continuing lack of tests of the html reporter". All reports of this issue likely will test the HTML reporter. And if you don't want to maintain it, remove it, but do not pretend to support it.

rugk on 10 Aug 2018

👍4 😕1

This is what I mean:

The HTML reporter has no code coverage
There have been a couple abortive attempts to do it with our existing testing environment, but we really need functional, Selenium-style tests
Functional tests will require a new toolchain to script a browser
We won't change the HTML reporter until we have coverage
We won't be removing the HTML reporter 😄

"Concrete" refers to the diff implementation itself, which likely won't transfer cleanly from the console to the browser. I was hoping for "let's use module X, because it fulfills all of the requirements," or a proposal to create a module which does.

@rugk It's clear you're frustrated by this missing feature. But please take care not to make condescending comments or place demands on volunteer contributors to this project.

boneskull on 11 Aug 2018

👍1