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

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',