Display outer element and trailing newline consistently in jest-diff

[pedrottimark]

Summary

Problem 1: outer element

For example, if component changes to render a sibling element, it also returns an outer element in React 15 and earlier.

• For default unexpanded option, formatHunks function makes sure that strings end with newline. Therefore, it displays an inserted (or deleted) outer element clearly:

+ <header>
    <h1>
      Jest
    </h1>
+   <h2>
+     Delightful Javascript Testing
+   </h2>
+ </header>

• For expand option, formatChunks function doesn’t. Therefore it displays the </h1> end tag of the original outer element unclearly as a pair of deleted and inserted lines:

+ <header>
    <h1>
      Jest
- </h1>
+   </h1>
+   <h2>
+     Delightful Javascript Testing
+   </h2>
+ </header>

Problem 2: presence or absence of trailing newline

A multiline string not enclosed in quotes is hypothetical result from a plugin instead of default result from pretty-format package. It might become more important after #4183

• For default unexpanded option, formatHunks function makes sure that strings end with newline. Therefore, it displays unclearly:

Compared values have no visual difference.

• For expand option, formatChunks function doesn’t. Because it ignores trailing newlines at end of diffs, it displays even more unclearly:

  line 1
  line 2
- line 3
+ line 3

Correct and clear result for deleted (or inserted) newline:

  line 1
  line 2
  line 3
- 

Solution

Because formatHunks and formatChunks ignore one trailing newline always append newline to strings.

You would laugh at how much code I thought to write, before I saw that less is more :)

Test plan

Add tests to specify intended result and prevent regression:

• outside element: 2 unexpanded passed first, 2 expanded failed first
• multiline string without quotes: all 4 failed first

[codecov-io]

Codecov Report

Merging #4520 into master will decrease coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #4520      +/-   ##
==========================================
- Coverage   56.83%   56.82%   -0.02%     
==========================================
  Files         186      186              
  Lines        6306     6304       -2     
  Branches        3        3              
==========================================
- Hits         3584     3582       -2     
  Misses       2721     2721              
  Partials        1        1

Impacted Files	Coverage Δ
packages/jest-diff/src/diff_strings.js	98.86% <100%> (-0.03%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fbacd19...a0468a1. Read the comment docs.

[thymikee]

makes sense

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