[英]Mocking a dependent service to a controller unit test in AngularJS
I have a problem when unit testing an Ionic app. 单元测试Ionic应用程序时出现问题。 I have seen similar questions, but none solved my problem.
我见过类似的问题,但没有一个解决我的问题。
Basically, this is my controller.js 基本上,这是我的controller.js
angular.module('starter.controllers')
.controller('myController', function($scope, myService) {
$scope.test = function() {
return myService.getTestVariable();
};
});
and this is my service.js 这是我的service.js
angular.module('starter.services')
.factory('myService', function() {
var self = this;
self.testVariable = true;
return {
getTestVariable : function() {
return self.testVariable;
}
};
});
Modules are created in a app.js file: 在app.js文件中创建模块:
angular.module('starter', ['starter.controllers', 'starter.services']);
angular.module('starter.services', []);
angular.module('starter.controllers', []);
Now, I want to test the controller and use a mock versione of the service, so I set up the test like this: 现在,我想测试控制器并使用服务的模拟版本,所以我像这样设置测试:
describe('Controller: myController', function() {
var scope, controller, serviceMock;
beforeEach(function() {
module('starter');
});
beforeEach(function () {
serviceMock= {
getTestVariable : function() {return true;}
};
module(function ($provide) {
$provide.value('myService', serviceMock);
});
});
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('myController', {
$scope: scope
});
}));
it('should work as expected', function(){
spyOn(serviceMock, 'getTestVariable').and.callThrough();
scope.test();
expect(serviceMock.getTestVariable).toHaveBeenCalled();
});
});
However, when I try to run the test, it prints an error: 但是,当我尝试运行测试时,它会显示错误:
TypeError: 'undefined' is not a function (evaluating 'myService.getTestVariable()')
at <dir>/controller.js:5
Why is this happening? 为什么会这样呢?
I don't see any problem in the code, just do module initialisation angular.module('starter.services', []); angular.module('starter.controllers', []);
我没有在代码中看到任何问题,只需执行模块初始化
angular.module('starter.services', []); angular.module('starter.controllers', []);
angular.module('starter.services', []); angular.module('starter.controllers', []);
before its used. 在使用之前。
See the below example. 请参见以下示例。 same code you provided works perfectly.
您提供的相同代码非常有效。
angular.module('starter.controllers', []); angular.module('starter.controllers') .controller('myController', function($scope, myService) { $scope.test = function() { return myService.getTestVariable(); }; }); angular.module('starter.services', []); angular.module('starter.services') .factory('myService', function() { var self = this; self.testVariable = true; return { getTestVariable: function() { return self.testVariable; } }; }); angular.module('starter', ['starter.controllers', 'starter.services']); describe('Controller: myController', function() { var scope, controller, serviceMock; beforeEach(function() { module('starter'); }); beforeEach(function() { serviceMock = { getTestVariable: function() { return true; } }; module(function($provide) { $provide.value('myService', serviceMock); }); }); beforeEach(inject(function($rootScope, $controller) { scope = $rootScope.$new(); controller = $controller('myController', { $scope: scope }); })); it('should work as expected', function() { spyOn(serviceMock, 'getTestVariable').and.callThrough(); scope.test(); expect(serviceMock.getTestVariable).toHaveBeenCalled(); }); });
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.