角4：與RxJS Observables一起使用mockRespond

Question

我最近構建了一個可以工作的應用程序，並且我正在嘗試構建一個測試。我的服務從API後端獲取項目：

export class CatfactService { 
 

 
    constructor(private http: Http) {} 
 
    getFacts() { 
 
     const url = "http://www.catfact.info/api/v1/facts.json"; 
 
     return this.http.get(url).map(this.extractData) 
 
      .catch(this.handleError); 
 
    }

在我的成分，我能夠訂閱的API響應。在facts變量的結果是從API響應的詳情：

ngOnInit() { 
 
    this.counter = this.start; 
 
    this.service.getFacts().subscribe((facts) => { 
 
     this.results = facts.facts; 
 
    }); 
 
}

現在，我建立一個測試服務，奇怪的訂閱方法獲取的說法，而不是作爲迴應數據的參數，它返回一個最終解決嘲弄值的承諾。

import { 
 
    TestBed, 
 
    inject, 
 
    fakeAsync, 
 
    tick 
 
} from '@angular/core/testing'; 
 

 
import { 
 
    CatfactService 
 
} from './catfact.service'; 
 
import { 
 
    HttpModule, 
 
    Http, 
 
    BaseRequestOptions, 
 
    XHRBackend, 
 
    ResponseOptions 
 
} from '@angular/http'; 
 
import { 
 
    MockBackend 
 
} from '@angular/http/testing'; 
 
describe('CatfactService',() => { 
 
    beforeEach(() => { 
 
     TestBed.configureTestingModule({ 
 
      imports: [HttpModule], 
 
      providers: [ 
 
       CatfactService, 
 
       MockBackend, 
 
       BaseRequestOptions, 
 
       { 
 
        provide: Http, 
 
        useFactory: (backend, options) => new Http(backend, options), 
 
        deps: [MockBackend, BaseRequestOptions] 
 
       } 
 
      ], 
 
      imports: [ 
 
       HttpModule 
 
      ] 
 
     }); 
 
    }); 
 

 
    it('should return reasonable json', inject([CatfactService, MockBackend], fakeAsync((service: CatfactService, mockBackend) => { 
 

 
     const mockResponse = { 
 
      data: [{ 
 
        id: 0, 
 
        details: 'All cats are lions' 
 
       }, 
 
       { 
 
        id: 1, 
 
        details: 'Video 1' 
 
       }, 
 
       { 
 
        id: 2, 
 
        details: 'Video 2' 
 
       }, 
 
       { 
 
        id: 3, 
 
        details: 'Video 3' 
 
       }, 
 
      ] 
 
     }; 
 

 
     mockBackend.connections.subscribe(connection => { 
 
      connection.mockRespond(new Response(JSON.stringify(mockResponse))); 
 
     }); 
 

 
     service.getFacts().subscribe((facts) => { 
 
      facts.then((facts2) => { 
 
       expect(facts2.length).toBe(4); 
 
       expect(facts2[0].details).toEqual("All cats are lions"); 
 
      }); 
 
     }); 
 

 
     tick(); 
 
    }))); 
 
});

在調用訂閱方法返回在實際應用中的實際響應，但在測試中的承諾，使我相信我已經成立了的嘲諷的事實數據在應用程序中不正確。

我採用了棱角分明的以下版本：

ng -v 
 
    _      _     ____ _  ___ 
 
/\ _ __ __ _ _ _| | __ _ _ __ /___| | |_ _| 
 
/△ \ | '_ \/_` | | | | |/ _` | '__| | | | | | | 
 
/___ \| | | | (_| | |_| | | (_| | |  | |___| |___ | | 
 
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_|  \____|_____|___| 
 
       |___/ 
 
@angular/cli: 1.0.2 
 
node: 7.9.0 
 
os: darwin x64 
 
@angular/common: 4.1.1 
 
@angular/compiler: 4.1.1 
 
@angular/core: 4.1.1 
 
@angular/forms: 4.1.1 
 
@angular/http: 4.1.1 
 
@angular/platform-browser: 4.1.1 
 
@angular/platform-browser-dynamic: 4.1.1 
 
@angular/router: 4.1.1 
 
@angular/cli: 1.0.2 
 
@angular/compiler-cli: 4.1.1

整個項目達GitHub上的位置：https://github.com/kenmazaika/AngularTesting

Answer 1

這裏是規範的一個固定的版本。主要問題是您沒有導入角度響應。

  import { TestBed, inject, fakeAsync, tick } from '@angular/core/testing'; 

      import { CatfactService } from './catfact.service'; 
      import { HttpModule, Http, BaseRequestOptions, XHRBackend, ResponseOptions, Response, RequestOptions } from '@angular/http'; 
      import { MockBackend } from '@angular/http/testing'; 
      describe('CatfactService',() => { 
       beforeEach(() => { 
        TestBed.configureTestingModule({ 
         imports: [HttpModule], 
         providers: [ 
          CatfactService, 
          MockBackend, 
          BaseRequestOptions, 
          { 
           provide: Http, 
           useFactory: (backend, options) => new Http(backend, options), 
           deps: [MockBackend, BaseRequestOptions] 
          } 
         ] 
        }); 
       }); 

       it('should return reasonable json', inject([CatfactService, MockBackend], fakeAsync((service: CatfactService, mockBackend) => { 

        const mockResponse = { 
         data: [ 
          { id: 0, details: 'All cats are lions' }, 
          { id: 1, details: 'Video 1' }, 
          { id: 2, details: 'Video 2' }, 
          { id: 3, details: 'Video 3' }, 
         ] 
        }; 

        mockBackend.connections.subscribe(connection => { 
         connection.mockRespond(new Response(
          new ResponseOptions({ 
           body: [ 
            { id: 0, details: 'All cats are lions' }, 
            { id: 1, details: 'Video 1' }, 
            { id: 2, details: 'Video 2' }, 
            { id: 3, details: 'Video 3' }, 
           ] 
          }))); 
        }); 

        service.getFacts().subscribe((facts) => { 
         expect(facts.length).toBe(4); 
         expect(facts[0].details).toEqual("All cats are lions"); 
        }); 

        tick(); 
       }))); 
      });