單元測試使用茉莉花服務的角碼

Question

我試圖測試一個控制器，而不是要求我模擬一個服務，我正在使用獲取數據。目前，我收到一個錯誤說的功能，在這條線未定義：

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');  
    }); 
}); 

下面是它的一個plunker：http://plnkr.co/edit/tBSl88RRhj56h3Oiny6S?p=preview

Answer 1

當您使用茉莉花2.1時，API是.and.returnValue。並在測試規範，前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'); 
    }); 
}); 

Answer 2

這裏做$scope.$apply()是測試$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');  
    }); 
});