feat(test_lib): add method to compare stringified DOM element

Closes #2106

modules/angular2/src/facade/collection.dart

@@ -172,8 +172,12 @@ class ListWrapper {
     l.removeRange(from, to);
     return sub;
   }
-  static void sort(List l, compareFn(a, b)) {
-    l.sort(compareFn);
+  static void sort(List l, [compareFn(a, b) = null]) {
+    if (compareFn == null) {
+      l.sort();
+    } else {
+      l.sort(compareFn);
+    }
   }
 
   // JS splice, slice, fill functions can take start < 0 which indicates a position relative to

modules/angular2/src/facade/collection.ts

@@ -1,4 +1,4 @@
-import {isJsObject, global} from 'angular2/src/facade/lang';
+import {isJsObject, global, isPresent} from 'angular2/src/facade/lang';
 
 export var List = global.Array;
 export var Map = global.Map;
@@ -231,7 +231,13 @@ export class ListWrapper {
     return l.slice(from, to === null ? undefined : to);
   }
   static splice<T>(l: List<T>, from: int, length: int): List<T> { return l.splice(from, length); }
-  static sort<T>(l: List<T>, compareFn: (a: T, b: T) => number) { l.sort(compareFn); }
+  static sort<T>(l: List<T>, compareFn?: (a: T, b: T) => number) {
+    if (isPresent(compareFn)) {
+      l.sort(compareFn);
+    } else {
+      l.sort();
+    }
+  }
 }
 
 export function isListLikeIterable(obj): boolean {

modules/angular2/src/test_lib/utils.ts

@@ -1,6 +1,6 @@
-import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 import {DOM} from 'angular2/src/dom/dom_adapter';
-import {isPresent, RegExpWrapper, StringWrapper, RegExp} from 'angular2/src/facade/lang';
+import {isPresent, isString, RegExpWrapper, StringWrapper, RegExp} from 'angular2/src/facade/lang';
 import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
 
 export class Log {
@@ -59,3 +59,45 @@ export function normalizeCSS(css: string): string {
                                        (match) => `[${match[1]}="${match[2]}"]`);
   return css;
 }
+
+var _singleTagWhitelist = ['br', 'hr', 'input'];
+export function stringifyElement(el): string {
+  var result = '';
+  if (DOM.isElementNode(el)) {
+    var tagName = StringWrapper.toLowerCase(DOM.tagName(el));
+
+    // Opening tag
+    result += `<${tagName}`;
+
+    // Attributes in an ordered way
+    var attributeMap = DOM.attributeMap(el);
+    var keys = ListWrapper.create();
+    MapWrapper.forEach(attributeMap, (v, k) => { ListWrapper.push(keys, k); });
+    ListWrapper.sort(keys);
+    for (let i = 0; i < keys.length; i++) {
+      var key = keys[i];
+      var attValue = MapWrapper.get(attributeMap, key);
+      if (!isString(attValue)) {
+        result += ` ${key}`;
+      } else {
+        result += ` ${key}="${attValue}"`;
+      }
+    }
+    result += '>';
+
+    // Children
+    var children = DOM.childNodes(DOM.templateAwareRoot(el));
+    for (let j = 0; j < children.length; j++) {
+      result += stringifyElement(children[j]);
+    }
+
+    // Closing tag
+    if (!ListWrapper.contains(_singleTagWhitelist, tagName)) {
+      result += `</${tagName}>`;
+    }
+  } else {
+    result += DOM.getText(el);
+  }
+
+  return result;
+}

modules/angular2/test/core/compiler/integration_spec.ts

@@ -13,7 +13,8 @@ import {
   beforeEachBindings,
   it,
   xit,
-  containsRegexp
+  containsRegexp,
+  stringifyElement
 } from 'angular2/test_lib';
 
 
@@ -724,9 +725,9 @@ export function main() {
                    var updateHost = injector.get(DirectiveUpdatingHostActions);
 
                    ObservableWrapper.subscribe(updateHost.setAttr, (_) => {
-                     expect(DOM.getOuterHTML(domElement))
+                     expect(stringifyElement(domElement))
                          .toEqual(
-                             '<div update-host-actions="" class="ng-binding" key="value"></div>');
+                             '<div class="ng-binding" key="value" update-host-actions=""></div>');
                      async.done();
                    });
 

modules/angular2/test/render/dom/compiler/view_splitter_spec.ts

@@ -1,4 +1,13 @@
-import {describe, beforeEach, it, expect, iit, ddescribe, el} from 'angular2/test_lib';
+import {
+  describe,
+  beforeEach,
+  it,
+  expect,
+  iit,
+  ddescribe,
+  el,
+  stringifyElement
+} from 'angular2/test_lib';
 import {MapWrapper} from 'angular2/src/facade/collection';
 
 import {ViewSplitter} from 'angular2/src/render/dom/compiler/view_splitter';
@@ -21,10 +30,10 @@ export function main() {
         var rootElement = el('<div><template if="true">a</template></div>');
         var results = createPipeline().process(rootElement);
 
-        expect(DOM.getOuterHTML(results[1].element))
-            .toEqual('<template if="true" class="ng-binding"></template>');
+        expect(stringifyElement(results[1].element))
+            .toEqual('<template class="ng-binding" if="true"></template>');
         expect(results[1].isViewRoot).toBe(false);
-        expect(DOM.getOuterHTML(results[2].element)).toEqual('<template>a</template>');
+        expect(stringifyElement(results[2].element)).toEqual('<template>a</template>');
         expect(results[2].isViewRoot).toBe(true);
       });
 
