Come simulare il servizio AngularFire 2 nel test dell'unità?

Question

Sto cercando di creare test di unità per un angolare 2 app campione utilizzando AngularFire 2 autenticazione, il componente è abbastanza semplice:

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

Tutto quello che sto facendo è avvolgendo intorno alle login e logout metodi AngularFire così ho pensato di usare un modello per verificare se i metodi sono stati chiamati, ma non sono sicuro da dove cominciare, ho provato a fare quanto segue nel mio file 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(); 
    }) 
); 
}); 

Tuttavia io non sono sicuro di come simulare i metodi login e logout poiché fanno parte del auth proprietà, c'è un modo per simulare auth e anche i metodi di ritorno login e logout?

Answer 1

In questo frammento:

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

Si imposta (o override) i fornitori che verranno utilizzati nel test.

Detto questo, è possibile creare una classe diversa, una simulazione se lo si desidera e, utilizzando la notazione { provide: originalClass, useClass: fakeClass }, fornire invece della classe effettiva AngularFire.

Qualcosa di simile a questo:

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

E i AngularFire s nei test saranno AngularFireMock s.