ユニットテストでAngularFire 2サービスを模擬する方法は？

Question

私はAngularFire 2認証を使用して、サンプル角度2アプリ用のユニットテストをセットアップしようとしているが、部品は非常に簡単です：私がやっているすべてはAngularFireでloginとlogout方法の周りにラップしている

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(); 
    } 
} 

私はメソッドが呼び出されたかどうかをチェックするためにモックを使用して考えていたが、どこから始めれば私はわからないんだけど、私は私のspecファイルに次のようにやってみました：

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(); 
    }) 
); 
}); 

私はどのようにわからないがloginとlogoutの方法は、 authのプロパティは、authと戻ってloginとlogoutメソッドを模擬する方法はありますか？このスニペットで

Answer 1

：

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

あなたが設定（またはoverride）テストで使用されるプロバイダ。

これは言い換えれば、別のクラスを作成することもできますし、模様を{ provide: originalClass, useClass: fakeClass }という表記を使用してAngularFire実際のクラスの代わりに提供することもできます。このような

何か：あなたのテストで

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 
]); 

そしてAngularFire sがAngularFireMock秒になります。