Wie wird der AngularFire 2-Dienst im Komponententest gespielt?

Question

Ich versuche, Unit-Tests für eine Probe Angular 2 App AngularFire 2 Auth einzurichten, ist die Komponente ziemlich einfach:

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

Alle in AngularFire um die login und logout Methoden wickelt ich tue so dachte ich an ein Modell mit überprüfen, ob die Methoden genannt wurden, aber ich bin nicht sicher, wo ich anfangen soll, ich versuchte dabei die folgenden in meinem spec-Datei:

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

aber ich bin nicht sicher, wie man spot die login und logout Methoden, da sie ein Teil der sind auth Eigentum, gibt es eine Möglichkeit, auth und auch die Rückkehr login und logout Methoden zu verspotten?

Answer 1

In diesem Snippet:

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

Sie setzen (oder override) die Anbieter, die in Ihrem Test verwendet wird.

Das gesagt, Sie können eine andere Klasse erstellen, ein Mock, wenn Sie so wollen, und unter Verwendung der { provide: originalClass, useClass: fakeClass } Notation, stellen Sie es statt der AngularFire tatsächlichen Klasse.

Etwas wie folgt aus:

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

Und die AngularFire s in Ihren Tests wird AngularFireMock s sein.