Angular2 - Unit Testing Form Senden

Question

Ich habe eine einfache Komponente, die zwei Eingabefelder in einem form Element enthält. Wenn Sie auf die Schaltfläche zum Senden klicken, ruft sie die addUser-Funktion für die Komponente auf.

Component-Vorlage ist unten angegeben:

<div> 
    <form [formGroup]="signupForm" (submit)="addUser($event)" role="form" class="form-horizontal"> 
     <label>Firstname:</label> 
     <input type="text" formControlName="firstName"> 
     <label>Lastname:</label> 
     <input type="text" formControlName="lastName"> 
     <input type="submit" id="btnSubmit" class="btn btn-primary btn-lg" value="Register" /> 
    </form> 
</div> 

Component Definition unten angegeben:

@Component({ 
    moduleId: module.id, 
    templateUrl: 'user.component.html' 
}) 
export class UserComponent { 

    registered = false; 

    constructor(
    private router: Router, 
    private fb: FormBuilder, 
    public authService: AuthService) { 

     this.signupForm = this.fb.group({ 
      'firstName': ['', Validators.required], 
      'lastName': ['', Validators.required] 
     });   
    } 

    addUser(event: any) { 
     event.preventDefault(); 
     this.addUserInvoked = true; 
     ...... 
     ...... 
     this.authService.register(this.signupForm.value) 
     .subscribe(
     (res: Response) => { 
      if (res.ok) { 
       this.registered = true; 
      } 
     }, 
     (error: any) => { 
      this.registered = false;         
     }); 
    } 
} 

Es funktioniert gut. Wie auch immer, in meinem Unit-Test, wenn ich versuche, zu testen, wenn Klick auf Submit-Button aufgerufen wird, dann wird der Anruf an die addUser gemacht. Aber leider wird die addUser Funktion nicht aufgerufen.

Unten ist mein Beispiel Unit-Test

class RouterStub { 
    navigateByUrl(url: string) { return url; } 
} 


let comp: UserComponent; 
let fixture: ComponentFixture<UserComponent>; 

describe('UserComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ UserComponent ], 
     schemas:  [NO_ERRORS_SCHEMA] 
    }); 
    }); 

    compileAndCreate(); 
    tests(); 
}); 

function compileAndCreate() { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     providers: [   
     { provide: Router,  useClass: RouterStub }, 
     { provide: AuthService, useValue: authServiceStub }, 
     FormBuilder 
     ] 
    }) 
    .compileComponents().then(() => { 
     fixture = TestBed.createComponent(UserComponent); 
     comp = fixture.componentInstance; 
    }); 
    })); 
} 

function tests() { 
    it('should call addUser when submitted',() => { 
     const spy = spyOn(comp, 'addUser'); 

     //*************below method doesn't work and it refreshes the page*************** 
     //let btnSubmit = fixture.debugElement.query(By.css('#btnSubmit')); 
     //btnSubmit.nativeElement.click(); 

     let form = fixture.debugElement.query(By.css('form')); 
     form.triggerEventHandler('submit', null); 
     fixture.detectChanges(); 

     expect(comp.addUser).toHaveBeenCalled(); 
     expect(authServiceStub.register).toHaveBeenCalled(); 
     expect(comp.registered).toBeTruthy('user registered'); 
    }); 

} 

Ich habe versucht

fixture.debugElement.query(By.css('#btnSubmit')).nativeElement.click() 

und

fixture.debugElement.query(By.css('form')).triggerEventHandler('submit', null) 

aber ich bin noch nicht addUser Funktion aufzurufen. Ich habe bereits eine Frage zu SO here gesehen, aber es ist auch nicht hilfreich.

Answer 1

Ich hatte das gleiche Problem und die Lösung für mich war, dass ich das 'FormsModule' in die Konfiguration meines Testmoduls importieren musste.

TestBed.configureTestingModule({ 
      imports: [FormsModule] 
)} 

Vielleicht kann das helfen?