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

feat(debug): replace DebugElement with new Debug DOM

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/test/router/integration/impl/async_route_spec_impl.ts
+4 -1
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() {
modules/angular2/test/router/integration/impl/aux_route_spec_impl.ts
+2 -1
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() {
modules/angular2/test/router/integration/impl/sync_route_spec_impl.ts
+2 -1
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() {
modules/angular2/test/router/integration/router_link_spec.ts
+17 -38
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'})