使用外部服务测试 Angular $resource答案

【问题标题】：Testing Angular $resource with external service使用外部服务测试 Angular $resource
【发布时间】：2013-01-31 22:11:04
【问题描述】：

我正在尝试对使用 Angular $resource 的 REST 请求进行一些基本测试。服务代码工作得很好。

'use strict';

angular.module('lelylan.services', ['ngResource']).
  factory('Device', ['Settings', '$resource', '$http', function(Settings, $resource, $http) {

    var token = 'df39d56eaa83cf94ef546cebdfb31241327e62f8712ddc4fad0297e8de746f62';
    $http.defaults.headers.common["Authorization"] = 'Bearer ' + token;

    var resource = $resource(
      'http://localhost:port/devices/:id',
      { port: ':3001', id: '@id' },
      { update: { method: 'PUT' } }
    );

    return resource;
  }]);

我在指令中使用设备资源，它可以工作。问题就出来了当我开始对服务进行一些测试时。这是一个示例测试，我在其中模拟使用 $httpBackend 的 HTTP 请求，我向模拟的 URL 发出请求。

不幸的是，尽管发出了请求，但它没有返回任何内容。我确定这一点因为如果向另一个 URL 发出请求，测试套件会自动引发错误。我花了很多时间，但没有解决方案。这里是测试代码。

'use strict';

var $httpBackend;

describe('Services', function() {

  beforeEach(module('lelylan'));

  beforeEach(inject(function($injector) {
    var uri = 'http://localhost:3001/devices/50c61ff1d033a9b610000001';
    var device = { name: 'Light', updated_at: '2012-12-20T18:40:19Z' };
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.whenGET(uri).respond(device)
  }));

  describe('Device#get', function() {
    it('returns a JSON', inject(function(Device) {
      device = Device.get({ id: '50c61ff1d033a9b610000001' });
      expect(device.name).toEqual('Light');
    }));
  });
});

由于设备未加载，这是错误。

Expected undefined to equal 'Light'.
Error: Expected undefined to equal 'Light'.

我也尝试过使用以下解决方案，但它没有进入功能检查期望值。

it('returns a JSON', inject(function(Device) {
  device = Device.get({ id: '50c61ff1d033a9b610000001' }, function() {
    expect(device.name).toEqual('Light');
  });
}));

非常感谢任何解决此问题的建议或链接。非常感谢。

【问题讨论】：

标签： rest testing angularjs

【解决方案1】：

您非常接近，唯一缺少的是对$httpBackend.flush(); 的呼叫。工作测试如下：

it('returns a JSON', inject(function(Device) {
  var device = Device.get({ id: '50c61ff1d033a9b610000001' });
  $httpBackend.flush();
  expect(device.name).toEqual('Light');
}));

在 plunker 中进行实时测试：http://plnkr.co/edit/Pp0LbLHs0Qxlgqkl948l?p=preview

您可能还想查看docs for the $httpBackend mock。

【讨论】：

非常感谢。我正在用它做一些测试。我完全错过了#flush 部分。也非常感谢这个非常好的现场示例。喜欢它。

【解决方案2】：

在更高版本的 Angular 中，我使用的是 1.2.0rc1，您还需要在 $apply 中调用它或在作用域上调用 $digest。除非您执行以下操作，否则不会进行资源调用：

var o, back, scope;

beforeEach(inject(function( $httpBackend, TestAPI,$rootScope) {
    o = TestAPI;
    back = $httpBackend;
    scope = $rootScope.$new();

}));

it('should call the test api service', function() {
    back.whenGET('/api/test').respond({});
    back.expectGET('/api/test');
    scope.$apply( o.test());
    back.flush();
});

【讨论】：