prettify expression test diff output

mapbox · Apr 6, 2018 · 859d770 · 859d770
1 parent 6ea3a02
commit 859d770
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/test/integration/expression-tests/result_item.html.tmpl b/test/integration/expression-tests/result_item.html.tmpl
@@ -6,7 +6,7 @@
     <td>
         <h2 style="text-align:center; background:<%- r.color %>"><a href="<%- r.group %>/case.json"><%- r.group %>/<%- r.test %> <% if (!r.ok) { %>(<%=r.status%>)<% } %></a></h2>
         <% if (r.error) { %><div>error: <%- r.error.message %></div><% } %>
-        <pre><%- r.difference %></pre>
+        <div style="font-family: monospace; white-space: pre"><%= r.difference %></div>
     </td>
     <td>
         <h2 style="text-align:center; background:<%- r.color %>"><a href="<%- r.group %>/case.json">&nbsp;</a></h2>

diff --git a/test/integration/lib/expression.js b/test/integration/lib/expression.js
@@ -132,29 +132,41 @@ exports.run = function (implementation, options, runExpressionTest) {
 
             params.ok = compileOk && evalOk && recompileOk && roundTripOk && serializationOk;
 
-            let msg = '';
+            const diffOutput = {
+                text: '',
+                html: ''
+            };
 
-            const diffJson = (expectedJson, actualJson) => {
-                return diff.diffJson(expectedJson, actualJson)
-                    .map((hunk) => {
+            const diffJson = (label, expectedJson, actualJson) => {
+                let text = '';
+                let html = '';
+                diff.diffJson(expectedJson, actualJson)
+                    .forEach((hunk) => {
                         if (hunk.added) {
-                            return `+ ${hunk.value}`;
+                            text += `+ ${hunk.value}`;
+                            html += `<ins>  ${hunk.value}</ins>`;
                         } else if (hunk.removed) {
-                            return `- ${hunk.value}`;
+                            text += `- ${hunk.value}`;
+                            html += `<del>  ${hunk.value}</del>`;
                         } else {
-                            return `  ${hunk.value}`;
+                            text += `  ${hunk.value}`;
+                            html += `<span>  ${hunk.value}</span>`;
                         }
-                    })
-                    .join('');
+                    });
+                if (text) {
+                    diffOutput.text += `${label}\n${text}`;
+                    diffOutput.html += `<h3>${label}</h3>\n${html}`;
+                }
             };
+
             if (!compileOk) {
-                msg += diffJson(expected.compiled, result.compiled);
+                diffJson('Compiled', expected.compiled, result.compiled);
             }
             if (compileOk && !serializationOk) {
-                msg += diffJson(expected.serialized, result.serialized);
+                diffJson('Serialized', expected.serialized, result.serialized);
             }
             if (compileOk && !recompileOk) {
-                msg += diffJson(expected.compiled, result.recompiled);
+                diffJson('Serialized and re-compiled', expected.compiled, result.recompiled);
             }
 
             const diffOutputs = (testOutputs) => {
@@ -168,14 +180,14 @@ exports.run = function (implementation, options, runExpressionTest) {
                     .join('\n');
             };
             if (compileOk && !evalOk) {
-                msg += diffOutputs(result.outputs);
+                diffOutputs(result.outputs);
             }
             if (recompileOk && !roundTripOk) {
-                msg += diffOutputs(result.roundTripOutputs);
+                diffOutputs(result.roundTripOutputs);
             }
 
-            params.difference = msg;
-            if (msg) { console.log(msg); }
+            params.difference = diffOutput.html;
+            if (diffOutput.text) { console.log(diffOutput.text); }
 
             params.expression = JSON.stringify(fixture.expression, null, 2);
 

diff --git a/test/integration/results.html.tmpl b/test/integration/results.html.tmpl
@@ -6,6 +6,9 @@
     table td { vertical-align: top; }
     ul { margin-top: 0; }
     .hide { display: none; }
+    del { background-color: #ffeef0; }
+    ins { background-color: #e6ffed; }
+    del,ins { text-decoration: none; }
 </style>
 <script>
   document.addEventListener('mouseover', handleHover);