Styjun

I'm trying to set up unit tests for a sample Angular 2 app using AngularFire 2 auth, the component is fairly simple:

import Component from '@angular/core';
import AngularFire, AuthProviders from 'angularfire2';

@Component(
 moduleId: module.id,
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
)
export class AppComponent 
 isLoggedIn: boolean;

 constructor(public af: AngularFire) 
 this.af.auth.subscribe(auth => 
 if (auth) 
 this.isLoggedIn = true;
 else 
 this.isLoggedIn = false;
 
 );
 

 loginWithFacebook() 
 this.af.auth.login(
 provider: AuthProviders.Facebook
 );
 

 logout() 
 this.af.auth.logout();
 

All I'm doing is wrapping around the login and logout methods in AngularFire so I was thinking about using a mock to check if the methods were called but I'm not sure where to start, I tried doing the following in my spec file:

import provide from '@angular/core';
import AngularFire from 'angularfire2';
import 
 beforeEach, beforeEachProviders,
 describe, xdescribe,
 expect, it, xit,
 async, inject
 from '@angular/core/testing';
import AppComponent from './app.component';

spyOn(AngularFire, 'auth');

beforeEachProviders(() => [
 AppComponent,
 AngularFire
]);

describe('App Component', () => 
 it('should create the app',
 inject([AppComponent], (app: AppComponent) => 
 expect(app).toBeTruthy();
 )
 );

 it('should log user in',
 inject([AppComponent], (app: AppComponent) => 
 expect(app.fb.auth.login).toHaveBeenCalled();
 )
 );

 it('should log user out',
 inject([AppComponent], (app: AppComponent) => 
 expect(app.fb.auth.logout).toHaveBeenCalled();
 )
 );
);

However I'm not sure how to mock the login and logout methods since they're part of the auth property, is there a way to mock auth and also the returning login and logout methods?

In this snippet:

beforeEach(() => addProviders([
 AppComponent,
 AngularFire
]);

You set (or override) the providers that will be used in your test.

That being said, you can create a different class, a mock if you will, and, using the provide: originalClass, useClass: fakeClass notation, provide it instead of the AngularFire actual class.

Something like this:

class AngularFireAuthMock extends AngularFireAuth // added this class
 public login() ... 
 public logout() ... 


class AngularFireMock extends AngularFire // added this class
 public auth: AngularFireAuthMock;


beforeEach(() => addProviders([
 AppComponent,
 provide: AngularFire, useClass: AngularFireMock // changed this line
]);

And the AngularFires in your tests will be AngularFireMocks.

hope it is not off the topic, but the easiest solution I have found how to mock the FirebaseDatabase.

var object = function() 
 var obj = valueChanges() 
 return of(data:'data'); 
 
 
 return obj;
 

providers: [..., provide : AngularFireDatabase,
 useValue: object : object ]

instead of data:'data' you can mock whatever data you need. The functions can be modified as you wish.