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.
