Angular2 Testing Form: Submit Method Not Called

Having this component import {Component} from 'angular2/core'; import { FORM_DIRECTIVES } from 'angular2/common'; @Component({ selector: 'something', templateUrl: 'somethi

Solution 1:

To add to Juanmi's answer for the test to be fully complete, the event have to be triggered by clicking on the button, because for example, if the button is moved out of the tag, the application would fail, but the test would still pass.

I have managed to go around the problem above, by calling the 'click()' method of the native element (not the debug element). See the code below. Note that in my code below, i'm using the ReactiveForms syntax, but it shouldn't make a difference for the test.

<form [formGroup]="sampleForm" (submit)="submit($event)">
    <input id="sampleBtn"type="submit" class="btn-default btn btn-primary" value="Click Me">
</form>

And in my spec.ts file

spyOn(fixture.componentInstance, 'submit');
let loginBtn: DebugElement = fixture.debugElement.query(By.css('#sampleBtn'));
loginBtn.nativeElement.click();
fixture.detectChanges();
expect(fixture.componentInstance.submit).toHaveBeenCalled();

This click() on the button would, in turn, trigger the (submit) handler function. Hope this helps. :)

Solution 2:

Just in case it can help someone:

I have been able to trigger the submit event in the form using the By selector and triggerHandle

let form = fixture.debugElement.query(By.css('form'));
form.triggerEventHandler('submit', null);
fixture.detectChanges();
// your component function should have been called

If you try to trigger the click in the button the event it doesn't seem to trigger the ngSubmit. And if you try to do .submit on the form it will not be captured by angular and will refresh the page.

Solution 3:

Try to add fixture.detectChanges(); right before click.