Test der Winkeleinheit bei der Verwendung fehlgeschlagen (Senden)

Question

Mit Angular v4.4.4 speichere ich ein Formular mit dem Ereignis (submit) auf dem Element <form>. Auf dem Live-Code läuft alles einwandfrei. Im Einheitentest löst das Klicken auf <button> jedoch nicht (submit) aus und der Test schlägt fehl. Zum Beispiel

Komponente (Pseudocode):

@Component({ 
    template: ` 
     <form [formGroup]="formGroup" (submit)="onSave()"> 
      Your name: <input type="text" formControlName="name"> 
      <button id="saveButton">Save</button> 
     </form> 
    ` 
}) 
export class FooComponent { 
    public formGroup: FormGroup; 

    public onSave(): void { 
     // save and route somewhere 
    } 
} 

Unit-Test (Pseudocode):

describe('FooComponent',() => { 
    let fixture, component, _router, routerSpy; 

    beforeAll(done => (async() => { 
     TestBed.configureTestingModule({ 
      imports: [ 
       RouterTestingModule.withRoutes([]), 
       FormsModule, 
       ReactiveFormsModule 
      ] 
     }); 

     fixture = TestBed.createComponent(FooComponent); 
     component = fixture.componentInstance; 
     _router = fixture.debugElement.injector.get(Router); 
     routerSpy = spyOn(_router, 'navigate'); 
     fixture.detectChanges(); 
    })().then(done).catch(done.fail)); 

    it('should save the form',() => { 
     const saveButton = fixture.debugElement.query(By.css('#saveButton')); 
     saveButton.triggerEventHandler('click', null); 
     expect(routerSpy).toHaveBeenCalled(); 

     // the test fails because the form is not actually submitted 
    }); 
}); 

Ich bin sicher, dass das Problem mit dem (submit) Ereignisse ist, weil, wenn ich entfernen es und verschiebe den onSave() Anruf zu einem (click) auf der Taste, die der Unit Test funktioniert.

So scheitert dies in einem Unit-Test:

<form [formGroup]="formGroup" (submit)="onSave()"> 

Aber dies gelingt:

<button id="saveButton" (click)="onSave()">Save</button> 

Was bin ich in der Spezifikation falsch?

Answer 1

Da Sie keinen Ereignishandler auf der Schaltfläche haben. Deshalb kann triggerEventHandler keinen Handler auf der Schaltfläche auslösen. In Ihrem Fall müssen Sie saveButton.nativeElement.click() verwenden, weil jetzt klicken Ereignis wird gesprudelt und submit Ereignis wird ausgelöst