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,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);
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user