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

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -