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/common/directives/ng_class_spec.ts
+3 -4
View File
@@ -19,10 +19,9 @@ import {Component, View, provide} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {NgClass} from 'angular2/src/common/directives/ng_class';
function detectChangesAndCheck(fixture: ComponentFixture, classes: string, elIndex: number = 0) {
function detectChangesAndCheck(fixture: ComponentFixture, classes: string) {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[elIndex].nativeElement.className)
.toEqual(classes);
expect(fixture.debugElement.children[0].nativeElement.className).toEqual(classes);
}
export function main() {
@@ -39,7 +38,7 @@ export function main() {
fixture.detectChanges();
fixture.debugElement.componentInstance.items = [['1']];
detectChangesAndCheck(fixture, '1', 1);
detectChangesAndCheck(fixture, '1');
async.done();
});
modules/angular2/test/common/directives/ng_for_spec.ts
+3 -3
View File
@@ -318,7 +318,7 @@ export function main() {
'<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
var testComponent = fixture.debugElement.componentViewChildren[0];
var testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@@ -334,7 +334,7 @@ export function main() {
.overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
var testComponent = fixture.debugElement.componentViewChildren[0];
var testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@@ -352,7 +352,7 @@ export function main() {
'<test-cmp><li template="#item #i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
var testComponent = fixture.debugElement.componentViewChildren[0];
var testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
modules/angular2/test/common/directives/ng_style_spec.ts
+13 -26
View File
@@ -32,8 +32,7 @@ export function main() {
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
async.done();
@@ -51,15 +50,13 @@ export function main() {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expr = fixture.debugElement.componentInstance.expr;
expr['max-width'] = '30%';
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('30%');
async.done();
@@ -75,14 +72,12 @@ export function main() {
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
async.done();
@@ -98,20 +93,16 @@ export function main() {
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
async.done();
@@ -127,21 +118,17 @@ export function main() {
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(fixture.debugElement.componentInstance.expr, 'max-width');
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'font-size'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'max-width'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
async.done();
modules/angular2/test/common/forms/integration_spec.ts
+4 -4
View File
@@ -673,7 +673,7 @@ export function main() {
fixture.debugElement.componentInstance.name = null;
fixture.detectChanges();
var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
var form = fixture.debugElement.children[0].inject(NgForm);
expect(form.controls['user']).not.toBeDefined();
tick();
@@ -708,7 +708,7 @@ export function main() {
fixture.debugElement.componentInstance.name = null;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren.length).toEqual(0);
expect(fixture.debugElement.children[0].providerTokens.length).toEqual(0);
async.done();
});
}));
@@ -728,7 +728,7 @@ export function main() {
fixture.debugElement.componentInstance.name = 'show';
fixture.detectChanges();
tick();
var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
var form = fixture.debugElement.children[0].inject(NgForm);
expect(form.controls['login']).toBeDefined();
@@ -756,7 +756,7 @@ export function main() {
fixture.debugElement.componentInstance.name = 'show';
fixture.detectChanges();
tick();
var form = fixture.debugElement.componentViewChildren[0].inject(NgForm);
var form = fixture.debugElement.children[0].inject(NgForm);
expect(form.controls['user']).toBeDefined();
modules/angular2/test/core/debug/debug_element_spec.ts
-294
View File
@@ -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();
});
}));
});
}
modules/angular2/test/core/debug/debug_node_spec.ts
+392
View File
@@ -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();
});
}));
});
}
modules/angular2/test/core/forward_ref_integration_spec.ts
+1 -2
View File
@@ -32,8 +32,7 @@ export function main() {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.createAsync(App).then((tc) => {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
.toHaveText('frame(lock)');
expect(asNativeElements(tc.debugElement.children)).toHaveText('frame(lock)');
async.done();
});
}));
modules/angular2/test/core/linker/dynamic_component_loader_spec.ts
+123 -125
View File
@@ -17,12 +17,11 @@ import {
} from 'angular2/testing_internal';
import {OnDestroy} from 'angular2/core';
import {Injector, inspectElement} from 'angular2/core';
import {Injector} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {By} from 'angular2/platform/common_dom';
import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
import {ElementRef} from 'angular2/src/core/linker/element_ref';
import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {ComponentFixture_} from "angular2/src/testing/test_component_builder";
@@ -34,76 +33,6 @@ export function main() {
describe('DynamicComponentLoader', function() {
describe("loading into a location", () => {
it('should work',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
async.done();
});
});
}));
it('should return a disposable component ref',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
.then(ref => {
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("Location;");
async.done();
});
});
}));
it('should allow to dispose even if the location has been removed',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp]
}))
.overrideView(
ChildComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
tc.debugElement.componentInstance.ctxBoolProp = true;
tc.detectChanges();
var childCompEl = tc.debugElement.query(By.css('child-cmp'));
loader.loadIntoLocation(DynamicallyLoaded, childCompEl.elementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
tc.debugElement.componentInstance.ctxBoolProp = false;
tc.detectChanges();
expect(tc.debugElement.nativeElement).toHaveText("");
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("");
async.done();
});
});
}));
it('should update host properties',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
@@ -112,21 +41,94 @@ export function main() {
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef, 'loc')
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
.then(ref => {
ref.instance.id = "new value";
tc.detectChanges();
var newlyInsertedElement =
DOM.childNodes(tc.debugElement.nativeElement)[1];
expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
async.done();
});
});
}));
it('should return a disposable component ref',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
.then(ref => {
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("Location;");
async.done();
});
});
}));
it('should allow to dispose even if the location has been removed',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp]
}))
.overrideView(
ChildComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
tc.debugElement.componentInstance.ctxBoolProp = true;
tc.detectChanges();
var childCompEl = (<ElementRef_>tc.elementRef).internalElement;
// TODO(juliemr): This is hideous, see if there's a better way to handle
// child element refs now.
var childElementRef =
childCompEl.componentView.appElements[0].nestedViews[0].appElements[0].ref;
loader.loadIntoLocation(DynamicallyLoaded, childElementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
tc.debugElement.componentInstance.ctxBoolProp = false;
tc.detectChanges();
expect(tc.debugElement.nativeElement).toHaveText("");
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("");
async.done();
});
});
}));
it('should update host properties',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithHostProps, tc.elementRef, 'loc')
.then(ref => {
ref.instance.id = "new value";
tc.detectChanges();
var newlyInsertedElement =
DOM.childNodes(tc.debugElement.nativeElement)[1];
expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
async.done();
});
});
}));
it('should leave the view tree in a consistent state if hydration fails',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
@@ -139,8 +141,8 @@ export function main() {
tc.debugElement
PromiseWrapper.catchError(
loader.loadIntoLocation(DynamicallyLoadedThrows,
tc.debugElement.elementRef, 'loc'),
loader.loadIntoLocation(DynamicallyLoadedThrows, tc.elementRef,
'loc'),
error => {
expect(error.message).toContain("ThrownInConstructor");
expect(() => tc.detectChanges()).not.toThrow();
@@ -159,8 +161,7 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
expect(() => loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef,
'someUnknownVariable'))
tc.elementRef, 'someUnknownVariable'))
.toThrowError('Could not find variable someUnknownVariable');
async.done();
});
@@ -173,9 +174,8 @@ export function main() {
new ViewMetadata({template: '<div #loc></div>', directives: []}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, 'loc', null,
[[DOM.createTextNode('hello')]])
loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
'loc', null, [[DOM.createTextNode('hello')]])
.then(ref => {
tc.detectChanges();
expect(tc.nativeElement).toHaveText('dynamic(hello)');
@@ -193,8 +193,8 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
PromiseWrapper.catchError(
loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, 'loc', null, []),
loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
'loc', null, []),
(e) => {
expect(e.message).toContain(
`The component ${stringify(DynamicallyLoadedWithNgContent)} has 1 <ng-content> elements, but only 0 slots were provided`);
@@ -215,7 +215,7 @@ export function main() {
}))
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
.then(ref => {
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(DOM.nextSibling(tc.debugElement.nativeElement))
@@ -227,38 +227,38 @@ export function main() {
}));
it('should return a disposable component ref',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><location #loc></location></div>',
directives: [Location]
}))
.
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><location #loc></location></div>',
directives: [Location]
}))
.
createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
.then(ref => {
loader.loadNextToLocation(DynamicallyLoaded2, tc.debugElement.elementRef)
.then(ref2 => {
var firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
var secondSibling = DOM.nextSibling(firstSibling);
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(firstSibling).toHaveText("DynamicallyLoaded;");
expect(secondSibling).toHaveText("DynamicallyLoaded2;");
createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
.then(ref => {
loader.loadNextToLocation(DynamicallyLoaded2, tc.elementRef)
.then(ref2 => {
var firstSibling =
DOM.nextSibling(tc.debugElement.nativeElement);
var secondSibling = DOM.nextSibling(firstSibling);
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(firstSibling).toHaveText("DynamicallyLoaded;");
expect(secondSibling).toHaveText("DynamicallyLoaded2;");
ref2.dispose();
ref2.dispose();
firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
secondSibling = DOM.nextSibling(firstSibling);
expect(secondSibling).toBeNull();
firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
secondSibling = DOM.nextSibling(firstSibling);
expect(secondSibling).toBeNull();
async.done();
});
});
});
}));
async.done();
});
});
});
}));
it('should update host properties',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
@@ -271,8 +271,7 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef)
loader.loadNextToLocation(DynamicallyLoadedWithHostProps, tc.elementRef)
.then(ref => {
ref.instance.id = "new value";
@@ -293,9 +292,8 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, null,
[[DOM.createTextNode('hello')]])
loader.loadNextToLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
null, [[DOM.createTextNode('hello')]])
.then(ref => {
tc.detectChanges();
var newlyInsertedElement =
modules/angular2/test/core/linker/integration_dart_spec.dart
+7 -7
View File
@@ -3,7 +3,7 @@ library angular2.test.di.integration_dart_spec;
import 'package:angular2/angular2.dart';
import 'package:angular2/core.dart';
import 'package:angular2/src/core/debug/debug_element.dart';
import 'package:angular2/src/core/debug/debug_node.dart';
import 'package:angular2/testing_internal.dart';
import 'package:observe/observe.dart';
import 'package:angular2/src/core/change_detection/differs/default_iterable_differ.dart';
@@ -56,7 +56,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('[Hello, World]');
async.done();
});
@@ -112,7 +112,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('prop:foo-prop;map:foo-map');
async.done();
});
@@ -149,7 +149,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
var cmp = tc.debugElement.componentViewChildren[0]
var cmp = tc.debugElement.children[0]
.inject(OnChangeComponent);
expect(cmp.prop).toEqual('hello');
expect(cmp.changes.containsKey('prop')).toEqual(true);
@@ -178,7 +178,7 @@ main() {
tc.detectChanges();
expect(log.result()).toEqual("check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('12');
tc.detectChanges();
@@ -194,7 +194,7 @@ main() {
// we changed the list => a check
expect(log.result()).toEqual("check; check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('123');
// we replaced the list => a check
@@ -204,7 +204,7 @@ main() {
tc.detectChanges();
expect(log.result()).toEqual("check; check; check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('567');
});
})));
modules/angular2/test/core/linker/integration_spec.ts
+93 -118
View File
@@ -160,8 +160,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.id)
.toEqual('Hello World!');
expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!');
async.done();
});
}));
@@ -176,15 +175,13 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Initial aria label';
fixture.detectChanges();
expect(
DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'aria-label'))
DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Initial aria label');
fixture.debugElement.componentInstance.ctxProp = 'Changed aria label';
fixture.detectChanges();
expect(
DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'aria-label'))
DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Changed aria label');
async.done();
@@ -201,14 +198,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'bar';
fixture.detectChanges();
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toEqual('bar');
fixture.debugElement.componentInstance.ctxProp = null;
fixture.detectChanges();
expect(DOM.hasAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
expect(DOM.hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toBeFalsy();
async.done();
@@ -225,14 +220,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = '10';
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'height'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('10px');
fixture.debugElement.componentInstance.ctxProp = null;
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'height'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('');
async.done();
@@ -248,13 +241,11 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
.toEqual(0);
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
fixture.debugElement.componentInstance.ctxNumProp = 5;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
.toEqual(5);
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
async.done();
});
@@ -269,13 +260,11 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
.toBeFalsy();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy();
fixture.debugElement.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
.toBeTruthy();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy();
async.done();
});
@@ -291,14 +280,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Some <span>HTML</span>';
fixture.detectChanges();
expect(
DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some <span>HTML</span>');
fixture.debugElement.componentInstance.ctxProp = 'Some other <div>HTML</div>';
fixture.detectChanges();
expect(
DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some other <div>HTML</div>');
async.done();
@@ -313,7 +300,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var nativeEl = fixture.debugElement.componentViewChildren[0].nativeElement;
var nativeEl = fixture.debugElement.children[0].nativeElement;
fixture.debugElement.componentInstance.ctxProp = 'foo bar';
fixture.detectChanges();
@@ -340,13 +327,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].inject(MyDir).dirProp)
.toEqual('Hello World!');
expect(fixture.debugElement.componentViewChildren[1].inject(MyDir).dirProp)
.toEqual('Hi there!');
expect(fixture.debugElement.componentViewChildren[2].inject(MyDir).dirProp)
.toEqual('Hi there!');
expect(fixture.debugElement.componentViewChildren[3].inject(MyDir).dirProp)
var containerSpan = fixture.debugElement.children[0];
expect(containerSpan.children[0].inject(MyDir).dirProp).toEqual('Hello World!');
expect(containerSpan.children[1].inject(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[2].inject(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[3].inject(MyDir).dirProp)
.toEqual('One more Hello World!');
async.done();
});
@@ -368,7 +354,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'a';
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].getLocal('dir');
var dir = fixture.debugElement.children[0].getLocal('dir');
expect(dir.dirProp).toEqual('aa');
async.done();
});
@@ -405,7 +391,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
expect(tc.inject(MyDir).dirProp).toEqual('Hello World!');
expect(tc.inject(ChildComp).dirProp).toEqual(null);
@@ -447,7 +433,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var idDir = tc.inject(IdDir);
fixture.debugElement.componentInstance.ctxProp = 'some_id';
@@ -563,7 +549,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
expect(fixture.debugElement.children[0].children[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
async.done();
@@ -579,7 +565,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('localdir'))
expect(fixture.debugElement.children[0].children[0].getLocal('localdir'))
.toBeAnInstanceOf(ExportDir);
async.done();
@@ -620,34 +606,31 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var childCmp = fixture.debugElement.children[0].children[0];
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.componentViewChildren[0].getLocal('bob'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.not.toBe(
fixture.debugElement.componentViewChildren[0].getLocal('bob'));
expect(childCmp.getLocal('alice')).toBeAnInstanceOf(ChildComp);
expect(childCmp.getLocal('bob')).toBeAnInstanceOf(ChildComp);
expect(childCmp.getLocal('alice')).not.toBe(childCmp.getLocal('bob'));
async.done();
})}));
it('should assign the component instance to a var- with shorthand syntax',
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp #alice></child-cmp>',
directives: [ChildComp]
}))
(tcb: TestComponentBuilder,
async) => {tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp #alice></child-cmp>',
directives: [ChildComp]
}))
.createAsync(MyComp)
.then((fixture) => {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.children[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
async.done();
})}));
async.done();
})}));
it('should assign the element instance to a user-defined variable',
inject([TestComponentBuilder, AsyncTestCompleter],
@@ -660,7 +643,7 @@ function declareTests() {
.then((fixture) => {
var value =
fixture.debugElement.componentViewChildren[0].getLocal('alice');
fixture.debugElement.children[0].children[0].getLocal('alice');
expect(value).not.toBe(null);
expect(value.tagName.toLowerCase()).toEqual('div');
@@ -677,7 +660,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('superAlice'))
expect(fixture.debugElement.children[0].children[0].getLocal('superAlice'))
.toBeAnInstanceOf(ChildComp);
async.done();
@@ -719,7 +702,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
@@ -745,7 +728,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.debugElement.componentInstance.ctxProp = "one";
fixture.detectChanges();
@@ -771,7 +754,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.debugElement.componentInstance.ctxProp = "one";
fixture.detectChanges();
@@ -797,7 +780,7 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
@@ -830,8 +813,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var childComponent =
fixture.debugElement.componentViewChildren[0].getLocal('child');
var childComponent = fixture.debugElement.children[0].getLocal('child');
expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
async.done();
@@ -853,7 +835,7 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[0].children[1];
var tc = fixture.debugElement.children[0].children[0].children[0];
var childComponent = tc.getLocal('child');
expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
@@ -872,7 +854,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var emitter = tc.inject(DirectiveEmittingEvent);
var listener = tc.inject(DirectiveListeningEvent);
@@ -907,9 +889,10 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.childNodes[0];
var emitter = tc.inject(DirectiveEmittingEvent);
var myComp = tc.inject(MyComp);
var myComp = fixture.debugElement.inject(MyComp);
var listener = tc.inject(DirectiveListeningEvent);
myComp.ctxProp = '';
@@ -934,7 +917,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var dir = tc.inject(DirectiveWithTwoWayBinding);
fixture.debugElement.componentInstance.ctxProp = 'one';
@@ -961,7 +944,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
dispatchEvent(tc.nativeElement, 'domEvent');
@@ -988,7 +971,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
@@ -1017,8 +1000,7 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, "role"))
expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, "role"))
.toEqual("button");
async.done();
@@ -1034,7 +1016,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var updateHost = tc.inject(DirectiveUpdatingHostProperties);
updateHost.id = "newId";
@@ -1066,17 +1048,15 @@ function declareTests() {
.then((fixture) => {
var dispatchedEvent = DOM.createMouseEvent('click');
var dispatchedEvent2 = DOM.createMouseEvent('click');
DOM.dispatchEvent(fixture.debugElement.componentViewChildren[0].nativeElement,
DOM.dispatchEvent(fixture.debugElement.children[0].nativeElement,
dispatchedEvent);
DOM.dispatchEvent(fixture.debugElement.componentViewChildren[1].nativeElement,
DOM.dispatchEvent(fixture.debugElement.children[1].nativeElement,
dispatchedEvent2);
expect(DOM.isPrevented(dispatchedEvent)).toBe(true);
expect(DOM.isPrevented(dispatchedEvent2)).toBe(false);
expect(
DOM.getChecked(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getChecked(fixture.debugElement.children[0].nativeElement))
.toBeFalsy();
expect(
DOM.getChecked(fixture.debugElement.componentViewChildren[1].nativeElement))
expect(DOM.getChecked(fixture.debugElement.children[1].nativeElement))
.toBeTruthy();
async.done();
});
@@ -1098,7 +1078,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[1];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
var listenerother = tc.inject(DirectiveListeningDomEventOther);
@@ -1136,11 +1116,11 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0].children[0];
var dynamicVp = tc.inject(DynamicViewport);
dynamicVp.done.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[1].nativeElement)
expect(fixture.debugElement.children[0].children[1].nativeElement)
.toHaveText('dynamic greet');
async.done();
});
@@ -1157,7 +1137,7 @@ function declareTests() {
{template: '<input static type="text" title>', directives: [NeedsAttribute]}))
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var needsAttribute = tc.inject(NeedsAttribute);
expect(needsAttribute.typeAttribute).toEqual('text');
expect(needsAttribute.staticAttribute).toEqual('');
@@ -1183,7 +1163,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
var comp = fixture.debugElement.children[0].getLocal("consuming");
expect(comp.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@@ -1201,7 +1181,7 @@ function declareTests() {
}))
.createAsync(DirectiveProvidingInjectableInView)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
var comp = fixture.debugElement.children[0].getLocal("consuming");
expect(comp.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@@ -1231,7 +1211,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("dir");
var comp = fixture.debugElement.children[0].getLocal("dir");
expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@@ -1257,7 +1237,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var gpComp = fixture.debugElement.componentViewChildren[0];
var gpComp = fixture.debugElement.children[0];
var parentComp = gpComp.children[0];
var childComp = parentComp.children[0];
@@ -1289,8 +1269,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var providing =
fixture.debugElement.componentViewChildren[0].getLocal("providing");
var providing = fixture.debugElement.children[0].getLocal("providing");
expect(providing.created).toBe(false);
fixture.debugElement.componentInstance.ctxBoolProp = true;
@@ -1435,7 +1414,7 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
tc.inject(DirectiveEmittingEvent).fireEvent("boom");
try {
@@ -1750,8 +1729,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
expect(dir.dirProp).toEqual("aaa");
async.done();
});
@@ -1766,13 +1744,11 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
dir.myAttr = "aaa";
fixture.detectChanges();
expect(
DOM.getOuterHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getOuterHTML(fixture.debugElement.children[0].nativeElement))
.toContain('my-attr="aaa"');
async.done();
});
@@ -1791,8 +1767,8 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var emitter = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var emitter =
fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
emitter.fireEvent('fired !');
tick();
@@ -1802,24 +1778,23 @@ function declareTests() {
it('should support host listener decorators',
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<with-prop-decorators></with-prop-decorators>',
directives: [DirectiveWithPropDecorators]
}))
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var native = fixture.debugElement.componentViewChildren[0].nativeElement;
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<with-prop-decorators></with-prop-decorators>',
directives: [DirectiveWithPropDecorators]
}))
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
var native = fixture.debugElement.children[0].nativeElement;
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
expect(dir.target).toBe(native);
async.done();
});
}));
expect(dir.target).toBe(native);
async.done();
});
}));
}
it('should support defining views in the component decorator',
@@ -1831,7 +1806,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var native = fixture.debugElement.componentViewChildren[0].nativeElement;
var native = fixture.debugElement.children[0].nativeElement;
expect(native).toHaveText("No View Decorator: 123");
async.done();
});
modules/angular2/test/core/linker/projection_integration_spec.ts
+45 -34
View File
@@ -21,7 +21,6 @@ import {
} from 'angular2/testing_internal';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {
bind,
@@ -34,17 +33,15 @@ import {
View,
ViewContainerRef,
ViewEncapsulation,
ViewMetadata,
Scope
ViewMetadata
} from 'angular2/core';
import {
By,
} from 'angular2/platform/common_dom';
import {getAllDebugNodes} from 'angular2/src/core/debug/debug_node';
export function main() {
describe('projection', () => {
beforeEachProviders(() => [provide(AppViewListener, {useClass: AppViewListener})]);
it('should support simple components',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MainComp, new ViewMetadata({
@@ -199,7 +196,8 @@ export function main() {
.then((main) => {
var viewportDirectives =
main.debugElement.queryAll(By.directive(ManualViewportDirective))
main.debugElement.children[0]
.childNodes.filter(By.directive(ManualViewportDirective))
.map(de => de.inject(ManualViewportDirective));
expect(main.debugElement.nativeElement).toHaveText('(, B)');
@@ -244,8 +242,8 @@ export function main() {
.then((main) => {
var viewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
viewportDirective.show();
@@ -269,8 +267,8 @@ export function main() {
.then((main) => {
var viewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, BC)');
@@ -336,12 +334,20 @@ export function main() {
}))
.createAsync(MainComp)
.then((main) => {
var sourceDirective;
// We can't use the child nodes to get a hold of this because it's not in the dom at
// all.
getAllDebugNodes().forEach((debug) => {
if (debug.providerTokens.indexOf(ManualViewportDirective) !== -1) {
sourceDirective = debug.inject(ManualViewportDirective);
}
});
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('START()END');
projectDirective.show(sourceDirective.templateRef);
@@ -361,10 +367,11 @@ export function main() {
.then((main) => {
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START()END');
projectDirective.show(sourceDirective.templateRef);
@@ -389,10 +396,11 @@ export function main() {
.then((main) => {
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('(, B)START()END');
projectDirective.show(sourceDirective.templateRef);
@@ -419,8 +427,8 @@ export function main() {
main.detectChanges();
var manualDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('TREE(0:)');
manualDirective.show();
main.detectChanges();
@@ -480,12 +488,12 @@ export function main() {
expect(main.debugElement.nativeElement).toHaveText('MAIN()');
var viewportElement =
main.debugElement.componentViewChildren[0].componentViewChildren[0];
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
viewportElement.inject(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST())');
viewportElement =
main.debugElement.componentViewChildren[0].componentViewChildren[1];
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
viewportElement.inject(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
@@ -540,21 +548,24 @@ export function main() {
.then((main) => {
var conditionalComp =
main.debugElement.query(By.directive(ConditionalContentComponent));
var viewViewportDir =
conditionalComp.query(By.directive(ManualViewportDirective), Scope.view)
.inject(ManualViewportDirective);
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)');
viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(AC, D)');
var contentViewportDir =
conditionalComp.query(By.directive(ManualViewportDirective), Scope.light)
.inject(ManualViewportDirective);
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)');
// first show content viewport, then the view viewport,
// i.e. projection needs to take create of already
// created views
contentViewportDir.show();
viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(ABC, D)');
// hide view viewport, and test that it also hides
modules/angular2/test/core/linker/query_integration_spec.ts
+32 -44
View File
@@ -53,8 +53,7 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@@ -70,7 +69,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
view.detectChanges();
@@ -92,7 +91,7 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
@@ -121,7 +120,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
@@ -181,8 +180,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|4|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
async.done();
});
@@ -198,8 +196,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@@ -217,12 +214,11 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren)).toHaveText('2|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@@ -258,13 +254,11 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|1d|2d|3d|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
view.debugElement.componentInstance.list = ['3d', '2d'];
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3d|2d|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|');
async.done();
});
@@ -279,8 +273,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
var needsTpl: NeedsTpl =
view.debugElement.componentViewChildren[0].inject(NeedsTpl);
var needsTpl: NeedsTpl = view.debugElement.children[0].inject(NeedsTpl);
expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).hasLocal('light'))
.toBe(true);
@@ -304,7 +297,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.detectChanges();
ObservableWrapper.subscribe(q.query.changes, (_) => {
@@ -329,8 +322,8 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q1 = view.debugElement.componentViewChildren[0].getLocal("q1");
var q2 = view.debugElement.componentViewChildren[0].getLocal("q2");
var q1 = view.debugElement.children[0].getLocal("q1");
var q2 = view.debugElement.children[0].getLocal("q2");
var firedQ2 = false;
@@ -354,7 +347,8 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
var q: NeedsQuery = view.debugElement.children[0].getLocal('q');
expect(q.query.length).toEqual(1);
view.debugElement.componentInstance.shouldShow = false;
@@ -363,7 +357,7 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q2: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
var q2: NeedsQuery = view.debugElement.children[0].getLocal('q');
expect(q2.query.length).toEqual(1);
@@ -382,7 +376,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@@ -405,7 +399,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.detectChanges();
expect(q.query.first.text).toEqual("one");
@@ -424,7 +418,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@@ -451,7 +445,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@@ -475,8 +469,7 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('hello|world|');
expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
async.done();
});
@@ -489,8 +482,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryByLabel =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryByLabel = view.debugElement.children[0].getLocal("q");
view.detectChanges();
expect(q.query.first.nativeElement).toHaveText("text");
@@ -508,7 +500,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
view.detectChanges();
@@ -529,7 +521,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -546,7 +538,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -563,7 +555,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryIf = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryIf = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -586,8 +578,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryNestedIf =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryNestedIf = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -612,8 +603,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrder =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -636,8 +626,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrderWithParent =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -660,8 +649,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrder =
view.debugElement.componentViewChildren[0].getLocal('q');
var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal('q');
// no significance to 50, just a reasonably large cycle.
for (var i = 0; i < 50; i++) {
@@ -685,7 +673,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.query1).toBeDefined();
expect(q.query2).toBeDefined();
expect(q.query3).toBeDefined();
modules/angular2/test/core/spies.dart
-4
View File
@@ -8,7 +8,6 @@ import 'package:angular2/src/core/linker/directive_resolver.dart';
import 'package:angular2/src/core/linker/view.dart';
import 'package:angular2/src/core/linker/element_ref.dart';
import 'package:angular2/src/core/linker/view_manager.dart';
import 'package:angular2/src/core/linker/view_listener.dart';
import 'package:angular2/src/platform/dom/dom_adapter.dart';
import 'package:angular2/testing_internal.dart';
@@ -52,8 +51,5 @@ class SpyRenderer extends SpyObject implements Renderer {}
@proxy
class SpyRootRenderer extends SpyObject implements RootRenderer {}
@proxy
class SpyAppViewListener extends SpyObject implements AppViewListener {}
@proxy
class SpyDomAdapter extends SpyObject implements DomAdapter {}
modules/angular2/test/core/spies.ts
+1 -5
View File
@@ -11,7 +11,6 @@ import {DirectiveResolver} from 'angular2/src/core/linker/directive_resolver';
import {AppView, AppProtoView, HostViewFactory} from 'angular2/src/core/linker/view';
import {ElementRef} from 'angular2/src/core/linker/element_ref';
import {AppViewManager_} from 'angular2/src/core/linker/view_manager';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {DomAdapter} from 'angular2/src/platform/dom/dom_adapter';
import {SpyObject, proxy} from 'angular2/testing_internal';
@@ -71,6 +70,7 @@ export class SpyRenderer extends SpyObject {
this.spy('setElementProperty');
this.spy('setElementAttribute');
this.spy('setBindingDebugInfo');
this.spy('setElementDebugInfo');
this.spy('setElementClass');
this.spy('setElementStyle');
this.spy('invokeElementMethod');
@@ -88,10 +88,6 @@ export class SpyRootRenderer extends SpyObject {
}
}
export class SpyAppViewListener extends SpyObject {
constructor() { super(AppViewListener); }
}
export class SpyDomAdapter extends SpyObject {
constructor() { super(DomAdapter); }
}
modules/angular2/test/platform/browser/debug/debug_element_view_listener_spec.ts
-71
View File
@@ -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);
}
});
}
modules/angular2/test/public_api_spec.ts
+29 -13
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',
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'})
modules/angular2/test/web_workers/worker/renderer_integration_spec.ts
+20 -13
View File
@@ -24,7 +24,6 @@ import {
Injectable,
ElementRef
} from 'angular2/core';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {NgIf} from 'angular2/common';
import {WebWorkerRootRenderer} from "angular2/src/web_workers/worker/renderer";
import {
@@ -36,6 +35,7 @@ import {
import {Serializer} from "angular2/src/web_workers/shared/serializer";
import {RootRenderer} from "angular2/src/core/render/api";
import {DomRootRenderer, DomRootRenderer_} from 'angular2/src/platform/dom/dom_renderer';
import {DebugDomRootRenderer} from 'angular2/src/core/debug/debug_renderer';
import {RenderStore} from "angular2/src/web_workers/shared/render_store";
import {MessageBasedRenderer} from 'angular2/src/web_workers/ui/renderer';
import {createPairedMessageBuses, PairedMessageBuses} from '../shared/web_worker_test_util';
@@ -44,6 +44,7 @@ import {
ServiceMessageBrokerFactory_
} from 'angular2/src/web_workers/shared/service_message_broker';
import {ChangeDetectorGenConfig} from 'angular2/src/core/change_detection/change_detection';
import {ElementRef_} from 'angular2/src/core/linker/element_ref';
import {
TEST_BROWSER_PLATFORM_PROVIDERS,
TEST_BROWSER_APPLICATION_PROVIDERS
@@ -71,12 +72,13 @@ export function main() {
function createWorkerRenderer(workerSerializer: Serializer, uiSerializer: Serializer,
domRootRenderer: DomRootRenderer, uiRenderStore: RenderStore,
workerRenderStore: RenderStore): WebWorkerRootRenderer {
workerRenderStore: RenderStore): RootRenderer {
var messageBuses = createPairedMessageBuses();
var brokerFactory = createWebWorkerBrokerFactory(messageBuses, workerSerializer, uiSerializer,
domRootRenderer, uiRenderStore);
return new WebWorkerRootRenderer(brokerFactory, messageBuses.worker, workerSerializer,
workerRenderStore);
var workerRootRenderer = new WebWorkerRootRenderer(brokerFactory, messageBuses.worker,
workerSerializer, workerRenderStore);
return new DebugDomRootRenderer(workerRootRenderer);
}
describe("Web Worker Renderer", () => {
@@ -110,8 +112,7 @@ export function main() {
uiRenderStore, workerRenderStore);
},
deps: [Serializer]
}),
provide(AppViewListener, {useClass: AppViewListener})
})
];
});
@@ -129,7 +130,7 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '<div>{{ctxProp}}</div>'}))
.createAsync(MyComp)
.then((fixture) => {
var renderEl = getRenderElement(fixture.debugElement.elementRef);
var renderEl = getRenderElement(fixture.elementRef);
expect(renderEl).toHaveText('');
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
@@ -167,9 +168,11 @@ export function main() {
};
// root element
checkSetters(fixture.debugElement.elementRef);
checkSetters(fixture.elementRef);
// nested elements
checkSetters(fixture.debugElement.componentViewChildren[0].elementRef);
checkSetters((<ElementRef_>fixture.elementRef)
.internalElement.componentView.appElements[0]
.ref);
async.done();
});
@@ -184,7 +187,7 @@ export function main() {
.then((fixture) => {
(<MyComp>fixture.debugElement.componentInstance).ctxBoolProp = true;
fixture.detectChanges();
var el = getRenderElement(fixture.debugElement.elementRef);
var el = getRenderElement(fixture.elementRef);
expect(DOM.getInnerHTML(el)).toContain('"ng-reflect-ng-if": "true"');
async.done();
});
@@ -199,7 +202,7 @@ export function main() {
.createAsync(MyComp)
.then((fixture) => {
var rootEl = getRenderElement(fixture.debugElement.elementRef);
var rootEl = getRenderElement(fixture.elementRef);
expect(rootEl).toHaveText('');
fixture.debugElement.componentInstance.ctxBoolProp = true;
@@ -220,7 +223,9 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '<input [title]="y">'}))
.createAsync(MyComp)
.then((fixture) => {
var elRef = fixture.debugElement.componentViewChildren[0].elementRef;
var elRef = (<ElementRef_>fixture.elementRef)
.internalElement.componentView.appElements[0]
.ref;
getRenderer(elRef)
.invokeElementMethod(elRef.nativeElement, 'setAttribute', ['a', 'b']);
@@ -235,7 +240,9 @@ export function main() {
new ViewMetadata({template: '<input (change)="ctxNumProp = 1">'}))
.createAsync(MyComp)
.then((fixture) => {
var elRef = fixture.debugElement.componentViewChildren[0].elementRef;
var elRef = (<ElementRef_>fixture.elementRef)
.internalElement.componentView.appElements[0]
.ref;
dispatchEvent(getRenderElement(elRef), 'change');
expect(fixture.componentInstance.ctxNumProp).toBe(1);