iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(debug): replace DebugElement with new Debug DOM 

Now, using `ng.probe(element)` in the browser console returns
a DebugElement when in dev mode.

`ComponentFixture#debugElement` also returns a new DebugElement.

Breaking Change:

This is a breaking change for unit tests. The API for the DebugElement
has changed. Now, there is a DebugElement or DebugNode for every node
in the DOM, not only nodes with an ElementRef. `componentViewChildren` is
removed, and `childNodes` is a list of ElementNodes corresponding to every
child in the DOM. `query` no longer takes a scope parameter, since
the entire rendered DOM is included in the `childNodes`.

Before:

```
componentFixture.debugElement.componentViewChildren[0];
```

After
```
// Depending on the DOM structure of your component, the
// index may have changed or the first component child
// may be a sub-child.
componentFixture.debugElement.children[0];
```

Before:

```
debugElement.query(By.css('div'), Scope.all());
```

After:

```
debugElement.query(By.css('div'));
```

Before:

```
componentFixture.debugElement.elementRef;
```

After:

```
componentFixture.elementRef;
```
This commit is contained in:
Julie Ralph 2016-01-13 21:35:21 -08:00 committed by Alex Eagle
parent ae7d2ab515
commit e1bf3d33f8
45 changed files with 1243 additions and 1220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/angular2/core.dart
View File

@ -15,7 +15,7 @@ export './src/core/application_tokens.dart' show APP_ID,
export './src/core/zone.dart';
export './src/core/render.dart';
export './src/core/linker.dart';
export './src/core/debug/debug_element.dart' show DebugElement,
export './src/core/debug/debug_node.dart' show DebugElement,
Scope,
inspectElement,
asNativeElements;

7
modules/angular2/core.ts
View File

