我按照https://blogs.endjin.com/2014/09/unit-testing-angularjs-with-visual-studio-resharper-and-teamcity/的说明设置Resharper.
这是有效的:如果我不指定它所依赖的模块,我可以运行一个控制器的测试:
控制器:
var moduleName; (function (moduleName) { 'use strict'; var testableController = (function () { function testableController($scope) { var _this = this; this.$scope = $scope; $scope.title = "Welcome"; } testableController.className = 'testableController'; return testableController; }()); moduleName.testableController = testableController; })(moduleName || (moduleName = {}));
spec文件看起来像这样
///<reference path="~/Scripts/jasmine/jasmine.js"/> ///<reference path="~/Scripts/jasmine/angular.js"/> ///<reference path="~/Scripts/jasmine/angular-mocks.js"/> ///<reference path="~/Scripts/angular-ui/ui-bootstrap.min.js" /> ///<reference path="~/Scripts/jasmine/controllers.js"/> ///<reference path="~/Scripts/App/Controllers/testableController.js" /> ///<reference path="~/Scripts/App/AppJasmine.js" /> describe("Controllers",function() { beforeEach(module("moduleName")); describe("Jasmine testableController",function () { var scope,controller; beforeEach(inject(function ($rootScope,$controller) { scope = $rootScope.$new(); controller = $controller('testableController',{ $scope: scope }); })); it('should set the page title as "Welcome"',function () { expect(scope.title).toBe('Welcome'); }); }); });
真正的控制器使用角ui引导“ui.bootstrap”.控制器在页面上工作,如果我将其更改为下一个示例,但是当我尝试测试它有一个错误
Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal http://errors.angularjs.org/1.2.24/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal in http://localhost:61032/referenceFile?path=~/webui/trunk/Netvacation.Pegasus.WebUI/Scripts/jasmine/angular.js (line 3802)
控制器依赖Bootstrap
angular.module('moduleName',['ui.bootstrap']); var moduleName; (function (moduleName) { 'use strict'; var testableController = (function () { function testableController($scope,$uibModal) { var _this = this; this.$scope = $scope; this.$uibModal = $uibModal; $scope.title = "Welcome"; } testableController.className = 'testableController'; return testableController; }()); moduleName.testableController = testableController; })(moduleName || (moduleName = {}));
**编辑1 **
我试过了
beforeEach( function () { module("ui.bootstrap"); module("moduleName"); } );
但有相同的错误.
编辑2
我用
http://angular-ui.github.io/bootstrap/
版本:1.3.3 – 甚至22
AngularJS v1.2.24
编辑3
我不想测试$uibModal,但是模拟它
如果服务只是一些数据层或API的包装器,您可以使用文字对象来模拟其功能,并在控制器构造函数中注入,遵循示例语法,可以这样完成:
var currentAuth; beforeEach(inject(function ($rootScope,$controller) { scope = $rootScope.$new(); currentAuth = {uid: 1,name: juan,getFriends: function() { ... }}; controller = $controller('TestableCtrl',{'$scope': $scope,'currentAuth': currentAuth }); }));
在这种情况下,’currentAuth’是在应用程序中提供当前记录的用户的服务.
这只有在不需要在对象定义的函数中注入任何服务时才有效.这将相当于创建一个值服务并将其注入到模块中.如果嘲笑服务中的方法本身需要任何服务,则必须创建一个工厂或服务,将该服务添加到模块中,然后像其他任何定制服务一样注入.看到我用来模拟角火认证服务的这个例子:
var $controller,$rootScope,$scope,$location,Auth; beforeEach(function(){ module('planner.login'); module(function($provide){ $provide.factory('Auth',function($q){ return { $signInWithEmailAndPassword: function(email,pass) { return $q.reject({error: 'ERROR'}); } }; }); return null; }); }); beforeEach(function(){ inject(function($controller,_Auth_) { $scope = $rootScope.$new(); Auth = _Auth_; $controller("TestableCtrl",{ $scope: $scope,Auth: Auth,$stateParams: {} }); }); });
在这个示例中,我正在创建一个使用$q服务返回有角度承诺的新工厂(这不需要在Chrome上进行测试,但PhantomJS没有Promise规范).请注意,您需要两个beforeEach,一个将提供程序添加到模块,另一个将提供程序注入到控制器中.
使用哪一个取决于你想要测试什么,以及你需要深入模拟原始服务行为.在您使用uibmodal的情况下,您可能需要在某个时间点调用“.open”,并且已经调用了间谍,但是您只需要创建一个具有该属性的对象,并对该对象的属性进行间谍.所以第一种方法应该是足够的.
所以你的代码应该是这样的:
describe("Controllers",controller,uibModal; beforeEach(inject(function ($rootScope,$controller) { scope = $rootScope.$new(); uibModal = { open: function() { return 'Whatever'; } } controller = $controller('testableController',{ $scope: scope,$uibModal: uibModal }); })); it('should set the page title as "Welcome"',function () { expect(scope.title).toBe('Welcome'); // you will probably do something like this at some point to verify // that the modal gets opened on click or following any other action: // var spy = spyOn(uibModal,'open'); // expect(spy).toHaveBeenCalled(); }); }); });
我希望它有帮助,请告诉我,如果有什么不清楚,我也在学习测试AngularJS应用程序,并希望知道这是否有助于AngularUI.