Угловой модульный тест не пройден при использовании (отправить)

Question

Используя Angular v4.4.4, я сохраняю форму, используя (submit) событие на <form> элемент. На живом коде все работает правильно. Тем не менее, в модульном тесте, нажав на <button> не срабатывает (submit) и тест не пройден. Например,

Компонент (псевдокод):

@Component({
    template: `
        <form [formGroup]="formGroup" (submit)="onSave()">
            Your name: <input type="text" formControlName="name">
            <button id="saveButton">Save</button>
        </form>
    `
})
export class FooComponent {
    public formGroup: FormGroup;

    public onSave(): void {
        // save and route somewhere
    }
}

Модульный тест (псевдокод):

describe('FooComponent', () => {
    let fixture, component, _router, routerSpy;

    beforeAll(done => (async() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule.withRoutes([]),
                FormsModule,
                ReactiveFormsModule
            ]
        });

        fixture = TestBed.createComponent(FooComponent);
        component = fixture.componentInstance;
        _router = fixture.debugElement.injector.get(Router);
        routerSpy = spyOn(_router, 'navigate');
        fixture.detectChanges();
    })().then(done).catch(done.fail));

    it('should save the form', () => {
        const saveButton = fixture.debugElement.query(By.css('#saveButton'));
        saveButton.triggerEventHandler('click', null);
        expect(routerSpy).toHaveBeenCalled();

        // the test fails because the form is not actually submitted
    });
});

Я уверен, что проблема с (submit) событие, потому что если я удаляю его и переместить onSave() позвонить (click) на кнопке юнит тест работает.

Так что это не проходит в модульном тесте:

<form [formGroup]="formGroup" (submit)="onSave()">

Но это удается

<button id="saveButton" (click)="onSave()">Save</button>

Что я делаю не так в спецификации?

Answer 1

Потому что у вас нет обработчика событий на кнопке. Вот почему triggerEventHandler не может вызвать любой обработчик на кнопке. В вашем случае вы должны использовать saveButton.nativeElement.click() потому что теперь событие клика будет пузыриться и submit событие будет запущено