在角單元測試中使用Enter鍵提交表單

Question

我正在爲一個登錄表單的Angular 4組件編寫測試。可以通過點擊「提交」按鈕或按任意輸入字段中的回車來提交表格。這種行爲是由Angular form指令決定的。

我可以編寫一個測試用例來驗證點擊按鈕是否提交表單，但我無法通過按鍵事件觸發提交行爲。

模板：

<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>  

規格：

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(); 
      }); 
     }); 
    }); 
}); 

從按鈕通過該調度 'click' 事件的測試，但測試（目前禁用）是派遣來自輸入元素的keydown事件失敗。

是否有不同的事件我可以派發觸發表單的ngSubmit處理程序來觸發？

Answer 1

嘗試使用keypress，而不是「keydown`

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