Ignore indentation of data structures in jest-diff (#3429)

* Ignore indentation in jest-diff

* Ignore indentation in structuredPatch and test it more

* Fix regression for multiline string from toBe or toEqual

* Add snapshot option and make spacing consistent for --expand

* Ignore indentation only in compareObjects not in snapshots

* Format lines that are equal except for indentation in cyan color

* Edit code after proof reading

* Fix misplaced className prop in React elements test

* Edit code and comments after rereading

* Factor elementSymbol out of diff test cases

* Add tests for color of text and background color of spaces

* Rewrite tests for color to eliminate duplicate snapshots

* Make requested changes especially space in second column

* Edit redundant comments

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

@@ -1,90 +1,172 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`background color of spaces cyan for inchanged (expanded) 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<dim>  <div>
+<red>+   <p></>
+<cyan>      <span></>
+<cyan>        following string consists of a space:</>
+<cyan>        <bgCyan> </></>
+<cyan>        <bgCyan> </>line has preceding space only</>
+<cyan>        <bgCyan> </>line has both preceding and following space<bgCyan> </></>
+<cyan>        line has following space only<bgCyan> </></>
+<cyan>      </span></>
+<red>+   </p></>
+<dim>  </div>"
+`;
+
+exports[`background color of spaces green for removed (expanded) 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<dim>  <div>
+<dim>    <span>
+<green>-     following string consists of a space:</>
+<green>-     <bgGreen> </></>
+<green>-     <bgGreen> </>line has preceding space only</>
+<green>-     <bgGreen> </>line has both preceding and following space<bgGreen> </></>
+<green>-     line has following space only<bgGreen> </></>
+<red>+     </>
+<dim>    </span>
+<dim>  </div>"
+`;
+
+exports[`background color of spaces no color for unchanged (expanded) 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<dim>  <div>
+<green>-   <span></>
+<red>+   <p></>
+<dim>      following string consists of a space:
+<dim>       
+<dim>       line has preceding space only
+<dim>       line has both preceding and following space 
+<dim>      line has following space only 
+<green>-   </span></>
+<red>+   </p></>
+<dim>  </div>"
+`;
+
+exports[`background color of spaces red for added (expanded) 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<dim>  <div>
+<dim>    <span>
+<green>-     </>
+<red>+     following string consists of a space:</>
+<red>+     <bgRed> </></>
+<red>+     <bgRed> </>line has preceding space only</>
+<red>+     <bgRed> </>line has both preceding and following space<bgRed> </></>
+<red>+     line has following space only<bgRed> </></>
+<dim>    </span>
+<dim>  </div>"
+`;
+
 exports[`collapses big diffs to patch format 1`] = `
 "<green>- Expected</>
 <red>+ Received</>
 
 @@ -6,9 +6,9 @@</>
-</><dim>     4,
-<dim>     5,
-<dim>     6,
-<dim>     7,
-<dim>     8,
-<red>+    10,</>
-<dim>     9,
-<green>-    10,</>
-<dim>   ],
-<dim> }"
+</><dim>      4,
+<dim>      5,
+<dim>      6,
+<dim>      7,
+<dim>      8,
+<red>+     10,</>
+<dim>      9,
+<green>-     10,</>
+<dim>    ],
+<dim>  }"
+`;
+
+exports[`color of text (expanded) 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<dim>  Object {
+<dim>    \\"searching\\": \\"\\",
+<green>-   \\"sorting\\": Object {</>
+<red>+   \\"sorting\\": Array [</>
+<red>+     Object {</>
+<cyan>        \\"descending\\": false,</>
+<cyan>        \\"fieldKey\\": \\"what\\",</>
+<cyan>      },</>
+<red>+   ],</>
+<dim>  }"
 `;
 
 exports[`context number of lines: -1 (5 default) 1`] = `
 "<green>- Expected</>
 <red>+ Received</>
 
 @@ -6,9 +6,9 @@</>
-</><dim>     4,
-<dim>     5,
-<dim>     6,
-<dim>     7,
-<dim>     8,
-<red>+    10,</>
-<dim>     9,
-<green>-    10,</>
-<dim>   ],
-<dim> }"
+</><dim>      4,
+<dim>      5,
+<dim>      6,
+<dim>      7,
+<dim>      8,
+<red>+     10,</>
+<dim>      9,
+<green>-     10,</>
+<dim>    ],
+<dim>  }"
 `;
 
 exports[`context number of lines: 0  1`] = `
 "<green>- Expected</>
 <red>+ Received</>
 
 @@ -11,0 +11,1 @@</>
-</><red>+    10,</>
+</><red>+     10,</>
 @@ -12,1 +13,0 @@</>
-</><green>-    10,</>"
+</><green>-     10,</>"
 `;
 
 exports[`context number of lines: 1  1`] = `
 "<green>- Expected</>
 <red>+ Received</>
 
 @@ -10,4 +10,4 @@</>
-</><dim>     8,
-<red>+    10,</>
-<dim>     9,
-<green>-    10,</>
-<dim>   ],"
+</><dim>      8,
+<red>+     10,</>
+<dim>      9,
+<green>-     10,</>
+<dim>    ],"
 `;
 
 exports[`context number of lines: 2  1`] = `
 "<green>- Expected</>
 <red>+ Received</>
 
 @@ -9,6 +9,6 @@</>
-</><dim>     7,
-<dim>     8,
-<red>+    10,</>
-<dim>     9,
-<green>-    10,</>
-<dim>   ],
-<dim> }"
+</><dim>      7,
+<dim>      8,
+<red>+     10,</>
+<dim>      9,
+<green>-     10,</>
+<dim>    ],
+<dim>  }"
 `;
 
 exports[`context number of lines: null (5 default) 1`] = `
 "<green>- Expected</>
 <red>+ Received</>
 
 @@ -6,9 +6,9 @@</>
-</><dim>     4,
-<dim>     5,
-<dim>     6,
-<dim>     7,
-<dim>     8,
-<red>+    10,</>
-<dim>     9,
-<green>-    10,</>
-<dim>   ],
-<dim> }"
+</><dim>      4,
+<dim>      5,
+<dim>      6,
+<dim>      7,
+<dim>      8,
+<red>+     10,</>
+<dim>      9,
+<green>-     10,</>
+<dim>    ],
+<dim>  }"
 `;
 
 exports[`falls back to not call toJSON if objects look identical 1`] = `
@@ -94,11 +176,11 @@ exports[`falls back to not call toJSON if objects look identical 1`] = `
 <green>- Expected</>
 <red>+ Received</>
 
-<dim>  <dim>Object {
-<green>-</> <green>  \\"line\\": 1,</>
-<red>+</> <red>  \\"line\\": 2,</>
-<dim>  <dim>  \\"toJSON\\": [Function toJSON],
-<dim>  <dim>}"
+<dim>  Object {
+<green>-   \\"line\\": 1,</>
+<red>+   \\"line\\": 2,</>
+<dim>    \\"toJSON\\": [Function toJSON],
+<dim>  }"
 `;
 
 exports[`prints a fallback message if two objects truly look identical 1`] = `"<dim>Compared values have no visual difference."`;