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

refactor(debug): switch tests from TCB to use TestBed (#10756)

Browse Source
This commit is contained in:
Craig 2016-08-17 16:27:54 -07:00 committed by Kara
parent 895c542a20
commit 0b62b6f783
1 changed files with 145 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

359
modules/@angular/core/test/debug/debug_node_spec.ts
View File

@ -9,7 +9,7 @@
import {NgFor, NgIf} from '@angular/common'; import {NgFor, NgIf} from '@angular/common';
import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core';
import {Component, Directive, Input} from '@angular/core/src/metadata'; import {Component, Directive, Input} from '@angular/core/src/metadata';
import {AsyncTestCompleter, TestComponentBuilder, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal'; import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser/src/dom/debug/by'; import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
@ -40,7 +40,6 @@ class MessageDir {
<span class="childnested" message="nestedchild">Child</span> <span class="childnested" message="nestedchild">Child</span>
</div> </div>
<span class="child" [innerHtml]="childBinding"></span>`, <span class="child" [innerHtml]="childBinding"></span>`,
directives: [MessageDir],
}) })
class ChildComp { class ChildComp {
childBinding: string; childBinding: string;
@ -56,7 +55,6 @@ class ChildComp {
</div> </div>
<span class="parent" [innerHtml]="parentBinding"></span> <span class="parent" [innerHtml]="parentBinding"></span>
<child-comp class="child-comp-class"></child-comp>`, <child-comp class="child-comp-class"></child-comp>`,
directives: [ChildComp, MessageDir],
}) })
class ParentComp { class ParentComp {
parentBinding: string; parentBinding: string;
@ -74,7 +72,6 @@ class CustomEmitter {
selector: 'events-comp', selector: 'events-comp',
template: `<button (click)="handleClick()"></button> template: `<button (click)="handleClick()"></button>
<custom-emitter (myevent)="handleCustom()"></custom-emitter>`, <custom-emitter (myevent)="handleCustom()"></custom-emitter>`,
directives: [CustomEmitter],
}) })
class EventsComp { class EventsComp {
clicked: boolean; clicked: boolean;
@ -94,7 +91,6 @@ class EventsComp {
selector: 'cond-content-comp', selector: 'cond-content-comp',
viewProviders: [Logger], viewProviders: [Logger],
template: `<div class="child" message="child" *ngIf="myBool"><ng-content></ng-content></div>`, template: `<div class="child" message="child" *ngIf="myBool"><ng-content></ng-content></div>`,
directives: [NgIf, MessageDir],
}) })
class ConditionalContentComp { class ConditionalContentComp {
myBool: boolean = false; myBool: boolean = false;
@ -107,7 +103,6 @@ class ConditionalContentComp {
<cond-content-comp class="cond-content-comp-class"> <cond-content-comp class="cond-content-comp-class">
<span class="from-parent"></span> <span class="from-parent"></span>
</cond-content-comp>`, </cond-content-comp>`,
directives: [ConditionalContentComp],
}) })
class ConditionalParentComp { class ConditionalParentComp {
parentBinding: string; parentBinding: string;
@ -121,7 +116,6 @@ class ConditionalParentComp {
<ul message="list"> <ul message="list">
<li *ngFor="let item of stuff" [innerHtml]="item"></li> <li *ngFor="let item of stuff" [innerHtml]="item"></li>
</ul>`, </ul>`,
directives: [NgFor, MessageDir],
}) })
class UsingFor { class UsingFor {
stuff: string[]; stuff: string[];
@ -137,12 +131,10 @@ class MyDir {
template: ` template: `
<div mydir #alice="mydir"></div> <div mydir #alice="mydir"></div>
`, `,
directives: [MyDir]
}) })
class LocalsComp { class LocalsComp {
} }
@Component({ @Component({
selector: 'bank-account', selector: 'bank-account',
template: ` template: `
@ -167,7 +159,6 @@ class BankAccount {
[class.closed]="isClosed" [class.closed]="isClosed"
[class.open]="!isClosed"></bank-account> [class.open]="!isClosed"></bank-account>
`, `,
directives: [BankAccount]
}) })
class TestApp { class TestApp {
width = 200; width = 200;
@ -176,255 +167,195 @@ class TestApp {
} }
export function main() { export function main() {
describe('debug element', function() { describe('debug element', () => {
it('should list all child nodes', let fixture: ComponentFixture<any>;
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(ParentComp).then((fixture) => {
fixture.detectChanges();
// The root component has 3 elements and 2 text node children. beforeEach(async(() => {
expect(fixture.debugElement.childNodes.length).toEqual(5); TestBed.configureTestingModule({
async.done(); declarations: [
}); ChildComp,
})); ConditionalContentComp,
ConditionalParentComp,
CustomEmitter,
EventsComp,
LocalsComp,
MessageDir,
MyDir,
ParentComp,
TestApp,
UsingFor,
],
providers: [
Logger,
]
});
TestBed.compileComponents();
}));
it('should list all component child elements', it('should list all child nodes', () => {
inject( fixture = TestBed.createComponent(ParentComp);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(ParentComp).then((fixture) => { // The root component has 3 elements and 2 text node children.
fixture.detectChanges(); expect(fixture.debugElement.childNodes.length).toEqual(5);
});
var childEls = fixture.debugElement.children; it('should list all component child elements', () => {
fixture = TestBed.createComponent(ParentComp);
fixture.detectChanges();
var childEls = fixture.debugElement.children;
// The root component has 3 elements in its view. // The root component has 3 elements in its view.
expect(childEls.length).toEqual(3); expect(childEls.length).toEqual(3);
expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true); expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
expect(getDOM().hasClass(childEls[1].nativeElement, 'parent')).toBe(true); expect(getDOM().hasClass(childEls[1].nativeElement, 'parent')).toBe(true);
expect(getDOM().hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true); expect(getDOM().hasClass(childEls[2].nativeElement, 'child-comp-class')).toBe(true);
var nested = childEls[0].children; var nested = childEls[0].children;
expect(nested.length).toEqual(1); expect(nested.length).toEqual(1);
expect(getDOM().hasClass(nested[0].nativeElement, 'parentnested')).toBe(true); expect(getDOM().hasClass(nested[0].nativeElement, 'parentnested')).toBe(true);
var childComponent = childEls[2]; var childComponent = childEls[2];
var childCompChildren = childComponent.children; var childCompChildren = childComponent.children;
expect(childCompChildren.length).toEqual(2); expect(childCompChildren.length).toEqual(2);
expect(getDOM().hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true); expect(getDOM().hasClass(childCompChildren[0].nativeElement, 'child')).toBe(true);
expect(getDOM().hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true); expect(getDOM().hasClass(childCompChildren[1].nativeElement, 'child')).toBe(true);
var childNested = childCompChildren[0].children; var childNested = childCompChildren[0].children;
expect(childNested.length).toEqual(1); expect(childNested.length).toEqual(1);
expect(getDOM().hasClass(childNested[0].nativeElement, 'childnested')).toBe(true); expect(getDOM().hasClass(childNested[0].nativeElement, 'childnested')).toBe(true);
});
async.done(); it('should list conditional component child elements', () => {
}); fixture = TestBed.createComponent(ConditionalParentComp);
})); fixture.detectChanges();
it('should list conditional component child elements', var childEls = fixture.debugElement.children;
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
expect(getDOM().hasClass(childEls[1].nativeElement, 'cond-content-comp-class')).toBe(true);
// The root component has 2 elements in its view. var conditionalContentComp = childEls[1];
expect(childEls.length).toEqual(2);
expect(getDOM().hasClass(childEls[0].nativeElement, 'parent')).toBe(true);
expect(getDOM().hasClass(childEls[1].nativeElement, 'cond-content-comp-class'))
.toBe(true);
var conditionalContentComp = childEls[1]; expect(conditionalContentComp.children.length).toEqual(0);
expect(conditionalContentComp.children.length).toEqual(0); conditionalContentComp.componentInstance.myBool = true;
fixture.detectChanges();
conditionalContentComp.componentInstance.myBool = true; expect(conditionalContentComp.children.length).toEqual(1);
fixture.detectChanges(); });
expect(conditionalContentComp.children.length).toEqual(1); it('should list child elements within viewports', () => {
async.done(); fixture = TestBed.createComponent(UsingFor);
}); fixture.detectChanges();
}));
it('should list child elements within viewports', var childEls = fixture.debugElement.children;
inject( expect(childEls.length).toEqual(4);
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(UsingFor).then((fixture) => {
fixture.detectChanges();
var childEls = fixture.debugElement.children; // The 4th child is the <ul>
expect(childEls.length).toEqual(4); var list = childEls[3];
// The 4th child is the <ul> expect(list.children.length).toEqual(3);
var list = childEls[3]; });
expect(list.children.length).toEqual(3); it('should list element attributes', () => {
fixture = TestBed.createComponent(TestApp);
fixture.detectChanges();
var bankElem = fixture.debugElement.children[0];
async.done(); expect(bankElem.attributes['bank']).toEqual('RBC');
}); expect(bankElem.attributes['account']).toEqual('4747');
})); });
it('should list element attributes', it('should list element classes', () => {
inject( fixture = TestBed.createComponent(TestApp);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { var bankElem = fixture.debugElement.children[0];
tcb.createAsync(TestApp).then((fixture) => {
fixture.detectChanges();
var bankElem = fixture.debugElement.children[0];
expect(bankElem.attributes['bank']).toEqual('RBC'); expect(bankElem.classes['closed']).toBe(true);
expect(bankElem.attributes['account']).toEqual('4747'); expect(bankElem.classes['open']).toBe(false);
async.done(); });
});
}));
it('should list element classes', it('should list element styles', () => {
inject( fixture = TestBed.createComponent(TestApp);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { var bankElem = fixture.debugElement.children[0];
tcb.createAsync(TestApp).then((fixture) => {
fixture.detectChanges();
var bankElem = fixture.debugElement.children[0];
expect(bankElem.classes['closed']).toBe(true); expect(bankElem.styles['width']).toEqual('200px');
expect(bankElem.classes['open']).toBe(false); expect(bankElem.styles['color']).toEqual('red');
async.done(); });
});
}));
it('should list element styles', inject( it('should query child elements by css', () => {
[TestComponentBuilder, AsyncTestCompleter], fixture = TestBed.createComponent(ParentComp);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.detectChanges();
tcb.createAsync(TestApp).then((fixture) => {
fixture.detectChanges();
var bankElem = fixture.debugElement.children[0];
expect(bankElem.styles['width']).toEqual('200px'); var childTestEls = fixture.debugElement.queryAll(By.css('child-comp'));
expect(bankElem.styles['color']).toEqual('red');
async.done();
});
}));
it('should query child elements by css', expect(childTestEls.length).toBe(1);
inject( expect(getDOM().hasClass(childTestEls[0].nativeElement, 'child-comp-class')).toBe(true);
[TestComponentBuilder, AsyncTestCompleter], });
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(ParentComp).then((fixture) => {
fixture.detectChanges();
var childTestEls = fixture.debugElement.queryAll(By.css('child-comp')); it('should query child elements by directive', () => {
fixture = TestBed.createComponent(ParentComp);
fixture.detectChanges();
expect(childTestEls.length).toBe(1); var childTestEls = fixture.debugElement.queryAll(By.directive(MessageDir));
expect(getDOM().hasClass(childTestEls[0].nativeElement, 'child-comp-class'))
.toBe(true);
async.done(); expect(childTestEls.length).toBe(4);
}); expect(getDOM().hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true);
})); expect(getDOM().hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true);
expect(getDOM().hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
expect(getDOM().hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
});
it('should query child elements by directive', it('should list providerTokens', () => {
inject( fixture = TestBed.createComponent(ParentComp);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(ParentComp).then((fixture) => {
fixture.detectChanges();
var childTestEls = fixture.debugElement.queryAll(By.directive(MessageDir)); expect(fixture.debugElement.providerTokens).toContain(Logger);
});
expect(childTestEls.length).toBe(4); it('should list locals', () => {
expect(getDOM().hasClass(childTestEls[0].nativeElement, 'parent')).toBe(true); fixture = TestBed.createComponent(LocalsComp);
expect(getDOM().hasClass(childTestEls[1].nativeElement, 'parentnested')).toBe(true); fixture.detectChanges();
expect(getDOM().hasClass(childTestEls[2].nativeElement, 'child')).toBe(true);
expect(getDOM().hasClass(childTestEls[3].nativeElement, 'childnested')).toBe(true);
async.done(); expect(fixture.debugElement.children[0].references['alice']).toBeAnInstanceOf(MyDir);
}); });
}));
it('should list providerTokens', it('should allow injecting from the element injector', () => {
inject( fixture = TestBed.createComponent(ParentComp);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(ParentComp).then((fixture) => { expect((<Logger>(fixture.debugElement.children[0].injector.get(Logger))).logs).toEqual([
fixture.detectChanges(); 'parent', 'nestedparent', 'child', 'nestedchild'
]);
});
expect(fixture.debugElement.providerTokens).toContain(Logger); it('should list event listeners', () => {
fixture = TestBed.createComponent(EventsComp);
fixture.detectChanges();
async.done(); expect(fixture.debugElement.children[0].listeners.length).toEqual(1);
}); expect(fixture.debugElement.children[1].listeners.length).toEqual(1);
}));
it('should list locals', });
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(LocalsComp).then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.children[0].references['alice']).toBeAnInstanceOf(MyDir); it('should trigger event handlers', () => {
fixture = TestBed.createComponent(EventsComp);
fixture.detectChanges();
async.done(); expect(fixture.debugElement.componentInstance.clicked).toBe(false);
}); expect(fixture.debugElement.componentInstance.customed).toBe(false);
}));
it('should allow injecting from the element injector', fixture.debugElement.children[0].triggerEventHandler('click', <Event>{});
inject( expect(fixture.debugElement.componentInstance.clicked).toBe(true);
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(ParentComp).then((fixture) => { fixture.debugElement.children[1].triggerEventHandler('myevent', <Event>{});
fixture.detectChanges(); expect(fixture.debugElement.componentInstance.customed).toBe(true);
expect((<Logger>(fixture.debugElement.children[0].injector.get(Logger))).logs) });
.toEqual(['parent', 'nestedparent', 'child', 'nestedchild']);
async.done();
});
}));
it('should list event listeners',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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: AsyncTestCompleter) => {
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();
});
}));
}); });
} }