MockBackendをAngular2で使って、Http post、put、deleteのユニットテストを行うには？

Question

私はangle2のコンポーネント&のサービスをテストしています。

/* tslint:disable:no-unused-variable */ 

import { MockBackend } from '@angular/http/testing'; 
import { Http, ConnectionBackend, BaseRequestOptions, Response, ResponseOptions } from '@angular/http'; 
import { PagesService } from './pages.service'; 
import { tick, fakeAsync } from '@angular/core/testing/fake_async'; 
import { inject, TestBed } from '@angular/core/testing/test_bed'; 
import {GlobalService} from './../../shared/global.service'; 

describe('PagesService',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     providers: [ 
     { 
      provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => { 
      return new Http(backend, defaultOptions); 
      }, deps: [MockBackend, BaseRequestOptions] 
     }, 
     { provide: PagesService, useClass: PagesService }, 
     { provide: GlobalService, useClass: GlobalService }, 
     { provide: MockBackend, useClass: MockBackend }, 
     { provide: BaseRequestOptions, useClass: BaseRequestOptions } 
     ] 
    }); 
    }); 

    //should retrive all search results 
    it('should retrieve all search results', 
    inject([PagesService, MockBackend], fakeAsync((pagesService: PagesService, mockBackend: MockBackend) => { 
     let res: Response; 
     mockBackend.connections.subscribe(c => { 
     expect(c.request.url).toBe('http://localhost:3200/pm/pages/'); 
     let response = new ResponseOptions({ 
      body: '[{"name": "Rapid"}, {"name": "NGBC"}]'}); 
      c.mockRespond(new Response(response)); 
     }); 
     pagesService.getAllpages().subscribe((response) => { 
      res = response;    
     }); 
     tick(); 
     expect(res[0].name).toBe('Rapid'); 
    })) 
); 
it('should fetch by Page id', 
    inject([PagesService, MockBackend], fakeAsync((pagesService: PagesService, mockBackend: MockBackend) => { 
    let res; 
    mockBackend.connections.subscribe(c => { 
     let page_id:string='2'; 
     expect(c.request.url).toBe('http://localhost:3200/pm/pages/'+page_id); 
     let response = new ResponseOptions({body: '[{"id": 1, "name": "Rapid"}, {"id": 2, "name": "NGBC"}]'}); 
     c.mockRespond(new Response(response)); 
    }); 
    pagesService.getPageById('2').subscribe((response) => { 
     res = response; 
    }); 
    tick(); 
    expect(res[1].name).toBe('NGBC'); 
    })) 
); 
}); 

あなたがそのように以下の私service.tsを見たい場合は：：

export class PagesService { 
    private headers = new Headers(); 
    public baseUrl:string; 
    constructor(private http: Http,private _globalService:GlobalService) { 
     this.baseUrl=this._globalService.baseUrl; 
    } 
    getAllpages() { 
     return this.http.get(this.baseUrl + '/pm/pages/') 
      .map((res: Response) => res.json()).catch(this.handleError); 
    } 

    getPageById(page_id: string) { 
     return this.http.get(this.baseUrl + '/pm/pages/' + page_id) 
      .map((res: Response) => res.json()).catch(this.handleError); 
    } 

    savePage(page: Object) { 
     this.headers=new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     let url = this.baseUrl+'/pm/pages/'; 
     let data={}; 
     data["data"]=page; 
     return this.http.post(url, JSON.stringify(data),{headers: this.headers}) 
      .map((res: Response) => res.json()).catch(this.handleError); 
    } 

    updatePage(page: any) { 
     this.headers=new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     let url = this.baseUrl+'/pm/pages/'+page._id; 
     let data={}; 
     data["data"]=page; 
     return this.http.put(url, JSON.stringify(data),{headers: this.headers}) 
      .map((res: Response) => res).catch(this.handleError); 
    } 

    deletePage(page_id: string) { 
     this.headers=new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     let url = this.baseUrl+'/pm/pages/'; 
     return this.http.delete(url + page_id,{headers: this.headers,body: ''}) 
      .map((res: Response) => res).catch(this.handleError); 
    } 

    mergePage(page: Object) { 
     return this.http.post(this.baseUrl + '/pm/pages/',JSON.stringify(page)) 
      .map((res: Response) => res.json()).catch(this.handleError); 
    } 

    handleError(error: any) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
} 

上記のサービスからこれまでのところ、私は以下のようにサービスにGETリクエストをあざけるためmockBackendを使用している

getAllPages（）& getPageById（）メソッドを正常に動作しているので、私のservice.spec.tsファイルに正しく実装しました。

savePage() , updatePage() , deletePage()メソッドのテストケースを実装する方法を知りたいです。

入力はありますか？

ありがとうございます。

Answer 1

メソッドの内部を調べて、それが何をしているのかを確認する必要があります。これは期待通りの動作をテストする方法です。

• Content-Typeヘッダーを設定しています。したがってこれは必須条件であり、この動作をテストする必要があります。あなたはURLを設定しているMockConnection#request

  backend.connections.subscribe((conn: MockConnection) => { 
      let contentType = conn.request.headers.get('Content-Type'); 
      expect(contentType).not.toBeNull(); 
      expect(contentType).toEqual('application/json'); 
  }); 
  

• からヘッダを取得することができますので、これは必要条件です。これはテストする必要があります。あなたはすでに

  expect(conn.request.url).toBe('...'); 
  

• あなたはデータを送信しています。これは要件です。あなたは必ずデータが要求部のための必須フォーマット/構造

  let body = conn.request.json(); 
  expect(body.data).toEqual('page'); 
  

であることを確認するためにテストする必要があります。

応答部分については、サービスがその応答で行うことをテストする必要があります。

• ボディを受け取っている場合は、GETリクエストの場合と同様にテストする必要があります。

• また、エラーコールバックでエラーを処理しています。ここでコールバックが何を行うのかをテストする必要はありません。それはそれ自身のテストでなければなりません。私たちがテストしたいのは、テスト中のメソッドからエラーハンドルが呼び出されただけです。そのためには、スパイを使うべきです。我々はhandleError関数でスパイすることができ、それが呼び出されたことを確認します。

  spyOn(service, 'handleError').and.callFake(() => {}); 
  // make call 
  tick(); 
  expect(service.handleError).toHaveBeenCalled(); 
  

  私は例を投稿していなかった理由です、catch方法は、お使いのHTTPリクエストで呼び出される（MockConnectionを使用して）ケースを見つけることができませんでした。私はconn.mockError(new Error())を試したが、うまくいかなかった。私は接続の中でエラーを投げてみました、それは動作しませんでした。多分あなたはそれを理解することができます。