ngSubmit won't fire when clicking the submit button with Jasmine

Question

I'm trying to write a basic test for an Angular 2 web app which is attempting to check if my submit() function is being called when the submit button is clicked.

When I do this it works fine both in manual testing and with my Jasmine test...

<form #addPersonForm="ngForm">
    ...
    <button class="add-button" type="submit" (click)="submit()" tabindex="5">Add Person</button>
</form>

But when I use ngSubmit instead, the manual testing works fine but the Jasmine unit test fails (it says the submit function is never called)...

<form (ngSubmit)="submit()" #addPersonForm="ngForm">
    ...
    <button class="add-button" type="submit" tabindex="5">Add Person</button>
</form>

(By the way, my reason for trying to get this ngSubmit method to work is that it plays along much better for validation and supporting the enter key.)

Here's what I'm doing with my Jasmine test...

it('should call the submit method', () => {
    let debugElement = _fixture.debugElement;
    let button = debugElement.query(By.css('.add-button'));

    _fixture.detectChanges();

    TestHelper.click(button);
    expect(submitSpy).toHaveBeenCalled();
});

Is there something specific I need to spy on that I'm missing? I haven't found anything related to this issue in the documentation.

---

UPDATE

This is my click method...

/** Simulate element click. Defaults to mouse left-button click event. */
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    (<DebugElement> el).triggerEventHandler('click', eventObj);
  }
}

Gorgias

Try just button.nativeElement.click(). That's what I used and it worked – Akene

@peeskillet This did not work for me. Did any one found the solution for this? – Cusp

@AmitChigadani I don't think so. It's weird. From the last time I tried this it didn't work. I went to check out the source code tests for the forms, and they don't even have a test for this use case. What they tested was to grab the form and fire a submit event. So I just rolled with that. It doesn't test the functionality of the button click, but I just settled – Akene

I noticed it works well with Chrome 59. But it doesn't work with Chrome 60. – Stelliform

@Stelliform I ran into the same thing in Chrome 60. I was able to get everything working by appending my compiled component to the document body: $(document.body).append(element), where element is the form using ng-submit. It seems like jQuery doesn't like submitting detached forms in newer versions of Chrome. – Knp

Answer 1

Maybe you could check stuff like:

• Add a [formGroup]="form" to the <form>.
• Check first that the form is valid.
• Check that the submit button is enabled, i.e. it doesn't have an incorrect [disabled]="form.valid" (it should be !form.valid).
• Depending on how you test it, you should call fixture.detectChanges(); after the click function call.
• Also, you can try checking it in a new clean project only with this component.

The form should be submitted when the button is clicked. Bytheway, for my test, was many of the above problems and after fixing them, it is doing it ok although I use Angular 6 so maybe is a bug in early versions.

Vesperal

Answer 2

This works for me:

// Before
//other lines...
const compiledAction : HTMLElement = debugFormFieldsComponent.nativeElement;
const submitBtn = compiledAction.querySelector('button.btn-primary');
submitBtn?.dispatchEvent(new Event('click'));

// Now 
// same lines but ...
const submitBtn: HTMLButtonElement | null = compiledAction.querySelector('button.btn-primary');
submitBtn?.click();

Sabelle

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gressorial