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.
