单元使用Jasmine使用服务测试Angular代码

时间:2015-01-20 23:24:56

标签: angularjs unit-testing jasmine

我正在尝试测试控制器,而不是要求我模拟我用来获取数据的服务。目前,我收到一条错误消息,说明此行中的函数未定义:

dataServiceMock = jasmine.createSpyObj('dataService', ['getFunctionStuff']);

根据其他示例和教程,这应该可以正常工作。

这是我的代码,包括测试文件,服务和控制器。

控制器:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope, dataService) {

    dataService.getFunctionStuff($scope.foo)
      .then(function(data) {
        $scope.test = data;
      });

});

服务:

app.factory('dataService', function ($timeout, $q){

  function getFunctionStuff(formData) {
            return $http.post('../randomAPICall', formData).then(function(data) {
                return data;
            });
        };

});

试验:

describe('Testing a controller', function() {
  var $scope, ctrl, $timeout;

  var dataServiceMock;

  beforeEach(function (){

    dataServiceMock = jasmine.createSpyObj('dataService', ['getFunctionStuff']);

    module('myApp');

    inject(function($rootScope, $controller, $q, _$timeout_) {

      $scope = $rootScope.$new();

      dataServiceMock.getFunctionStuff.and.ReturnValue($q.when('test'));

      $timeout = _$timeout_;

      ctrl = $controller('MainCtrl', {
        $scope: $scope,
        dataService: dataServiceMock
      });
    });
  });

  it('should update test', function (){
    expect($scope.test).toEqual('test');    
  });
});

以下是它的一个内容:http://plnkr.co/edit/tBSl88RRhj56h3Oiny6S?p=preview

2 个答案:

答案 0 :(得分:1)

当您使用jasmine 2.1时,API为.and.returnValue。在您的测试规范中,请在$scope.$apply()

之前then
describe('Testing a controller', function () {
    var $scope, ctrl, $timeout;

    var dataServiceMock;

    beforeEach(function () {

        dataServiceMock = jasmine.createSpyObj('dataService', ['getFunctionStuff']);

        module('myApp');

        inject(function ($rootScope, $controller, $q, _$timeout_) {

            $scope = $rootScope.$new();

            dataServiceMock.getFunctionStuff.and.returnValue($q.when('test'));

            $timeout = _$timeout_;

            ctrl = $controller('MainCtrl', {
                $scope: $scope,
                dataService: dataServiceMock
            });
        });
    });

    it('should update test', function () {
        $scope.$apply();
        expect($scope.test).toEqual('test');
    });
});

答案 1 :(得分:0)

以下是另一种通过$http测试$httpBackend的常用方法:

app.js

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope, dataService) {

    dataService.getFunctionStuff($scope.foo)
      .then(function(data) {
        $scope.test = data.data;
      });

});

dataService.js

app.factory('dataService', function($http) {

  function getFunctionStuff(formData) {
    return $http.post('../randomAPICall', formData).then(function(data) {
      return data;
    });
  }

  return {
    getFunctionStuff: getFunctionStuff
  };

});

specs.js

describe('Testing a controller', function() {
  var $scope, ctrl, $controller, $httpBackend;

  beforeEach(function (){

    module('myApp');

    inject(function($injector) {

      $httpBackend = $injector.get('$httpBackend');
      $scope = $injector.get('$rootScope').$new();
      $controller = $injector.get('$controller');

      $scope.foo = 'foo';
      $httpBackend.expectPOST('../randomAPICall', 'foo').respond(201, 'test');
      ctrl = $controller('MainCtrl', {$scope: $scope});
    });

  });

  it('should update test', function (){
    expect($scope.test).not.toBeDefined();
    $httpBackend.flush();
    expect($scope.test).toEqual('test');    
  });
});