Diff only leafs for (big) objects

[jzaefferer]

When comparing big object structures, the current diff output has too much overhead. Comparing each leaf and showing the path, actual, expected (and diff) for just the leave would be much more useful. It won't replace the regular diff, e.g. comparing (long) strings wouldn't profit from this.

In other words, we'd have to find the properties that are different, serialize and diff those, and not output the rest, or at least compress it.

[shivamdixit]

Only outputting properties that are different might become confusing sometimes as the structure of object will not be maintained. Instead we can make the objects collapsible to compress the output of the diff. For example: Can be collapsed to:

When showing the diff, the unchanged properties can be collapsed by default. It will compress the output significantly. We can also have configuration options for it. For example:

• By default collapse only changed properties
• By default collapse all - expected or actual or diff output etc

Possible challenges:

1. Determining which properties have changed. As we are dumping the objects first and then diff-ing them, it might not be straightforward. Maybe we can check the properties which are containing the diff tags <ins> or <del> and make them collapsible. Not sure if it is a good way.
2. The output of objects and other types will have to be handled differently in HTML reporter as strings, int etc won't be "collapsible".

What are your views?

[gibson042]

I think it depends on the case(s) we're trying to improve. Diffs of objects with many properties, which I suspect is a principle pain point, would benefit most from hiding completely-unchanged properties. Deep diffs, on the other hand, would probably benefit more from compressing the structure above changes (e.g., replacing arr: [\n ...,\n {\n ...,\n differs: {\n ... literal representation with ["arr"][N]["differs"]: {\n ... object/array reference notation)... the challenge there being preserving enough context in objects (but probably not arrays) containing the difference.

[gibson042]

That said, I really like the dynamic collapse concept for conditionally showing excess data. But I think it would apply to lists of unchanged properties instead of whole objects/arrays, at least for the "many properties, few diffs" case.

[shivamdixit]

@gibson042 I agree with your point. As dynamic collapsible properties will only "reduce" the output, we can have them along with completely hiding unchanged properties. An option completelyHideProperties can also be provided to the users so that they can decide when to show and when not. We can also have some threshold to determine its default value, if the number of properties are more than maxProperties then set it to true else false. What do you think @jzaefferer ?

[gauravmittal1995]

@shivamdixit I agree with your idea. Last week i thought of doing it like

{ ... {
          a:{diff}
      }
... }

But that created problems, like not determining the depth of the diff, etc. therefore i thought of using something like Github's diff... i.e Hide all the part and only display the ones which are different with the choice of expanding if needed. This is similar to your idea about expanding each array or object with some minor difference.

[Krinkle]

This issue proposes a more generic solution (find differing subtrees) to the issue of long prototypes being diffed, which is separately reported at https://github.com/qunitjs/qunit/issues/1209.

If we end up with the generic solution, that ticket can later be closed. For now, I'm open to either approaches though.