More informative pretty-printing of DOM elements

[Finishes ##153562618]

lib/jasmine-core/jasmine.js

@@ -4150,6 +4150,8 @@ getJasmineRequireObj().pp = function(j$) {
         this.emitScalar(value.toString());
       } else if (typeof value === 'function') {
         this.emitScalar('Function');
+      } else if (value.nodeType === 1) {
+        this.emitDomElement(value);
       } else if (typeof value.nodeType === 'number') {
         this.emitScalar('HTMLNode');
       } else if (value instanceof Date) {
@@ -4206,6 +4208,7 @@ getJasmineRequireObj().pp = function(j$) {
   PrettyPrinter.prototype.emitObject = j$.unimplementedMethod_;
   PrettyPrinter.prototype.emitScalar = j$.unimplementedMethod_;
   PrettyPrinter.prototype.emitString = j$.unimplementedMethod_;
+  PrettyPrinter.prototype.emitDomElement = j$.unimplementedMethod_;
 
   function StringPrettyPrinter() {
     PrettyPrinter.call(this);
@@ -4342,6 +4345,18 @@ getJasmineRequireObj().pp = function(j$) {
     this.append(constructorName + ' [ ' + itemsString + ' ]');
   };
 
+  StringPrettyPrinter.prototype.emitDomElement = function(el) {
+    var closingTag = '</' + el.tagName.toLowerCase() + '>';
+
+    if (el.innerHTML === '') {
+      this.append(el.outerHTML.replace(closingTag, ''));
+    } else {
+      var tagEnd = el.outerHTML.indexOf(el.innerHTML);
+      this.append(el.outerHTML.substring(0, tagEnd));
+      this.append('...' + closingTag);
+    }
+  };
+
   StringPrettyPrinter.prototype.formatProperty = function(obj, property, isGetter) {
       this.append(property);
       this.append(': ');

spec/core/matchers/toEqualSpec.js

@@ -534,7 +534,7 @@ describe("toEqual", function() {
 
     var actual = {a: document.createElement('div')},
       expected = {a: document.createElement('p')},
-      message = 'Expected $.a = HTMLNode to equal HTMLNode.';
+      message = 'Expected $.a = <div> to equal <p>.';
 
     expect(compareEquals(actual, expected).message).toEqual(message);
   });
@@ -552,7 +552,7 @@ describe("toEqual", function() {
 
     var actual = {a: nodeA},
       expected = {a: nodeB},
-      message = 'Expected $.a = HTMLNode to equal HTMLNode.';
+      message = 'Expected $.a = <div>...</div> to equal <div>...</div>.';
 
     expect(compareEquals(actual, expected).message).toEqual(message);
   })
@@ -564,7 +564,7 @@ describe("toEqual", function() {
 
     var actual = {a: document.createElement('div')},
       expected = {a: {}},
-      message = 'Expected $.a = HTMLNode to equal Object({  }).';
+      message = 'Expected $.a = <div> to equal Object({  }).';
 
     expect(compareEquals(actual, expected).message).toEqual(message);
   });

spec/html/PrettyPrintHtmlSpec.js

@@ -1,11 +1,23 @@
 describe("jasmineUnderTest.pp (HTML Dependent)", function () {
-  it("should stringify HTML nodes properly", function() {
+  it("should stringify non-element HTML nodes properly", function() {
-    var sampleNode = document.createElement('div');
+    var sampleNode = document.createTextNode("");
-    sampleNode.innerHTML = 'foo<b>bar</b>';
     expect(jasmineUnderTest.pp(sampleNode)).toEqual("HTMLNode");
     expect(jasmineUnderTest.pp({foo: sampleNode})).toEqual("Object({ foo: HTMLNode })");
   });
 
+  it("should stringify empty HTML elements as their opening tags", function () {
+    var simple = document.createElement('div');
+    simple.className = 'foo';
+    expect(jasmineUnderTest.pp(simple)).toEqual('<div class="foo">');
+  });
+
+  it("should stringify non-empty HTML elements as tags with placeholders", function() {
+    var nonEmpty = document.createElement('div');
+    nonEmpty.className = 'foo';
+    nonEmpty.innerHTML = '<p>Irrelevant</p>';
+    expect(jasmineUnderTest.pp(nonEmpty)).toEqual('<div class="foo">...</div>');
+  });
+
   it("should print Firefox's wrapped native objects correctly", function() {
     if(jasmine.getEnv().firefoxVersion) {
       try { new CustomEvent(); } catch(e) { var err = e; };

src/core/PrettyPrinter.js

@@ -32,6 +32,8 @@ getJasmineRequireObj().pp = function(j$) {
         this.emitScalar(value.toString());
       } else if (typeof value === 'function') {
         this.emitScalar('Function');
+      } else if (value.nodeType === 1) {
+        this.emitDomElement(value);
       } else if (typeof value.nodeType === 'number') {
         this.emitScalar('HTMLNode');
       } else if (value instanceof Date) {
@@ -88,6 +90,7 @@ getJasmineRequireObj().pp = function(j$) {
   PrettyPrinter.prototype.emitObject = j$.unimplementedMethod_;
   PrettyPrinter.prototype.emitScalar = j$.unimplementedMethod_;
   PrettyPrinter.prototype.emitString = j$.unimplementedMethod_;
+  PrettyPrinter.prototype.emitDomElement = j$.unimplementedMethod_;
 
   function StringPrettyPrinter() {
     PrettyPrinter.call(this);
@@ -224,6 +227,18 @@ getJasmineRequireObj().pp = function(j$) {
     this.append(constructorName + ' [ ' + itemsString + ' ]');
   };
 
+  StringPrettyPrinter.prototype.emitDomElement = function(el) {
+    var closingTag = '</' + el.tagName.toLowerCase() + '>';
+
+    if (el.innerHTML === '') {
+      this.append(el.outerHTML.replace(closingTag, ''));
+    } else {
+      var tagEnd = el.outerHTML.indexOf(el.innerHTML);
+      this.append(el.outerHTML.substring(0, tagEnd));
+      this.append('...' + closingTag);
+    }
+  };
+
   StringPrettyPrinter.prototype.formatProperty = function(obj, property, isGetter) {
       this.append(property);
       this.append(': ');