Angular 2 模拟响应不起作用答案

【问题标题】：Angular 2 mock response not workingAngular 2 模拟响应不起作用
【发布时间】：2016-07-20 15:30:57
【问题描述】：

我有以下 Angular 2 测试：

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

import { provide  } from '@angular/core';
import { MockBackend  } from '@angular/http/testing';

import {
  Http,
  HTTP_PROVIDERS,
  Response,
  ResponseOptions,
  BaseRequestOptions,
  ConnectionBackend,
  XHRBackend

} from '@angular/http';

import {
  beforeEach, beforeEachProviders,
  describe, xdescribe,
  expect, it, xit,
  async, inject

} from '@angular/core/testing';

import { BookService  } from './book.service';

describe('Book Service', () => {
  beforeEachProviders(() => [
    BookService,
    HTTP_PROVIDERS,
    MockBackend,
    BaseRequestOptions,
    { provide: XHRBackend, useExiting: MockBackend  },
    provide(Http, {
        useFactory: function (backend:ConnectionBackend, defaultOptions:BaseRequestOptions) {
        return new Http(backend, defaultOptions);
      },
      deps: [MockBackend, BaseRequestOptions]
    })
  ]);

  it('should assign a list of books', inject([BookService, MockBackend, Http], (service, backend, http) => {
     var response;

     backend.connections.subscribe(c => {
       expect(c.request.url).toEqual('/api/books.json');
       c.mockRespond(new Response(new ResponseOptions({body: {message: 'thank you'}})));

       });

     http.get('/api/books.json').subscribe(data => response = data);

     expect(response).toEqual({ message: 'thank you'  });

  }));

});

我要重点关注的部分是这样的：

  it('should assign a list of books', inject([BookService, MockBackend, Http], (service, backend, http) => {
     var response;

     backend.connections.subscribe(c => {
       expect(c.request.url).toEqual('/api/books.json');
       c.mockRespond(new Response(new ResponseOptions({body: {message: 'thank you'}})));

       });

     http.get('/api/books.json').subscribe(data => response = data);

     expect(response).toEqual({ message: 'thank you'  });

  }));

当我运行测试时，我得到：

Expected Response with status: null null for URL: null to equal Object({ message: 'thank you' }).

认为这可能是一个异步问题，我改变了我的期望：

http.get('/api/books.json').subscribe(data => {
   expect(data).toEqual({ message: 'thank you'  });
});

但我仍然收到相同的失败消息。

如何使模拟响应生效？

【问题讨论】：

你解决了吗
是的，刚刚发布了一个答案。

标签： testing angular

【解决方案1】：

这是解决方案。我只需要改变

http.get('/api/books.json').subscribe(data => {
   expect(data).toEqual({ message: 'thank you' });
});

到

http.get('/api/books.json').subscribe(data => {
   expect(data.json()).toEqual({ message: 'thank you' });
});

所以我所要做的就是添加.json() 部分并且它起作用了。

【讨论】：

【解决方案2】：

看看这里的例子： https://angular.io/docs/ts/latest/api/core/testing/async-function.html

并使用它。你试图以同步的方式做所有事情，这是错误的。

【讨论】：

这与我所做的有什么不同？ http.get('/api/books.json').subscribe(data => { expect(data).toEqual({ message: 'thank you' }); });
完全不同 ) 可观察的，作为一个承诺也 - 异步调用，所以如果你在同步流中运行所有内容，你的订阅者将永远不会被解雇，业力（或其他）将关闭你的测试而无需等待用于刷新所有异步调用。你试过async吗？