jest-snapshot: Ignore indentation for most serialized objects

[pedrottimark]

Summary

Fixes #8626

Call diffLinesUnified2 to compare without indentation:

• add optional indent arg to serialize received without indentation
• call dedentLines heuristic to remove indentation from snapshot

Fall back to baseline diffLinesUnified in edge case of multi-line strings:

• text node child of markup element
• key or value of object property
• item of array

Test plan

• added 17 tests to new dedent.test.ts
• added 5 snapshots to printSnapshot.test.ts (although my eyes have already adjusted to magenta and teal in console, <m> and <t> in snapshots will take a while longer)

See also pictures in following comment

Example pictures baseline at left and improved at right

[pedrottimark]

delete lines when depth decreases in markup:

insert lines when depth increases in markup:

delete lines when depth decreases in object:

insert lines when depth increases in object:

alphabetical order of keys in object affects diff:

fall back to baseline if text node is multi-line string:

[SimenB]

This is so good, I continue to be amazed over how much you're able to do with these matchers. Great job! 👏

Question, does this also work for inline snapshots? I'd assume so, but since we already mess with indentation in them, I thought I'd ask.

Another q - should GlobalConfig.expand show more (full) diff?

[thymikee]

<3

[thymikee]

There's quite a bunch of repetition in these tests. It's quite readable and I don't say it's bad. However, have you considered using test.each where it makes sense (e.g. for smaller inputs)?

[pedrottimark]

Oh yeah, super suggestion!

[pedrottimark]

Here is a picture to answer 2 questions:

• Thank you for reminding me to show an inline snapshot
• CLI option affects common lines: default --no-expand at left and --expand at right

Many thanks Simen and Michał for patient review of so many prerequisite pull requests to reduce complexity so that we can spend some where it makes a difference (pardon pun :)

[SimenB]

Thoughts on some sort of gutter indicator whitespace is not highlighted when expand? The diff will be there if people do git diff afterwards so maybe it makes sense when they've asked for larger diff?
Maybe not though! Feel free to merge when you're happy 🙂

[pedrottimark]

@SimenB You mean a visual hint where indentation differs, but lines are considered common?

I used cyan instead of dim for non-snapshot matchers, but deleted it in the jest-diff refactor:

• because as you say, default --no-expand option omits those lines
• vague intuition told me we might need the color for another purpose ;)

Just to stretch our imaginations, this problem would have been solved automatically for markup, if the plugins did not indent tags but did indent the additional lines of multi-line text nodes:

<div>
<pre
  className="language-js"
>
  for (key in foo) {
    if (Object.prototype.hasOwnProperty.call(foo, key)) {
      doSomething(key);
    }
  }
</pre>
</div>

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.