@ -20,12 +20,7 @@ export {
export * from './src/core/zone';
export * from './src/core/render';
export * from './src/core/linker';
export {
DebugElement,
Scope,
inspectElement,
asNativeElements
} from './src/core/debug/debug_element';
export {DebugElement, asNativeElements} from './src/core/debug/debug_node';
export * from './src/core/testability/testability';
export * from './src/core/change_detection';
export * from './src/core/platform_directives_and_pipes';

12
modules/angular2/examples/core/debug/ts/debug_element/debug_element.ts
View File

@ -1,16 +1,8 @@
import {DebugElement, Scope} from 'angular2/core';
import {DebugElement} from 'angular2/core';
var debugElement: DebugElement;
var predicate;
// #docregion scope_all
debugElement.query(predicate, Scope.all);
// #enddocregion
// #docregion scope_light
debugElement.query(predicate, Scope.light);
// #enddocregion
// #docregion scope_view
debugElement.query(predicate, Scope.view);
debugElement.query(predicate);
// #enddocregion

8
modules/angular2/examples/platform/dom/debug/ts/by/by.ts
View File

@ -1,17 +1,17 @@
import {By} from 'angular2/platform/browser';
import {DebugElement, Scope} from 'angular2/core';
import {DebugElement} from 'angular2/core';
var debugElement: DebugElement;
class MyDirective {}
// #docregion by_all
debugElement.query(By.all(), Scope.all);
debugElement.query(By.all());
// #enddocregion
// #docregion by_css
debugElement.query(By.css('[attribute]'), Scope.all);
debugElement.query(By.css('[attribute]'));
// #enddocregion
// #docregion by_directive
debugElement.query(By.directive(MyDirective), Scope.all);
debugElement.query(By.directive(MyDirective));
// #enddocregion

2
modules/angular2/platform/browser.ts
View File

@ -1,8 +1,8 @@
export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
export {
BROWSER_PROVIDERS,
ELEMENT_PROBE_BINDINGS,
ELEMENT_PROBE_PROVIDERS,
ELEMENT_PROBE_PROVIDERS_PROD_MODE,
inspectNativeElement,
BrowserDomAdapter,
By,

2
modules/angular2/platform/browser_static.ts
View File

@ -1,8 +1,8 @@
export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
export {
BROWSER_PROVIDERS,
ELEMENT_PROBE_BINDINGS,
ELEMENT_PROBE_PROVIDERS,
ELEMENT_PROBE_PROVIDERS_PROD_MODE,
inspectNativeElement,
BrowserDomAdapter,
By,

2
modules/angular2/platform/common_dom.ts
View File

@ -12,4 +12,4 @@ export {
EventManagerPlugin
} from 'angular2/src/platform/dom/events/event_manager';
export * from 'angular2/src/platform/dom/debug/by';
export * from 'angular2/src/platform/dom/debug/debug_element_view_listener';
export * from 'angular2/src/platform/dom/debug/ng_probe';

2
modules/angular2/src/core/application_common_providers.ts
View File

@ -15,7 +15,6 @@ import {ResolvedMetadataCache} from 'angular2/src/core/linker/resolved_metadata_
import {AppViewManager} from './linker/view_manager';
import {AppViewManager_} from "./linker/view_manager";
import {ViewResolver} from './linker/view_resolver';
import {AppViewListener} from './linker/view_listener';
import {DirectiveResolver} from './linker/directive_resolver';
import {PipeResolver} from './linker/pipe_resolver';
import {Compiler} from './linker/compiler';
@ -32,7 +31,6 @@ export const APPLICATION_COMMON_PROVIDERS: Array<Type | Provider | any[]> = CONS
APP_ID_RANDOM_PROVIDER,
ResolvedMetadataCache,
new Provider(AppViewManager, {useClass: AppViewManager_}),
AppViewListener,
ViewResolver,
new Provider(IterableDiffers, {useValue: defaultIterableDiffers}),
new Provider(KeyValueDiffers, {useValue: defaultKeyValueDiffers}),

248
modules/angular2/src/core/debug/debug_element.ts
View File

@ -1,248 +0,0 @@
import {Type, isPresent, isBlank} from 'angular2/src/facade/lang';
import {ListWrapper, MapWrapper, Predicate} from 'angular2/src/facade/collection';
import {unimplemented} from 'angular2/src/facade/exceptions';
import {AppElement} from 'angular2/src/core/linker/element';
import {AppView} from 'angular2/src/core/linker/view';
import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
/**
* A 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.
*
* A DebugElement can be obtained from a {@link ComponentFixture} or from an
* {@link ElementRef} via {@link inspectElement}.
*/
export abstract class DebugElement {
/**
* Return the instance of the component associated with this element, if any.
*/
get componentInstance(): any { return unimplemented(); };
/**
* Return the native HTML element for this DebugElement.
*/
get nativeElement(): any { return unimplemented(); };
/**
* Return an Angular {@link ElementRef} for this element.
*/
get elementRef(): ElementRef { return unimplemented(); };
/**
* Get the directive active for this element with the given index, if any.
*/
abstract getDirectiveInstance(directiveIndex: number): any;
/**
* Get child DebugElements from within the Light DOM.
*
* @return {DebugElement[]}
*/
get children(): DebugElement[] { return unimplemented(); };
/**
* Get the root DebugElement children of a component. Returns an empty
* list if the current DebugElement is not a component root.
*
* @return {DebugElement[]}
*/
get componentViewChildren(): DebugElement[] { return unimplemented(); };
/**
* Simulate an event from this element as if the user had caused
* this event to fire from the page.
*/
abstract triggerEventHandler(eventName: string, eventObj: Event): void;
/**
* Check whether the element has a directive with the given type.
*/
abstract hasDirective(type: Type): boolean;
/**
* Inject the given type from the element injector.
*/
abstract inject(type: Type): any;
/**
* Read a local variable from the element (e.g. one defined with `#variable`).
*/
abstract getLocal(name: string): any;
/**
* Return the first descendant TestElement matching the given predicate
* and scope.
*
* @param {Function: boolean} predicate
* @param {Scope} scope
*
* @return {DebugElement}
*/
query(predicate: Predicate<DebugElement>, scope: Function = 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 {DebugElement[]}
*/
queryAll(predicate: Predicate<DebugElement>, scope: Function = Scope.all): DebugElement[] {
var elementsInScope: any[] = scope(this);
return elementsInScope.filter(predicate);
}
}
export class DebugElement_ extends DebugElement {
constructor(private _appElement: AppElement) { super(); }
get componentInstance(): any {
if (!isPresent(this._appElement)) {
return null;
}
return this._appElement.getComponent();
}
get nativeElement(): any { return this.elementRef.nativeElement; }
get elementRef(): ElementRef { return this._appElement.ref; }
getDirectiveInstance(directiveIndex: number): any {
return this._appElement.getDirectiveAtIndex(directiveIndex);
}
get children(): DebugElement[] {
return this._getChildElements(this._appElement.parentView, this._appElement);
}
get componentViewChildren(): DebugElement[] {
if (!isPresent(this._appElement.componentView)) {
// The current element is not a component.
return [];
}
return this._getChildElements(this._appElement.componentView, null);
}
triggerEventHandler(eventName: string, eventObj: Event): void {
this._appElement.parentView.triggerEventHandlers(eventName, eventObj,
this._appElement.proto.index);
}
hasDirective(type: Type): boolean {
if (!isPresent(this._appElement)) {
return false;
}
return this._appElement.hasDirective(type);
}
inject(type: Type): any {
if (!isPresent(this._appElement)) {
return null;
}
return this._appElement.get(type);
}
getLocal(name: string): any { return this._appElement.parentView.locals.get(name); }
/** @internal */
_getChildElements(view: AppView, parentAppElement: AppElement): DebugElement[] {
var els = [];
for (var i = 0; i < view.appElements.length; ++i) {
var appEl = view.appElements[i];
if (appEl.parent == parentAppElement) {
els.push(new DebugElement_(appEl));
var views = appEl.nestedViews;
if (isPresent(views)) {
views.forEach(
(nextView) => { els = els.concat(this._getChildElements(nextView, null)); });
}
}
}
return els;
}
}
/**
* Returns a {@link DebugElement} for an {@link ElementRef}.
*
* @param {ElementRef}: elementRef
* @return {DebugElement}
*/
export function inspectElement(elementRef: ElementRef): DebugElement {
return new DebugElement_((<ElementRef_>elementRef).internalElement);
}
/**
* Maps an array of {@link DebugElement}s to an array of native DOM elements.
*/
export function asNativeElements(arr: DebugElement[]): any[] {
return arr.map((debugEl) => debugEl.nativeElement);
}
/**
* Set of scope functions used with {@link DebugElement}'s query functionality.
*/
export class Scope {
/**
* Scope queries to both the light dom and view of an element and its
* children.
*
* ## Example
*
* {@example core/debug/ts/debug_element/debug_element.ts region='scope_all'}
*/
static all(debugElement: DebugElement): DebugElement[] {
var scope = [];
scope.push(debugElement);
debugElement.children.forEach(child => scope = scope.concat(Scope.all(child)));
debugElement.componentViewChildren.forEach(child => scope = scope.concat(Scope.all(child)));
return scope;
}
/**
* Scope queries to the light dom of an element and its children.
*
* ## Example
*
* {@example core/debug/ts/debug_element/debug_element.ts region='scope_light'}
*/
static light(debugElement: DebugElement): DebugElement[] {
var scope = [];
debugElement.children.forEach(child => {
scope.push(child);
scope = scope.concat(Scope.light(child));
});
return scope;
}
/**
* Scope queries to the view of an element of its children.
*
* ## Example
*
* {@example core/debug/ts/debug_element/debug_element.ts region='scope_view'}
*/
static view(debugElement: DebugElement): DebugElement[] {
var scope = [];
debugElement.componentViewChildren.forEach(child => {
scope.push(child);
scope = scope.concat(Scope.light(child));
});
return scope;
}
}

171
modules/angular2/src/core/debug/debug_node.ts Normal file
View File

@ -0,0 +1,171 @@
import {isPresent} from 'angular2/src/facade/lang';
import {Predicate} from 'angular2/src/facade/collection';
import {Injector} from 'angular2/src/core/di';
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {RenderDebugInfo} from 'angular2/src/core/render/api';
export class EventListener { constructor(public name: string, public callback: Function){}; }
export class DebugNode {
nativeNode: any;
listeners: EventListener[];
parent: DebugElement;
providerTokens: any[];
locals: Map<string, any>;
injector: Injector;
componentInstance: any;
constructor(nativeNode: any, parent: DebugNode) {
this.nativeNode = nativeNode;
if (isPresent(parent) && parent instanceof DebugElement) {
parent.addChild(this);
} else {
this.parent = null;
}
this.listeners = [];
this.providerTokens = [];
}
setDebugInfo(info: RenderDebugInfo) {
this.injector = info.injector;
this.providerTokens = info.providerTokens;
this.locals = info.locals;
this.componentInstance = info.component;
}
inject(token: any): any { return this.injector.get(token); }
getLocal(name: string): any { return this.locals.get(name); }
}
export class DebugElement extends DebugNode {
name: string;
properties: Map<string, any>;
attributes: Map<string, any>;
childNodes: DebugNode[];
nativeElement: any;
constructor(nativeNode: any, parent: any) {
super(nativeNode, parent);
this.properties = new Map<string, any>();
this.attributes = new Map<string, any>();
this.childNodes = [];
this.nativeElement = nativeNode;
}
addChild(child: DebugNode) {
if (isPresent(child)) {
this.childNodes.push(child);
child.parent = this;
}
}
removeChild(child: DebugNode) {
var childIndex = this.childNodes.indexOf(child);
if (childIndex !== -1) {
child.parent = null;
this.childNodes.splice(childIndex, 1);
}
}
insertChildrenAfter(child: DebugNode, newChildren: DebugNode[]) {
var siblingIndex = this.childNodes.indexOf(child);
if (siblingIndex !== -1) {
var previousChildren = this.childNodes.slice(0, siblingIndex + 1);
var nextChildren = this.childNodes.slice(siblingIndex + 1);
this.childNodes =
ListWrapper.concat(ListWrapper.concat(previousChildren, newChildren), nextChildren);
for (var i = 0; i < newChildren.length; ++i) {
var newChild = newChildren[i];
if (isPresent(newChild.parent)) {
newChild.parent.removeChild(newChild);
}
newChild.parent = this;
}
}
}
query(predicate: Predicate<DebugElement>): DebugElement {
var results = this.queryAll(predicate);
return results.length > 0 ? results[0] : null;
}
queryAll(predicate: Predicate<DebugElement>): DebugElement[] {
var matches = [];
_queryElementChildren(this, predicate, matches);
return matches;
}
queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[] {
var matches = [];
_queryNodeChildren(this, predicate, matches);
return matches;
}
get children(): DebugElement[] {
var children = [];
this.childNodes.forEach((node) => {
if (node instanceof DebugElement) {
children.push(node);
}
});
return children;
}
triggerEventHandler(eventName: string, eventObj: Event) {
this.listeners.forEach((listener) => {
if (listener.name == eventName) {
listener.callback(eventObj);
}
});
}
}
export function asNativeElements(debugEls: DebugElement[]): any {
return debugEls.map((el) => el.nativeElement);
}
function _queryElementChildren(element: DebugElement, predicate: Predicate<DebugElement>,
matches: DebugElement[]) {
element.childNodes.forEach(node => {
if (node instanceof DebugElement) {
if (predicate(node)) {
matches.push(node);
}
_queryElementChildren(node, predicate, matches);
}
});
}
function _queryNodeChildren(parentNode: DebugNode, predicate: Predicate<DebugNode>,
matches: DebugNode[]) {
if (parentNode instanceof DebugElement) {
parentNode.childNodes.forEach(node => {
if (predicate(node)) {
matches.push(node);
}
if (node instanceof DebugElement) {
_queryNodeChildren(node, predicate, matches);
}
});
}
}
// Need to keep the nodes in a global Map so that multiple angular apps are supported.
var _nativeNodeToDebugNode = new Map<any, DebugNode>();
export function getDebugNode(nativeNode: any): DebugNode {
return _nativeNodeToDebugNode.get(nativeNode);
}
export function getAllDebugNodes(): DebugNode[] {
return MapWrapper.values(_nativeNodeToDebugNode);
}
export function indexDebugNode(node: DebugNode) {
_nativeNodeToDebugNode.set(node.nativeNode, node);
}
export function removeDebugNodeFromIndex(node: DebugNode) {
_nativeNodeToDebugNode.delete(node.nativeNode);
}

157
modules/angular2/src/core/debug/debug_renderer.ts Normal file
View File

@ -0,0 +1,157 @@
import {isPresent} from 'angular2/src/facade/lang';
import {
Renderer,
RootRenderer,
RenderComponentType,
RenderDebugInfo
} from 'angular2/src/core/render/api';
import {
DebugNode,
DebugElement,
EventListener,
getDebugNode,
indexDebugNode,
removeDebugNodeFromIndex
} from 'angular2/src/core/debug/debug_node';
export class DebugDomRootRenderer implements RootRenderer {
constructor(private _delegate: RootRenderer) {}
renderComponent(componentProto: RenderComponentType): Renderer {
return new DebugDomRenderer(this, this._delegate.renderComponent(componentProto));
}
}
export class DebugDomRenderer implements Renderer {
constructor(private _rootRenderer: DebugDomRootRenderer, private _delegate: Renderer) {}
renderComponent(componentType: RenderComponentType): Renderer {
return this._rootRenderer.renderComponent(componentType);
}
selectRootElement(selector: string): any {
var nativeEl = this._delegate.selectRootElement(selector);
var debugEl = new DebugElement(nativeEl, null);
indexDebugNode(debugEl);
return nativeEl;
}
createElement(parentElement: any, name: string): any {
var nativeEl = this._delegate.createElement(parentElement, name);
var debugEl = new DebugElement(nativeEl, getDebugNode(parentElement));
debugEl.name = name;
indexDebugNode(debugEl);
return nativeEl;
}
createViewRoot(hostElement: any): any { return this._delegate.createViewRoot(hostElement); }
createTemplateAnchor(parentElement: any): any {
var comment = this._delegate.createTemplateAnchor(parentElement);
var debugEl = new DebugNode(comment, getDebugNode(parentElement));
indexDebugNode(debugEl);
return comment;
}
createText(parentElement: any, value: string): any {
var text = this._delegate.createText(parentElement, value);
var debugEl = new DebugNode(text, getDebugNode(parentElement));
indexDebugNode(debugEl);
return text;
}
projectNodes(parentElement: any, nodes: any[]) {
var debugParent = getDebugNode(parentElement);
if (isPresent(debugParent) && debugParent instanceof DebugElement) {
nodes.forEach((node) => { debugParent.addChild(getDebugNode(node)); });
}
return this._delegate.projectNodes(parentElement, nodes);
}
attachViewAfter(node: any, viewRootNodes: any[]) {
var debugNode = getDebugNode(node);
if (isPresent(debugNode)) {
var debugParent = debugNode.parent;
if (viewRootNodes.length > 0 && isPresent(debugParent)) {
var debugViewRootNodes = [];
viewRootNodes.forEach((rootNode) => debugViewRootNodes.push(getDebugNode(rootNode)));
debugParent.insertChildrenAfter(debugNode, debugViewRootNodes);
}
}
return this._delegate.attachViewAfter(node, viewRootNodes);
}
detachView(viewRootNodes: any[]) {
viewRootNodes.forEach((node) => {
var debugNode = getDebugNode(node);
if (isPresent(debugNode) && isPresent(debugNode.parent)) {
debugNode.parent.removeChild(debugNode);
}
});
return this._delegate.detachView(viewRootNodes);
}
destroyView(hostElement: any, viewAllNodes: any[]) {
viewAllNodes.forEach((node) => { removeDebugNodeFromIndex(getDebugNode(node)); });
return this._delegate.destroyView(hostElement, viewAllNodes);
}
listen(renderElement: any, name: string, callback: Function) {
var debugEl = getDebugNode(renderElement);
if (isPresent(debugEl)) {
debugEl.listeners.push(new EventListener(name, callback));
}
return this._delegate.listen(renderElement, name, callback);
}
listenGlobal(target: string, name: string, callback: Function): Function {
return this._delegate.listenGlobal(target, name, callback);
}
setElementProperty(renderElement: any, propertyName: string, propertyValue: any) {
var debugEl = getDebugNode(renderElement);
if (isPresent(debugEl) && debugEl instanceof DebugElement) {
debugEl.properties.set(propertyName, propertyValue);
}
return this._delegate.setElementProperty(renderElement, propertyName, propertyValue);
}
setElementAttribute(renderElement: any, attributeName: string, attributeValue: string) {
var debugEl = getDebugNode(renderElement);
if (isPresent(debugEl) && debugEl instanceof DebugElement) {
debugEl.attributes.set(attributeName, attributeValue);
}
return this._delegate.setElementAttribute(renderElement, attributeName, attributeValue);
}
/**
* Used only in debug mode to serialize property changes to comment nodes,
* such as <template> placeholders.
*/
setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string) {
return this._delegate.setBindingDebugInfo(renderElement, propertyName, propertyValue);
}
/**
* Used only in development mode to set information needed by the DebugNode for this element.
*/
setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {
var debugEl = getDebugNode(renderElement);
debugEl.setDebugInfo(info);
return this._delegate.setElementDebugInfo(renderElement, info);
}
setElementClass(renderElement: any, className: string, isAdd: boolean) {
return this._delegate.setElementClass(renderElement, className, isAdd);
}
setElementStyle(renderElement: any, styleName: string, styleValue: string) {
return this._delegate.setElementStyle(renderElement, styleName, styleValue);
}
invokeElementMethod(renderElement: any, methodName: string, args: any[]) {
return this._delegate.invokeElementMethod(renderElement, methodName, args);
}
setText(renderNode: any, text: string) { return this._delegate.setText(renderNode, text); }
}

11
modules/angular2/src/core/linker/view.ts
View File

@ -27,7 +27,7 @@ import {
CONST_EXPR
} from 'angular2/src/facade/lang';
import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
import {Renderer, RootRenderer} from 'angular2/src/core/render/api';
import {Renderer, RootRenderer, RenderDebugInfo} from 'angular2/src/core/render/api';
import {ViewRef_, HostViewFactoryRef} from './view_ref';
import {ProtoPipes} from 'angular2/src/core/pipes/pipes';
import {camelCaseToDashCase} from 'angular2/src/core/render/util';
@ -119,6 +119,12 @@ export class AppView implements ChangeDispatcher {
(templateName, _) => { localsMap.set(templateName, null); });
for (var i = 0; i < appElements.length; i++) {
var appEl = appElements[i];
var providerTokens = [];
if (isPresent(appEl.proto.protoInjector)) {
for (var j = 0; j < appEl.proto.protoInjector.numberOfProviders; j++) {
providerTokens.push(appEl.proto.protoInjector.getProviderAtIndex(j).key.token);
}
}
StringMapWrapper.forEach(appEl.proto.directiveVariableBindings, (directiveIndex, name) => {
if (isBlank(directiveIndex)) {
localsMap.set(name, appEl.nativeElement);
@ -126,6 +132,9 @@ export class AppView implements ChangeDispatcher {
localsMap.set(name, appEl.getDirectiveAtIndex(directiveIndex));
}
});
this.renderer.setElementDebugInfo(
appEl.nativeElement, new RenderDebugInfo(appEl.getInjector(), appEl.getComponent(),
providerTokens, localsMap));
}
var parentLocals = null;
if (this.proto.type !== ViewType.COMPONENT) {

11
modules/angular2/src/core/linker/view_listener.ts
View File

@ -1,11 +0,0 @@
import {Injectable} from 'angular2/src/core/di';
import * as viewModule from './view';
/**
* Listener for view creation / destruction.
*/
@Injectable()
export class AppViewListener {
onViewCreated(view: viewModule.AppView) {}
onViewDestroyed(view: viewModule.AppView) {}
}

10
modules/angular2/src/core/linker/view_manager.ts
View File

@ -22,7 +22,6 @@ import {
} from './view_ref';
import {ViewContainerRef} from './view_container_ref';
import {TemplateRef, TemplateRef_} from './template_ref';
import {AppViewListener} from './view_listener';
import {RootRenderer, RenderComponentType} from 'angular2/src/core/render/api';
import {wtfCreateScope, wtfLeave, WtfScopeFn} from '../profile/profile';
import {APP_ID} from 'angular2/src/core/application_tokens';
@ -185,10 +184,7 @@ export abstract class AppViewManager {
export class AppViewManager_ extends AppViewManager {
private _nextCompTypeId: number = 0;
constructor(private _renderer: RootRenderer, private _viewListener: AppViewListener,
@Inject(APP_ID) private _appId: string) {
super();
}
constructor(private _renderer: RootRenderer, @Inject(APP_ID) private _appId: string) { super(); }
getViewContainer(location: ElementRef): ViewContainerRef {
return (<ElementRef_>location).internalElement.getViewContainerRef();
@ -316,10 +312,10 @@ export class AppViewManager_ extends AppViewManager {
}
/** @internal */
onViewCreated(view: AppView) { this._viewListener.onViewCreated(view); }
onViewCreated(view: AppView) {}
/** @internal */
onViewDestroyed(view: AppView) { this._viewListener.onViewDestroyed(view); }
onViewDestroyed(view: AppView) {}
/** @internal */
createRenderComponentType(encapsulation: ViewEncapsulation,

8
modules/angular2/src/core/render/api.ts
View File

@ -1,10 +1,16 @@
import {ViewEncapsulation} from 'angular2/src/core/metadata/view';
import {Injector} from 'angular2/src/core/di/injector';
export class RenderComponentType {
constructor(public id: string, public encapsulation: ViewEncapsulation,
public styles: Array<string | any[]>) {}
}
export class RenderDebugInfo {
constructor(public injector: Injector, public component: any, public providerTokens: any[],
public locals: Map<string, any>) {}
}
export interface ParentRenderer { renderComponent(componentType: RenderComponentType): Renderer; }
export abstract class Renderer implements ParentRenderer {
@ -42,6 +48,8 @@ export abstract class Renderer implements ParentRenderer {
*/
abstract setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string);
abstract setElementDebugInfo(renderElement: any, info: RenderDebugInfo);
abstract setElementClass(renderElement: any, className: string, isAdd: boolean);
abstract setElementStyle(renderElement: any, styleName: string, styleValue: string);

7
modules/angular2/src/platform/browser_common.ts
View File

@ -30,12 +30,12 @@ import {BrowserDomAdapter} from './browser/browser_adapter';
import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
import {wtfInit} from 'angular2/src/core/profile/wtf_init';
import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom';
export {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
export {Title} from 'angular2/src/platform/browser/title';
export {
DebugElementViewListener,
ELEMENT_PROBE_PROVIDERS,
ELEMENT_PROBE_BINDINGS,
ELEMENT_PROBE_PROVIDERS_PROD_MODE,
inspectNativeElement,
By
} from 'angular2/platform/common_dom';
@ -84,7 +84,8 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array<any /*Type | Provider | any[]*/
Testability,
BrowserDetails,
AnimationBuilder,
EventManager
EventManager,
ELEMENT_PROBE_PROVIDERS
]);
export function initDomAdapter() {

2
modules/angular2/src/platform/dom/debug/by.ts
View File

@ -39,6 +39,6 @@ export class By {
* {@example platform/dom/debug/ts/by/by.ts region='by_directive'}
*/
static directive(type: Type): Predicate<DebugElement> {
return (debugElement) => { return debugElement.hasDirective(type); };
return (debugElement) => { return debugElement.providerTokens.indexOf(type) !== -1; };
}
}

89
modules/angular2/src/platform/dom/debug/debug_element_view_listener.ts
View File

@ -1,89 +0,0 @@
import {CONST_EXPR, isPresent, NumberWrapper, StringWrapper} from 'angular2/src/facade/lang';
import {MapWrapper, Map, ListWrapper} from 'angular2/src/facade/collection';
import {Injectable, provide, Provider} from 'angular2/src/core/di';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {AppView} from 'angular2/src/core/linker/view';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {DebugElement, DebugElement_} from 'angular2/src/core/debug/debug_element';
const NG_ID_PROPERTY = 'ngid';
const INSPECT_GLOBAL_NAME = 'ng.probe';
const NG_ID_SEPARATOR = '#';
// Need to keep the views in a global Map so that multiple angular apps are supported
var _allIdsByView = new Map<AppView, number>();
var _allViewsById = new Map<number, AppView>();
var _nextId = 0;
function _setElementId(element, indices: number[]) {
if (isPresent(element) && DOM.isElementNode(element)) {
DOM.setData(element, NG_ID_PROPERTY, indices.join(NG_ID_SEPARATOR));
}
}
function _getElementId(element): number[] {
var elId = DOM.getData(element, NG_ID_PROPERTY);
if (isPresent(elId)) {
return elId.split(NG_ID_SEPARATOR).map(partStr => NumberWrapper.parseInt(partStr, 10));
} else {
return null;
}
}
/**
* Returns a {@link DebugElement} for the given native DOM element, or
* null if the given native element does not have an Angular view associated
* with it.
*/
export function inspectNativeElement(element): DebugElement {
var elId = _getElementId(element);
if (isPresent(elId)) {
var view = _allViewsById.get(elId[0]);
if (isPresent(view)) {
return new DebugElement_(view.appElements[elId[1]]);
}
}
return null;
}
@Injectable()
export class DebugElementViewListener implements AppViewListener {
constructor() { DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement); }
onViewCreated(view: AppView) {
var viewId = _nextId++;
_allViewsById.set(viewId, view);
_allIdsByView.set(view, viewId);
for (var i = 0; i < view.appElements.length; i++) {
var el = view.appElements[i];
_setElementId(el.nativeElement, [viewId, i]);
}
}
onViewDestroyed(view: AppView) {
var viewId = _allIdsByView.get(view);
_allIdsByView.delete(view);
_allViewsById.delete(viewId);
}
}
/**
* Providers which support debugging Angular applications (e.g. via `ng.probe`).
*
* ## Example
*
* {@example platform/dom/debug/ts/debug_element_view_listener/providers.ts region='providers'}
*/
export const ELEMENT_PROBE_PROVIDERS: any[] = CONST_EXPR([
DebugElementViewListener,
CONST_EXPR(new Provider(AppViewListener, {useExisting: DebugElementViewListener})),
]);
/**
* Use {@link ELEMENT_PROBE_PROVIDERS}.
*
* @deprecated
*/
export const ELEMENT_PROBE_BINDINGS = ELEMENT_PROBE_PROVIDERS;

42
modules/angular2/src/platform/dom/debug/ng_probe.ts Normal file
View File

@ -0,0 +1,42 @@
import {CONST_EXPR, assertionsEnabled, isPresent} from 'angular2/src/facade/lang';
import {Injectable, provide, Provider} from 'angular2/src/core/di';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {DebugNode, getDebugNode} from 'angular2/src/core/debug/debug_node';
import {DomRootRenderer} from 'angular2/src/platform/dom/dom_renderer';
import {RootRenderer} from 'angular2/core';
import {DebugDomRootRenderer} from 'angular2/src/core/debug/debug_renderer';
const INSPECT_GLOBAL_NAME = 'ng.probe';
/**
* Returns a {@link DebugElement} for the given native DOM element, or
* null if the given native element does not have an Angular view associated
* with it.
*/
export function inspectNativeElement(element): DebugNode {
return getDebugNode(element);
}
function _createConditionalRootRenderer(rootRenderer) {
if (assertionsEnabled()) {
return _createRootRenderer(rootRenderer);
}
return rootRenderer;
}
function _createRootRenderer(rootRenderer) {
DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
return new DebugDomRootRenderer(rootRenderer);
}
/**
* Providers which support debugging Angular applications (e.g. via `ng.probe`).
*/
export const ELEMENT_PROBE_PROVIDERS: any[] = CONST_EXPR([
new Provider(RootRenderer,
{useFactory: _createConditionalRootRenderer, deps: [DomRootRenderer]})
]);
export const ELEMENT_PROBE_PROVIDERS_PROD_MODE: any[] = CONST_EXPR(
[new Provider(RootRenderer, {useFactory: _createRootRenderer, deps: [DomRootRenderer]})]);

9
modules/angular2/src/platform/dom/dom_renderer.ts
View File

@ -14,7 +14,12 @@ import {
import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
import {DomSharedStylesHost} from './shared_styles_host';
import {Renderer, RootRenderer, RenderComponentType} from 'angular2/core';
import {
Renderer,
RootRenderer,
RenderComponentType,
RenderDebugInfo
} from 'angular2/src/core/render/api';
import {EventManager} from './events/event_manager';
@ -201,6 +206,8 @@ export class DomRenderer implements Renderer {
}
}
setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {}
setElementClass(renderElement: any, className: string, isAdd: boolean): void {
if (isAdd) {
DOM.addClass(renderElement, className);

13
modules/angular2/src/testing/test_component_builder.ts
View File

@ -1,11 +1,11 @@
import {
ComponentRef,
DebugElement,
DirectiveResolver,
DynamicComponentLoader,
Injector,
Injectable,
ViewMetadata,
ElementRef,
EmbeddedViewRef,
ViewResolver,
provide
@ -23,7 +23,7 @@ import {el} from './utils';
import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {DebugElement_} from 'angular2/src/core/debug/debug_element';
import {DebugNode, DebugElement, getDebugNode} from 'angular2/src/core/debug/debug_node';
/**
@ -45,6 +45,11 @@ export abstract class ComponentFixture {
*/
nativeElement: any;
/**
* The ElementRef for the element at the root of the component.
*/
elementRef: ElementRef;
/**
* Trigger a change detection cycle for the component.
*/
@ -66,7 +71,9 @@ export class ComponentFixture_ extends ComponentFixture {
constructor(componentRef: ComponentRef) {
super();
this._componentParentView = (<ViewRef_>componentRef.hostView).internalView;
this.debugElement = new DebugElement_(this._componentParentView.appElements[0]);
this.elementRef = this._componentParentView.appElements[0].ref;
this.debugElement = <DebugElement>getDebugNode(
this._componentParentView.rootNodesOrAppElements[0].nativeElement);
this.componentInstance = this.debugElement.componentInstance;
this.nativeElement = this.debugElement.nativeElement;
this._componentRef = componentRef;

9
modules/angular2/src/web_workers/worker/renderer.ts
View File

@ -1,4 +1,9 @@
import {Renderer, RootRenderer, RenderComponentType} from 'angular2/src/core/render/api';
import {
Renderer,
RootRenderer,
RenderComponentType,
RenderDebugInfo
} from 'angular2/src/core/render/api';
import {
ClientMessageBroker,
ClientMessageBrokerFactory,
@ -186,6 +191,8 @@ export class WebWorkerRenderer implements Renderer, RenderStoreObject {
]);
}
setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {}
setElementClass(renderElement: any, className: string, isAdd: boolean) {
this._runOnService('setElementClass', [
new FnArg(renderElement, RenderStoreObject),

7
modules/angular2/test/common/directives/ng_class_spec.ts
View File

@ -19,10 +19,9 @@ import {Component, View, provide} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {NgClass} from 'angular2/src/common/directives/ng_class';
function detectChangesAndCheck(fixture: ComponentFixture, classes: string, elIndex: number = 0) {
function detectChangesAndCheck(fixture: ComponentFixture, classes: string) {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[elIndex].nativeElement.className)
.toEqual(classes);
expect(fixture.debugElement.children[0].nativeElement.className).toEqual(classes);
}
export function main() {
@ -39,7 +38,7 @@ export function main() {
fixture.detectChanges();
fixture.debugElement.componentInstance.items = [['1']];
detectChangesAndCheck(fixture, '1', 1);
detectChangesAndCheck(fixture, '1');
async.done();
});

6
modules/angular2/test/common/directives/ng_for_spec.ts
View File

@ -318,7 +318,7 @@ export function main() {
'<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
var testComponent = fixture.debugElement.componentViewChildren[0];
var testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@ -334,7 +334,7 @@ export function main() {
.overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
var testComponent = fixture.debugElement.componentViewChildren[0];
var testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@ -352,7 +352,7 @@ export function main() {
'<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
var testComponent = fixture.debugElement.componentViewChildren[0];
var testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');

39
modules/angular2/test/common/directives/ng_style_spec.ts
View File

@ -32,8 +32,7 @@ export function main() {
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
async.done();
@ -51,15 +50,13 @@ export function main() {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expr = fixture.debugElement.componentInstance.expr;
expr['max-width'] = '30%';
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('30%');
async.done();
@ -75,14 +72,12 @@ export function main() {
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
async.done();
@ -98,20 +93,16 @@ export function main() {
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
async.done();
@ -127,21 +118,17 @@ export function main() {
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
async.done();

8
modules/angular2/test/common/forms/integration_spec.ts
View File

@ -673,7 +673,7 @@ export function main() {
fixture.debugElement.componentInstance.name = null;
fixture.detectChanges();
var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
var form = fixture.debugElement.children[0].inject(NgForm);
expect(form.controls['user']).not.toBeDefined();
tick();
@ -708,7 +708,7 @@ export function main() {
fixture.debugElement.componentInstance.name = null;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren.length).toEqual(0);
expect(fixture.debugElement.children[0].providerTokens.length).toEqual(0);
async.done();
});
}));
@ -728,7 +728,7 @@ export function main() {
fixture.debugElement.componentInstance.name = 'show';
fixture.detectChanges();
tick();
var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
var form = fixture.debugElement.children[0].inject(NgForm);
expect(form.controls['login']).toBeDefined();
@ -756,7 +756,7 @@ export function main() {
fixture.debugElement.componentInstance.name = 'show';
fixture.detectChanges();
tick();
var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
var form = fixture.debugElement.children[0].inject(NgForm);
expect(form.controls['user']).toBeDefined();

294
modules/angular2/test/core/debug/debug_element_spec.ts
View File

@ -1,294 +0,0 @@
import {
AsyncTestCompleter,
beforeEach,
ddescribe,
xdescribe,
describe,
dispatchEvent,
expect,
iit,
inject,
beforeEachProviders,
it,
xit,
TestComponentBuilder
} from 'angular2/testing_internal';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
import {Injectable} from 'angular2/core';
import {NgFor, NgIf} from 'angular2/common';
import {Scope} from 'angular2/core';
import {By} from 'angular2/platform/common_dom';
import {
Directive,
Component,
View,
} from 'angular2/src/core/metadata';
@Injectable()
class Logger {
log: string[];
constructor() { this.log = []; }
add(thing: string) { this.log.push(thing); }
}
@Directive({selector: '[message]', inputs: ['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" [innerHtml]="childBinding"></span>`,
directives: [MessageDir],
})
@Injectable()
class ChildComp {
childBinding: string;
constructor() { this.childBinding = 'Original'; }
}
@Component({selector: 'cond-content-comp', viewProviders: [Logger]})
@View({
template: `<div class="child" message="child" *ngIf="false"><ng-content></ng-content></div>`,
directives: [NgIf, MessageDir],
})
@Injectable()
class ConditionalContentComp {
}
@Component({selector: 'parent-comp', viewProviders: [Logger]})
@View({
template: `<div class="parent" message="parent">
<span class="parentnested" message="nestedparent">Parent</span>
</div>
<span class="parent" [innerHtml]="parentBinding"></span>
<child-comp class="child-comp-class"></child-comp>
<cond-content-comp class="cond-content-comp-class"></cond-content-comp>`,
directives: [ChildComp, MessageDir, ConditionalContentComp],
})
@Injectable()
class ParentComp {
parentBinding: string;
constructor() { this.parentBinding = 'OriginalParent'; }
}
@Directive({selector: 'custom-emitter', outputs: ['myevent']})
@Injectable()
class CustomEmitter {
myevent: EventEmitter<any>;
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', viewProviders: [Logger]})
@View({
template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
<ul message="list">
<li *ngFor="#item of stuff" [innerHtml]="item"></li>
</ul>`,
directives: [NgFor, MessageDir],
})
@Injectable()
class UsingFor {
stuff: string[];
constructor() { this.stuff = ['one', 'two', 'three']; }
}
export function main() {
describe('debug element', function() {
it('should list component child elements',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((componentFixture) => {
componentFixture.detectChanges();
var childEls = componentFixture.debugElement.children;
// The root is a lone component, and has no children in the light dom.
expect(childEls.length).toEqual(0);
var rootCompChildren = componentFixture.debugElement.componentViewChildren;
// The root component has 4 elements in its shadow view.
expect(rootCompChildren.length).toEqual(4);
expect(DOM.hasClass(rootCompChildren[0].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(rootCompChildren[1].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(rootCompChildren[2].nativeElement, 'child-comp-class'))
.toBe(true);
expect(DOM.hasClass(rootCompChildren[3].nativeElement, 'cond-content-comp-class'))
.toBe(true);
var nested = rootCompChildren[0].children;
expect(nested.length).toEqual(1);
expect(DOM.hasClass(nested[0].nativeElement, '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].nativeElement, 'child')).toBe(true);
expect(DOM.hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
var childNested = childCompChildren[0].children;
expect(childNested.length).toEqual(1);
expect(DOM.hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
var conditionalContentComp = rootCompChildren[3];
expect(conditionalContentComp.children.length).toEqual(0);
expect(conditionalContentComp.componentViewChildren.length).toEqual(1);
var ngIfWithProjectedNgContent = conditionalContentComp.componentViewChildren[0];
expect(ngIfWithProjectedNgContent.children.length).toBe(0);
expect(ngIfWithProjectedNgContent.componentViewChildren.length).toBe(0);
async.done();
});
}));
it('should list child elements within viewports',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(UsingFor).then((componentFixture) => {
componentFixture.detectChanges();
var childEls = componentFixture.debugElement.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: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((componentFixture) => {
componentFixture.detectChanges();
var childTestEls = componentFixture.debugElement.queryAll(By.directive(MessageDir));
expect(childTestEls.length).toBe(4);
expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
expect(DOM.hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
expect(DOM.hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
async.done();
});
}));
it('should query child elements in the light DOM',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((componentFixture) => {
componentFixture.detectChanges();
var parentEl = componentFixture.debugElement.componentViewChildren[0];
var childTestEls = parentEl.queryAll(By.directive(MessageDir), Scope.light);
expect(childTestEls.length).toBe(1);
expect(DOM.hasClass(childTestEls[0].nativeElement, 'parentnested')).toBe(true);
async.done();
});
}));
it('should query child elements in the current component view DOM',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((componentFixture) => {
componentFixture.detectChanges();
var childTestEls =
componentFixture.debugElement.queryAll(By.directive(MessageDir), Scope.view);
expect(childTestEls.length).toBe(2);
expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
async.done();
});
}));
it('should allow injecting from the element injector',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((componentFixture) => {
componentFixture.detectChanges();
expect(componentFixture.debugElement.componentViewChildren[0].inject(Logger).log)
.toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
async.done();
});
}));
it('should trigger event handlers',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(EventsComp)
.then((componentFixture) => {
componentFixture.detectChanges();
expect(componentFixture.debugElement.componentInstance.clicked).toBe(false);
expect(componentFixture.debugElement.componentInstance.customed).toBe(false);
componentFixture.debugElement.componentViewChildren[0].triggerEventHandler(
'click', <Event>{});
expect(componentFixture.debugElement.componentInstance.clicked).toBe(true);
componentFixture.debugElement.componentViewChildren[1].triggerEventHandler(
'myevent', <Event>{});
expect(componentFixture.debugElement.componentInstance.customed).toBe(true);
async.done();
});
}));
});
}

392
modules/angular2/test/core/debug/debug_node_spec.ts Normal file
View File

@ -0,0 +1,392 @@
import {
AsyncTestCompleter,
beforeEach,
ddescribe,
xdescribe,
describe,
dispatchEvent,
expect,
iit,
inject,
beforeEachProviders,
it,
xit,
TestComponentBuilder
} from 'angular2/testing_internal';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {PromiseWrapper, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
import {Injectable} from 'angular2/core';
import {NgFor, NgIf} from 'angular2/common';
import {By} from 'angular2/platform/common_dom';
import {Directive, Component, View, Input} from 'angular2/src/core/metadata';
@Injectable()
class Logger {
log: string[];
constructor() { this.log = []; }
add(thing: string) { this.log.push(thing); }
}
@Directive({selector: '[message]', inputs: ['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" [innerHtml]="childBinding"></span>`,
directives: [MessageDir],
})
@Injectable()
class ChildComp {
childBinding: string;
constructor() { this.childBinding = 'Original'; }
}
@Component({selector: 'parent-comp', viewProviders: [Logger]})
@View({
template: `<div class="parent" message="parent">
<span class="parentnested" message="nestedparent">Parent</span>
</div>
<span class="parent" [innerHtml]="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', outputs: ['myevent']})
@Injectable()
class CustomEmitter {
myevent: EventEmitter<any>;
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: 'cond-content-comp', viewProviders: [Logger]})
@View({
template: `<div class="child" message="child" *ngIf="myBool"><ng-content></ng-content></div>`,
directives: [NgIf, MessageDir],
})
@Injectable()
class ConditionalContentComp {
myBool: boolean = false;
}
@Component({selector: 'conditional-parent-comp', viewProviders: [Logger]})
@View({
template: `<span class="parent" [innerHtml]="parentBinding"></span>
<cond-content-comp class="cond-content-comp-class">
<span class="from-parent"></span>
</cond-content-comp>`,
directives: [ConditionalContentComp],
})
@Injectable()
class ConditionalParentComp {
parentBinding: string;
constructor() { this.parentBinding = 'OriginalParent'; }
}
@Component({selector: 'using-for', viewProviders: [Logger]})
@View({
template: `<span *ngFor="#thing of stuff" [innerHtml]="thing"></span>
<ul message="list">
<li *ngFor="#item of stuff" [innerHtml]="item"></li>
</ul>`,
directives: [NgFor, MessageDir],
})
@Injectable()
class UsingFor {
stuff: string[];
constructor() { this.stuff = ['one', 'two', 'three']; }
}
@Directive({selector: '[mydir]', exportAs: 'mydir'})
class MyDir {
}
@Component({
selector: 'locals-comp',
template: `
<div mydir #alice="mydir"></div>
`,
directives: [MyDir]
})
class LocalsComp {
}
@Component({
selector: 'bank-account',
template: `
Bank Name: {{bank}}
Account Id: {{id}}
`
})
class BankAccount {
@Input() bank: string;
@Input('account') id: string;
normalizedBankName: string;
}
@Component({
selector: 'test-app',
template: `
<bank-account bank="RBC" account="4747"></bank-account>
`,
directives: [BankAccount]
})
class TestApp {
}
export function main() {
describe('debug element', function() {
it('should list all child nodes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((fixture) => {
fixture.detectChanges();
// The root component has 3 elements and 2 text node children.
expect(fixture.debugElement.childNodes.length).toEqual(5);
async.done();
});
}));
it('should list all component child elements',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((fixture) => {
fixture.detectChanges();
var childEls = fixture.debugElement.children;
// The root component has 3 elements in its view.
expect(childEls.length).toEqual(3);
expect(DOM.hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(childEls[1].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true);
var nested = childEls[0].children;
expect(nested.length).toEqual(1);
expect(DOM.hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
var childComponent = childEls[2];
var childCompChildren = childComponent.children;
expect(childCompChildren.length).toEqual(2);
expect(DOM.hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
expect(DOM.hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
var childNested = childCompChildren[0].children;
expect(childNested.length).toEqual(1);
expect(DOM.hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
async.done();
});
}));
it('should list conditional component child elements',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ConditionalParentComp)
.then((fixture) => {
fixture.detectChanges();
var childEls = fixture.debugElement.children;
// The root component has 2 elements in its view.
expect(childEls.length).toEqual(2);
expect(DOM.hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(childEls[1].nativeElement, 'cond-content-comp-class'))
.toBe(true);
var conditionalContentComp = childEls[1];
expect(conditionalContentComp.children.length).toEqual(0);
conditionalContentComp.componentInstance.myBool = true;
fixture.detectChanges();
expect(conditionalContentComp.children.length).toEqual(1);
async.done();
});
}));
it('should list child elements within viewports',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(UsingFor).then((fixture) => {
fixture.detectChanges();
var childEls = fixture.debugElement.children;
expect(childEls.length).toEqual(4);
// The 4th child is the <ul>
var list = childEls[3];
expect(list.children.length).toEqual(3);
async.done();
});
}));
it('should list element attributes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(TestApp).then((fixture) => {
fixture.detectChanges();
var bankElem = fixture.debugElement.children[0];
expect(bankElem.attributes.get('bank')).toEqual('RBC');
expect(bankElem.attributes.get('account')).toEqual('4747');
async.done();
});
}));
it('should query child elements by css',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((fixture) => {
fixture.detectChanges();
var childTestEls = fixture.debugElement.queryAll(By.css('child-comp'));
expect(childTestEls.length).toBe(1);
expect(DOM.hasClass(childTestEls[0].nativeElement, 'child-comp-class')).toBe(true);
async.done();
});
}));
it('should query child elements by directive',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((fixture) => {
fixture.detectChanges();
var childTestEls = fixture.debugElement.queryAll(By.directive(MessageDir));
expect(childTestEls.length).toBe(4);
expect(DOM.hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
expect(DOM.hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
expect(DOM.hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
expect(DOM.hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
async.done();
});
}));
it('should list providerTokens',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.providerTokens).toContain(Logger);
async.done();
});
}));
it('should list locals',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(LocalsComp)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.children[0].getLocal('alice')).toBeAnInstanceOf(MyDir);
async.done();
});
}));
it('should allow injecting from the element injector',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(ParentComp)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.children[0].inject(Logger).log)
.toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
async.done();
});
}));
it('should list event listeners',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(EventsComp)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.children[0].listeners.length).toEqual(1);
expect(fixture.debugElement.children[1].listeners.length).toEqual(1);
async.done();
});
}));
it('should trigger event handlers',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(EventsComp)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentInstance.clicked).toBe(false);
expect(fixture.debugElement.componentInstance.customed).toBe(false);
fixture.debugElement.children[0].triggerEventHandler('click', <Event>{});
expect(fixture.debugElement.componentInstance.clicked).toBe(true);
fixture.debugElement.children[1].triggerEventHandler('myevent', <Event>{});
expect(fixture.debugElement.componentInstance.customed).toBe(true);
async.done();
});
}));
});
}

3
modules/angular2/test/core/forward_ref_integration_spec.ts
View File

@ -32,8 +32,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(App).then((tc) => {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
.toHaveText('frame(lock)');
expect(asNativeElements(tc.debugElement.children)).toHaveText('frame(lock)');
async.done();
});
}));

248
modules/angular2/test/core/linker/dynamic_component_loader_spec.ts
View File

@ -17,12 +17,11 @@ import {
} from 'angular2/testing_internal';
import {OnDestroy} from 'angular2/core';
import {Injector, inspectElement} from 'angular2/core';
import {Injector} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {By} from 'angular2/platform/common_dom';
import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
import {ElementRef} from 'angular2/src/core/linker/element_ref';
import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {ComponentFixture_} from "angular2/src/testing/test_component_builder";
@ -34,76 +33,6 @@ export function main() {
describe('DynamicComponentLoader', function() {
describe("loading into a location", () => {
it('should work',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
async.done();
});
});
}));
it('should return a disposable component ref',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
.then(ref => {
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("Location;");
async.done();
});
});
}));
it('should allow to dispose even if the location has been removed',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp]
}))
.overrideView(
ChildComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
tc.debugElement.componentInstance.ctxBoolProp = true;
tc.detectChanges();
var childCompEl = tc.debugElement.query(By.css('child-cmp'));
loader.loadIntoLocation(DynamicallyLoaded, childCompEl.elementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
tc.debugElement.componentInstance.ctxBoolProp = false;
tc.detectChanges();
expect(tc.debugElement.nativeElement).toHaveText("");
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("");
async.done();
});
});
}));
it('should update host properties',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
@ -112,21 +41,94 @@ export function main() {
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef, 'loc')
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
.then(ref => {
ref.instance.id = "new value";
tc.detectChanges();
var newlyInsertedElement =
DOM.childNodes(tc.debugElement.nativeElement)[1];
expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
async.done();
});
});
}));
it('should return a disposable component ref',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
.then(ref => {
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("Location;");
async.done();
});
});
}));
it('should allow to dispose even if the location has been removed',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp]
}))
.overrideView(
ChildComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
tc.debugElement.componentInstance.ctxBoolProp = true;
tc.detectChanges();
var childCompEl = (<ElementRef_>tc.elementRef).internalElement;
// TODO(juliemr): This is hideous, see if there's a better way to handle
// child element refs now.
var childElementRef =
childCompEl.componentView.appElements[0].nestedViews[0].appElements[0].ref;
loader.loadIntoLocation(DynamicallyLoaded, childElementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
tc.debugElement.componentInstance.ctxBoolProp = false;
tc.detectChanges();
expect(tc.debugElement.nativeElement).toHaveText("");
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("");
async.done();
});
});
}));
it('should update host properties',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithHostProps, tc.elementRef, 'loc')
.then(ref => {
ref.instance.id = "new value";
tc.detectChanges();
var newlyInsertedElement =
DOM.childNodes(tc.debugElement.nativeElement)[1];
expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
async.done();
});
});
}));
it('should leave the view tree in a consistent state if hydration fails',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
@ -139,8 +141,8 @@ export function main() {
tc.debugElement
PromiseWrapper.catchError(
loader.loadIntoLocation(DynamicallyLoadedThrows,
tc.debugElement.elementRef, 'loc'),
loader.loadIntoLocation(DynamicallyLoadedThrows, tc.elementRef,
'loc'),
error => {
expect(error.message).toContain("ThrownInConstructor");
expect(() => tc.detectChanges()).not.toThrow();
@ -159,8 +161,7 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
expect(() => loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef,
'someUnknownVariable'))
tc.elementRef, 'someUnknownVariable'))
.toThrowError('Could not find variable someUnknownVariable');
async.done();
});
@ -173,9 +174,8 @@ export function main() {
new ViewMetadata({template: '<div #loc></div>', directives: []}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, 'loc', null,
[[DOM.createTextNode('hello')]])
loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
'loc', null, [[DOM.createTextNode('hello')]])
.then(ref => {
tc.detectChanges();
expect(tc.nativeElement).toHaveText('dynamic(hello)');
@ -193,8 +193,8 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
PromiseWrapper.catchError(
loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, 'loc', null, []),
loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
'loc', null, []),
(e) => {
expect(e.message).toContain(
`The component ${stringify(DynamicallyLoadedWithNgContent)} has 1 <ng-content> elements, but only 0 slots were provided`);
@ -215,7 +215,7 @@ export function main() {
}))
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
.then(ref => {
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(DOM.nextSibling(tc.debugElement.nativeElement))
@ -227,38 +227,38 @@ export function main() {
}));
it('should return a disposable component ref',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><location #loc></location></div>',
directives: [Location]
}))
.
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><location #loc></location></div>',
directives: [Location]
}))
.
createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
.then(ref => {
loader.loadNextToLocation(DynamicallyLoaded2, tc.debugElement.elementRef)
.then(ref2 => {
var firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
var secondSibling = DOM.nextSibling(firstSibling);
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(firstSibling).toHaveText("DynamicallyLoaded;");
expect(secondSibling).toHaveText("DynamicallyLoaded2;");
createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
.then(ref => {
loader.loadNextToLocation(DynamicallyLoaded2, tc.elementRef)
.then(ref2 => {
var firstSibling =
DOM.nextSibling(tc.debugElement.nativeElement);
var secondSibling = DOM.nextSibling(firstSibling);
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(firstSibling).toHaveText("DynamicallyLoaded;");
expect(secondSibling).toHaveText("DynamicallyLoaded2;");
ref2.dispose();
ref2.dispose();
firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
secondSibling = DOM.nextSibling(firstSibling);
expect(secondSibling).toBeNull();
firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
secondSibling = DOM.nextSibling(firstSibling);
expect(secondSibling).toBeNull();
async.done();
});
});
});
}));
async.done();
});
});
});
}));
it('should update host properties',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
@ -271,8 +271,7 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef)
loader.loadNextToLocation(DynamicallyLoadedWithHostProps, tc.elementRef)
.then(ref => {
ref.instance.id = "new value";
@ -293,9 +292,8 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, null,
[[DOM.createTextNode('hello')]])
loader.loadNextToLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
null, [[DOM.createTextNode('hello')]])
.then(ref => {
tc.detectChanges();
var newlyInsertedElement =

14
modules/angular2/test/core/linker/integration_dart_spec.dart
View File

@ -3,7 +3,7 @@ library angular2.test.di.integration_dart_spec;
import 'package:angular2/angular2.dart';
import 'package:angular2/core.dart';
import 'package:angular2/src/core/debug/debug_element.dart';
import 'package:angular2/src/core/debug/debug_node.dart';
import 'package:angular2/testing_internal.dart';
import 'package:observe/observe.dart';
import 'package:angular2/src/core/change_detection/differs/default_iterable_differ.dart';
@ -56,7 +56,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('[Hello, World]');
async.done();
});
@ -112,7 +112,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('prop:foo-prop;map:foo-map');
async.done();
});
@ -149,7 +149,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
var cmp = tc.debugElement.componentViewChildren[0]
var cmp = tc.debugElement.children[0]
.inject(OnChangeComponent);
expect(cmp.prop).toEqual('hello');
expect(cmp.changes.containsKey('prop')).toEqual(true);
@ -178,7 +178,7 @@ main() {
tc.detectChanges();
expect(log.result()).toEqual("check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('12');
tc.detectChanges();
@ -194,7 +194,7 @@ main() {
// we changed the list => a check
expect(log.result()).toEqual("check; check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('123');
// we replaced the list => a check
@ -204,7 +204,7 @@ main() {
tc.detectChanges();
expect(log.result()).toEqual("check; check; check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('567');
});
})));

211
modules/angular2/test/core/linker/integration_spec.ts
View File

@ -160,8 +160,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.id)
.toEqual('Hello World!');
expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!');
async.done();
});
}));
@ -176,15 +175,13 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Initial aria label';
fixture.detectChanges();
expect(
DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'aria-label'))
DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Initial aria label');
fixture.debugElement.componentInstance.ctxProp = 'Changed aria label';
fixture.detectChanges();
expect(
DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'aria-label'))
DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Changed aria label');
async.done();
@ -201,14 +198,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'bar';
fixture.detectChanges();
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toEqual('bar');
fixture.debugElement.componentInstance.ctxProp = null;
fixture.detectChanges();
expect(DOM.hasAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
expect(DOM.hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toBeFalsy();
async.done();
@ -225,14 +220,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = '10';
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'height'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('10px');
fixture.debugElement.componentInstance.ctxProp = null;
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'height'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('');
async.done();
@ -248,13 +241,11 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
.toEqual(0);
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
fixture.debugElement.componentInstance.ctxNumProp = 5;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
.toEqual(5);
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
async.done();
});
@ -269,13 +260,11 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
.toBeFalsy();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy();
fixture.debugElement.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
.toBeTruthy();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy();
async.done();
});
@ -291,14 +280,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Some <span>HTML</span>';
fixture.detectChanges();
expect(
DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some <span>HTML</span>');
fixture.debugElement.componentInstance.ctxProp = 'Some other <div>HTML</div>';
fixture.detectChanges();
expect(
DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some other <div>HTML</div>');
async.done();
@ -313,7 +300,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var nativeEl = fixture.debugElement.componentViewChildren[0].nativeElement;
var nativeEl = fixture.debugElement.children[0].nativeElement;
fixture.debugElement.componentInstance.ctxProp = 'foo bar';
fixture.detectChanges();
@ -340,13 +327,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].inject(MyDir).dirProp)
.toEqual('Hello World!');
expect(fixture.debugElement.componentViewChildren[1].inject(MyDir).dirProp)
.toEqual('Hi there!');
expect(fixture.debugElement.componentViewChildren[2].inject(MyDir).dirProp)
.toEqual('Hi there!');
expect(fixture.debugElement.componentViewChildren[3].inject(MyDir).dirProp)
var containerSpan = fixture.debugElement.children[0];
expect(containerSpan.children[0].inject(MyDir).dirProp).toEqual('Hello World!');
expect(containerSpan.children[1].inject(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[2].inject(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[3].inject(MyDir).dirProp)
.toEqual('One more Hello World!');
async.done();
});
@ -368,7 +354,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'a';
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].getLocal('dir');
var dir = fixture.debugElement.children[0].getLocal('dir');
expect(dir.dirProp).toEqual('aa');
async.done();
});
@ -405,7 +391,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
expect(tc.inject(MyDir).dirProp).toEqual('Hello World!');
expect(tc.inject(ChildComp).dirProp).toEqual(null);
@ -447,7 +433,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var idDir = tc.inject(IdDir);
fixture.debugElement.componentInstance.ctxProp = 'some_id';
@ -563,7 +549,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
expect(fixture.debugElement.children[0].children[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
async.done();
@ -579,7 +565,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('localdir'))
expect(fixture.debugElement.children[0].children[0].getLocal('localdir'))
.toBeAnInstanceOf(ExportDir);
async.done();
@ -620,34 +606,31 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var childCmp = fixture.debugElement.children[0].children[0];
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.componentViewChildren[0].getLocal('bob'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.not.toBe(
fixture.debugElement.componentViewChildren[0].getLocal('bob'));
expect(childCmp.getLocal('alice')).toBeAnInstanceOf(ChildComp);
expect(childCmp.getLocal('bob')).toBeAnInstanceOf(ChildComp);
expect(childCmp.getLocal('alice')).not.toBe(childCmp.getLocal('bob'));
async.done();
})}));
it('should assign the component instance to a var- with shorthand syntax',
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp #alice></child-cmp>',
directives: [ChildComp]
}))
(tcb: TestComponentBuilder,
async) => {tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp #alice></child-cmp>',
directives: [ChildComp]
}))
.createAsync(MyComp)
.then((fixture) => {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.children[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
async.done();
})}));
async.done();
})}));
it('should assign the element instance to a user-defined variable',
inject([TestComponentBuilder, AsyncTestCompleter],
@ -660,7 +643,7 @@ function declareTests() {
.then((fixture) => {
var value =
fixture.debugElement.componentViewChildren[0].getLocal('alice');
fixture.debugElement.children[0].children[0].getLocal('alice');
expect(value).not.toBe(null);
expect(value.tagName.toLowerCase()).toEqual('div');
@ -677,7 +660,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('superAlice'))
expect(fixture.debugElement.children[0].children[0].getLocal('superAlice'))
.toBeAnInstanceOf(ChildComp);
async.done();
@ -719,7 +702,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
@ -745,7 +728,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.debugElement.componentInstance.ctxProp = "one";
fixture.detectChanges();
@ -771,7 +754,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.debugElement.componentInstance.ctxProp = "one";
fixture.detectChanges();
@ -797,7 +780,7 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
@ -830,8 +813,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var childComponent =
fixture.debugElement.componentViewChildren[0].getLocal('child');
var childComponent = fixture.debugElement.children[0].getLocal('child');
expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
async.done();
@ -853,7 +835,7 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[0].children[1];
var tc = fixture.debugElement.children[0].children[0].children[0];
var childComponent = tc.getLocal('child');
expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
@ -872,7 +854,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var emitter = tc.inject(DirectiveEmittingEvent);
var listener = tc.inject(DirectiveListeningEvent);
@ -907,9 +889,10 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.childNodes[0];
var emitter = tc.inject(DirectiveEmittingEvent);
var myComp = tc.inject(MyComp);
var myComp = fixture.debugElement.inject(MyComp);
var listener = tc.inject(DirectiveListeningEvent);
myComp.ctxProp = '';
@ -934,7 +917,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var dir = tc.inject(DirectiveWithTwoWayBinding);
fixture.debugElement.componentInstance.ctxProp = 'one';
@ -961,7 +944,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
dispatchEvent(tc.nativeElement, 'domEvent');
@ -988,7 +971,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
@ -1017,8 +1000,7 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, "role"))
expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, "role"))
.toEqual("button");
async.done();
@ -1034,7 +1016,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var updateHost = tc.inject(DirectiveUpdatingHostProperties);
updateHost.id = "newId";
@ -1066,17 +1048,15 @@ function declareTests() {
.then((fixture) => {
var dispatchedEvent = DOM.createMouseEvent('click');
var dispatchedEvent2 = DOM.createMouseEvent('click');
DOM.dispatchEvent(fixture.debugElement.componentViewChildren[0].nativeElement,
DOM.dispatchEvent(fixture.debugElement.children[0].nativeElement,
dispatchedEvent);
DOM.dispatchEvent(fixture.debugElement.componentViewChildren[1].nativeElement,
DOM.dispatchEvent(fixture.debugElement.children[1].nativeElement,
dispatchedEvent2);
expect(DOM.isPrevented(dispatchedEvent)).toBe(true);
expect(DOM.isPrevented(dispatchedEvent2)).toBe(false);
expect(
DOM.getChecked(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getChecked(fixture.debugElement.children[0].nativeElement))
.toBeFalsy();
expect(
DOM.getChecked(fixture.debugElement.componentViewChildren[1].nativeElement))
expect(DOM.getChecked(fixture.debugElement.children[1].nativeElement))
.toBeTruthy();
async.done();
});
@ -1098,7 +1078,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[1];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
var listenerother = tc.inject(DirectiveListeningDomEventOther);
@ -1136,11 +1116,11 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0].children[0];
var dynamicVp = tc.inject(DynamicViewport);
dynamicVp.done.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[1].nativeElement)
expect(fixture.debugElement.children[0].children[1].nativeElement)
.toHaveText('dynamic greet');
async.done();
});
@ -1157,7 +1137,7 @@ function declareTests() {
{template: '<input static type="text" title>', directives: [NeedsAttribute]}))
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var needsAttribute = tc.inject(NeedsAttribute);
expect(needsAttribute.typeAttribute).toEqual('text');
expect(needsAttribute.staticAttribute).toEqual('');
@ -1183,7 +1163,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
var comp = fixture.debugElement.children[0].getLocal("consuming");
expect(comp.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@ -1201,7 +1181,7 @@ function declareTests() {
}))
.createAsync(DirectiveProvidingInjectableInView)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
var comp = fixture.debugElement.children[0].getLocal("consuming");
expect(comp.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@ -1231,7 +1211,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("dir");
var comp = fixture.debugElement.children[0].getLocal("dir");
expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@ -1257,7 +1237,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var gpComp = fixture.debugElement.componentViewChildren[0];
var gpComp = fixture.debugElement.children[0];
var parentComp = gpComp.children[0];
var childComp = parentComp.children[0];
@ -1289,8 +1269,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var providing =
fixture.debugElement.componentViewChildren[0].getLocal("providing");
var providing = fixture.debugElement.children[0].getLocal("providing");
expect(providing.created).toBe(false);
fixture.debugElement.componentInstance.ctxBoolProp = true;
@ -1435,7 +1414,7 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
tc.inject(DirectiveEmittingEvent).fireEvent("boom");
try {
@ -1750,8 +1729,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
expect(dir.dirProp).toEqual("aaa");
async.done();
});
@ -1766,13 +1744,11 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
dir.myAttr = "aaa";
fixture.detectChanges();
expect(
DOM.getOuterHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getOuterHTML(fixture.debugElement.children[0].nativeElement))
.toContain('my-attr="aaa"');
async.done();
});
@ -1791,8 +1767,8 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var emitter = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var emitter =
fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
emitter.fireEvent('fired !');
tick();
@ -1802,24 +1778,23 @@ function declareTests() {
it('should support host listener decorators',
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<with-prop-decorators></with-prop-decorators>',
directives: [DirectiveWithPropDecorators]
}))
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var native = fixture.debugElement.componentViewChildren[0].nativeElement;
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<with-prop-decorators></with-prop-decorators>',
directives: [DirectiveWithPropDecorators]
}))
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
var native = fixture.debugElement.children[0].nativeElement;
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
expect(dir.target).toBe(native);
async.done();
});
}));
expect(dir.target).toBe(native);
async.done();
});
}));
}
it('should support defining views in the component decorator',
@ -1831,7 +1806,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var native = fixture.debugElement.componentViewChildren[0].nativeElement;
var native = fixture.debugElement.children[0].nativeElement;
expect(native).toHaveText("No View Decorator: 123");
async.done();
});

79
modules/angular2/test/core/linker/projection_integration_spec.ts
View File

@ -21,7 +21,6 @@ import {
} from 'angular2/testing_internal';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {
bind,
@ -34,17 +33,15 @@ import {
View,
ViewContainerRef,
ViewEncapsulation,
ViewMetadata,
Scope
ViewMetadata
} from 'angular2/core';
import {
By,
} from 'angular2/platform/common_dom';
import {getAllDebugNodes} from 'angular2/src/core/debug/debug_node';
export function main() {
describe('projection', () => {
beforeEachProviders(() => [provide(AppViewListener, {useClass: AppViewListener})]);
it('should support simple components',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MainComp, new ViewMetadata({
@ -199,7 +196,8 @@ export function main() {
.then((main) => {
var viewportDirectives =
main.debugElement.queryAll(By.directive(ManualViewportDirective))
main.debugElement.children[0]
.childNodes.filter(By.directive(ManualViewportDirective))
.map(de => de.inject(ManualViewportDirective));
expect(main.debugElement.nativeElement).toHaveText('(, B)');
@ -244,8 +242,8 @@ export function main() {
.then((main) => {
var viewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
viewportDirective.show();
@ -269,8 +267,8 @@ export function main() {
.then((main) => {
var viewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, BC)');
@ -336,12 +334,20 @@ export function main() {
}))
.createAsync(MainComp)
.then((main) => {
var sourceDirective;
// We can't use the child nodes to get a hold of this because it's not in the dom at
// all.
getAllDebugNodes().forEach((debug) => {
if (debug.providerTokens.indexOf(ManualViewportDirective) !== -1) {
sourceDirective = debug.inject(ManualViewportDirective);
}
});
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('START()END');
projectDirective.show(sourceDirective.templateRef);
@ -361,10 +367,11 @@ export function main() {
.then((main) => {
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START()END');
projectDirective.show(sourceDirective.templateRef);
@ -389,10 +396,11 @@ export function main() {
.then((main) => {
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('(, B)START()END');
projectDirective.show(sourceDirective.templateRef);
@ -419,8 +427,8 @@ export function main() {
main.detectChanges();
var manualDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('TREE(0:)');
manualDirective.show();
main.detectChanges();
@ -480,12 +488,12 @@ export function main() {
expect(main.debugElement.nativeElement).toHaveText('MAIN()');
var viewportElement =
main.debugElement.componentViewChildren[0].componentViewChildren[0];
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
viewportElement.inject(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST())');
viewportElement =
main.debugElement.componentViewChildren[0].componentViewChildren[1];
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
viewportElement.inject(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
@ -540,21 +548,24 @@ export function main() {
.then((main) => {
var conditionalComp =
main.debugElement.query(By.directive(ConditionalContentComponent));
var viewViewportDir =
conditionalComp.query(By.directive(ManualViewportDirective), Scope.view)
.inject(ManualViewportDirective);
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)');
viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(AC, D)');
var contentViewportDir =
conditionalComp.query(By.directive(ManualViewportDirective), Scope.light)
.inject(ManualViewportDirective);
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)');
// first show content viewport, then the view viewport,
// i.e. projection needs to take create of already
// created views
contentViewportDir.show();
viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(ABC, D)');
// hide view viewport, and test that it also hides

76
modules/angular2/test/core/linker/query_integration_spec.ts
View File

@ -53,8 +53,7 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@ -70,7 +69,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
view.detectChanges();
@ -92,7 +91,7 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
@ -121,7 +120,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
@ -181,8 +180,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|4|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
async.done();
});
@ -198,8 +196,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@ -217,12 +214,11 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren)).toHaveText('2|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@ -258,13 +254,11 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|1d|2d|3d|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
view.debugElement.componentInstance.list = ['3d', '2d'];
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3d|2d|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|');
async.done();
});
@ -279,8 +273,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
var needsTpl: NeedsTpl =
view.debugElement.componentViewChildren[0].inject(NeedsTpl);
var needsTpl: NeedsTpl = view.debugElement.children[0].inject(NeedsTpl);
expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).hasLocal('light'))
.toBe(true);
@ -304,7 +297,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.detectChanges();
ObservableWrapper.subscribe(q.query.changes, (_) => {
@ -329,8 +322,8 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q1 = view.debugElement.componentViewChildren[0].getLocal("q1");
var q2 = view.debugElement.componentViewChildren[0].getLocal("q2");
var q1 = view.debugElement.children[0].getLocal("q1");
var q2 = view.debugElement.children[0].getLocal("q2");
var firedQ2 = false;
@ -354,7 +347,8 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
var q: NeedsQuery = view.debugElement.children[0].getLocal('q');
expect(q.query.length).toEqual(1);
view.debugElement.componentInstance.shouldShow = false;
@ -363,7 +357,7 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q2: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
var q2: NeedsQuery = view.debugElement.children[0].getLocal('q');
expect(q2.query.length).toEqual(1);
@ -382,7 +376,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@ -405,7 +399,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.detectChanges();
expect(q.query.first.text).toEqual("one");
@ -424,7 +418,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@ -451,7 +445,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@ -475,8 +469,7 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('hello|world|');
expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
async.done();
});
@ -489,8 +482,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryByLabel =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryByLabel = view.debugElement.children[0].getLocal("q");
view.detectChanges();
expect(q.query.first.nativeElement).toHaveText("text");
@ -508,7 +500,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
view.detectChanges();
@ -529,7 +521,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@ -546,7 +538,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@ -563,7 +555,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryIf = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryIf = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@ -586,8 +578,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryNestedIf =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryNestedIf = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@ -612,8 +603,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrder =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@ -636,8 +626,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrderWithParent =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@ -660,8 +649,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrder =
view.debugElement.componentViewChildren[0].getLocal('q');
var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal('q');
// no significance to 50, just a reasonably large cycle.
for (var i = 0; i < 50; i++) {
@ -685,7 +673,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.query1).toBeDefined();
expect(q.query2).toBeDefined();
expect(q.query3).toBeDefined();

4
modules/angular2/test/core/spies.dart
View File

@ -8,7 +8,6 @@ import 'package:angular2/src/core/linker/directive_resolver.dart';
import 'package:angular2/src/core/linker/view.dart';
import 'package:angular2/src/core/linker/element_ref.dart';
import 'package:angular2/src/core/linker/view_manager.dart';
import 'package:angular2/src/core/linker/view_listener.dart';
import 'package:angular2/src/platform/dom/dom_adapter.dart';
import 'package:angular2/testing_internal.dart';
@ -52,8 +51,5 @@ class SpyRenderer extends SpyObject implements Renderer {}
@proxy
class SpyRootRenderer extends SpyObject implements RootRenderer {}
@proxy
class SpyAppViewListener extends SpyObject implements AppViewListener {}
@proxy
class SpyDomAdapter extends SpyObject implements DomAdapter {}

6
modules/angular2/test/core/spies.ts
View File

@ -11,7 +11,6 @@ import {DirectiveResolver} from 'angular2/src/core/linker/directive_resolver';
import {AppView, AppProtoView, HostViewFactory} from 'angular2/src/core/linker/view';
import {ElementRef} from 'angular2/src/core/linker/element_ref';
import {AppViewManager_} from 'angular2/src/core/linker/view_manager';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {DomAdapter} from 'angular2/src/platform/dom/dom_adapter';
import {SpyObject, proxy} from 'angular2/testing_internal';
@ -71,6 +70,7 @@ export class SpyRenderer extends SpyObject {
this.spy('setElementProperty');
this.spy('setElementAttribute');
this.spy('setBindingDebugInfo');
this.spy('setElementDebugInfo');
this.spy('setElementClass');
this.spy('setElementStyle');
this.spy('invokeElementMethod');
@ -88,10 +88,6 @@ export class SpyRootRenderer extends SpyObject {
}
}
export class SpyAppViewListener extends SpyObject {
constructor() { super(AppViewListener); }
}
export class SpyDomAdapter extends SpyObject {
constructor() { super(DomAdapter); }
}

71
modules/angular2/test/platform/browser/debug/debug_element_view_listener_spec.ts
View File

@ -1,71 +0,0 @@
import {
AsyncTestCompleter,
beforeEach,
ddescribe,
xdescribe,
describe,
dispatchEvent,
expect,
iit,
inject,
beforeEachProviders,
it,
xit,
TestComponentBuilder,
} from 'angular2/testing_internal';
import {global} from 'angular2/src/facade/lang';
import {provide, Component, Directive, Injectable, View} from 'angular2/core';
import {inspectNativeElement} from 'angular2/platform/browser';
import {IS_DART} from 'angular2/src/facade/lang';
@Component({selector: 'my-comp'})
@View({directives: []})
@Injectable()
class MyComp {
ctxProp: string;
}
export function main() {
describe('element probe', function() {
it('should return a TestElement from a dom element',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideTemplate(MyComp, '<div some-dir></div>')
.createAsync(MyComp)
.then((componentFixture) => {
expect(inspectNativeElement(componentFixture.debugElement.nativeElement)
.componentInstance)
.toBeAnInstanceOf(MyComp);
async.done();
});
}));
it('should clean up whent the view is destroyed',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideTemplate(MyComp, '')
.createAsync(MyComp)
.then((componentFixture) => {
componentFixture.destroy();
expect(inspectNativeElement(componentFixture.debugElement.nativeElement)).toBe(null);
async.done();
});
}));
if (!IS_DART) {
it('should provide a global function to inspect elements',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideTemplate(MyComp, '')
.createAsync(MyComp)
.then((componentFixture) => {
expect(global['ng']['probe'](componentFixture.debugElement.nativeElement)
.componentInstance)
.toBeAnInstanceOf(MyComp);
async.done();
});
}), 1000);
}
});
}

42
modules/angular2/test/public_api_spec.ts
View File

@ -890,19 +890,40 @@ var NG_CORE = [
'PLATFORM_PIPES:js',
'DebugElement',
'DebugElement.children',
'DebugElement.attributes',
'DebugElement.attributes=',
'DebugElement.properties',
'DebugElement.properties=',
'DebugElement.childNodes',
'DebugElement.childNodes=',
'DebugElement.injector',
'DebugElement.injector=',
'DebugElement.listeners',
'DebugElement.listeners=',
'DebugElement.locals',
'DebugElement.locals=',
'DebugElement.name',
'DebugElement.name=',
'DebugElement.parent',
'DebugElement.parent=',
'DebugElement.componentInstance',
'DebugElement.componentViewChildren',
'DebugElement.elementRef',
/*
Abstract methods
'DebugElement.getDirectiveInstance()',
'DebugElement.componentInstance=',
'DebugElement.getLocal()',
'DebugElement.hasDirective()',
'DebugElement.providerTokens',
'DebugElement.providerTokens=',
'DebugElement.inject()',
*/
'DebugElement.nativeNode',
'DebugElement.nativeNode=',
'DebugElement.nativeElement',
'DebugElement.nativeElement=',
'DebugElement.query()',
'DebugElement.queryAll()',
'DebugElement.queryAllNodes()',
'DebugElement.triggerEventHandler()',
'DebugElement.setDebugInfo()',
'DebugElement.addChild()',
'DebugElement.removeChild()',
'DebugElement.insertChildrenAfter()',
'Dependency#fromKey()',
'Dependency',
'Dependency.key',
@ -1208,10 +1229,6 @@ var NG_CORE = [
'ResolvedFactory.dependencies=',
'ResolvedFactory.factory',
'ResolvedFactory.factory=',
'Scope#all()',
'Scope#light()',
'Scope#view()',
'Scope', // TODO(misko): rename?
'Self',
'SelfMetadata',
'SkipSelf',
@ -1354,7 +1371,6 @@ var NG_CORE = [
'provide()',
'createNgZone()',
'forwardRef():js',
'inspectElement()',
'platform():js',
'resolveForwardRef():js',
'PLATFORM_COMMON_PROVIDERS',
@ -1600,8 +1616,8 @@ var NG_PLATFORM_BROWSER = [
'By#directive():js',
'By:js',
'DOCUMENT',
'ELEMENT_PROBE_BINDINGS:js',
'ELEMENT_PROBE_PROVIDERS:js',
'ELEMENT_PROBE_PROVIDERS_PROD_MODE:js',
'Title.getTitle():js',
'Title.setTitle():js',
'Title:js',

5
modules/angular2/test/router/integration/impl/async_route_spec_impl.ts
View File

@ -12,6 +12,9 @@ import {
xit,
} from 'angular2/testing_internal';
import {By} from 'angular2/platform/common_dom';
import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '../util';
import {Router, AsyncRoute, Route, Location} from 'angular2/router';
@ -33,7 +36,7 @@ import {
} from './fixture_components';
function getLinkElement(rtc: ComponentFixture) {
return rtc.debugElement.componentViewChildren[0].nativeElement;
return rtc.debugElement.query(By.css('a')).nativeElement;
}
function asyncRoutesWithoutChildrenWithRouteData() {

3
modules/angular2/test/router/integration/impl/aux_route_spec_impl.ts
View File

@ -15,6 +15,7 @@ import {
xit
} from 'angular2/testing_internal';
import {By} from 'angular2/platform/common_dom';
import {provide, Component, Injector, Inject} from 'angular2/core';
import {Router, ROUTER_DIRECTIVES, RouteParams, RouteData, Location} from 'angular2/router';
@ -24,7 +25,7 @@ import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '..
import {BaseException} from 'angular2/src/facade/exceptions';
function getLinkElement(rtc: ComponentFixture, linkIndex: number = 0) {
return rtc.debugElement.componentViewChildren[linkIndex].nativeElement;
return rtc.debugElement.queryAll(By.css('a'))[linkIndex].nativeElement;
}
function auxRoutes() {

3
modules/angular2/test/router/integration/impl/sync_route_spec_impl.ts
View File

@ -14,13 +14,14 @@ import {
import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '../util';
import {By} from 'angular2/platform/common_dom';
import {Router, Route, Location} from 'angular2/router';
import {HelloCmp, UserCmp, TeamCmp, ParentCmp, ParentWithDefaultCmp} from './fixture_components';
function getLinkElement(rtc: ComponentFixture) {
return rtc.debugElement.componentViewChildren[0].nativeElement;
return rtc.debugElement.query(By.css('a')).nativeElement;
}
function syncRoutesWithoutChildrenWithoutParams() {

55
modules/angular2/test/router/integration/router_link_spec.ts
View File

@ -17,6 +17,7 @@ import {
SpyObject
} from 'angular2/testing_internal';
import {By} from 'angular2/platform/common_dom';
import {NumberWrapper} from 'angular2/src/facade/lang';
import {PromiseWrapper} from 'angular2/src/facade/async';
import {ListWrapper} from 'angular2/src/facade/collection';
@ -111,9 +112,7 @@ export function main() {
fixture.debugElement.componentInstance.name = 'brian';
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('brian');
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'href'))
.toEqual('/user/brian');
expect(getHref(fixture)).toEqual('/user/brian');
async.done();
});
}));
@ -127,11 +126,7 @@ export function main() {
.then((_) => router.navigateByUrl('/page/1'))
.then((_) => {
fixture.detectChanges();
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[0]
.nativeElement,
'href'))
.toEqual('/page/2');
expect(getHref(fixture)).toEqual('/page/2');
async.done();
});
}));
@ -146,11 +141,7 @@ export function main() {
.then((_) => router.navigateByUrl('/page/1'))
.then((_) => {
fixture.detectChanges();
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[0]
.nativeElement,
'href'))
.toEqual('/page/2');
expect(getHref(fixture)).toEqual('/page/2');
async.done();
});
}));
@ -164,11 +155,7 @@ export function main() {
.then((_) => router.navigateByUrl('/book/1984/page/1'))
.then((_) => {
fixture.detectChanges();
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[0]
.nativeElement,
'href'))
.toEqual('/book/1984/page/100');
expect(getHref(fixture)).toEqual('/book/1984/page/100');
async.done();
});
}));
@ -202,11 +189,7 @@ export function main() {
.then((_) => router.navigateByUrl('/child-with-grandchild/grandchild'))
.then((_) => {
fixture.detectChanges();
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[0]
.nativeElement,
'href'))
.toEqual('/child-with-grandchild/grandchild');
expect(getHref(fixture)).toEqual('/child-with-grandchild/grandchild');
async.done();
});
}));
@ -219,15 +202,17 @@ export function main() {
.then((_) => router.navigateByUrl('/book/1984/page/1'))
.then((_) => {
fixture.detectChanges();
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[0]
// TODO(juliemr): This should be one By.css('book-cmp a') query, but the parse5
// adapter
// can't handle css child selectors.
expect(DOM.getAttribute(fixture.debugElement.query(By.css('book-cmp'))
.query(By.css('a'))
.nativeElement,
'href'))
.toEqual('/book/1984/page/100');
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[2]
.componentViewChildren[0]
expect(DOM.getAttribute(fixture.debugElement.query(By.css('page-cmp'))
.query(By.css('a'))
.nativeElement,
'href'))
.toEqual('/book/1984/page/2');
@ -241,11 +226,7 @@ export function main() {
.then((_) => router.navigateByUrl('/'))
.then((_) => {
fixture.detectChanges();
expect(DOM.getAttribute(fixture.debugElement.componentViewChildren[1]
.componentViewChildren[0]
.nativeElement,
'href'))
.toEqual('/(aside)');
expect(getHref(fixture)).toEqual('/(aside)');
async.done();
});
}));
@ -335,9 +316,7 @@ export function main() {
fixture.debugElement.componentInstance.name = 'brian';
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('brian');
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'href'))
.toEqual('/user/brian');
expect(getHref(fixture)).toEqual('/user/brian');
async.done();
});
}));
@ -347,7 +326,7 @@ export function main() {
describe('when clicked', () => {
var clickOnElement = function(view) {
var anchorEl = fixture.debugElement.componentViewChildren[0].nativeElement;
var anchorEl = fixture.debugElement.query(By.css('a')).nativeElement;
var dispatchedEvent = DOM.createMouseEvent('click');
DOM.dispatchEvent(anchorEl, dispatchedEvent);
return dispatchedEvent;
@ -398,7 +377,7 @@ export function main() {
}
function getHref(tc: ComponentFixture) {
return DOM.getAttribute(tc.debugElement.componentViewChildren[0].nativeElement, 'href');
return DOM.getAttribute(tc.debugElement.query(By.css('a')).nativeElement, 'href');
}
@Component({selector: 'my-comp'})

33
modules/angular2/test/web_workers/worker/renderer_integration_spec.ts
View File

@ -24,7 +24,6 @@ import {
Injectable,
ElementRef
} from 'angular2/core';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {NgIf} from 'angular2/common';
import {WebWorkerRootRenderer} from "angular2/src/web_workers/worker/renderer";
import {
@ -36,6 +35,7 @@ import {
import {Serializer} from "angular2/src/web_workers/shared/serializer";
import {RootRenderer} from "angular2/src/core/render/api";
import {DomRootRenderer, DomRootRenderer_} from 'angular2/src/platform/dom/dom_renderer';
import {DebugDomRootRenderer} from 'angular2/src/core/debug/debug_renderer';
import {RenderStore} from "angular2/src/web_workers/shared/render_store";
import {MessageBasedRenderer} from 'angular2/src/web_workers/ui/renderer';
import {createPairedMessageBuses, PairedMessageBuses} from '../shared/web_worker_test_util';
@ -44,6 +44,7 @@ import {
ServiceMessageBrokerFactory_
} from 'angular2/src/web_workers/shared/service_message_broker';
import {ChangeDetectorGenConfig} from 'angular2/src/core/change_detection/change_detection';
import {ElementRef_} from 'angular2/src/core/linker/element_ref';
import {
TEST_BROWSER_PLATFORM_PROVIDERS,
TEST_BROWSER_APPLICATION_PROVIDERS
@ -71,12 +72,13 @@ export function main() {
function createWorkerRenderer(workerSerializer: Serializer, uiSerializer: Serializer,
domRootRenderer: DomRootRenderer, uiRenderStore: RenderStore,
workerRenderStore: RenderStore): WebWorkerRootRenderer {
workerRenderStore: RenderStore): RootRenderer {
var messageBuses = createPairedMessageBuses();
var brokerFactory = createWebWorkerBrokerFactory(messageBuses, workerSerializer, uiSerializer,
domRootRenderer, uiRenderStore);
return new WebWorkerRootRenderer(brokerFactory, messageBuses.worker, workerSerializer,
workerRenderStore);
var workerRootRenderer = new WebWorkerRootRenderer(brokerFactory, messageBuses.worker,
workerSerializer, workerRenderStore);
return new DebugDomRootRenderer(workerRootRenderer);
}
describe("Web Worker Renderer", () => {
@ -110,8 +112,7 @@ export function main() {
uiRenderStore, workerRenderStore);
},
deps: [Serializer]
}),
provide(AppViewListener, {useClass: AppViewListener})
})
];
});
@ -129,7 +130,7 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '<div>{{ctxProp}}</div>'}))
.createAsync(MyComp)
.then((fixture) => {
var renderEl = getRenderElement(fixture.debugElement.elementRef);
var renderEl = getRenderElement(fixture.elementRef);
expect(renderEl).toHaveText('');
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
@ -167,9 +168,11 @@ export function main() {
};
// root element
checkSetters(fixture.debugElement.elementRef);
checkSetters(fixture.elementRef);
// nested elements
checkSetters(fixture.debugElement.componentViewChildren[0].elementRef);
checkSetters((<ElementRef_>fixture.elementRef)
.internalElement.componentView.appElements[0]
.ref);
async.done();
});
@ -184,7 +187,7 @@ export function main() {
.then((fixture) => {
(<MyComp>fixture.debugElement.componentInstance).ctxBoolProp = true;
fixture.detectChanges();
var el = getRenderElement(fixture.debugElement.elementRef);
var el = getRenderElement(fixture.elementRef);
expect(DOM.getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"');
async.done();
});
@ -199,7 +202,7 @@ export function main() {
.createAsync(MyComp)
.then((fixture) => {
var rootEl = getRenderElement(fixture.debugElement.elementRef);
var rootEl = getRenderElement(fixture.elementRef);
expect(rootEl).toHaveText('');
fixture.debugElement.componentInstance.ctxBoolProp = true;
@ -220,7 +223,9 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '<input [title]="y">'}))
.createAsync(MyComp)
.then((fixture) => {
var elRef = fixture.debugElement.componentViewChildren[0].elementRef;
var elRef = (<ElementRef_>fixture.elementRef)
.internalElement.componentView.appElements[0]
.ref;
getRenderer(elRef)
.invokeElementMethod(elRef.nativeElement, 'setAttribute', ['a', 'b']);
@ -235,7 +240,9 @@ export function main() {
new ViewMetadata({template: '<input (change)="ctxNumProp = 1">'}))
.createAsync(MyComp)
.then((fixture) => {
var elRef = fixture.debugElement.componentViewChildren[0].elementRef;
var elRef = (<ElementRef_>fixture.elementRef)
.internalElement.componentView.appElements[0]
.ref;
dispatchEvent(getRenderElement(elRef), 'change');
expect(fixture.componentInstance.ctxNumProp).toBe(1);

6
modules/angular2_material/test/button_spec.ts
View File

@ -12,9 +12,8 @@ import {
it,
xit,
} from 'angular2/testing_internal';
import {DebugElement} from 'angular2/src/core/debug/debug_element';
import {Component, View, ViewMetadata, bind, provide} from 'angular2/core';
import {Component, View, ViewMetadata, bind, provide, DebugElement} from 'angular2/core';
import {UrlResolver} from 'angular2/compiler';
import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
@ -110,7 +109,8 @@ export function main() {
/** Gets a child DebugElement by tag name. */
function getChildDebugElement(parent: DebugElement, tagName: string): DebugElement {
return parent.query(debugEl => debugEl.nativeElement.tagName.toLowerCase() == tagName);
var el = parent.query(debugEl => debugEl.nativeNode.tagName.toLowerCase() == tagName);
return <DebugElement>el;
}
/** Test component that contains an MdButton. */

34
tools/public_api_guard/public_api_spec.ts
View File

@ -119,17 +119,20 @@ const CORE = [
'CyclicDependencyError.constructor(injector:Injector, key:Key)',
'DebugElement',
'DebugElement.children:DebugElement[]',
'DebugElement.componentInstance:any',
'DebugElement.componentViewChildren:DebugElement[]',
'DebugElement.elementRef:ElementRef',
'DebugElement.getDirectiveInstance(directiveIndex:number):any',
'DebugElement.getLocal(name:string):any',
'DebugElement.hasDirective(type:Type):boolean',
'DebugElement.inject(type:Type):any',
'DebugElement.nativeElement:any',
'DebugElement.query(predicate:Predicate<DebugElement>, scope:Function):DebugElement',
'DebugElement.queryAll(predicate:Predicate<DebugElement>, scope:Function):DebugElement[]',
'DebugElement.triggerEventHandler(eventName:string, eventObj:Event):void',
'DebugElement.addChild(child:DebugNode):any',
'DebugElement.attributes:Map<string, any>',
'DebugElement.childNodes:DebugNode[]',
'DebugElement.constructor(nativeNode:any, parent:any)',
'DebugElement.insertChildrenAfter(child:DebugNode, newChildren:DebugNode[]):any',
'DebugElement.name:string',
'DebugElement.properties:Map<string, any>',
'DebugElement.query(predicate:Predicate<DebugElement>):DebugElement',
'DebugElement.queryAll(predicate:Predicate<DebugElement>):DebugElement[]',
'DebugElement.queryAllNodes(predicate:Predicate<DebugNode>):DebugNode[]',
'DebugElement.removeChild(child:DebugNode):any',
'DebugElement.triggerEventHandler(eventName:string, eventObj:Event):any',
'asNativeElements(debugEls:DebugElement[]):any',
'Dependency',
'Dependency.constructor(key:Key, optional:boolean, lowerBoundVisibility:any, upperBoundVisibility:any, properties:any[])',
'Dependency.fromKey(key:Key):Dependency',
@ -389,6 +392,7 @@ const CORE = [
'Renderer.setElementProperty(renderElement:any, propertyName:string, propertyValue:any):any',
'Renderer.setElementStyle(renderElement:any, styleName:string, styleValue:string):any',
'Renderer.setText(renderNode:any, text:string):any',
'Renderer.setElementDebugInfo(renderElement:any, info:RenderDebugInfo):any',
'ResolvedBinding',
'ResolvedFactory',
'ResolvedFactory.constructor(factory:Function, dependencies:Dependency[])',
@ -398,10 +402,6 @@ const CORE = [
'ResolvedProvider.resolvedFactories:ResolvedFactory[]',
'RootRenderer',
'RootRenderer.renderComponent(componentType:RenderComponentType):Renderer',
'Scope',
'Scope.all(debugElement:DebugElement):DebugElement[]',
'Scope.light(debugElement:DebugElement):DebugElement[]',
'Scope.view(debugElement:DebugElement):DebugElement[]',
'SelfFactory',
'SelfMetadata',
'SelfMetadata.toString():string',
@ -489,7 +489,6 @@ const CORE = [
'WrappedValue.constructor(wrapped:any)',
'WrappedValue.wrap(value:any):WrappedValue',
'ZeroArgFunction',
'asNativeElements(arr:DebugElement[]):any[]',
'bind(token:any):ProviderBuilder',
'const APPLICATION_COMMON_PROVIDERS:Array<Type|Provider|any[]>',
'const APP_COMPONENT:OpaqueToken',
@ -503,7 +502,6 @@ const CORE = [
'createNgZone():NgZone',
'enableProdMode():any',
'forwardRef(forwardRefFn:ForwardRefFn):Type',
'inspectElement(elementRef:ElementRef):DebugElement',
'platform(providers:Array<Type|Provider|any[]>):PlatformRef',
'provide(token:any, {useClass,useValue,useExisting,useFactory,deps,multi}:{useClass?:Type, useValue?:any, useExisting?:any, useFactory?:Function, deps?:Object[], multi?:boolean}):Provider',
'resolveForwardRef(type:any):any',
@ -1059,11 +1057,11 @@ const BROWSER = [
'bootstrapStatic(appComponentType:Type, customProviders:Array<any>, initReflector:Function):Promise<ComponentRef>',
'const BROWSER_APP_PROVIDERS:Array<any>',
'const BROWSER_PROVIDERS:Array<any>',
'const ELEMENT_PROBE_BINDINGS:any',
'const ELEMENT_PROBE_PROVIDERS:any[]',
'const ELEMENT_PROBE_PROVIDERS_PROD_MODE:any[]',
'disableDebugTools():void',
'enableDebugTools(ref:ComponentRef):void',
'inspectNativeElement(element:any):DebugElement'
'inspectNativeElement(element:any):DebugNode'
];
describe('public API', () => {