jest-diff: Add changeColor and patchColor options (#8911)

* jest-diff: Add changeColor and patchColor options * Edit comment * Update CHANGELOG.md * Fix prettier lint error in README.md * Replace 4 occurrences of change with changed * Replace 4 occurrences of change with changed correctly this time
jestjs · Sep 5, 2019 · 8e197c6 · 8e197c6
1 parent a055df8
commit 8e197c6
Show file tree

Hide file tree

Showing 14 changed files with 444 additions and 310 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - `[jest-diff]` Add options for colors and symbols ([#8841](https://github.com/facebook/jest/pull/8841))
 - `[jest-diff]` [**BREAKING**] Export as ECMAScript module ([#8873](https://github.com/facebook/jest/pull/8873))
 - `[jest-diff]` Add `includeChangeCounts` and rename `Indicator` options ([#8881](https://github.com/facebook/jest/pull/8881))
+- `[jest-diff]` Add `changeColor` and `patchColor` options ([#8911](https://github.com/facebook/jest/pull/8911))
 - `[jest-runner]` Warn if a worker had to be force exited ([#8206](https://github.com/facebook/jest/pull/8206))
 - `[@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))

diff --git a/packages/jest-diff/README.md b/packages/jest-diff/README.md
@@ -91,7 +91,7 @@ const difference = diffStringsUnified(a, b);
 The returned **string** consists of:
 
 - annotation lines: describe the two change indicators with labels, and a blank line
-- comparison lines: similar to “unified” view on GitHub, and **changed substrings** have **inverted** foreground and background colors (which the following example does not show)
+- comparison lines: similar to “unified” view on GitHub, and **changed substrings** have **inverse** foreground and background colors (which the following example does not show)
 
 ```diff
 - Expected
@@ -212,20 +212,22 @@ For other applications, you can provide an options object as a third argument:
 
 ### Properties of options object
 
-| name                  | default       |
-| :-------------------- | :------------ |
-| `aAnnotation`         | `'Expected'`  |
-| `aColor`              | `chalk.green` |
-| `aIndicator`          | `'-'`         |
-| `bAnnotation`         | `'Received'`  |
-| `bColor`              | `chalk.red`   |
-| `bIndicator`          | `'+'`         |
-| `commonColor`         | `chalk.dim`   |
-| `commonIndicator`     | `' '`         |
-| `contextLines`        | `5`           |
-| `expand`              | `true`        |
-| `includeChangeCounts` | `false`       |
-| `omitAnnotationLines` | `false`       |
+| name                  | default         |
+| :-------------------- | :-------------- |
+| `aAnnotation`         | `'Expected'`    |
+| `aColor`              | `chalk.green`   |
+| `aIndicator`          | `'-'`           |
+| `bAnnotation`         | `'Received'`    |
+| `bColor`              | `chalk.red`     |
+| `bIndicator`          | `'+'`           |
+| `changeColor`         | `chalk.inverse` |
+| `commonColor`         | `chalk.dim`     |
+| `commonIndicator`     | `' '`           |
+| `contextLines`        | `5`             |
+| `expand`              | `true`          |
+| `includeChangeCounts` | `false`         |
+| `omitAnnotationLines` | `false`         |
+| `patchColor`          | `chalk.yellow`  |
 
 ### Example of options for labels
 
@@ -240,7 +242,7 @@ const options = {
 
 The `jest-diff` package does not assume that the 2 labels have equal length.
 
-### Example of options for colors
+### Example of options for colors of changed lines
 
 For consistency with most diff tools, you might exchange the colors:
 
@@ -253,15 +255,31 @@ const options = {
 };
 ```
 
-### Example of option to keep the default color
+### Example of option for color of changed substrings
+
+Although the default inverse of foreground and background colors is hard to beat for changed substrings **within lines**, especially because it highlights spaces, if you want bold font weight on yellow background:
+
+```js
+const options = {
+  changeColor: chalk.bold.bgAnsi256(226), // #ffff00
+};
+```
+
+### Example of options for no colors
 
 The value of a color option is a function, which given a string, returns a string.
 
-For common lines to keep the default (usually black) color, you might provide an identity function:
+To store the difference in a file without escape codes for colors, provide an identity function:
 
 ```js
+const identity = string => string;
+
 const options = {
-  commonColor: line => line,
+  aColor: identity,
+  bColor: identity,
+  changeColor: identity,
+  commonColor: identity,
+  patchColor: identity,
 };
 ```
 
@@ -293,9 +311,20 @@ const options = {
 
 A patch mark like `@@ -12,7 +12,9 @@` accounts for omitted common lines.
 
+### Example of option for color of patch marks
+
+If you want patch marks to have the same dim color as common lines:
+
+```js
+const options = {
+  expand: false,
+  patchColor: chalk.dim,
+};
+```
+
 ### Example of option to include change counts
 
-To display the number of change lines at the right of annotation lines:
+To display the number of changed lines at the right of annotation lines:
 
 ```js
 const a = ['change from', 'common'];

diff --git a/packages/jest-diff/src/__tests__/__snapshots__/diff.test.ts.snap b/packages/jest-diff/src/__tests__/__snapshots__/diff.test.ts.snap
@@ -103,7 +103,7 @@ exports[`context number of lines: -1 (5 default) 1`] = `
 "<green>- Expected  1 -</>
 <red>+ Received  1 +</>
 
-<yellow>@@ -6,9 +6,9 @@</>
+<dim>@@ -6,9 +6,9 @@</>
 <dim>      4,</>
 <dim>      5,</>
 <dim>      6,</>
@@ -156,7 +156,7 @@ exports[`context number of lines: 3.1 (5 default) 1`] = `
 "<green>- Expected  1 -</>
 <red>+ Received  1 +</>
 
-<yellow>@@ -6,9 +6,9 @@</>
+<dim>@@ -6,9 +6,9 @@</>
 <dim>      4,</>
 <dim>      5,</>
 <dim>      6,</>
@@ -173,7 +173,7 @@ exports[`context number of lines: undefined (5 default) 1`] = `
 "<green>- Expected  1 -</>
 <red>+ Received  1 +</>
 
-<yellow>@@ -6,9 +6,9 @@</>
+<dim>@@ -6,9 +6,9 @@</>
 <dim>      4,</>
 <dim>      5,</>
 <dim>      6,</>
@@ -322,6 +322,17 @@ exports[`options 7980 diffStringsUnified 1`] = `
 <green>+ \`\${Ti.App.<inverse>getN</>ame<inverse>()</>} \${Ti.App.<inverse>getV</>ersion<inverse>()</>} \${Ti.Platform.<inverse>getN</>ame<inverse>()</>} \${Ti.Platform.<inverse>getV</>ersion<inverse>()</>}\`</>"
 `;
 
+exports[`options change color diffStringsUnified 1`] = `
+"<green>- Expected</>
+<red>+ Received</>
+
+<green>- delete</>
+<green>- changed <bold>from</></>
+<red>+ changed <bold>to</></>
+<red>+ insert</>
+<dim>  common</>"
+`;
+
 exports[`options change indicators diff 1`] = `
 "<green>< Expected</>
 <red>> Received</>