Tests: add diffing to test reporter

Close gh-5445

diff --git a/package-lock.json b/package-lock.json
index cf6f3043960a44d5ec59adc3880503fbad7ed16f..13e12e84d8025b1d39b044a69cf6757c0c84a957 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "commitplease": "3.2.0",
         "concurrently": "8.2.2",
         "core-js-bundle": "3.36.0",
+        "diff": "5.2.0",
         "eslint": "8.57.0",
         "eslint-config-jquery": "3.0.2",
         "eslint-plugin-import": "2.29.1",
@@ -843,6 +844,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@prantlf/jsonlint/node_modules/diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "25.0.7",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz",
@@ -2692,9 +2702,9 @@
       }
     },
     "node_modules/diff": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
-      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
       "dev": true,
       "engines": {
         "node": ">=0.3.1"

diff --git a/package.json b/package.json
index c4aed69ec0d875cfd7b98b1a881180de46930a64..b3af56bdc13331fa7c8aadafc0c46ee07f2e98eb 100644 (file)
--- a/package.json
+++ b/package.json
@@ -111,6 +111,7 @@
     "commitplease": "3.2.0",
     "concurrently": "8.2.2",
     "core-js-bundle": "3.36.0",
+    "diff": "5.2.0",
     "eslint": "8.57.0",
     "eslint-config-jquery": "3.0.2",
     "eslint-plugin-import": "2.29.1",

diff --git a/test/runner/reporter.js b/test/runner/reporter.js
index 74417f2fb664f600aa5ec50c40da9a9fc9d317f3..519d7470911910ad5930027347e294531b014955 100644 (file)
--- a/test/runner/reporter.js
+++ b/test/runner/reporter.js
@@ -1,6 +1,7 @@
 import chalk from "chalk";
 import { getBrowserString } from "./lib/getBrowserString.js";
 import { prettyMs } from "./lib/prettyMs.js";
+import * as Diff from "diff";
 
 export function reportTest( test, reportId, { browser, headless } ) {
        if ( test.status === "passed" ) {
@@ -24,12 +25,58 @@ export function reportTest( test, reportId, { browser, headless } ) {
                        message += `\n${ chalk.gray( error.stack ) }`;
                        if ( error.expected && error.actual ) {
                                message += `\nexpected: ${ JSON.stringify( error.expected ) }`;
-                               message += `\nactual: ${ chalk.red( JSON.stringify( error.actual ) ) }`;
+                               message += `\nactual: ${ JSON.stringify( error.actual ) }`;
+                               let diff;
+
+                               if (
+                                       Array.isArray( error.expected ) &&
+                                       Array.isArray( error.actual )
+                               ) {
+
+                                       // Diff arrays
+                                       diff = Diff.diffArrays( error.expected, error.actual );
+                               } else if (
+                                       typeof error.expected === "object" &&
+                                       typeof error.actual === "object"
+                               ) {
+
+                                       // Diff objects
+                                       diff = Diff.diffJson( error.expected, error.actual );
+                               } else if (
+                                       typeof error.expected === "number" &&
+                                       typeof error.expected === "number"
+                               ) {
+
+                                       // Diff numbers directly
+                                       const value = error.actual - error.expected;
+                                       if ( value > 0 ) {
+                                               diff = [ { added: true, value: `+${ value }` } ];
+                                       } else {
+                                               diff = [ { removed: true, value: `${ value }` } ];
+                                       }
+                               } else {
+
+                                       // Diff everything else as characters
+                                       diff = Diff.diffChars( `${ error.expected }`, `${ error.actual }` );
+                               }
+
+                               message += "\n";
+                               message += diff
+                                       .map( ( part ) => {
+                                               if ( part.added ) {
+                                                       return chalk.green( part.value );
+                                               }
+                                               if ( part.removed ) {
+                                                       return chalk.red( part.value );
+                                               }
+                                               return chalk.gray( part.value );
+                                       } )
+                                       .join( "" );
                        }
                }
        }
 
-       console.log( "\n\n" + message );
+       console.log( `\n\n${ message }` );
 
        // Only return failed messages
        if ( test.status === "failed" ) {