1

アプリケーションに angular2.0 を使用しています

サービスが注入されるコンポーネントのテスト ケースを作成しようとしています。

//component.ts

import { Component, OnInit } from '@angular/core';
import { FPService } from './shared/services/forgot-password.service';
import { CookieService } from 'angular2-cookie/core';

@Component({
  // moduleId: module.id,
  selector: 'app-fp',
  templateUrl: 'fp.component.html',
  styleUrls: ['fp.component.css'],
  providers: [FPService]

})
export class FPComponent implements OnInit {

  constructor(
    private cookie: CookieService,
    private fpService: FPService
  ) { }

  ngOnInit() {

  }
  fnRequest(email) {

    var oData = { "email": email };
    this.fpService.fnFPServie(oData)
      .subscribe(
      data => {
        console.log('success', data);

      },
      error => {
        console.log('error', error);

      }
      );
  }

}

私のスペック

import { FPComponent } from './forgot-password.component';


import { FPService } from './shared/services/forgot-password.service';
import { CookieService } from 'angular2-cookie/core';


class mockFPService {
    fnFPServie(data) {
        return {}
    }
}

class mockCookieService {
    getObject(name: string) {
        return true;
    }
}


let comp: FPComponent;
let fixture: ComponentFixture<FPComponent>;
describe('Component: FPComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({

            declarations: [FPComponent],
            providers: [

                { provide: FPService, useClass: mockFPService },
                { provide: CookieService, useClass: mockCookieService },


            ]
        });

        fixture = TestBed.createComponent(FPComponent);
        comp = fixture.componentInstance;

    });

    it('should have  method fnRequest', () => {
        expect(comp.fnRequest('adfa@fhf.fth')).toBeTruthy;
    });

    it('should sent data to fnFpService() of FpService', () => {

        comp.fnRequest('asd@gmail.com');

        **************************************************
        how do inject the Fpservice and call fnFPServie ?
       ********************************************************


    });


});

注入された Fpservice をモックして fnRequest() 関数をテストする方法を誰かが提案してくれると助かります。

前もって感謝します

4

1 に答える 1

0

fnFPServieメソッドを追加するだけでは十分ではありません。呼び出し元は、返されたオブザーバブルにサブスクライブし、 を呼び出しsubscribeます。これをモックする方法は、次のようにすることです

class MockFPService {
  error;
  data;
  fnFPServie(data) {
    return this;
  }

  subscribe(next, err) {
    if (next && !error) {
      next(this.data)
    }
    if (err && this.error) {
      err(this.error);
    }
  }
}

subscribeここでは、独自のモックメソッドを持つサービス自体を返しているだけです。一部の呼び出しの場合subscribe、それらは成功およびエラーのコールバック関数を渡します。適切な応答を渡すコールバックを呼び出すだけです。

テスト中に、データまたはエラーを使用してモックを構成することもできます。したがって、両方の結果を別々にテストできます。

let mockFPService: MockFPService;

beforeEach(() => {
  mockFPService = new MockFPService ();
  TestBed.configureTestingModule({
    providers: [
      { provide: MockFPService, useValue: mockFPService }
    ]
  })
}) 

it('..', () => {
  mockFPService.data = 'some data'; 
})

it('..', () => {
  mockFPService.error = 'some error';
})
于 2016-09-30T09:53:54.327 に答える