Envoi d'un formulaire avec une clé d'entrée dans le test d'unité angulaire

Question

J'écris un test pour un composant Angular 4 qui est un formulaire de connexion. Le formulaire peut être soumis en cliquant sur le bouton "Soumettre" ou en appuyant sur entrer dans les champs de saisie. Ce comportement est dicté par la directive de forme angulaire.

Je peux écrire un scénario de test qui valide qu'un clic sur un bouton soumet le formulaire, mais je ne peux pas déclencher le comportement de soumission avec un événement de pression de touche.

Modèle:

<form (ngSubmit)="onLoginSubmit()" #loginForm="ngForm"> 
<div class="form-group"> 
    <label for="userid">User ID</label> 
    <input type="text" class="form-control" name="userid" id="userid" required 
     [(ngModel)]="model.userId" #userid="ngModel"> 
    <div [hidden]="userid.valid || userid.untouched" class="alert alert-danger"> 
     User ID is required 
    </div> 
</div> 
<div class="form-group"> 
    <label for="password">Password</label> 
    <input type="password" class="form-control" name="password" id="password" required 
     [(ngModel)]="model.password" #password="ngModel"> 
    <div [hidden]="password.valid || password.untouched" class="alert alert-danger"> 
     Password is required 
    </div> 
</div> 
<button type="submit" class="btn btn-success" [disabled]="loginForm.form.invalid">Submit</button>  

Spec:

import { ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement, Component, ViewChild } from '@angular/core'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { Observable } from 'rxjs/Observable'; 

import { LoginFormComponent } from './login-form.component'; 
import { ILoginService } from '../../service/ILoginService'; 
import { IAuthService } from '../../service/IAuthService'; 


describe('Login Form',() => { 
    let comp: LoginFormComponent; 
    let fixture: ComponentFixture<LoginFormComponent>; 
    let userIdElement: DebugElement; 
    let passwordElement: DebugElement; 
    let submitElement: DebugElement; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      imports: [FormsModule, ReactiveFormsModule], 
      declarations: [LoginFormComponent], 
      providers: [ 
       { provide: 'IloginService', useClass: UserServiceMock }, 
       { provide: 'IAuthService', useClass: MockAuthService }] 
     }); 
     fixture = TestBed.createComponent(LoginFormComponent); 

     comp = fixture.componentInstance; 

     userIdElement = fixture.debugElement.query(By.css('input[name=userid]')); 
     passwordElement = fixture.debugElement.query(By.css('input[name=password]')); 
     submitElement = fixture.debugElement.query(By.css('button')); 
    }); 

    describe('Submit',() => { 
     let authService: IAuthService; 
     let authServiceSpy: jasmine.Spy; 
     let loginService: ILoginService; 
     let loginServiceSpy: jasmine.Spy; 

     beforeEach(() => { 
      comp.model.userId = 'mock user'; 
      comp.model.password = 'mock password'; 
      comp.loginUrl = 'mock url'; 

      authService = fixture.debugElement.injector.get('IAuthService'); 
      authServiceSpy = spyOn(authService, 'login').and.returnValue(null); 

      loginService = fixture.debugElement.injector.get('IloginService'); 
      loginServiceSpy = spyOn(loginService, 'handleLoginResult'); 
     }); 

     it('should invoke the auth and login services when submit is clicked',() => { 
      submitElement.nativeElement.click(); 
     }); 

     xit('should submit the form on enter key pressed in userId input',() => { 
      userIdElement.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })) 
     }); 

     xit('should submit the form on enter key pressed in password input',() => { 
      passwordElement.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })) 
     }); 

     afterEach(() => { 
      fixture.detectChanges(); 
      fixture.whenStable().then(() => { 
       expect(authService.login).toHaveBeenCalledWith('mock user', 'mock password', 'mock url'); 
       expect(loginService.handleLoginResult).toHaveBeenCalled(); 
      }); 
     }); 
    }); 
}); 

Le test qui envoie un événement 'clic' à partir du bouton passe, mais les tests (actuellement désactivé) cette dépêche une L'événement keydown des éléments d'entrée échoue.

Y a-t-il un événement différent que je peux envoyer pour déclencher le gestionnaire ngSubmit du formulaire?

Answer 1

Essayez d'utiliser keypress au lieu de « keydown`

new KeyboardEvent('keypress', { key: 'Enter' })