Unit testing for backend and services methods calls with Jasmine

I started working with tests, more specifically with Jasmine, and I’m having some difficulty to test if the backend and some services methods are being called.

So basically I’m calling the forgotPassword method when the formulary is submitted and I was wondering how can I properly check if the API (apiSendPasswordResetLink) and the services methods (showLoader, showAlert and navigateTo) are being called as expected.

async forgotPassword() {
    try {
        console.log("1");
        this.loadingService.showLoader();
        console.log("2");
        await this.userService
            .apiSendPasswordResetLink(this.form.value['email'])
            .toPromise();

        console.log("3");
        this.utilitiesService.showAlert(`We've emailed you a link to reset your password. Please check your mail box and spam.`);

        console.log("4");
        delay(1500);
        this.navigationService.navigateTo('/login/auth');
        console.log('5')
    } catch (err) {
        this.utilitiesService.showAlert(err);
    } finally {
        this.loadingService.hideLoader();
    }
}

The test:

it('should submit email to reset password after submitting formulary', () => {
    component.form.setValue({
      email: '[email protected]',
    });

    const loadingService = TestBed.inject(LoaderService);
    const userService = TestBed.inject(UserService);
    const utilitiesService = TestBed.inject(UtilitiesService);
    const navigationService = TestBed.inject(NavigationService);

    fixture.detectChanges();

    const button = fixture.debugElement.nativeElement.querySelector('#button');

    spyOn(component, 'forgotPassword').and.callThrough();
    spyOn(loadingService, 'showLoader');
    spyOn(userService, 'apiUserSendPasswordResetLinkGet');
    spyOn(utilitiesService, 'showAlert');
    spyOn(navigationService, 'navigateTo');

    // Submitting form
    fixture.debugElement
      .query(By.css('form'))
      .triggerEventHandler('ngSubmit', null);

    expect(component.form.valid).toEqual(true);
    expect(button.disabled).toBeFalsy();
    expect(component.forgotPassword).toHaveBeenCalled();
    expect(loadingService.showLoader).toHaveBeenCalled();
    expect(userService.apiUserSendPasswordResetLinkGet).toHaveBeenCalled();
    expect(utilitiesService.showAlert).toHaveBeenCalled();
    expect(navigationService.navigateTo).toHaveBeenCalled();
  });

Every time I run and / or debug the test, I have the error

Expected spy navigateTo to have been called.

But the console never prints “3”, which means showAlert is also not being called and I should also have the same error regarding showAlert spy to be called, but I don’t.

I don’t know if this problem has to do if the await call to the API or something else. I would like to know how can I fix it, so all the test can pass as expected.

Thank you!