No diff in html report #1348

just-boris · 2014-09-08T20:43:09Z

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>

The text was updated successfully, but these errors were encountered:

NiGhTTraX · 2015-01-07T17:30:37Z

I can confirm this.

callmevlad · 2015-01-08T22:26:49Z

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

chai.config.truncateThreshold = 0;

just-boris · 2015-01-09T13:17:41Z

@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

geowarin · 2015-02-17T16:32:54Z

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

dasilvacontin · 2015-02-17T21:22:43Z

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

CRogers · 2015-03-13T00:01:42Z

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

keithamus · 2015-08-12T12:44:35Z

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?

lydell · 2015-08-15T14:16:30Z

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.

keithamus · 2015-08-16T20:09:14Z

@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.

oveddan · 2015-10-08T21:49:07Z

+1

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.

vvo · 2015-10-14T21:43:42Z

I can work on adding this to the html reporter.

Yes do!

oveddan · 2015-10-20T13:43:53Z

Ok, I'll work on it!

ponelat · 2015-10-20T16:35:40Z

+1

tnrich · 2015-10-26T06:05:55Z

+1 Any workaround for this currently?

ponelat · 2015-10-26T07:49:47Z

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 😄

keithamus · 2015-10-26T10:05:28Z

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.

dead-claudia · 2015-10-30T23:00:28Z

I'm running into the same problem.

boneskull · 2015-10-31T04:52:01Z

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?

dead-claudia · 2015-11-01T06:45:36Z

@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).

lydell · 2015-11-01T07:08:57Z

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

oveddan · 2015-11-14T03:19:49Z

@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?

amir-arad · 2016-03-07T11:05:58Z

👍

HamsterCoder · 2016-03-14T15:01:53Z

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, ...) }

valentin-radulescu-hs · 2016-11-08T13:42:31Z

👍

boneskull · 2017-10-18T03:50:03Z

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.

rugk · 2018-08-10T21:35:51Z

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.

boneskull · 2018-08-10T22:02:44Z

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.

rugk · 2018-08-11T09:16:52Z

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, #3071 is the issue this is blocking, is it?
But actually a PR is already open in #3102.

brian-lagerman · 2019-05-10T14:34:03Z

I'd say diff2html looks promising

A little bit of a sidebar as it's not the default html reporter, but we just pushed out a beta of our new mocha reporter and we integrated diff2html into it. We tore diff2html apart a bit, so that area still needs some clean up, but I'd be interested in what people think. The 'Diff comparison' suite has a couple samples in it.

brucou · 2021-06-13T00:14:21Z

Any news on this? This is closed, but it is still a very valuable feature.

nicbou · 2022-01-21T13:31:40Z

@boneskull, why close this issue? The requirements are fairly clear, fairly popular (see multiple related tickets linked here), and certainly not met. 7 years later people are still coming here to request it.

For those who find this in the distant future, chai.config.truncateThreshold = 0 will fix the issue for chai users.

brucou · 2022-01-21T13:33:38Z

true story

cesarvarela · 2022-06-26T04:23:10Z

(If someone comes here from Cypress, try using nested.include instead. It tells you the property that's different, and after that you can change it back to deep.equal)

boneskull added area: reporters involving a specific reporter Unconfirmed labels Sep 8, 2014

dasilvacontin removed the Unconfirmed label Jan 9, 2015

lydell mentioned this issue Aug 15, 2015

Kill diff support #1832

Closed

keithamus mentioned this issue Sep 24, 2015

Provide friendly error message when deep equality check fails because object has property value of undefined chaijs/chai#304

Closed

oveddan mentioned this issue Oct 20, 2015

deepEqual doesn't always show an object diff chaijs/chai#469

Closed

rosston mentioned this issue Feb 18, 2016

Highlight complex object diff litixsoft/karma-mocha-reporter#32

Closed

keithamus mentioned this issue Apr 14, 2016

Dumping the actual object to console.log when assertion fails chaijs/chai#678

Closed

ScottFreeCode added area: browser browser-specific type: feature enhancement proposal labels Sep 22, 2017

boneskull added the status: accepting prs Mocha can use your help with this one! label Oct 18, 2017

boneskull closed this as completed Oct 18, 2017

keithamus mentioned this issue Jan 15, 2018

Ability to show only changes and deletions in diffs, not additions chaijs/chai#1120

Closed

This was referenced Aug 10, 2018

🚀 Feature: Expose public API for accessing diffs #3011

Closed

mocha: the next big thing #1969

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No diff in html report #1348

No diff in html report #1348

just-boris commented Sep 8, 2014

NiGhTTraX commented Jan 7, 2015

callmevlad commented Jan 8, 2015

just-boris commented Jan 9, 2015

geowarin commented Feb 17, 2015

dasilvacontin commented Feb 17, 2015

CRogers commented Mar 13, 2015

keithamus commented Aug 12, 2015

lydell commented Aug 15, 2015

keithamus commented Aug 16, 2015

oveddan commented Oct 8, 2015

vvo commented Oct 14, 2015

oveddan commented Oct 20, 2015

ponelat commented Oct 20, 2015

tnrich commented Oct 26, 2015

ponelat commented Oct 26, 2015

keithamus commented Oct 26, 2015

dead-claudia commented Oct 30, 2015

boneskull commented Oct 31, 2015

dead-claudia commented Nov 1, 2015

lydell commented Nov 1, 2015

oveddan commented Nov 14, 2015

amir-arad commented Mar 7, 2016

HamsterCoder commented Mar 14, 2016

valentin-radulescu-hs commented Nov 8, 2016

boneskull commented Oct 18, 2017

rugk commented Aug 10, 2018

boneskull commented Aug 10, 2018

rugk commented Aug 11, 2018 •

edited

Loading

brian-lagerman commented May 10, 2019

brucou commented Jun 13, 2021

nicbou commented Jan 21, 2022 •

edited

Loading

brucou commented Jan 21, 2022

cesarvarela commented Jun 26, 2022

No diff in html report #1348

No diff in html report #1348

Comments

just-boris commented Sep 8, 2014

NiGhTTraX commented Jan 7, 2015

callmevlad commented Jan 8, 2015

just-boris commented Jan 9, 2015

geowarin commented Feb 17, 2015

dasilvacontin commented Feb 17, 2015

CRogers commented Mar 13, 2015

keithamus commented Aug 12, 2015

lydell commented Aug 15, 2015

keithamus commented Aug 16, 2015

oveddan commented Oct 8, 2015

vvo commented Oct 14, 2015

oveddan commented Oct 20, 2015

ponelat commented Oct 20, 2015

tnrich commented Oct 26, 2015

ponelat commented Oct 26, 2015

keithamus commented Oct 26, 2015

dead-claudia commented Oct 30, 2015

boneskull commented Oct 31, 2015

dead-claudia commented Nov 1, 2015

lydell commented Nov 1, 2015

oveddan commented Nov 14, 2015

amir-arad commented Mar 7, 2016

HamsterCoder commented Mar 14, 2016

valentin-radulescu-hs commented Nov 8, 2016

boneskull commented Oct 18, 2017

rugk commented Aug 10, 2018

boneskull commented Aug 10, 2018

rugk commented Aug 11, 2018 • edited Loading

brian-lagerman commented May 10, 2019

brucou commented Jun 13, 2021

nicbou commented Jan 21, 2022 • edited Loading

brucou commented Jan 21, 2022

cesarvarela commented Jun 26, 2022

rugk commented Aug 11, 2018 •

edited

Loading

nicbou commented Jan 21, 2022 •

edited

Loading