在角单元测试中使用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' })