jest-snapshot: Display change counts in annotation lines (#8982)

* jest-snapshot: Display change counts in annotation lines

* Edit comment

* Update CHANGELOG.md

* Move indicators for change counts from postfix to prefix

* Display with labels if neither quoted string is multiline

* Delete obsolete work-around variable assignment

* Rename Padding variables

CHANGELOG.md

@@ -20,6 +20,7 @@
 - `[jest-get-type]` Add `BigInt` support. ([#8382](https://github.com/facebook/jest/pull/8382))
 - `[jest-matcher-utils]` Add `BigInt` support to `ensureNumbers` `ensureActualIsNumber`, `ensureExpectedIsNumber` ([#8382](https://github.com/facebook/jest/pull/8382))
 - `[jest-runner]` Warn if a worker had to be force exited ([#8206](https://github.com/facebook/jest/pull/8206))
+- `[jest-snapshot]` Display change counts in annotation lines ([#8982](https://github.com/facebook/jest/pull/8982))
 - `[@jest/test-result]` Create method to create empty `TestResult` ([#8867](https://github.com/facebook/jest/pull/8867))
 - `[jest-worker]` [**BREAKING**] Return a promise from `end()`, resolving with the information whether workers exited gracefully ([#8206](https://github.com/facebook/jest/pull/8206))
 

e2e/__tests__/toMatchSnapshot.test.ts

@@ -108,7 +108,9 @@ test('first snapshot fails, second passes', () => {
     writeFiles(TESTS_DIR, {[filename]: template([`'kiwi'`, `'banana'`])});
     const {stderr, exitCode} = runJest(DIR, ['-w=1', '--ci=false', filename]);
     expect(stderr).toMatch('Snapshot name: `snapshots 1`');
-    expect(stderr).toMatch('Snapshot: "apple"\n    Received: "kiwi"');
+    // Match lines separately because empty line has been replaced with space:
+    expect(stderr).toMatch('Snapshot: "apple"');
+    expect(stderr).toMatch('Received: "kiwi"');
     expect(stderr).not.toMatch('1 obsolete snapshot found');
     expect(exitCode).toBe(1);
   }

packages/jest-diff/README.md

@@ -173,8 +173,8 @@ const difference = diffLinesUnified(splitLines0(a), splitLines0(b), options);
 Given an empty string, `splitLines0(b)` returns `[]` an empty array, formatted as no `Received` lines:
 
 ```diff
-- Expected 3
-+ Received 0
+- Expected  - 3
++ Received  + 0
 
 - multi
 - line
@@ -194,8 +194,8 @@ const difference = diffLinesUnified(a.split('\n'), b.split('\n'), options);
 Given an empty string, `b.split('\n')` returns `['']` an array that contains an empty string, formatted as one empty `Received` line, which is **ambiguous** with an empty line:
 
 ```diff
-- Expected 3
-+ Received 1
+- Expected  - 3
++ Received  + 1
 
 - multi
 - line
@@ -220,16 +220,16 @@ You might call this function for case insensitive or Unicode equivalence compari
 import format from 'pretty-format';
 
 const a = {
-  action: 'MOVE_TO',
-  x: 1,
-  y: 2,
+  text: 'Ignore indentation in serialized object',
+  time: '2019-09-19T12:34:56.000Z',
+  type: 'CREATE_ITEM',
 };
 const b = {
-  action: 'MOVE_TO',
   payload: {
-    x: 1,
-    y: 2,
+    text: 'Ignore indentation in serialized object',
+    time: '2019-09-19T12:34:56.000Z',
   },
+  type: 'CREATE_ITEM',
 };
 
 const difference = diffLinesUnified2(
@@ -242,18 +242,18 @@ const difference = diffLinesUnified2(
 );
 ```
 
-The `x` and `y` properties are common, because their only difference is indentation:
+The `text` and `time` properties are common, because their only difference is indentation:
 
 ```diff
 - Expected
 + Received
 
   Object {
-    action: 'MOVE_TO',
 +   payload: Object {
-      x: 1,
-      y: 2,
+      text: 'Ignore indentation in serialized object',
+      time: '2019-09-19T12:34:56.000Z',
 +   },
+    type: 'CREATE_ITEM',
   }
 ```
 
@@ -519,8 +519,8 @@ const difference = diffDefault(a, b, options);
 ```
 
 ```diff
-- Expected  1 -
-+ Received  2 +
+- Expected  - 1
++ Received  + 2
 
   Array [
     "common",

packages/jest-diff/src/__tests__/__snapshots__/diff.test.ts.snap

@@ -34,8 +34,8 @@ exports[`color of text (expanded) 1`] = `
 `;
 
 exports[`context number of lines: -1 (5 default) 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <d>@@ -6,9 +6,9 @@</>
 <d>      4,</>
@@ -51,8 +51,8 @@ exports[`context number of lines: -1 (5 default) 1`] = `
 `;
 
 exports[`context number of lines: 0  1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <y>@@ -11,1 +11,0 @@</>
 <g>-     9,</>
@@ -61,8 +61,8 @@ exports[`context number of lines: 0  1`] = `
 `;
 
 exports[`context number of lines: 1  1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <y>@@ -10,4 +10,4 @@</>
 <d>      8,</>
@@ -73,8 +73,8 @@ exports[`context number of lines: 1  1`] = `
 `;
 
 exports[`context number of lines: 2  1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <y>@@ -9,6 +9,6 @@</>
 <d>      7,</>
@@ -87,8 +87,8 @@ exports[`context number of lines: 2  1`] = `
 `;
 
 exports[`context number of lines: 3.1 (5 default) 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <d>@@ -6,9 +6,9 @@</>
 <d>      4,</>
@@ -104,8 +104,8 @@ exports[`context number of lines: 3.1 (5 default) 1`] = `
 `;
 
 exports[`context number of lines: undefined (5 default) 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <d>@@ -6,9 +6,9 @@</>
 <d>      4,</>
@@ -121,36 +121,36 @@ exports[`context number of lines: undefined (5 default) 1`] = `
 `;
 
 exports[`diffStringsUnified edge cases empty both a and b 1`] = `
-<g>- Expected  0 -</>
-<r>+ Received  0 +</>
+<g>- Expected  - 0</>
+<r>+ Received  + 0</>
 
 
 `;
 
 exports[`diffStringsUnified edge cases empty only a 1`] = `
-<g>- Expected  0 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 0</>
+<r>+ Received  + 1</>
 
 <r>+ one-line string</>
 `;
 
 exports[`diffStringsUnified edge cases empty only b 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  0 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 0</>
 
 <g>- one-line string</>
 `;
 
 exports[`diffStringsUnified edge cases equal both non-empty 1`] = `
-<g>- Expected  0 -</>
-<r>+ Received  0 +</>
+<g>- Expected  - 0</>
+<r>+ Received  + 0</>
 
 <d>  one-line string</>
 `;
 
 exports[`diffStringsUnified edge cases multiline has no common after clean up chaff 1`] = `
-<g>- Expected  2 -</>
-<r>+ Received  2 +</>
+<g>- Expected  - 2</>
+<r>+ Received  + 2</>
 
 <g>- delete</>
 <g>- two</>
@@ -159,16 +159,16 @@ exports[`diffStringsUnified edge cases multiline has no common after clean up ch
 `;
 
 exports[`diffStringsUnified edge cases one-line has no common after clean up chaff 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <g>- delete</>
 <r>+ insert</>
 `;
 
 exports[`falls back to not call toJSON if it throws and then objects have differences 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <d>  Object {</>
 <g>-   "line": 1,</>
@@ -181,8 +181,8 @@ exports[`falls back to not call toJSON if serialization has no differences but t
 <d>Compared values serialize to the same structure.</>
 <d>Printing internal object structure without calling \`toJSON\` instead.</>
 
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <d>  Object {</>
 <g>-   "line": 1,</>
@@ -192,33 +192,33 @@ exports[`falls back to not call toJSON if serialization has no differences but t
 `;
 
 exports[`oneline strings 1`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <g>- ab</>
 <r>+ aa</>
 `;
 
 exports[`oneline strings 2`] = `
-<g>- Expected  1 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 1</>
 
 <g>- 123456789</>
 <r>+ 234567890</>
 `;
 
 exports[`oneline strings 3`] = `
-<g>- Expected  1 -</>
-<r>+ Received  2 +</>
+<g>- Expected  - 1</>
+<r>+ Received  + 2</>
 
 <g>- oneline</>
 <r>+ multi</>
 <r>+ line</>
 `;
 
 exports[`oneline strings 4`] = `
-<g>- Expected  2 -</>
-<r>+ Received  1 +</>
+<g>- Expected  - 2</>
+<r>+ Received  + 1</>
 
 <g>- multi</>
 <g>- line</>
@@ -301,8 +301,8 @@ exports[`options includeChangeCounts false diffStringsUnified 1`] = `
 `;
 
 exports[`options includeChangeCounts true padding diffLinesUnified a has 2 digits 1`] = `
-<g>- Before  10 -</>
-<r>+ After    1 +</>
+<g>- Before  - 10</>
+<r>+ After   +  1</>
 
 <d>  common</>
 <g>- a</>
@@ -319,8 +319,8 @@ exports[`options includeChangeCounts true padding diffLinesUnified a has 2 digit
 `;
 
 exports[`options includeChangeCounts true padding diffLinesUnified b has 2 digits 1`] = `
-<g>- Before   1 -</>
-<r>+ After   10 +</>
+<g>- Before  -  1</>
+<r>+ After   + 10</>
 
 <d>  common</>
 <g>- a</>
@@ -337,8 +337,8 @@ exports[`options includeChangeCounts true padding diffLinesUnified b has 2 digit
 `;
 
 exports[`options includeChangeCounts true padding diffStringsUnified 1`] = `
-<g>- Before  1 -</>
-<r>+ After   1 +</>
+<g>- Before  - 1</>
+<r>+ After   + 1</>
 
 <g>- change <i>from</i></>
 <r>+ change <i>to</i></>

packages/jest-diff/src/printDiffs.ts

@@ -162,16 +162,20 @@ export const printAnnotation = (
     const aCount = String(changeCounts.a);
     const bCount = String(changeCounts.b);
 
-    const aPadding =
-      Math.max(bAnnotation.length - aAnnotation.length, 0) +
-      Math.max(bCount.length - aCount.length, 0);
-    const bPadding =
-      Math.max(aAnnotation.length - bAnnotation.length, 0) +
-      Math.max(aCount.length - bCount.length, 0);
-
-    // Separate annotation from count by padding plus margin of 2 spaces.
-    aRest = ' '.repeat(aPadding + 2) + aCount + ' ' + aIndicator;
-    bRest = ' '.repeat(bPadding + 2) + bCount + ' ' + bIndicator;
+    // Padding right aligns the ends of the annotations.
+    const baAnnotationLengthDiff = bAnnotation.length - aAnnotation.length;
+    const aAnnotationPadding = ' '.repeat(Math.max(0, baAnnotationLengthDiff));
+    const bAnnotationPadding = ' '.repeat(Math.max(0, -baAnnotationLengthDiff));
+
+    // Padding left aligns the ends of the counts.
+    const baCountLengthDiff = bCount.length - aCount.length;
+    const aCountPadding = ' '.repeat(Math.max(0, baCountLengthDiff));
+    const bCountPadding = ' '.repeat(Math.max(0, -baCountLengthDiff));
+
+    aRest =
+      aAnnotationPadding + '  ' + aIndicator + ' ' + aCountPadding + aCount;
+    bRest =
+      bAnnotationPadding + '  ' + bIndicator + ' ' + bCountPadding + bCount;
   }
 
   return (