httpリクエストを含むサービスを模擬してオブザーバブルを返す方法は？

Question

以下は、JSON形式のデータを持つURLを取っている私のサービスクラスです。

service.ts以下

import { Injectable } from "@angular/core"; 
    import { Http } from '@angular/http'; 
    import { Observable } from "rxjs/Observable"; 

    @Injectable() 

    export class Service { 

    public http: string; 
    constructor(private http: Http) { } 

    getGoogle():Observable<any> { 
     console.log("Inside service"); 


     return this.http.get('https://jsonplaceholder.typicode.com/posts/1'); 
    } 
} 

サービスを使用し、サービスからデータを取得し、私のpage1.tsファイルです。

page1.ts

import { Component } from '@angular/core'; 
import { Service } from "../../services/service"; 


@Component({ 
    selector: 'page-page1', 
    templateUrl: 'page1.html', 
}) 
export class Page1 { 

    constructor(private service: Service) { 

    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad Page1'); 
    } 

    get() { 
    console.log("inside get method"); 
    this.service.getGoogle().subscribe(
     (response:Response)=>{ 
     console.log('The resonse is', response); 
      }); 
} 

任意のタイプミスを無視してください。以下は

は、私は、この非同期HTTP GETメソッド

page1.spec.ts

import { TestBed, async, ComponentFixture, inject } from '@angular/core/testing'; 
import { Page1 } from './page1'; 
import { IonicModule, NavController } from "ionic-angular"; 
import { DebugElement } from "@angular/core"; 
import { Service } from "../../services/service"; 
import { By } from "@angular/platform-browser"; 


describe('Page1 to be tested',() => { 

    let fixture: ComponentFixture<Page1>; 
    let comp: Page1; 
    let de: DebugElement; 
    let el: HTMLElement; 



    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [Page1], 
      imports: [ 
       IonicModule.forRoot(Page1), 

      ], 
      providers: [NavController, 
     //need to provide service I have already imported it. 

      ], 
     }).compileComponents(); 

    } 

    )); 
    beforeEach(() => { 
     fixture = TestBed.createComponent(Page1); 
     comp = fixture.componentInstance; 
     de = fixture.debugElement; 

    }); 

    afterEach(()=>{ 
     fixture.destroy(); 
    }) 

    it('is created',() => { 
     expect(comp).toBeTruthy(); 
     expect(fixture).toBeDefined(); 
    }); 

    it('Testing the service',()=>{ 
     //testing service. 
    }) 


}); 

注意をテストするこのページのための私のspecファイル、である：私はのためのモックを作成する必要がありますこのサービスは、私が使った実際のサービスに基づいています。このモックが正しいかどうかはわかりません。getのURLにあるこのデータはという名前の別のフォルダにあります。 data.mock.ts。

service.mock.ts

import { Observable } from 'rxjs/Observable'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

export class ServiceMock { 
    public http: Http; 
    url: string; 
    getGoogle(): Observable<any> { 
     return this.http.get('./data.mock').map((res) => { 
      res.json(); 
     }); 
    } 
} 

data.mock.ts

export class Data { 
    name: string = 'Aditya'; 
    profession: string = 'Developer'; 
} 

Answer 1

ServiceMockであなたの嘲笑のデータで観察を返すようになり、これを行うための簡単な方法Httpを使用しないでください。

data.mock.ts

export class Data { 
    public static data = { 
    name: string = 'Aditya', 
    profession: string = 'Developer' 
    }; 
} 

service.mock.ts

import { Data } from './data.mock'; 
import 'rxjs/Rx'; 

export class ServiceMock { 

    getGoogle(): Observable<any> { 
    return Observable.of(Data.data); 
    } 
} 

そして、あなたはこのようにそれをテストすることができます。

it('tests that it gets something and prints the response', fakeAsync(() => { 
    spyOn(comb.service, 'getGoogle'); 
    spyOn(console, 'log'); 
    comb.get(); 
    tick(); 
    expect(comb.service.getGoogle).toHaveBeenCalled(); 
    expect(console.log).toHaveBeenCalledWith('The resonse is', Data.data); 
})); 

あなたは関数が非同期事業者に加入しているので、fakeAsyncを使用するようにする必要があります。 tick()は、オブザーバブルから返されるデータの時間をシミュレートします。