在Angular单元测试中使用enter键提交表单

我正在编写一个Angular 4组件的测试,它是一个登录表单.可以通过单击“提交”按钮或在任何输入字段中输入来提交表单.此行为由Angular表单指令决定.

我可以编写一个测试用例来验证按钮单击提交表单,但是我无法通过按键事件触发提交行为.

模板：

<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处理程序来触发吗？

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