Merge pull request #1349 from papandreou/htmlMessage

HTML reporter: Allow the error to contain a formatted HTML error message
mochajs · Jun 5, 2015 · d71a5c6 · d71a5c6
2 parents f3c2a0a + a93f9fe
commit d71a5c6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 12 deletions.
diff --git a/lib/reporters/html.js b/lib/reporters/html.js
@@ -136,23 +136,34 @@ function HTML(runner) {
       var el = fragment('<li class="test pass pending"><h2>%e</h2></li>', test.title);
     } else {
       var el = fragment('<li class="test fail"><h2>%e <a href="%e" class="replay">‣</a></h2></li>', test.title, self.testURL(test));
-      var str = test.err.stack || test.err.toString();
-
-      // FF / Opera do not add the message
-      if (!~str.indexOf(test.err.message)) {
-        str = test.err.message + '\n' + str;
-      }
+      var stackString, // Note: Includes leading newline
+          message = test.err.toString();
 
       // <=IE7 stringifies to [Object Error]. Since it can be overloaded, we
       // check for the result of the stringifying.
-      if ('[object Error]' == str) str = test.err.message;
-
-      // Safari doesn't give you a stack. Let's at least provide a source line.
-      if (!test.err.stack && test.err.sourceURL && test.err.line !== undefined) {
-        str += "\n(" + test.err.sourceURL + ":" + test.err.line + ")";
+      if ('[object Error]' === message) message = test.err.message;
+
+      if (test.err.stack) {
+        var indexOfMessage = test.err.stack.indexOf(test.err.message);
+        if (indexOfMessage === -1) {
+          stackString = test.err.stack;
+        } else {
+          stackString = test.err.stack.substr(test.err.message.length + indexOfMessage);
+        }
+      } else if (test.err.sourceURL && test.err.line !== undefined) {
+        // Safari doesn't give you a stack. Let's at least provide a source line.
+        stackString = "\n(" + test.err.sourceURL + ":" + test.err.line + ")";
       }
 
-      el.appendChild(fragment('<pre class="error">%e</pre>', str));
+      stackString = stackString || '';
+
+      if (test.err.htmlMessage && stackString) {
+        el.appendChild(fragment('<div class="html-error">%s\n<pre class="error">%e</pre></div>', test.err.htmlMessage, stackString));
+      } else if (test.err.htmlMessage) {
+        el.appendChild(fragment('<div class="html-error">%s</div>', test.err.htmlMessage));
+      } else {
+        el.appendChild(fragment('<pre class="error">%e%e</pre>', message, stackString));
+      }
     }
 
     // toggle code

diff --git a/mocha.css b/mocha.css
@@ -136,6 +136,41 @@ body {
   overflow: auto;
 }
 
+#mocha .test .html-error {
+  overflow: auto;
+  color: black;
+  line-height: 1.5;
+  display: block;
+  float: left;
+  clear: left;
+  font: 12px/1.5 monaco, monospace;
+  margin: 5px;
+  padding: 15px;
+  border: 1px solid #eee;
+  max-width: 85%; /*(1)*/
+  max-width: calc(100% - 42px); /*(2)*/
+  max-height: 300px;
+  word-wrap: break-word;
+  border-bottom-color: #ddd;
+  -webkit-border-radius: 3px;
+  -webkit-box-shadow: 0 1px 3px #eee;
+  -moz-border-radius: 3px;
+  -moz-box-shadow: 0 1px 3px #eee;
+  border-radius: 3px;
+}
+
+#mocha .test .html-error pre.error {
+  border: none;
+  -webkit-border-radius: none;
+  -webkit-box-shadow: none;
+  -moz-border-radius: none;
+  -moz-box-shadow: none;
+  padding: 0;
+  margin: 0;
+  margin-top: 18px;
+  max-height: none;
+}
+
 /**
  * (1): approximate for browsers not supporting calc
  * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border)