Hi Daniel, sorry, I wanted to say, that there are currently *NOT* many resources about testing. But perhaps the samples at [1] help you to find out, what you need. They also use the TestComponentBuilder in some cases.
Wishes, Manfred [1] https://github.com/AngularClass/angular2-webpack-starter Am Sonntag, 27. Dezember 2015 02:29:27 UTC+1 schrieb Daniel: > > Thanks Manfred, > > I havent had a chance to look at the resources you provided yet, but I've > made som progress. My current spec looks like this and I wanted to update > this thread in case someone else is struggling. > > import {Component, OnInit} from 'angular2/core' > import {NgFor} from 'angular2/src/common/directives/ng_for' > import {Sortable} from '../sortable' > > import { > it, > describe, > expect, > injectAsync, > TestComponentBuilder, > } from 'angular2/testing' > > import {By} from 'angular2/platform/common_dom' > > import {BrowserDomAdapter} from > 'angular2/src/platform/browser/browser_adapter' > BrowserDomAdapter.makeCurrent() > > @Component({ > directives: [NgFor, Sortable], > template: ` > <div> > <sortable [items]="items" keys="name, sz: Size"> > <div *ngFor="#item of items" class="item">{{item.name}}</div> > </sortable> > </div> > ` > }) > class TestApp { > public items: any[] > > constructor() { > this.items = [{name:'c', sz:2}, {name:'a', sz:1}, {name:'b', sz:3}, > {name:'d'}] > } > } > > var setupTestComponent = (fn) => injectAsync([TestComponentBuilder], (tcb: > TestComponentBuilder) => { > return tcb.createAsync(TestApp).then((tc) => { > tc.detectChanges() > fn(tc) > } > )}) > > describe('Sortable', () => { > it('renders children elements', setupTestComponent((tc) => { > var items = tc.nativeElement.querySelectorAll('.item') > expect(items.length).toEqual(4) > expect($(items).text()).toEqual('cabd') > })) > > it('renders header links from keys', setupTestComponent((tc) => { > var lis = tc.nativeElement.querySelectorAll('.sortable-header li') > expect(lis.length).toEqual(2) > expect($(lis).text()).toEqual('NameSize') > })) > > it('sort on click (descending order)', setupTestComponent((tc) => { > tc.debugElement.query(By.css('.sortable-header > li')).triggerEventHandler('click', null) > tc.detectChanges() > > var items = tc.nativeElement.querySelectorAll('.item') > expect($(items).text()).toEqual('dcba') > })) > > it('reverse order on each subsequent click', setupTestComponent((tc) => { > tc.debugElement.query(By.css('.sortable-header > li')).triggerEventHandler('click', null) > tc.debugElement.query(By.css('.sortable-header > li')).triggerEventHandler('click', null) > tc.detectChanges() > > var items = tc.nativeElement.querySelectorAll('.item') > expect($(items).text()).toEqual('abcd') > })) > }) > > > - Daniel > > On Friday, 25 December 2015 20:12:22 UTC+1, Manfred Steyer wrote: >> >> Hi Daniel, >> >> that looks great. Currently there are much resources about this topic. >> But there are two greate presentations from anguler-connect in London [1], >> [2] and the starter kit at [3] contains samples for some tests. >> >> Wishes, >> Manfred >> >> [1] https://www.youtube.com/watch?v=C0F2E-PRm44 >> [2] https://www.youtube.com/watch?v=-lTGnYwnEuM >> [3] https://github.com/AngularClass/angular2-webpack-starter >> >> Am Freitag, 25. Dezember 2015 16:25:18 UTC+1 schrieb Daniel: >>> >>> Digging into the Angular2 source I've managed to get something like >>> this... it feels very convoluted thought and I'm trying to find how to >>> simplify it. >>> >>> import {Component, OnInit} from 'angular2/core' >>> import {NgFor} from 'angular2/src/common/directives/ng_for' >>> import {bootstrap} from 'angular2/platform/browser' >>> import {Sortable} from '../sortable' >>> >>> import { >>> iit, >>> it, >>> ddescribe, >>> describe, >>> expect, >>> injectAsync, >>> TestComponentBuilder, >>> beforeEachProviders >>> } from 'angular2/testing'; >>> >>> import {BrowserDomAdapter} from >>> 'angular2/src/platform/browser/browser_adapter' >>> BrowserDomAdapter.makeCurrent() >>> >>> @Component({ >>> directives: [NgFor, Sortable], >>> template: ` >>> <div> >>> <sortable [items]="items"> >>> <div *ngFor="#item of items">{{item.name}}</div> >>> </sortable> >>> </div> >>> ` >>> }) >>> class TestApp { >>> public items: any[] >>> >>> constructor() { >>> this.items = [{name: 'c'}, {name: 'a'}, {name: 'b'}] >>> } >>> } >>> >>> describe('Sortable', () => { >>> it('first spec', injectAsync([TestComponentBuilder], (tcb: >>> TestComponentBuilder) => { >>> return tcb.createAsync(TestApp) >>> .then((fixture) => { >>> expect(true).toEqual(true) >>> }) >>> })) >>> >>> it('second spec', injectAsync([TestComponentBuilder], (tcb: >>> TestComponentBuilder) => { >>> return tcb.createAsync(TestApp) >>> .then((fixture) => { >>> expect(false).toEqual(false) >>> }) >>> })) >>> }) >>> >>> >>> Any ideas? >>> >>> On Thursday, 24 December 2015 19:35:50 UTC+1, Daniel wrote: >>>> >>>> Hi, >>>> >>>> I'm trying to find some information on how to best test a Component. I >>>> have a simple component that currently just looks like this. >>>> >>>> @Component({ >>>> selector: 'sortable', >>>> inputs: ['items'], >>>> template: ` >>>> <div><a id="#test" (click)="sort()">sort</a></div> >>>> <ng-content></ng-content> >>>> ` >>>> }) >>>> export class Sortable { >>>> public items: any[] >>>> private reverse: boolean = false >>>> >>>> sort() { >>>> this.items.sort((a, b) => { >>>> if (a.name > b.name) { >>>> return this.reverse ? 1 : -1 >>>> } else if (a.name < b.name) { >>>> return this.reverse ? -1: 1 >>>> } else { >>>> return 0 >>>> } >>>> }) >>>> this.reverse = !this.reverse >>>> } >>>> } >>>> >>>> I've got Jasmine setup and working based on the guide from angular.io >>>> but haven't found much information on how to best test Components. One >>>> guide seems to be bootstrap:ing like a normal app so this is what I got so >>>> far going down that route. >>>> >>>> import {Component, OnInit} from 'angular2/core' >>>> import {bootstrap} from 'angular2/platform/browser' >>>> import {Sortable} from '../sortable' >>>> >>>> @Component({ >>>> selector: 'test-app', >>>> directives: [Sortable], >>>> template: ` >>>> <div> >>>> <sortable [items]="items"> >>>> <div *ngFor="#item of items">{{item.name}}</div> >>>> </sortable> >>>> </div> >>>> ` >>>> }) >>>> class TestApp { >>>> public items: string[] >>>> >>>> constructor() { >>>> this.items = [{name: 'c'}, {name: 'a'}, {name: 'b'}] >>>> } >>>> } >>>> >>>> describe('Sortable', () => { >>>> let app: TestApp >>>> >>>> beforeEach(done => { >>>> bootstrap(TestApp) >>>> .then(result => result.instance) >>>> .then(instance => { >>>> app = instance >>>> done() >>>> }) >>>> }) >>>> >>>> it('#sort', () => { >>>> // How to generate click? >>>> expect(app.items).toEqual([{name: 'c'}, {name: 'b'}, {name: 'a'}]) >>>> }) >>>> }) >>>> >>>> This feels strange since it actually renders on the Jasmine test page. >>>> Would really appreciate some input on how to best test a component such as >>>> this. I want to make sure it renders the list as well as the order of >>>> items >>>> when the sort method is run. >>>> >>>> Thanks, >>>> - Daniel >>>> >>>> >>>> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
