Alternative HTTP Mocking Strategy

An alternative to using MockBackend is to create our own light mocks. Here we create an object and then tell TypeScript to treat it as Http using type assertion. We then create a spy for its get method and return an observable similar to what the real Http service would do.

This method still allows us to check to see that the service has requested the right URL, and that it returns that expected data.

wikisearch.spec.ts

  1. import {
  2.   fakeAsync,
  3.   inject,
  4.   TestBed
  5. } from '@angular/core/testing';
  6. import {
  7.   HttpModule,
  8.   Http,
  9.   ResponseOptions,
  10.   Response
  11. } from '@angular/http';
  12. import { Observable } from 'rxjs/Observable';
  13. import 'rxjs/add/observable/of';
  14. import {SearchWiki} from './wikisearch.service';
  16. const mockResponse = {
  17.   "batchcomplete": "",
  18.   "continue": {
  19.     "sroffset": 10,
  20.     "continue": "-||"
  21.   },
  22.   "query": {
  23.     "searchinfo": {
  24.       "totalhits": 36853
  25.     },
  26.     "search": [{
  27.       "ns": 0,
  28.       "title": "Stuff",
  29.       "snippet": "<span></span>",
  30.       "size": 1906,
  31.       "wordcount": 204,
  32.       "timestamp": "2016-06-10T17:25:36Z"
  33.     }]
  34.   }
  35. };
  37. describe('Wikipedia search service', () => {
  38.   let mockHttp: Http;
  40.   beforeEach(() => {
  41.     mockHttp = { get: null } as Http;
  43.     spyOn(mockHttp, 'get').and.returnValue(Observable.of({
  44.       json: () => mockResponse
  45.     }));
  47.     TestBed.configureTestingModule({
  48.       imports: [HttpModule],
  49.       providers: [
  50.         {
  51.           provide: Http,
  52.           useValue: mockHttp
  53.         },
  54.         SearchWiki
  55.       ]
  56.     });
  57.   });
  59.   it('should get search results', fakeAsync(
  60.     inject([SearchWiki], searchWiki => {
  61.       const expectedUrl = 'https://en.wikipedia.org/w/api.php?' +
  62.         'action=query&list=search&srsearch=Angular';
  64.       searchWiki.search('Angular')
  65.         .subscribe(res => {
  66.           expect(mockHttp.get).toHaveBeenCalledWith(expectedUrl);
  67.           expect(res).toEqual(mockResponse);
  68.         });
  69.     })
  70.   ));
  72. });

View Example

原文: https://angular-2-training-book.rangle.io/handout/testing/services/alt-http-mocking.html