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
This commit is contained in:
@ -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';
|
||||
|
||||
/**
|
||||
* @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);
|
||||
}
|
||||
import {DebugElement} from 'angular2/src/debug/debug_element';
|
||||
|
||||
/**
|
||||
* @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(); }
|
||||
}
|
||||
|
||||
/**
|
||||
* @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); };
|
||||
}
|
||||
}
|
||||
var _nextRootElementId = 0;
|
||||
|
||||
/**
|
||||
* @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); });
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
|
Reference in New Issue
Block a user