ionic/angular app with firebase unit test (jasmine) issue

Issue

Currently I am developing an app using Ionic and Firebase, and I am facing an issue with the unit tests. Following the error message:

Cannot read property 'subscribe' of undefined

The error happens when instantiating the component.

See bellow, pieces of the code:

The contructor of the component:

constructor(
    public angularFire: AngularFireAuth,
    public router: Router,
    private ngZone: NgZone,
    private authService: FirebaseAuthService
  ) {
    console.log("Constructor Initialized");
    this.signInForm = new FormGroup({
      email: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      password: new FormControl('', Validators.compose([
        Validators.minLength(6),
        Validators.required
      ]))      
    });

    this.authRedirectResult = this.authService.getRedirectResult()
    .subscribe(result => {
      if (result.user) {
        this.redirectLoggedUserToProfilePage();
      } else if (result.error) {
        this.submitError = result.error;
      }
    });

    console.log("Constructor Done");
  }

The issue happen on getRedirectFunction method that is on my auth service:

redirectResult: Subject<any> = new Subject<any>();

getRedirectResult(): Observable<any> {
    return this.redirectResult.asObservable();
  }

And my test until now:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

import { SignInPage } from './sign-in.page';
import { FirebaseAuthService } from '../firebase-auth.service';

describe('SignInPage', () => {
  let component: SignInPage;
  let fixture: ComponentFixture<SignInPage>;
  let service: FirebaseAuthService;

  const authStub: FirebaseAuthService = jasmine.createSpyObj('authStub', ['getAuthInstance', 'getRedirectResult']);

  const fireStub: any = {
    authState: {},
    auth: {
      signInWithEmailAndPassword() {
        return Promise.resolve();
      }
    }
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SignInPage ],
      imports: [IonicModule.forRoot()],
      providers:[
        { provide: FirebaseAuthService, useValue: authStub},
        { provide: AngularFireAuth, useValue: fireStub},
        { provide: Router, useClass: class { navigate = jasmine.createSpy('navigate') } }
    ],      
    }).compileComponents();
    service = TestBed.get(FirebaseAuthService);
    fixture = TestBed.createComponent(SignInPage);
    component = fixture.debugElement.componentInstance;
    fixture.detectChanges();
  }));

  it('should create the component', async(() => {
    expect(component).toBeTruthy();
  }));
});

Any ideas about why the method getRedirectFunction is returning undefined? Note that I am mocking it..

I will apolozige now about the question but I am new with from-end code so any advise is welcome.

Thanks in advance!

Solution

Your authStub spy declares a getRedirectResult method but it does not have a mock implementation. So when called in place of your real function it does nothing (returns undefined)

You can provide a return value like this:

authStub.getRedirectResult.and.returnValue(of());

Answered By - Sébastien