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