如何使用Jasmine為Angular.js的服務和控制器創建測試？

Question

我有Angular服務和控制器工作正常，我無法正確地為它們創建測試。 我一直在尋找解決方案。

我的控制器：

angular.module('wideCmsAngularApp').controller('UserListCtrl', [
  '$scope',
  'userService',
  '$routeParams',
  function ($scope, userService, $routeParams) {

    // Get quantity and offset from url. Format: /user/list/10/0
    var quantity = typeof $routeParams.quantity !== 'undefined' ? $routeParams.quantity : 10;
    var offset   = typeof $routeParams.offset !== 'undefined' ? $routeParams.offset : 0;

    $scope.users = userService.query({
      'param1' : quantity,
      'param2' : offset
    });

  }
]);

它使用的服務：

angular.module('wideCmsAngularApp').factory('userService', [
  '$resource',
  function ($resource) {

    return $resource('http://localhost:1337/api/v1/user/:param1/:param2', {}, {
      'get'    : {method : 'GET'},
      'save'   : {method : 'POST'},
      'query'  : {method : 'GET', isArray:true},
      'remove' : {method : 'DELETE'},
      'delete' : {method : 'DELETE'}
    });
  }
]);

控制器的測試：

describe('UserListCtrl', function() {

  beforeEach(module('wideCmsAngularApp'));

  var $controller;
  var $rootScope;
  var userService;

  beforeEach(inject(function(_$rootScope_, _$controller_, _userService_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $controller = _$controller_;
    $rootScope  = _$rootScope_;
    userService = _userService_;
  }));

  describe('when asking for a list of users', function() {
    it('should return 4 users', function() {

      var $scope = [];
      var controller = $controller('UserListCtrl', {
        '$scope': $scope,
        'userService': userService,
        '$routeParams': {
          'quantity' : 10,
          'offset'   : 0
        }
      });

      expect($scope.users.length).toBe(4);
    });
  });
});

結果（應返回具有4個用戶的用戶數組，但始終為空）：

PhantomJS 1.9.8 (Mac OS X) UserListCtrl when asking for a list of users should return 4 users FAILED
    Expected 0 to be 4.
        at /somewhere/test/spec/controllers/user/list.js:31

我在這里錯過了什么？

--UPDATE--

我能夠這樣做，雖然這不是我真正想要的，因為我更喜歡實際的API請求。 這是可能的，還是我必須忍受假的回應？

新的UserListCtr測試，使用$ httpBackend：

var $httpBackend;
var $controller;
var $rootScope;
var userService;

describe('UserListCtrl', function() {

  beforeEach(module('wideCmsAngularApp'));

  beforeEach(inject(function ($injector) {

    var uri = 'http://localhost:1337/api/v1/user/10/0';
    var users = [
      {
        "id": "555daff2862a513508a52ecd",
        "name": "Gru"
      },
      {
        "id": "555daff3862a513508a52ece",
        "name": "Kevin"
      },
      {
        "id": "555daff3862a513508a52ece",
        "name": "Ed"
      },
      {
        "id": "555daff3862a513508a52ece",
        "name": "Tim"
      }
    ];

    httpBackend = $injector.get('$httpBackend');
    httpBackend.whenGET(uri).respond(users)

    $controller = $injector.get('$controller');
    $rootScope  = $injector.get('$rootScope');
    userService = $injector.get('userService');
  }));

  describe('when asking for a list of users', function() {
    it('should return 4 users', function() {

      var $scope = $rootScope.$new();
      var controller = $controller('UserListCtrl', {
        '$scope': $scope,
        'userService': userService,
        '$routeParams': {
          'quantity' : 10,
          'offset'   : 0
        }
      });

      httpBackend.flush();

      expect($scope.users.length).toBe(4);
    });
  });
});

Answer 1

您應該使用量角器進行端到端測試。 如果你想要一個真正的響應來自服務器而不是使用httpbackend。

Answer 2

    angular.module('wideCmsAngularApp').factory('userService', [
      '$resource',
      function ($resource) {

        return $resource('http://localhost:1337/api/v1/user/:param1/:param2', {}, {
          'get'    : {method : 'GET'},
          'save'   : {method : 'POST'},
          'query'  : {method : 'GET', isArray:true},
          'remove' : {method : 'DELETE'},
          'delete' : {method : 'DELETE'}
        });
      }
    ]);

如果我們看看第4行$resource('http://localhost:1337/api/v1/:param1/:param2', {}, {你會看到你有三個參數'重新傳遞，URL，paramDefaults和動作，你沒有傳遞任何paramDefaults。由{}后面指示:param2',你的paramDefaults已經在控制器中設置了;

$scope.users = userService.query({
      'param1' : quantity,
      'param2' : offset
    });

您需要將這些傳遞到$resource

$ resource文件