angularjs – 通过Resharper在茉莉花测试的控制器中设置模块

我可以使用Resharper 9.2通过PhantomJ成功测试控制器使用茉莉花.作为Testrunner.

我按照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,但是模拟它

我知道两种策略来模拟一个服务,具有多种语法变体,如Angular中的所有内容…您可以简单地将一个对象文字添加到控制器声明中,也可以创建自己的服务,并使用$provider将它们添加到模块中：

如果服务只是一些数据层或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.

angularjs – 通过Resharper在茉莉花测试的控制器中设置模块

猜你在找的Angularjs相关文章