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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user