refactor(migrations): improve tsurge diff helper to simplify output (angular#57961)

Instead of printing the full diff, which may be a super large file or
golden, we only print context around lines with diff. This makes the
diffs much more actionable and readable.

PR Close angular#57961

Author: devversion

packages/core/schematics/migrations/signal-migration/test/BUILD.bazel

@@ -10,9 +10,8 @@ ts_library(
         "golden_test_runner.ts",
     ],
     deps = [
-        "@npm//@types/diff",
+        "//packages/core/schematics/utils/tsurge",
         "@npm//chalk",
-        "@npm//diff",
         "@npm//fast-glob",
     ],
 )

packages/core/schematics/migrations/signal-migration/test/golden_test_runner.ts

@@ -13,9 +13,9 @@
 
 import fs from 'fs';
 import glob from 'fast-glob';
-import * as diff from 'diff';
 import chalk from 'chalk';
 import path from 'path';
+import {diffText} from '../../../utils/tsurge/testing/diff';
 
 const [migratedDir, goldenPath] = process.argv.slice(2);
 const files = glob.sync('**/*', {cwd: migratedDir});
@@ -44,18 +44,7 @@ if (diskGolden !== golden) {
     process.exit(0);
   }
 
-  const goldenDiff = diff.diffChars(diskGolden, golden);
-
-  goldenDiff.forEach((part) => {
-    // green for additions, red for deletions
-    let text = part.added
-      ? chalk.green(part.value)
-      : part.removed
-        ? chalk.red(part.value)
-        : part.value;
-
-    process.stderr.write(text);
-  });
+  process.stderr.write(diffText(diskGolden, golden));
 
   console.error();
   console.error();

packages/core/schematics/utils/tsurge/testing/diff.ts

@@ -13,9 +13,11 @@ import chalk from 'chalk';
  * Diffs the given two strings and creates a human-readable
  * colored diff string.
  */
-export function diffText(expected: string, actual: string): string {
+export function diffText(expected: string, actual: string, diffLineContextRange = 10): string {
+  const redColorCode = chalk.red('ɵɵ').split('ɵɵ')[0];
+  const greenColorCode = chalk.green('ɵɵ').split('ɵɵ')[0];
   const goldenDiff = diff.diffChars(actual, expected);
-  let result = '';
+  let fullResult = '';
 
   for (const part of goldenDiff) {
     // whitespace cannot be highlighted, so we use a tiny indicator character.
@@ -27,8 +29,50 @@ export function diffText(expected: string, actual: string): string {
         ? chalk.red(valueForColor)
         : chalk.reset(part.value);
 
-    result += text;
+    fullResult += text;
+  }
+
+  const lines = fullResult.split(/\n/g);
+  const linesToRender = new Set<number>();
+
+  // Find lines with diff, and include context lines around them.
+  for (const [index, l] of lines.entries()) {
+    if (l.includes(redColorCode) || l.includes(greenColorCode)) {
+      const contextBottom = index - diffLineContextRange;
+      const contextTop = index + diffLineContextRange;
+
+      numbersFromTo(Math.max(0, contextBottom), index).forEach((lineNum) =>
+        linesToRender.add(lineNum),
+      );
+      numbersFromTo(index, Math.min(contextTop, lines.length - 1)).forEach((lineNum) =>
+        linesToRender.add(lineNum),
+      );
+    }
+  }
+
+  let result = '';
+  let previous = -1;
+
+  // Compute full diff text. Add markers if lines were skipped.
+  for (const lineIndex of Array.from(linesToRender).sort()) {
+    if (lineIndex - 1 !== previous) {
+      result += `${chalk.grey('... (lines above) ...')}\n`;
+    }
+    result += `${lines[lineIndex]}\n`;
+    previous = lineIndex;
+  }
+
+  if (previous < lines.length - 1) {
+    result += `${chalk.grey('... (lines below) ...\n')}`;
   }
 
   return result;
 }
+
+function numbersFromTo(start: number, end: number): number[] {
+  const list: number[] = [];
+  for (let i = start; i <= end; i++) {
+    list.push(i);
+  }
+  return list;
+}