@@ -38,7 +47,7 @@ export function main() {
         var rootElement = el('<div></div>');
         var results = createPipeline().process(rootElement);
         expect(results.length).toBe(1);
-        expect(DOM.getOuterHTML(rootElement)).toEqual('<div></div>');
+        expect(stringifyElement(rootElement)).toEqual('<div></div>');
       });
 
       it('should copy over the elementDescription', () => {
@@ -60,7 +69,7 @@ export function main() {
         expect(results[2].inheritedProtoView)
             .toBe(results[1].inheritedElementBinder.nestedProtoView);
         expect(results[2].inheritedProtoView.type).toBe(ProtoViewDto.EMBEDDED_VIEW_TYPE);
-        expect(DOM.getOuterHTML(results[2].inheritedProtoView.rootElement))
+        expect(stringifyElement(results[2].inheritedProtoView.rootElement))
             .toEqual('<template>a</template>');
       });
 
@@ -73,9 +82,9 @@ export function main() {
         var originalChild = rootElement.childNodes[0];
         var results = createPipeline().process(rootElement);
         expect(results[0].element).toBe(rootElement);
-        expect(DOM.getOuterHTML(results[0].element))
+        expect(stringifyElement(results[0].element))
             .toEqual('<div><template class="ng-binding"></template></div>');
-        expect(DOM.getOuterHTML(results[2].element)).toEqual('<span template=""></span>');
+        expect(stringifyElement(results[2].element)).toEqual('<span template=""></span>');
         expect(results[2].element).toBe(originalChild);
       });
 
@@ -87,7 +96,7 @@ export function main() {
         expect(results[0].element).toBe(rootElement);
         expect(results[0].isViewRoot).toBe(true);
         expect(results[2].isViewRoot).toBe(true);
-        expect(DOM.getOuterHTML(results[0].element))
+        expect(stringifyElement(results[0].element))
             .toEqual('<template><template class="ng-binding"></template></template>');
         expect(results[2].element).toBe(originalChild);
       });
@@ -147,7 +156,7 @@ export function main() {
         expect(results[2].inheritedProtoView).not.toBe(null);
         expect(results[2].inheritedProtoView)
             .toBe(results[1].inheritedElementBinder.nestedProtoView);
-        expect(DOM.getOuterHTML(results[2].inheritedProtoView.rootElement))
+        expect(stringifyElement(results[2].inheritedProtoView.rootElement))
             .toEqual('<span template=""></span>');
       });
 
@@ -160,9 +169,9 @@ export function main() {
         var originalChild = rootElement.childNodes[0];
         var results = createPipeline().process(rootElement);
         expect(results[0].element).toBe(rootElement);
-        expect(DOM.getOuterHTML(results[0].element))
+        expect(stringifyElement(results[0].element))
             .toEqual('<div><template class="ng-binding" ng-if=""></template></div>');
-        expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *ng-if=""></span>');
+        expect(stringifyElement(results[2].element)).toEqual('<span *ng-if=""></span>');
         expect(results[2].element).toBe(originalChild);
       });
 
@@ -180,7 +189,7 @@ export function main() {
         expect(results[0].element).toBe(rootElement);
         expect(results[0].isViewRoot).toBe(true);
         expect(results[2].isViewRoot).toBe(true);
-        expect(DOM.getOuterHTML(results[0].element))
+        expect(stringifyElement(results[0].element))
             .toEqual('<template><template class="ng-binding" foo=""></template></template>');
         expect(results[2].element).toBe(originalChild);
       });
@@ -233,7 +242,7 @@ export function main() {
         expect(results[2].inheritedProtoView).not.toBe(null);
         expect(results[2].inheritedProtoView)
             .toBe(results[1].inheritedElementBinder.nestedProtoView);
-        expect(DOM.getOuterHTML(results[2].inheritedProtoView.rootElement))
+        expect(stringifyElement(results[2].inheritedProtoView.rootElement))
             .toEqual('<span *foo=""></span>');
       });
 

modules/angular2/test/render/dom/shadow_dom/light_dom_spec.ts

@@ -7,7 +7,8 @@ import {
   iit,
   SpyObject,
   el,
-  proxy
+  proxy,
+  stringifyElement
 } from 'angular2/test_lib';
 import {IMPLEMENTS, isBlank, isPresent} from 'angular2/src/facade/lang';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
@@ -228,5 +229,5 @@ export function main() {
 
 function toHtml(nodes) {
   if (isBlank(nodes)) return [];
-  return ListWrapper.map(nodes, DOM.getOuterHTML);
+  return ListWrapper.map(nodes, stringifyElement);
 }