feat(test): add element probe

Usage: bootstrap the app with the special binding
`ELEMENT_PROBE_CONFIG` from `angular2/debug`.
This will provide a global method `ngProbe(element)` that
will expose a `DebugElement` with directive instances, ... on it.

During tests that use Angular's test injector, the probe is
enabled by default. The `DebugElement ` can be retrieved via the
function `inspectDomElement` of `angular2/debug`. Note
that the `TestComponentBuilder` already returns `DebugElement `s.

Closes #1992

modules/angular2/debug.ts

@@ -0,0 +1,2 @@
+export * from './src/debug/debug_element';
+export {inspectDomElement, ELEMENT_PROBE_CONFIG} from './src/debug/debug_element_view_listener';

modules/angular2/src/debug/debug_element.ts

@@ -0,0 +1,203 @@
+import {Type, isPresent, BaseException, isBlank} from 'angular2/src/facade/lang';
+import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {ElementInjector} from 'angular2/src/core/compiler/element_injector';
+import {AppView} from 'angular2/src/core/compiler/view';
+import {internalView} from 'angular2/src/core/compiler/view_ref';
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+
+import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+
+/**
+ * @exportedAs angular2/test
+ *
+ * An DebugElement contains information from the Angular compiler about an
+ * element and provides access to the corresponding ElementInjector and
+ * underlying dom Element, as well as a way to query for children.
+ */
+export class DebugElement {
+  _elementInjector: ElementInjector;
+
+  constructor(private _parentView: AppView, private _boundElementIndex: number) {
+    this._elementInjector = this._parentView.elementInjectors[this._boundElementIndex];
+  }
+
+  static create(elementRef: ElementRef): DebugElement {
+    return new DebugElement(internalView(elementRef.parentView), elementRef.boundElementIndex);
+  }
+
+  get componentInstance(): any {
+    if (!isPresent(this._elementInjector)) {
+      return null;
+    }
+    return this._elementInjector.getComponent();
+  }
+
+  get dynamicallyCreatedComponentInstance(): any {
+    if (!isPresent(this._elementInjector)) {
+      return null;
+    }
+    return this._elementInjector.getDynamicallyLoadedComponent();
+  }
+
+  get domElement(): any {
+    return resolveInternalDomView(this._parentView.render).boundElements[this._boundElementIndex];
+  }
+
+  getDirectiveInstance(directiveIndex: number): any {
+    return this._elementInjector.getDirectiveAtIndex(directiveIndex);
+  }
+
+  /**
+   * Get child DebugElements from within the Light DOM.
+   *
+   * @return {List<DebugElement>}
+   */
+  get children(): List<DebugElement> {
+    var thisElementBinder = this._parentView.proto.elementBinders[this._boundElementIndex];
+
+    return this._getChildElements(this._parentView, thisElementBinder.index);
+  }
+
+  /**
+   * Get the root DebugElement children of a component. Returns an empty
+   * list if the current DebugElement is not a component root.
+   *
+   * @return {List<DebugElement>}
+   */
+  get componentViewChildren(): List<DebugElement> {
+    var shadowView = this._parentView.componentChildViews[this._boundElementIndex];
+
+    if (!isPresent(shadowView)) {
+      // The current element is not a component.
+      return ListWrapper.create();
+    }
+
+    return this._getChildElements(shadowView, null);
+  }
+
+  triggerEventHandler(eventName, eventObj): void {
+    this._parentView.triggerEventHandlers(eventName, eventObj, this._boundElementIndex);
+  }
+
+  hasDirective(type: Type): boolean {
+    if (!isPresent(this._elementInjector)) {
+      return false;
+    }
+    return this._elementInjector.hasDirective(type);
+  }
+
+  inject(type: Type): any {
+    if (!isPresent(this._elementInjector)) {
+      return null;
+    }
+    return this._elementInjector.get(type);
+  }
+
+  /**
+   * Return the first descendant TestElememt matching the given predicate
+   * and scope.
+   *
+   * @param {Function: boolean} predicate
+   * @param {Scope} scope
+   *
+   * @return {DebugElement}
+   */
+  query(predicate: Function, scope = Scope.all): DebugElement {
+    var results = this.queryAll(predicate, scope);
+    return results.length > 0 ? results[0] : null;
+  }
+
+  /**
+   * Return descendant TestElememts matching the given predicate
+   * and scope.
+   *
+   * @param {Function: boolean} predicate
+   * @param {Scope} scope
+   *
+   * @return {List<DebugElement>}
+   */
+  queryAll(predicate: Function, scope = Scope.all): List<DebugElement> {
+    var elementsInScope = scope(this);
+
+    return ListWrapper.filter(elementsInScope, predicate);
+  }
+
+  _getChildElements(view: AppView, parentBoundElementIndex: number): List<DebugElement> {
+    var els = ListWrapper.create();
+    var parentElementBinder = null;
+    if (isPresent(parentBoundElementIndex)) {
+      parentElementBinder = view.proto.elementBinders[parentBoundElementIndex];
+    }
+    for (var i = 0; i < view.proto.elementBinders.length; ++i) {
+      var binder = view.proto.elementBinders[i];
+      if (binder.parent == parentElementBinder) {
+        ListWrapper.push(els, new DebugElement(view, i));
+
+        var views = view.viewContainers[i];
+        if (isPresent(views)) {
+          ListWrapper.forEach(views.views, (nextView) => {
+            els = ListWrapper.concat(els, this._getChildElements(nextView, null));
+          });
+        }
+      }
+    }
+    return els;
+  }
+}
+
+export function inspectElement(elementRef: ElementRef): DebugElement {
+  return DebugElement.create(elementRef);
+}
+
+/**
+ * @exportedAs angular2/test
+ */
+export class Scope {
+  static all(debugElement): List<DebugElement> {
+    var scope = ListWrapper.create();
+    ListWrapper.push(scope, debugElement);
+
+    ListWrapper.forEach(debugElement.children,
+                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
+
+    ListWrapper.forEach(debugElement.componentViewChildren,
+                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
+
+    return scope;
+  }
+  static light(debugElement): List<DebugElement> {
+    var scope = ListWrapper.create();
+    ListWrapper.forEach(debugElement.children, (child) => {
+      ListWrapper.push(scope, child);
+      scope = ListWrapper.concat(scope, Scope.light(child));
+    });
+    return scope;
+  }
+
+  static view(debugElement): List<DebugElement> {
+    var scope = ListWrapper.create();
+
+    ListWrapper.forEach(debugElement.componentViewChildren, (child) => {
+      ListWrapper.push(scope, child);
+      scope = ListWrapper.concat(scope, Scope.light(child));
+    });
+    return scope;
+  }
+}
+
+/**
+ * @exportedAs angular2/test
+ */
+export class By {
+  static all(): Function { return (debugElement) => true; }
+
+  static css(selector: string): Function {
+    return (debugElement) => { return DOM.elementMatches(debugElement.domElement, selector); };
+  }
+  static directive(type: Type): Function {
+    return (debugElement) => { return debugElement.hasDirective(type); };
+  }
+}

modules/angular2/src/debug/debug_element_view_listener.ts

@@ -0,0 +1,78 @@
+import {
+  CONST_EXPR,
+  isPresent,
+  NumberWrapper,
+  StringWrapper,
+  RegExpWrapper
+} from 'angular2/src/facade/lang';
+import {MapWrapper, Map, ListWrapper, List} from 'angular2/src/facade/collection';
+import {Injectable, bind, Binding} from 'angular2/di';
+import {AppViewListener} from 'angular2/src/core/compiler/view_listener';
+import {AppView} from 'angular2/src/core/compiler/view';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+import {DebugElement} from './debug_element';
+
+const NG_ID_PROPERTY = 'ngid';
+const INSPECT_GLOBAL_NAME = 'ngProbe';
+
+var NG_ID_SEPARATOR_RE = RegExpWrapper.create('#');
+var NG_ID_SEPARATOR = '#';
+
+// Need to keep the views in a global Map so that multiple angular apps are supported
+var _allIdsByView: Map<AppView, number> = CONST_EXPR(MapWrapper.create());
+var _allViewsById: Map<number, AppView> = CONST_EXPR(MapWrapper.create());
+var _nextId = 0;
+
+function _setElementId(element, indices: List<number>) {
+  if (isPresent(element)) {
+    DOM.setData(element, NG_ID_PROPERTY, ListWrapper.join(indices, NG_ID_SEPARATOR));
+  }
+}
+
+function _getElementId(element): List<number> {
+  var elId = DOM.getData(element, NG_ID_PROPERTY);
+  if (isPresent(elId)) {
+    return ListWrapper.map(StringWrapper.split(elId, NG_ID_SEPARATOR_RE),
+                           (partStr) => NumberWrapper.parseInt(partStr, 10));
+  } else {
+    return null;
+  }
+}
+
+export function inspectDomElement(element): DebugElement {
+  var elId = _getElementId(element);
+  if (isPresent(elId)) {
+    var view = MapWrapper.get(_allViewsById, elId[0]);
+    if (isPresent(view)) {
+      return new DebugElement(view, elId[1]);
+    }
+  }
+  return null;
+}
+
+@Injectable()
+export class DebugElementViewListener implements AppViewListener {
+  constructor() { DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectDomElement); }
+
+  viewCreated(view: AppView) {
+    var viewId = _nextId++;
+    MapWrapper.set(_allViewsById, viewId, view);
+    MapWrapper.set(_allIdsByView, view, viewId);
+    var renderView = resolveInternalDomView(view.render);
+    for (var i = 0; i < renderView.boundElements.length; i++) {
+      _setElementId(renderView.boundElements[i], [viewId, i]);
+    }
+  }
+
+  viewDestroyed(view: AppView) {
+    var viewId = MapWrapper.get(_allIdsByView, view);
+    MapWrapper.delete(_allIdsByView, view);
+    MapWrapper.delete(_allViewsById, viewId);
+  }
+}
+
+export var ELEMENT_PROBE_CONFIG = [
+  DebugElementViewListener,
+  bind(AppViewListener).toAlias(DebugElementViewListener),
+];

modules/angular2/src/dom/browser_adapter.ts

@@ -258,9 +258,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   setData(element, name: string, value: string) { element.dataset[name] = value; }
   getData(element, name: string): string { return element.dataset[name]; }
   // TODO(tbosch): move this into a separate environment class once we have it
-  setGlobalVar(name: string, value: any) {
+  setGlobalVar(name: string, value: any) { global[name] = value; }
-    global[name] = value;
-  }
 }
 
 // based on urlUtils.js in AngularJS 1

