Improve jsDump output with formatted diffs.

jitter · Nov 27, 2010 · bcba4e7 · bcba4e7
1 parent b679be3
commit bcba4e7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/qunit/qunit.css b/qunit/qunit.css
@@ -83,6 +83,39 @@
 	-webkit-box-shadow: inset 0px 2px 13px #999;
 }
 
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: .2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
 /*** Test Counts */
 
 #qunit-tests b.counts                       { color: black; }

diff --git a/qunit/qunit.js b/qunit/qunit.js
@@ -653,10 +653,12 @@ function push(result, actual, expected, message) {
 	message = '<span class="test-message">' + message + "</span>";
 	expected = escapeHtml(QUnit.jsDump.parse(expected));
 	actual = escapeHtml(QUnit.jsDump.parse(actual));
-	var output = message + ', expected: <span class="test-expected">' + expected + '</span>';
+	var output = message + '<table><tr class="test-expected"><th>Expected: </th><td><pre>' + expected + '</pre></td></tr>';
 	if (actual != expected) {
-		output += ' result: <span class="test-actual">' + actual + '</span>, diff: ' + QUnit.diff(expected, actual);
+		output += '<tr class="test-actual"><th>Result: </th><td><pre>' + actual + '</pre></td></tr>';
+		output += '<tr class="test-diff"><th>Diff: </th><td><pre>' + QUnit.diff(expected, actual) +'</pre></td></tr>';
 	}
+	output += "</table>";
 
 	// can't use ok, as that would double-escape messages
 	QUnit.log(result, output);
@@ -1094,8 +1096,8 @@ QUnit.jsDump = (function() {
 			'class':'className'
 		},
 		HTML:false,//if true, entities are escaped ( <, >, \t, space and \n )
-		indentChar:'   ',//indentation unit
-		multiline:false //if true, items in a collection, are separated by a \n, else just a space.
+		indentChar:'  ',//indentation unit
+		multiline:true //if true, items in a collection, are separated by a \n, else just a space.
 	};
 
 	return jsDump;

diff --git a/test/test.js b/test/test.js
@@ -196,11 +196,11 @@ test("each test can extend the module testEnvironment", {
 
 module("jsDump");
 test("jsDump output", function() {
-	equals( QUnit.jsDump.parse([1, 2]), "[ 1, 2 ]" );
-	equals( QUnit.jsDump.parse({top: 5, left: 0}), "{ \"top\": 5, \"left\": 0 }" );
+	equals( QUnit.jsDump.parse([1, 2]), "[\n  1,\n  2\n]" );
+	equals( QUnit.jsDump.parse({top: 5, left: 0}), "{\n  \"top\": 5,\n  \"left\": 0\n}" );
 	if (typeof document !== 'undefined') {
 		equals( QUnit.jsDump.parse(document.getElementById("qunit-header")), "<h1 id=\"qunit-header\"></h1>" );
-		equals( QUnit.jsDump.parse(document.getElementsByTagName("h1")), "[ <h1 id=\"qunit-header\"></h1> ]" );
+		equals( QUnit.jsDump.parse(document.getElementsByTagName("h1")), "[\n  <h1 id=\"qunit-header\"></h1>\n]" );
 	}
 });