modules_tests: update test reporting

- log results in a "report" container
  (that way tests can be run using test_in_node script)
- show differences in tables

Author: amroamroamro

tests/extractSourceSpans_test.html

@@ -54,6 +54,10 @@ <h1>Extract Source Spans Test</h1>
   </tr>
 </table>
 
+<hr>
+<h2>Log</h2>
+<div id="report"></div>
+
 <script type="text/javascript">
 setTimeout(function () {
   function stringify(s) {
@@ -63,6 +67,14 @@ <h1>Extract Source Spans Test</h1>
       .replace(/\t/g, '\\t');
   }
 
+  function htmlEscape(s) {
+    return s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  var out = [];
   var testInputs = Array.prototype.slice.call(
     document.getElementsByClassName('testinput'), 0);
   for (var i = 0, n = testInputs.length; i < n; ++i) {
@@ -74,6 +86,8 @@ <h1>Extract Source Spans Test</h1>
     // td.actual
     var actual = testResult.nextSibling;
     while (actual.nodeType !== 1) { actual = actual.nextSibling; }
+    // report
+    out.push('<div class="test">Test ' + (i+1) + ': ');
     try {
       // run function
       var isPreformatted = /pre|xmp/i.test(testInput.tagName);
@@ -94,25 +108,34 @@ <h1>Extract Source Spans Test</h1>
           spanClass += ' break';
         }
         // html formatted
-        actualHtml += '<span class="' + spanClass+ '">' +
-          span.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '<\/span>';
+        actualHtml += '<span class="' + spanClass+ '">' + htmlEscape(span) +
+          '<\/span>';
       }
       actual.innerHTML = '<pre>' + actualHtml + '<\/pre>';
       // compare result against expected
       var goldenText = testResult.innerText || testResult.textContent;
       var goldenNormalized = '"' + goldenText.replace(/(?:\r\n?|\n)$/, '') + '"';
       var actualNormalized = stringify(actualText);
       var passed = actualNormalized === goldenNormalized;
+      // report test result
+      actual.className += passed ? ' ok' : ' failure';
+      out.push((passed ? '\u2713 PASS' : '\u2717 FAIL'), '<\/div>');
       if (!passed) {
-        console.log(goldenNormalized + '\n!==\n' + actualNormalized);
+        out.push(
+          '<table class="diff"><tr><th>Golden<\/th><td><code>' +
+          htmlEscape(goldenNormalized) +
+          '<\/code><\/td><\/tr><tr><th>Actual<\/th><td><code>' +
+          htmlEscape(actualNormalized) +
+          '<\/code><\/td><\/tr><\/table>'
+        );
       }
-      actual.className += passed ? ' ok' : ' failure';
     } catch (ex) {
       actual.className += ' error';
-      actual.appendChild(document.createTextNode(
-        'Error: ' + (ex.message || ex) + '\n' + ex.stack));
+      out.push('\u274C ERROR', '<\/div>');
+      out.push('<pre class="err">', (ex.message || ex), ex.stack, '<\/pre>');
     }
   }
+  document.getElementById('report').innerHTML = out.join('\n');
 }, 0);
 </script>
 

tests/numberLines_test.html

@@ -4,7 +4,6 @@
 <meta charset="utf-8">
 <title>numberLines</title>
 <script src="../js-modules/numberLines.js"></script>
-<script src="https://cdn.rawgit.com/douglascrockford/JSON-js/master/json2.js"></script>
 <script src="shims.js"></script>
 <link rel="stylesheet" type="text/css" href="test_modules.css">
 </head>
@@ -63,13 +62,25 @@ <h1>Number Lines Test</h1>
   </tr>
 </table>
 
