18

AngularFire 2 認証を使用してサンプル Angular 2 アプリの単体テストをセットアップしようとしています。コンポーネントはかなり単純です。

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 のloginandlogoutメソッドをラップすることだけなので、メソッドが呼び出されたかどうかを確認するためにモックを使用することを考えていましたが、どこから始めればよいかわかりません。仕様ファイルで次のことを試しました。

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とメソッドをモックする方法がわかりません。モックする方法と、メソッドを返す方法はありますか?logoutauthauthloginlogout

4

3 に答える 3

18

このスニペットでは:

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

テストで使用されるプロバイダーを設定 (またはオーバーライド) します。

そうは言っても、別のクラス、必要に応じてモックを作成し、表記法を使用して、実際のクラス{ 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 は s になりますAngularFireMock。

于 2016-06-26T22:52:51.847 に答える