使用MockBackend测试HTTP请求

要对我们的服务进行单元测试，我们不想发出实际的HTTP请求。 为了实现这一点，我们需要模拟我们的HTTP服务。 Angular 2为我们提供了一个MockBackend类，它可以被配置为提供对我们的请求的模拟响应，而不实际做出网络请求。
然后可以将配置的MockBackend注入到HTTP中，因此对服务的任何调用（例如http.get）将返回我们预期的数据，从而允许我们隔离真实网络流量测试服务。

wikisearch.spec.ts

  1. import {
  2.   fakeAsync,
  3.   inject,
  4.   TestBed
  5. } from '@angular/core/testing';
  6. import {
  7.   HttpModule,
  8.   XHRBackend,
  9.   ResponseOptions,
  10.   Response,
  11.   RequestMethod
  12. } from '@angular/http';
  13. import {
  14.   MockBackend,
  15.   MockConnection
  16. } from '@angular/http/testing/mock_backend';
  18. import {SearchWiki} from './wikisearch.service';
  20. const mockResponse = {
  21.   "batchcomplete": "",
  22.   "continue": {
  23.     "sroffset": 10,
  24.     "continue": "-||"
  25.   },
  26.   "query": {
  27.     "searchinfo": {
  28.       "totalhits": 36853
  29.     },
  30.     "search": [{
  31.       "ns": 0,
  32.       "title": "Stuff",
  33.       "snippet": "<span></span>",
  34.       "size": 1906,
  35.       "wordcount": 204,
  36.       "timestamp": "2016-06-10T17:25:36Z"
  37.     }]
  38.   }
  39. };
  41. describe('Wikipedia search service', () => {
  43.   beforeEach(() => {
  44.     TestBed.configureTestingModule({
  45.       imports: [HttpModule],
  46.       providers: [
  47.         {
  48.           provide: XHRBackend,
  49.           useClass: MockBackend
  50.         },
  51.         SearchWiki
  52.       ]
  53.     });
  54.   });
  56.   it('should get search results', fakeAsync(
  57.     inject([
  58.       XHRBackend,
  59.       SearchWiki
  60.     ], (mockBackend: XHRBackend, searchWiki: SearchWiki) => {
  62.       const expectedUrl = 'https://en.wikipedia.org/w/api.php?' +
  63.         'action=query&list=search&srsearch=Angular';
  65.       mockBackend.connections.subscribe(
  66.         (connection: MockConnection) => {
  67.           expect(connection.request.method).toBe(RequestMethod.Get);
  68.           expect(connection.request.url).toBe(expectedUrl);
  70.           connection.mockRespond(new Response(
  71.             new ResponseOptions({ body: mockResponse })
  72.           ));
  73.         });
  75.       searchWiki.search('Angular')
  76.         .subscribe(res => {
  77.           expect(res).toEqual(mockResponse);
  78.         });
  79.     })
  80.   ));
  82.   it('should set foo with a 1s delay', fakeAsync(
  83.     inject([SearchWiki], (searchWiki: SearchWiki) => {
  84.       searchWiki.setFoo('food');
  85.       tick(1000);
  86.       expect(searchWiki.foo).toEqual('food');
  87.     })
  88.   ));
  90. });

View Example

我们使用inject注入SearchWiki服务和MockBackend到我们的测试。然后，我们使用对fakeAsync的调用封装我们的整个测试，这将用于控制SearchWiki服务的异步行为以进行测试。

接下来，我们订阅来自我们后端的任何传入连接。这使我们可以访问一个对象MockConnection ，它允许我们配置我们想要从我们的后端发送的响应，以及测试任何来自我们正在测试的服务的请求。

在我们的示例中，我们要验证SearchWiki的搜索方法是否向正确的URL发出GET请求。这是通过查看当我们的SearchWiki服务连接到我们的模拟后端时获得的请求对象来完成。分析request.url属性，我们可以看到它的值是否是我们期望的值。这里我们只检查URL，但在其他情况下，我们可以看到是否已设置某些头，或者是否已发送某些POST数据。

现在，使用MockConnection对象，我们模拟了一些任意数据。我们创建一个新的ResponseOptions对象，我们可以配置我们的响应的属性。这遵循常规Angular 2响应类的格式。在这里，我们只需将body属性设置为您可能从维基百科中看到的基本搜索结果集。我们还可以设置Cookie，HTTP标头等等，或将状态值设置为非200状态，以测试我们的服务如何响应错误。一旦我们配置了ResponseOptions，我们创建一个Respond对象的新实例，并告诉我们后端通过调用.mockRespond开始将其用作响应。

可以使用多个响应。假设您的服务有两个可能的GET请求 - 一个用于/api/users，另一个用于/api/users/1。这些请求中的每一个具有不同的对应的模拟数据集合。当通过MockBackend订阅接收新的连接时，您可以检查请求的是什么类型的URL，并使用任何一组模拟数据进行响应。

最后，我们可以通过调用和订阅结果来测试SearchWiki服务的搜索方法。一旦我们的搜索过程完成，我们检查结果对象，看看它是否包含相同的数据，我们mock到我们的后端。如果是，那么恭喜你，你的测试已经通过。

在应该设置foo与1s延迟测试，你会注意到，我们调用tick(1000)模拟1秒的延迟。