+<hr>
+<h2>Log</h2>
+<div id="report"></div>
+
 <script type="text/javascript">
 setTimeout(function () {
   function normListItems(html) {
     // IE likes to leave out </li>s before <li>s.
     return html.replace(/<\/li>(<li\b)/gi, '$1');
   }
 
+  function htmlEscape(s) {
+    return s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  var out = [];
   var testInputs = Array.prototype.slice.call(
     document.getElementsByClassName('testinput'), 0);
   for (var i = 0, n = testInputs.length; i < n; ++i) {
@@ -81,6 +92,8 @@ <h1>Number Lines Test</h1>
     // td.actual
     var actual = testResult.nextSibling;
     while (actual.nodeType !== 1) { actual = actual.nextSibling; }
+    // report
+    out.push('<div class="test">Test ' + (i+1) + ': ');
     try {
       // make a copy of input node (modified in-place)
       var clone = testInput.cloneNode(true);
@@ -95,17 +108,25 @@ <h1>Number Lines Test</h1>
       var goldenNormalized = normListItems(testResult.innerHTML);
       var actualNormalized = normListItems(actual.innerHTML);
       var passed = goldenNormalized === actualNormalized;
+      // report test result
+      actual.className += passed ? ' ok' : ' failure';
+      out.push((passed ? '\u2713 PASS' : '\u2717 FAIL'), '<\/div>');
       if (!passed) {
-        console.log(JSON.stringify(goldenNormalized) + '\n!==\n' +
-          JSON.stringify(actualNormalized));
+        out.push(
+          '<table class="diff"><tr><th>Golden<\/th><td><code>' +
+          htmlEscape(goldenNormalized) +
+          '<\/code><\/td><\/tr><tr><th>Actual<\/th><td><code>' +
+          htmlEscape(actualNormalized) +
+          '<\/code><\/td><\/tr><\/table>'
+        );
       }
-      actual.className += passed ? ' ok' : ' failure';
     } catch (ex) {
       actual.className += ' error';
-      actual.appendChild(document.createTextNode(
-        'Error: ' + (ex.message || ex) + '\n' + ex.stack));
+      out.push('\u274C ERROR', '<\/div>');
+      out.push('<pre class="err">', (ex.message || ex), ex.stack, '<\/pre>');
     }
   }
+  document.getElementById('report').innerHTML = out.join('\n');
 }, 0);
 </script>
 

tests/recombineTagsAndDecorations_test.html

@@ -5,7 +5,6 @@
 <title>recombineTagsAndDecorations</title>
 <script src="../js-modules/extractSourceSpans.js"></script>
 <script src="../js-modules/recombineTagsAndDecorations.js"></script>
-<script src="https://cdn.rawgit.com/douglascrockford/JSON-js/master/json2.js"></script>
 <script src="shims.js"></script>
 <link rel="stylesheet" type="text/css" href="../src/prettify.css">
 <link rel="stylesheet" type="text/css" href="test_modules.css">
@@ -38,8 +37,20 @@ <h1>Recombine Tags And Decorations Test</h1>
   </tr>
 </table>
 
+<hr>
+<h2>Log</h2>
+<div id="report"></div>
+
 <script type="text/javascript">
 setTimeout(function () {
+  function htmlEscape(s) {
+    return s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  var out = [];
   var testInputs = Array.prototype.slice.call(
     document.getElementsByClassName('testinput'), 0);
   for (var i = 0, n = testInputs.length; i < n; ++i) {
@@ -54,6 +65,8 @@ <h1>Recombine Tags And Decorations Test</h1>
     // td.actual
     var actual = testResult.nextSibling;
     while (actual.nodeType !== 1) { actual = actual.nextSibling; }
+    // report
+    out.push('<div class="test">Test ' + (i+1) + ': ');
     try {
       // make a copy of input node (modified in-place)
       var clone = testInput.cloneNode(true);
@@ -77,17 +90,25 @@ <h1>Recombine Tags And Decorations Test</h1>
       recombineTagsAndDecorations(job);
       // compare result against expected
       var passed = testResult.innerHTML === actual.innerHTML;
+      // report test result
+      actual.className += passed ? ' ok' : ' failure';
+      out.push((passed ? '\u2713 PASS' : '\u2717 FAIL'), '<\/div>');
       if (!passed) {
-        console.log(JSON.stringify(testResult.innerHTML) + '\n!==\n' +
-          JSON.stringify(actual.innerHTML));
+        out.push(
+          '<table class="diff"><tr><th>Golden<\/th><td><code>' +
+          htmlEscape(testResult.innerHTML) +
+          '<\/code><\/td><\/tr><tr><th>Actual<\/th><td><code>' +
+          htmlEscape(actual.innerHTML) +
+          '<\/code><\/td><\/tr><\/table>'
+        );
       }
-      actual.className += passed ? ' ok' : ' failure';
     } catch (ex) {
       actual.className += ' error';
-      actual.appendChild(document.createTextNode(
-        'Error: ' + (ex.message || ex)  + '\n' + ex.stack));
+      out.push('\u274C ERROR', '<\/div>');
+      out.push('<pre class="err">', (ex.message || ex), ex.stack, '<\/pre>');
     }
   }
+  document.getElementById('report').innerHTML = out.join('\n');
 }, 0);
 </script>
 

tests/test_modules.css

@@ -64,3 +64,27 @@ td {
   background-color: #ddd;
   border-color: #000;
 }
+
+/* log */
+#report {
+  margin-left: 1em;
+}
+.pass {
+  color: green;
+}
+.fail, .err {
+  color: red;
+}
+
+/* diff tables */
+table.diff {
+  table-layout: fixed;
+  max-width: 100%;
+}
+.diff th {
+  width: 50px;
+}
+.diff td {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}