Unit Tests with Angularfire2 on angular-cli - unit-testing

Question

Created a new angular 2 project with angular-cli
Below is the default component app.component.ts and it has app.component.spec.ts
import { Component } from '#angular/core';
import { AngularFire } from 'angularfire2'; // import angularfire2
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
af: AngularFire;
constructor(af: AngularFire){
this.af=af;
this.firebaseCall();
}
//push data to firebase collection
firebaseCall(){
let post=this.af.database.list('/post');
post.push({a:'test'});
}
}
To Implement Unit test for the above firebaseCall() in app.component.spec.ts
I have added/updated below lines in app.component.spec.ts
import { AngularFire } from 'angularfire2';
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,AngularFire // extra added
],
});
TestBed.compileComponents();
});
I get below error while ng test
Unexpected value 'AngularFire' declared by the module 'DynamicTestModule'

Answer 1

You need to mock the services in the test.
Here you are injecting AngularFire. So you test setup should be like this.
import { AngularFire } from 'angularfire2';
...
const mockFirebase = jasmine.createSpyObj('af',['database']);
af.database.and.returnValue({list: Rx.Observable.of([])});
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers:[
{provide:AngularFire, useValue:}]
});
TestBed.compileComponents();
});
Hope, this helps you. always mock your providers in the unit-test and don't make a http call.