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.
