如何在单元测试中模拟 AngularFire 2 服务? [英] How to mock AngularFire 2 service in unit test?
问题描述
我正在尝试使用 AngularFire 2 auth 为示例 Angular 2 应用程序设置单元测试,该组件相当简单:
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();
}
}
我正在做的就是围绕 AngularFire 中的 login
和 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();
})
);
});
但是我不确定如何模拟 login
和 logout
方法,因为它们是 auth
属性的一部分,是否存在一种模拟 auth
以及返回的 login
和 logout
方法的方法?
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?
推荐答案
在这个片段中:
beforeEach(() => addProviders([
AppComponent,
AngularFire
]);
您设置(或覆盖)将在您的测试中使用的提供程序.
You set (or override) the providers that will be used in your test.
话虽如此,您可以创建一个不同的类,如果您愿意,可以创建一个模拟类,并且使用 { provide: originalClass, useClass: fakeClass }
表示法,提供它而不是 AngularFire
实际类.
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.
像这样:
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
将是 AngularFireMock
.
And the AngularFire
s in your tests will be AngularFireMock
s.
这篇关于如何在单元测试中模拟 AngularFire 2 服务?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!