angular - Testing Angular2 component @Input and @Output -
how can structure tests angular2 simple form component:
import { component, eventemitter, input, output } '@angular/core'; @component({ selector: 'user-form', template: ` <input [(ngmodel)]="user.name"> <button (click)="remove.emit(user)">remove</button> ` }) export class userformcomponent { @input() user: any; @output() remove: eventemitter<any> = new eventemitter(); }
angular2 rc.5
import { component } '@angular/core'; import { formsmodule } '@angular/forms'; import { fakeasync, tick, testbed } '@angular/core/testing'; import { } '@angular/platform-browser/src/dom/debug/by'; import { dispatchevent } '@angular/platform-browser/testing/browser_util'; function findelement(fixture, selector) { return fixture.debugelement.query(by.css(selector)).nativeelement; } import { userformcomponent } './user-form.component'; describe('user form component', () => { beforeeach(() => { testbed.configuretestingmodule({ declarations: [testcomponent], imports: [formsmodule] }); }); it('should update', fakeasync(() => { const fixture = testbed.createcomponent(testcomponent); fixture.detectchanges(); tick(); const input = findelement(fixture, 'input'); expect(input.value).toequal('tom'); input.value = 'thomas'; dispatchevent(input, 'input'); expect(fixture.debugelement.componentinstance.user.name).toequal('thomas'); })); it('should remove', fakeasync(() => { const fixture = testbed.createcomponent(testcomponent); fixture.detectchanges(); tick(); spyon(fixture.debugelement.componentinstance, 'remove'); const button = findelement(fixture, 'button'); button.click(); expect(fixture.debugelement.componentinstance.remove).tohavebeencalledwith( jasmine.objectcontaining({id: 1}) ); })); }); @component({ selector: 'test-component', directives: [userformcomponent], template: `<user-form [user]="user" (remove)="remove($event)"></user-form>` }) class testcomponent { user: = { id: 1, name: 'tom' }; remove(user) { } }
Comments
Post a Comment