如何在单元测试中模拟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中c $ c> login 和 logout 方法所以我在考虑使用模拟来检查方法是否被调用但我不是确定从哪里开始，我尝试在我的spec文件中执行以下操作：

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

但是我不确定如何模拟登录和注销方法因为它们是 auth 属性的一部分，有没有办法模拟 auth 以及返回登录和注销方法？

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 s在你的测试中将 AngularFireMock s。

And the AngularFires in your tests will be AngularFireMocks.

这篇关于如何在单元测试中模拟AngularFire 2服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！