modules/angular2/src/test_lib/test_component_builder.ts

@@ -6,7 +6,6 @@ import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {ElementInjector} from 'angular2/src/core/compiler/element_injector';
 import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
 import {AppView} from 'angular2/src/core/compiler/view';
 import {internalView} from 'angular2/src/core/compiler/view_ref';
@@ -14,161 +13,18 @@ import {
   DynamicComponentLoader,
   ComponentRef
 } from 'angular2/src/core/compiler/dynamic_component_loader';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
 import {el} from './utils';
 
 import {DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+import {DebugElement} from 'angular2/src/debug/debug_element';
-
-/**
- * @exportedAs angular2/test
- *
- * A TestElement contains information from the Angular compiler about an
- * element and provides access to the corresponding ElementInjector and
- * underlying dom Element, as well as a way to query for children.
- */
-export class TestElement {
-  _elementInjector: ElementInjector;
-
-  constructor(private _parentView: AppView, private _boundElementIndex: number) {
-    this._elementInjector = this._parentView.elementInjectors[this._boundElementIndex];
-  }
-
-  static create(elementRef: ElementRef): TestElement {
-    return new TestElement(internalView(elementRef.parentView), elementRef.boundElementIndex);
-  }
-
-  get componentInstance(): any {
-    if (!isPresent(this._elementInjector)) {
-      return null;
-    }
-    return this._elementInjector.getComponent();
-  }
-
-  get dynamicallyCreatedComponentInstance(): any {
-    if (!isPresent(this._elementInjector)) {
-      return null;
-    }
-    return this._elementInjector.getDynamicallyLoadedComponent();
-  }
-
-  get domElement(): any {
-    return resolveInternalDomView(this._parentView.render).boundElements[this._boundElementIndex];
-  }
-
-  getDirectiveInstance(directiveIndex: number): any {
-    return this._elementInjector.getDirectiveAtIndex(directiveIndex);
-  }
-
-  /**
-   * Get child TestElements from within the Light DOM.
-   *
-   * @return {List<TestElement>}
-   */
-  get children(): List<TestElement> {
-    var thisElementBinder = this._parentView.proto.elementBinders[this._boundElementIndex];
-
-    return this._getChildElements(this._parentView, thisElementBinder.index);
-  }
-
-  /**
-   * Get the root TestElement children of a component. Returns an empty
-   * list if the current TestElement is not a component root.
-   *
-   * @return {List<TestElement>}
-   */
-  get componentViewChildren(): List<TestElement> {
-    var shadowView = this._parentView.componentChildViews[this._boundElementIndex];
-
-    if (!isPresent(shadowView)) {
-      // The current test element is not a component.
-      return ListWrapper.create();
-    }
-
-    return this._getChildElements(shadowView, null);
-  }
-
-  triggerEventHandler(eventName, eventObj): void {
-    this._parentView.triggerEventHandlers(eventName, eventObj, this._boundElementIndex);
-  }
-
-  hasDirective(type: Type): boolean {
-    if (!isPresent(this._elementInjector)) {
-      return false;
-    }
-    return this._elementInjector.hasDirective(type);
-  }
-
-  inject(type: Type): any {
-    if (!isPresent(this._elementInjector)) {
-      return null;
-    }
-    return this._elementInjector.get(type);
-  }
-
-  /**
-   * Return the first descendant TestElememt matching the given predicate
-   * and scope.
-   *
-   * @param {Function: boolean} predicate
-   * @param {Scope} scope
-   *
-   * @return {TestElement}
-   */
-  query(predicate: Function, scope = Scope.all): TestElement {
-    var results = this.queryAll(predicate, scope);
-    return results.length > 0 ? results[0] : null;
-  }
-
-  /**
-   * Return descendant TestElememts matching the given predicate
-   * and scope.
-   *
-   * @param {Function: boolean} predicate
-   * @param {Scope} scope
-   *
-   * @return {List<TestElement>}
-   */
-  queryAll(predicate: Function, scope = Scope.all): List<TestElement> {
-    var elementsInScope = scope(this);
-
-    return ListWrapper.filter(elementsInScope, predicate);
-  }
-
-  _getChildElements(view: AppView, parentBoundElementIndex: number): List<TestElement> {
-    var els = ListWrapper.create();
-    var parentElementBinder = null;
-    if (isPresent(parentBoundElementIndex)) {
-      parentElementBinder = view.proto.elementBinders[parentBoundElementIndex];
-    }
-    for (var i = 0; i < view.proto.elementBinders.length; ++i) {
-      var binder = view.proto.elementBinders[i];
-      if (binder.parent == parentElementBinder) {
-        ListWrapper.push(els, new TestElement(view, i));
-
-        var views = view.viewContainers[i];
-        if (isPresent(views)) {
-          ListWrapper.forEach(views.views, (nextView) => {
-            els = ListWrapper.concat(els, this._getChildElements(nextView, null));
-          });
-        }
-      }
-    }
-    return els;
-  }
-}
-
-export function inspectElement(elementRef: ElementRef): TestElement {
-  return TestElement.create(elementRef);
-}
 
 /**
  * @exportedAs angular2/test
  */
-export class RootTestComponent extends TestElement {
+export class RootTestComponent extends DebugElement {
   _componentRef: ComponentRef;
   _componentParentView: AppView;
 
@@ -187,55 +43,7 @@ export class RootTestComponent extends TestElement {
   destroy(): void { this._componentRef.dispose(); }
 }
 
-/**
+var _nextRootElementId = 0;
- * @exportedAs angular2/test
- */
-export class Scope {
-  static all(testElement): List<TestElement> {
-    var scope = ListWrapper.create();
-    ListWrapper.push(scope, testElement);
-
-    ListWrapper.forEach(testElement.children,
-                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
-
-    ListWrapper.forEach(testElement.componentViewChildren,
-                        (child) => { scope = ListWrapper.concat(scope, Scope.all(child)); });
-
-    return scope;
-  }
-  static light(testElement): List<TestElement> {
-    var scope = ListWrapper.create();
-    ListWrapper.forEach(testElement.children, (child) => {
-      ListWrapper.push(scope, child);
-      scope = ListWrapper.concat(scope, Scope.light(child));
-    });
-    return scope;
-  }
-
-  static view(testElement): List<TestElement> {
-    var scope = ListWrapper.create();
-
-    ListWrapper.forEach(testElement.componentViewChildren, (child) => {
-      ListWrapper.push(scope, child);
-      scope = ListWrapper.concat(scope, Scope.light(child));
-    });
-    return scope;
-  }
-}
-
-/**
- * @exportedAs angular2/test
- */
-export class By {
-  static all(): Function { return (testElement) => true; }
-
-  static css(selector: string): Function {
-    return (testElement) => { return DOM.elementMatches(testElement.domElement, selector); };
-  }
-  static directive(type: Type): Function {
-    return (testElement) => { return testElement.hasDirective(type); };
-  }
-}
 
 /**
  * @exportedAs angular2/test
@@ -331,13 +139,14 @@ export class TestComponentBuilder {
       });
     });
 
-    var rootEl = el('<div id="root"></div>');
+    var rootElId = `root${_nextRootElementId++}`;
+    var rootEl = el(`<div id="${rootElId}"></div>`);
     var doc = this._injector.get(DOCUMENT_TOKEN);
 
     // TODO(juliemr): can/should this be optional?
     DOM.appendChild(doc.body, rootEl);
     return this._injector.get(DynamicComponentLoader)
-        .loadAsRoot(rootComponentType, '#root', this._injector)
+        .loadAsRoot(rootComponentType, `#${rootElId}`, this._injector)
         .then((componentRef) => { return new RootTestComponent(componentRef); });
   }
 }

modules/angular2/src/test_lib/test_injector.ts

@@ -45,6 +45,7 @@ import {FunctionWrapper, Type} from 'angular2/src/facade/lang';
 import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
 import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
+import {ELEMENT_PROBE_CONFIG} from 'angular2/debug';
 import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
 import {RenderCompiler, Renderer} from 'angular2/src/render/api';
 import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
@@ -80,7 +81,6 @@ function _getAppBindings() {
   } catch (e) {
     appDoc = null;
   }
-
   return [
     bind(DOCUMENT_TOKEN)
         .toValue(appDoc),
@@ -96,6 +96,7 @@ function _getAppBindings() {
     AppViewPool,
     AppViewManager,
     AppViewManagerUtils,
+    ELEMENT_PROBE_CONFIG,
     bind(APP_VIEW_POOL_CAPACITY).toValue(500),
     Compiler,
     CompilerCache,

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

@@ -725,9 +725,7 @@ export function main() {
                    var updateHost = injector.get(DirectiveUpdatingHostActions);
 
                    ObservableWrapper.subscribe(updateHost.setAttr, (_) => {
-                     expect(stringifyElement(domElement))
+                     expect(DOM.hasAttribute(domElement, 'update-host-actions')).toBe(true);
-                         .toEqual(
-                             '<div class="ng-binding" key="value" update-host-actions=""></div>');
                      async.done();
                    });
 

modules/angular2/test/debug/debug_element_spec.ts

@@ -0,0 +1,273 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  xdescribe,
+  describe,
+  dispatchEvent,
+  expect,
+  iit,
+  inject,
+  IS_DARTIUM,
+  beforeEachBindings,
+  it,
+  xit,
+  TestComponentBuilder,
+  By,
+  Scope
+} from 'angular2/test_lib';
+
+import {DOM} from 'angular2/src/dom/dom_adapter';
+
+import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
+
+import {Injectable} from 'angular2/di';
+
+import {
+  Directive,
+  Component,
+  View,
+} from 'angular2/annotations';
+
+import {NgFor} from 'angular2/src/directives/ng_for';
+
+@Injectable()
+class Logger {
+  log: List<string>;
+
+  constructor() { this.log = ListWrapper.create(); }
+
+  add(thing: string) { ListWrapper.push(this.log, thing); }
+}
+
+@Directive({selector: '[message]', properties: ['message']})
+@Injectable()
+class MessageDir {
+  logger: Logger;
+
+  constructor(logger: Logger) { this.logger = logger; }
+
+  set message(newMessage) { this.logger.add(newMessage); }
+}
+
+@Component({selector: 'child-comp'})
+@View({
+  template: `<div class="child" message="child">
+               <span class="childnested" message="nestedchild">Child</span>
+             </div>
+             <span class="child">{{childBinding}}</span>`,
+  directives: [MessageDir]
+})
+@Injectable()
+class ChildComp {
+  childBinding: string;
+
+  constructor() { this.childBinding = 'Original'; }
+}
+
+@Component({selector: 'parent-comp', appInjector: [Logger]})
+@View({
+  template: `<div class="parent" message="parent">
+               <span class="parentnested" message="nestedparent">Parent</span>
+             </div>
+             <span class="parent">{{parentBinding}}</span>
+             <child-comp class="child-comp-class"></child-comp>`,
+  directives: [ChildComp, MessageDir]
+})
+@Injectable()
+class ParentComp {
+  parentBinding: string;
+  constructor() { this.parentBinding = 'OriginalParent'; }
+}
+
+@Directive({selector: 'custom-emitter', events: ['myevent']})
+@Injectable()
+class CustomEmitter {
+  myevent: EventEmitter;
+
+  constructor() { this.myevent = new EventEmitter(); }
+}
+
+@Component({selector: 'events-comp'})
+@View({
+  template: `<button (click)="handleClick()"></button>
+             <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
+  directives: [CustomEmitter]
+})
+@Injectable()
+class EventsComp {
+  clicked: boolean;
+  customed: boolean;
+
+  constructor() {
+    this.clicked = false;
+    this.customed = false;
+  }
+
+  handleClick() { this.clicked = true; }
+
+  handleCustom() { this.customed = true; }
+}
+
+@Component({selector: 'using-for', appInjector: [Logger]})
+@View({
+  template: `<span *ng-for="#thing of stuff">{{thing}}</span>
+            <ul message="list">
+              <li *ng-for="#item of stuff">{{item}}</li>
+            </ul>`,
+  directives: [NgFor, MessageDir]
+})
+@Injectable()
+class UsingFor {
+  stuff: List<string>;
+
+  constructor() { this.stuff = ['one', 'two', 'three']; }
+}
+
+export function main() {
+  describe('debug element', function() {
+
+    it('should list component child elements',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.detectChanges();
+
+               var childEls = rootTestComponent.children;
+               // The root is a lone component, and has no children in the light dom.
+               expect(childEls.length).toEqual(0);
+
+               var rootCompChildren = rootTestComponent.componentViewChildren;
+               // The root component has 3 elements in its shadow view.
+               expect(rootCompChildren.length).toEqual(3);
+               expect(DOM.hasClass(rootCompChildren[0].domElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(rootCompChildren[1].domElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(rootCompChildren[2].domElement, 'child-comp-class')).toBe(true);
+
+               var nested = rootCompChildren[0].children;
+               expect(nested.length).toEqual(1);
+               expect(DOM.hasClass(nested[0].domElement, 'parentnested')).toBe(true);
+
+               var childComponent = rootCompChildren[2];
+               expect(childComponent.children.length).toEqual(0);
+
+               var childCompChildren = childComponent.componentViewChildren;
+               expect(childCompChildren.length).toEqual(2);
+               expect(DOM.hasClass(childCompChildren[0].domElement, 'child')).toBe(true);
+               expect(DOM.hasClass(childCompChildren[1].domElement, 'child')).toBe(true);
+
+               var childNested = childCompChildren[0].children;
+               expect(childNested.length).toEqual(1);
+               expect(DOM.hasClass(childNested[0].domElement, 'childnested')).toBe(true);
+
+               async.done();
+             });
+       }));
+
+    it('should list child elements within viewports',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(UsingFor).then((rootTestComponent) => {
+           rootTestComponent.detectChanges();
+
+           var childEls = rootTestComponent.componentViewChildren;
+           // TODO should this count include the <template> element?
+           expect(childEls.length).toEqual(5);
+
+           var list = childEls[4];
+           expect(list.children.length).toEqual(4);
+
+           async.done();
+         });
+       }));
+
+    it('should query child elements',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.detectChanges();
+
+               var childTestEls = rootTestComponent.queryAll(By.directive(MessageDir));
+
+               expect(childTestEls.length).toBe(4);
+               expect(DOM.hasClass(childTestEls[0].domElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(childTestEls[1].domElement, 'parentnested')).toBe(true);
+               expect(DOM.hasClass(childTestEls[2].domElement, 'child')).toBe(true);
+               expect(DOM.hasClass(childTestEls[3].domElement, 'childnested')).toBe(true);
+               async.done();
+             });
+       }));
+
+    it('should query child elements in the light DOM',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.detectChanges();
+
+               var parentEl = rootTestComponent.componentViewChildren[0];
+
+               var childTestEls = parentEl.queryAll(By.directive(MessageDir), Scope.light);
+
+               expect(childTestEls.length).toBe(1);
+               expect(DOM.hasClass(childTestEls[0].domElement, 'parentnested')).toBe(true);
+
+               async.done();
+             });
+       }));
+
+    it('should query child elements in the current component view DOM',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.detectChanges();
+
+               var childTestEls = rootTestComponent.queryAll(By.directive(MessageDir), Scope.view);
+
+               expect(childTestEls.length).toBe(2);
+               expect(DOM.hasClass(childTestEls[0].domElement, 'parent')).toBe(true);
+               expect(DOM.hasClass(childTestEls[1].domElement, 'parentnested')).toBe(true);
+
+               async.done();
+             });
+       }));
+
+    it('should allow injecting from the element injector',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(ParentComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.detectChanges();
+
+               expect(rootTestComponent.componentViewChildren[0].inject(Logger).log)
+                   .toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
+
+               async.done();
+             });
+       }));
+
+    it('should trigger event handlers',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+
+         tcb.createAsync(EventsComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.detectChanges();
+
+               expect(rootTestComponent.componentInstance.clicked).toBe(false);
+               expect(rootTestComponent.componentInstance.customed).toBe(false);
+
+               rootTestComponent.componentViewChildren[0].triggerEventHandler('click', {});
+               expect(rootTestComponent.componentInstance.clicked).toBe(true);
+
+               rootTestComponent.componentViewChildren[1].triggerEventHandler('myevent', {});
+               expect(rootTestComponent.componentInstance.customed).toBe(true);
+
+               async.done();
+             });
+       }));
+  });
+}

modules/angular2/test/debug/debug_element_view_listener_spec.ts

@@ -0,0 +1,82 @@
+import {
+  AsyncTestCompleter,
+  beforeEach,
+  ddescribe,
+  xdescribe,
+  describe,
+  dispatchEvent,
+  expect,
+  iit,
+  inject,
+  IS_DARTIUM,
+  beforeEachBindings,
+  it,
+  xit,
+  TestComponentBuilder,
+  By,
+  Scope,
+  inspectDomElement
+} from 'angular2/test_lib';
+
+import {global} from 'angular2/src/facade/lang';
+import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
+
+import {Injectable, bind} from 'angular2/di';
+
+import {
+  Directive,
+  Component,
+  View,
+} from 'angular2/annotations';
+
+@Component({selector: 'my-comp'})
+@View({directives: []})
+@Injectable()
+class MyComp {
+  ctxProp: string;
+}
+
+export function main() {
+  describe('element probe', function() {
+    beforeEachBindings(() => [bind(APP_VIEW_POOL_CAPACITY).toValue(0)]);
+
+    it('should return a TestElement from a dom element',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+         tcb.overrideTemplate(MyComp, '<div some-dir></div>')
+             .createAsync(MyComp)
+             .then((rootTestComponent) => {
+               expect(inspectDomElement(rootTestComponent.domElement).componentInstance)
+                   .toBeAnInstanceOf(MyComp);
+
+               async.done();
+             });
+       }));
+
+    it('should clean up whent the view is destroyed',
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+         tcb.overrideTemplate(MyComp, '')
+             .createAsync(MyComp)
+             .then((rootTestComponent) => {
+               rootTestComponent.destroy();
+               expect(inspectDomElement(rootTestComponent.domElement)).toBe(null);
+
+               async.done();
+             });
+
+       }));
+
+    if (!IS_DARTIUM) {
+      it('should provide a global function to inspect elements',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
+           tcb.overrideTemplate(MyComp, '')
+               .createAsync(MyComp)
+               .then((rootTestComponent) => {
+                 expect(global['ngProbe'](rootTestComponent.domElement).componentInstance)
+                     .toBeAnInstanceOf(MyComp);
+
+                 async.done();
+               });
+         }));
+    }
+  });
+}

modules/angular2/test/test_lib/test_component_builder_spec.ts

@@ -11,16 +11,10 @@ import {
   IS_DARTIUM,
   beforeEachBindings,
   it,
-  xit
+  xit,
+  TestComponentBuilder
 } from 'angular2/test_lib';
 
-import {TestComponentBuilder, By, Scope} from 'angular2/src/test_lib/test_component_builder';
-
-import {DOM} from 'angular2/src/dom/dom_adapter';
-
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
-
 import {Injectable} from 'angular2/di';
 
 import {
@@ -32,40 +26,13 @@ import {
 import * as viewAnn from 'angular2/src/core/annotations_impl/view';
 
 import {NgIf} from 'angular2/src/directives/ng_if';
-import {NgFor} from 'angular2/src/directives/ng_for';
-
-@Injectable()
-class Logger {
-  log: List<string>;
-
-  constructor() { this.log = ListWrapper.create(); }
-
-  add(thing: string) { ListWrapper.push(this.log, thing); }
-}
-
-@Directive({selector: '[message]', properties: ['message']})
-@Injectable()
-class MessageDir {
-  logger: Logger;
-
-  constructor(logger: Logger) { this.logger = logger; }
-
-  set message(newMessage) { this.logger.add(newMessage); }
-}
 
 @Component({selector: 'child-comp'})
-@View({
+@View({template: `<snap>Original {{childBinding}}</span>`, directives: []})
-  template: `<div class="child" message="child">
-               <span class="childnested" message="nestedchild">Child</span>
-             </div>
-             <span class="child">{{childBinding}}</span>`,
-  directives: [MessageDir]
-})
 @Injectable()
 class ChildComp {
   childBinding: string;
-
+  constructor() { this.childBinding = 'Child'; }
-  constructor() { this.childBinding = 'Original'; }
 }
 
 @Component({selector: 'child-comp'})
@@ -74,80 +41,28 @@ class ChildComp {
 class MockChildComp {
 }
 
-@Component({selector: 'parent-comp', appInjector: [Logger]})
+@Component({selector: 'parent-comp'})
-@View({
+@View({template: `Parent(<child-comp></child-comp>)`, directives: [ChildComp]})
-  template: `<div class="parent" message="parent">
-               <span class="parentnested" message="nestedparent">Parent</span>
-             </div>
-             <span class="parent">{{parentBinding}}</span>
-             <child-comp class="child-comp-class"></child-comp>`,
-  directives: [ChildComp, MessageDir]
-})
 @Injectable()
 class ParentComp {
-  parentBinding: string;
-  constructor() { this.parentBinding = 'OriginalParent'; }
 }
 
 @Component({selector: 'my-if-comp'})
-@View({template: `<span *ng-if="showMore">More</span>`, directives: [NgIf]})
+@View({template: `MyIf(<span *ng-if="showMore">More</span>)`, directives: [NgIf]})
 @Injectable()
 class MyIfComp {
   showMore: boolean = false;
 }
 
-@Directive({selector: 'custom-emitter', events: ['myevent']})
-@Injectable()
-class CustomEmitter {
-  myevent: EventEmitter;
-
-  constructor() { this.myevent = new EventEmitter(); }
-}
-
-@Component({selector: 'events-comp'})
-@View({
-  template: `<button (click)="handleClick()"></button>
-             <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
-  directives: [CustomEmitter]
-})
-@Injectable()
-class EventsComp {
-  clicked: boolean;
-  customed: boolean;
-
-  constructor() {
-    this.clicked = false;
-    this.customed = false;
-  }
-
-  handleClick() { this.clicked = true; }
-
-  handleCustom() { this.customed = true; }
-}
-
-@Component({selector: 'using-for', appInjector: [Logger]})
-@View({
-  template: `<span *ng-for="#thing of stuff">{{thing}}</span>
-            <ul message="list">
-              <li *ng-for="#item of stuff">{{item}}</li>
-            </ul>`,
-  directives: [NgFor, MessageDir]
-})
-@Injectable()
-class UsingFor {
-  stuff: List<string>;
-
-  constructor() { this.stuff = ['one', 'two', 'three']; }
-}
 export function main() {
   describe('test component builder', function() {
     it('should instantiate a component with valid DOM',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
 
-         tcb.createAsync(MockChildComp)
+         tcb.createAsync(ChildComp).then((rootTestComponent) => {
-             .then((rootTestComponent) => {
+           rootTestComponent.detectChanges();
-               var childSpans = DOM.querySelectorAll(rootTestComponent.domElement, 'span');
+
-               expect(DOM.getInnerHTML(childSpans[0])).toEqual('Mock');
+           expect(rootTestComponent.domElement).toHaveText('Original Child');
            async.done();
          });
        }));
@@ -157,135 +72,11 @@ export function main() {
 
          tcb.createAsync(MyIfComp).then((rootTestComponent) => {
            rootTestComponent.detectChanges();
-           var childSpans = DOM.querySelectorAll(rootTestComponent.domElement, 'span');
+           expect(rootTestComponent.domElement).toHaveText('MyIf()');
-           expect(childSpans.length).toEqual(0);
 
            rootTestComponent.componentInstance.showMore = true;
            rootTestComponent.detectChanges();
-           childSpans = DOM.querySelectorAll(rootTestComponent.domElement, 'span');
+           expect(rootTestComponent.domElement).toHaveText('MyIf(More)');
-           expect(childSpans.length).toEqual(1);
-
-           async.done();
-         });
-       }));
-
-    it('should list component child elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var childEls = rootTestComponent.children;
-               // The root is a lone component, and has no children in the light dom.
-               expect(childEls.length).toEqual(0);
-
-               var rootCompChildren = rootTestComponent.componentViewChildren;
-               // The root component has 3 elements in its shadow view.
-               expect(rootCompChildren.length).toEqual(3);
-               expect(DOM.hasClass(rootCompChildren[0].domElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(rootCompChildren[1].domElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(rootCompChildren[2].domElement, 'child-comp-class')).toBe(true);
-
-               var nested = rootCompChildren[0].children;
-               expect(nested.length).toEqual(1);
-               expect(DOM.hasClass(nested[0].domElement, 'parentnested')).toBe(true);
-
-               var childComponent = rootCompChildren[2];
-               expect(childComponent.children.length).toEqual(0);
-
-               var childCompChildren = childComponent.componentViewChildren;
-               expect(childCompChildren.length).toEqual(2);
-               expect(DOM.hasClass(childCompChildren[0].domElement, 'child')).toBe(true);
-               expect(DOM.hasClass(childCompChildren[1].domElement, 'child')).toBe(true);
-
-               var childNested = childCompChildren[0].children;
-               expect(childNested.length).toEqual(1);
-               expect(DOM.hasClass(childNested[0].domElement, 'childnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should list child elements within viewports',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(UsingFor).then((rootTestComponent) => {
-           rootTestComponent.detectChanges();
-
-           var childEls = rootTestComponent.componentViewChildren;
-           // TODO should this count include the <template> element?
-           expect(childEls.length).toEqual(5);
-
-           var list = childEls[4];
-           expect(list.children.length).toEqual(4);
-
-           async.done();
-         });
-       }));
-
-    it('should query child elements',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var childTestEls = rootTestComponent.queryAll(By.directive(MessageDir));
-
-               expect(childTestEls.length).toBe(4);
-               expect(DOM.hasClass(childTestEls[0].domElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(childTestEls[1].domElement, 'parentnested')).toBe(true);
-               expect(DOM.hasClass(childTestEls[2].domElement, 'child')).toBe(true);
-               expect(DOM.hasClass(childTestEls[3].domElement, 'childnested')).toBe(true);
-               async.done();
-             });
-       }));
-
-    it('should query child elements in the light DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var parentEl = rootTestComponent.componentViewChildren[0];
-
-               var childTestEls = parentEl.queryAll(By.directive(MessageDir), Scope.light);
-
-               expect(childTestEls.length).toBe(1);
-               expect(DOM.hasClass(childTestEls[0].domElement, 'parentnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should query child elements in the current component view DOM',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               var childTestEls = rootTestComponent.queryAll(By.directive(MessageDir), Scope.view);
-
-               expect(childTestEls.length).toBe(2);
-               expect(DOM.hasClass(childTestEls[0].domElement, 'parent')).toBe(true);
-               expect(DOM.hasClass(childTestEls[1].domElement, 'parentnested')).toBe(true);
-
-               async.done();
-             });
-       }));
-
-    it('should allow injecting from the element injector',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(ParentComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               expect(rootTestComponent.componentViewChildren[0].inject(Logger).log)
-                   .toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
 
            async.done();
          });
@@ -294,13 +85,11 @@ export function main() {
     it('should override a template',
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
 
-         tcb.overrideTemplate(MockChildComp, '<span>Modified</span>')
+         tcb.overrideTemplate(MockChildComp, '<span>Mock</span>')
              .createAsync(MockChildComp)
              .then((rootTestComponent) => {
                rootTestComponent.detectChanges();
-               var childSpans = DOM.querySelectorAll(rootTestComponent.domElement, 'span');
+               expect(rootTestComponent.domElement).toHaveText('Mock');
-               expect(childSpans.length).toEqual(1);
-               expect(DOM.getInnerHTML(childSpans[0])).toEqual('Modified');
 
                async.done();
              });
@@ -314,9 +103,7 @@ export function main() {
              .createAsync(ChildComp)
              .then((rootTestComponent) => {
                rootTestComponent.detectChanges();
-               var childSpans = DOM.querySelectorAll(rootTestComponent.domElement, 'span');
+               expect(rootTestComponent.domElement).toHaveText('Modified Child');
-               expect(childSpans.length).toEqual(1);
-               expect(DOM.getInnerHTML(childSpans[0])).toEqual('Modified Original');
 
                async.done();
              });
@@ -329,29 +116,7 @@ export function main() {
              .createAsync(ParentComp)
              .then((rootTestComponent) => {
                rootTestComponent.detectChanges();
-               var childSpans = DOM.querySelectorAll(rootTestComponent.domElement, 'span');
+               expect(rootTestComponent.domElement).toHaveText('Parent(Mock)');
-               expect(childSpans.length).toEqual(3);
-               expect(DOM.getInnerHTML(childSpans[2])).toEqual('Mock');
-
-               async.done();
-             });
-       }));
-
-    it('should trigger event handlers',
-       inject([TestComponentBuilder, AsyncTestCompleter], (tcb, async) => {
-
-         tcb.createAsync(EventsComp)
-             .then((rootTestComponent) => {
-               rootTestComponent.detectChanges();
-
-               expect(rootTestComponent.componentInstance.clicked).toBe(false);
-               expect(rootTestComponent.componentInstance.customed).toBe(false);
-
-               rootTestComponent.componentViewChildren[0].triggerEventHandler('click', {});
-               expect(rootTestComponent.componentInstance.clicked).toBe(true);
-
-               rootTestComponent.componentViewChildren[1].triggerEventHandler('myevent', {});
-               expect(rootTestComponent.componentInstance.customed).toBe(true);
 
                async.done();
              });

modules/angular2/test_lib.ts

@@ -1,3 +1,5 @@
 export * from './src/test_lib/test_lib';
 export * from './src/test_lib/utils';
 export * from './src/test_lib/fake_async';
+export * from './src/test_lib/test_component_builder';
+export * from './debug';