Skip to content

Commit 9548c16

Browse files
pedrottimarkcpojer
pedrottimark
authored and
cpojer
committed
Simplify highlight for leading and trailing spaces in jest-diff (#4553)
1 parent 23c1e10 commit 9548c16

File tree

4 files changed

+49
-56
lines changed

4 files changed

+49
-56
lines changed

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ exports[`background color of spaces cyan for inchanged (expanded) 1`] = `
88
<red>+ <p></>
99
<cyan> <span></>
1010
<cyan> following string consists of a space:</>
11-
<cyan> <bgCyan> </></>
12-
<cyan> <bgCyan> </>line has preceding space only</>
13-
<cyan> <bgCyan> </>line has both preceding and following space<bgCyan> </></>
14-
<cyan> line has following space only<bgCyan> </></>
11+
<cyan> <inverse> </></>
12+
<cyan> <inverse> </>line has preceding space only</>
13+
<cyan> <inverse> </>line has both preceding and following space<inverse> </></>
14+
<cyan> line has following space only<inverse> </></>
1515
<cyan> </span></>
1616
<red>+ </p></>
1717
<dim> </div></>"
@@ -24,45 +24,45 @@ exports[`background color of spaces green for removed (expanded) 1`] = `
2424
<dim> <div></>
2525
<dim> <span></>
2626
<green>- following string consists of a space:</>
27-
<green>- <bgGreen> </></>
28-
<green>- <bgGreen> </>line has preceding space only</>
29-
<green>- <bgGreen> </>line has both preceding and following space<bgGreen> </></>
30-
<green>- line has following space only<bgGreen> </></>
27+
<green>- <inverse> </></>
28+
<green>- <inverse> </>line has preceding space only</>
29+
<green>- <inverse> </>line has both preceding and following space<inverse> </></>
30+
<green>- line has following space only<inverse> </></>
3131
<red>+ </>
3232
<dim> </span></>
3333
<dim> </div></>"
3434
`;
3535
36-
exports[`background color of spaces no color for unchanged (expanded) 1`] = `
36+
exports[`background color of spaces red for added (expanded) 1`] = `
3737
"<green>- Expected</>
3838
<red>+ Received</>
3939
4040
<dim> <div></>
41-
<green>- <span></>
42-
<red>+ <p></>
43-
<dim> following string consists of a space:</>
44-
<dim> </>
45-
<dim> line has preceding space only</>
46-
<dim> line has both preceding and following space </>
47-
<dim> line has following space only </>
48-
<green>- </span></>
49-
<red>+ </p></>
41+
<dim> <span></>
42+
<green>- </>
43+
<red>+ following string consists of a space:</>
44+
<red>+ <inverse> </></>
45+
<red>+ <inverse> </>line has preceding space only</>
46+
<red>+ <inverse> </>line has both preceding and following space<inverse> </></>
47+
<red>+ line has following space only<inverse> </></>
48+
<dim> </span></>
5049
<dim> </div></>"
5150
`;
5251
53-
exports[`background color of spaces red for added (expanded) 1`] = `
52+
exports[`background color of spaces yellow for unchanged (expanded) 1`] = `
5453
"<green>- Expected</>
5554
<red>+ Received</>
5655
5756
<dim> <div></>
58-
<dim> <span></>
59-
<green>- </>
60-
<red>+ following string consists of a space:</>
61-
<red>+ <bgRed> </></>
62-
<red>+ <bgRed> </>line has preceding space only</>
63-
<red>+ <bgRed> </>line has both preceding and following space<bgRed> </></>
64-
<red>+ line has following space only<bgRed> </></>
65-
<dim> </span></>
57+
<green>- <span></>
58+
<red>+ <p></>
59+
<dim> following string consists of a space:</>
60+
<dim> <bgYellow> </></>
61+
<dim> <bgYellow> </>line has preceding space only</>
62+
<dim> <bgYellow> </>line has both preceding and following space<bgYellow> </></>
63+
<dim> line has following space only<bgYellow> </></>
64+
<green>- </span></>
65+
<red>+ </p></>
6666
<dim> </div></>"
6767
`;
6868

‎packages/jest-diff/src/__tests__/diff.test.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -741,22 +741,22 @@ describe('background color of spaces', () => {
741741
expect(diff(examples, baseline, unexpanded)).toBe(received);
742742
});
743743
});
744-
describe('no color for unchanged', () => {
745-
const received = diff(examples, unchanged, expanded);
744+
describe('red for added', () => {
745+
const received = diff(baseline, examples, expanded);
746746
test('(expanded)', () => {
747747
expect(received).toMatchSnapshot();
748748
});
749749
test('(unexpanded)', () => {
750-
expect(diff(examples, unchanged, unexpanded)).toBe(received);
750+
expect(diff(baseline, examples, unexpanded)).toBe(received);
751751
});
752752
});
753-
describe('red for added', () => {
754-
const received = diff(baseline, examples, expanded);
753+
describe('yellow for unchanged', () => {
754+
const received = diff(examples, unchanged, expanded);
755755
test('(expanded)', () => {
756756
expect(received).toMatchSnapshot();
757757
});
758758
test('(unexpanded)', () => {
759-
expect(diff(baseline, examples, unexpanded)).toBe(received);
759+
expect(diff(examples, unchanged, unexpanded)).toBe(received);
760760
});
761761
});
762762
});

‎packages/jest-diff/src/diff_strings.js‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -64,23 +64,19 @@ const getColor = (digit: DIFF_DIGIT, onlyIndentationChanged?: boolean) => {
6464
// Do NOT color leading or trailing spaces if original lines are equal:
6565

6666
// Background color for leading or trailing spaces.
67-
const getBgColor = (digit: DIFF_DIGIT) => {
68-
if (digit === -1) {
69-
return chalk.bgGreen; // removed
70-
}
71-
if (digit === 1) {
72-
return chalk.bgRed; // added
73-
}
74-
return chalk.bgCyan; // only indentation changed
75-
};
67+
const getBgColor = (digit: DIFF_DIGIT, onlyIndentationChanged?: boolean) =>
68+
digit === 0 && !onlyIndentationChanged ? chalk.bgYellow : chalk.inverse;
7669

7770
// ONLY trailing if expected value is snapshot or multiline string.
78-
const highlightTrailingWhitespace = (line: string, bgColor: Function): string =>
71+
const highlightTrailingSpaces = (line: string, bgColor: Function): string =>
7972
line.replace(/\s+$/, bgColor('$&'));
8073

8174
// BOTH leading AND trailing if expected value is data structure.
82-
const highlightWhitespace = (line: string, bgColor: Function): string =>
83-
highlightTrailingWhitespace(line.replace(/^\s+/, bgColor('$&')), bgColor);
75+
const highlightLeadingTrailingSpaces = (
76+
line: string,
77+
bgColor: Function,
78+
): string =>
79+
highlightTrailingSpaces(line.replace(/^\s+/, bgColor('$&')), bgColor);
8480

8581
const getAnnotation = (options: ?DiffOptions): string =>
8682
chalk.green('- ' + ((options && options.aAnnotation) || 'Expected')) +
@@ -119,19 +115,16 @@ const formatLine = (
119115
' ' +
120116
// Prepend indentation spaces from original to compared line.
121117
lineOriginal.slice(0, lineOriginal.length - lineCompared.length) +
122-
(digit !== 0 || onlyIndentationChanged
123-
? highlightWhitespace(lineCompared, getBgColor(digit))
124-
: lineCompared),
118+
highlightLeadingTrailingSpaces(
119+
lineCompared,
120+
getBgColor(digit, onlyIndentationChanged),
121+
),
125122
);
126123
}
127124

128125
// Format compared line when expected is snapshot or multiline string.
129126
return getColor(digit)(
130-
char +
131-
' ' +
132-
(digit !== 0
133-
? highlightTrailingWhitespace(lineCompared, getBgColor(digit))
134-
: lineCompared),
127+
char + ' ' + highlightTrailingSpaces(lineCompared, getBgColor(digit)),
135128
);
136129
};
137130

‎packages/pretty-format/src/plugins/convert_ansi.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const toHumanReadableAnsi = text => {
2323
case style.yellow.close:
2424
case style.bgRed.close:
2525
case style.bgGreen.close:
26-
case style.bgCyan.close:
26+
case style.bgYellow.close:
2727
case style.inverse.close:
2828
case style.dim.close:
2929
case style.bold.close:
@@ -46,8 +46,8 @@ const toHumanReadableAnsi = text => {
4646
return '<bgRed>';
4747
case style.bgGreen.open:
4848
return '<bgGreen>';
49-
case style.bgCyan.open:
50-
return '<bgCyan>';
49+
case style.bgYellow.open:
50+
return '<bgYellow>';
5151
case style.inverse.open:
5252
return '<inverse>';
5353
case style.dim.open:

0 commit comments

Comments
 (0)