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 angular#1992

Author: tbosch

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) {
- global[name] = value;
- }
+ setGlobalVar(name: string, value: any) { global[name] = value; }
 }
 
 // based on urlUtils.js in AngularJS 1