각도 단위 테스트에서 Enter 키가있는 양식 제출

Question

로그인 양식 인 Angular 4 구성 요소에 대한 테스트를 작성하고 있습니다. 양식은 제출 버튼을 클릭하거나 입력 필드에 Enter 키를 눌러 제출할 수 있습니다. 이 동작은 각도 양식 지시문에 의해 결정됩니다.

버튼 클릭으로 양식을 제출했음을 확인하는 테스트 사례를 작성할 수 있지만 키 누르기 이벤트로 제출 동작을 트리거 할 수 없습니다.

템플릿 :

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

버튼을 통과에서 '클릭'이벤트를 전달 테스트하지만 테스트 (현재 비활성화)을 파견 입력 요소의 keydown 이벤트가 실패합니다.

양식의 ngSubmit 처리기가 실행되도록 트리거 할 수있는 다른 이벤트가 있습니까?

Answer 1

하는 대신 'keydown`

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