对在AngularJS中定义控制器的指令进行单元测试
我正在尝试使用Karma和Jasmine测试一个指令，它做了几件事。首先，它使用了templateUrl，其次，它定义了一个控制器。这可能不是正确的术语，但它在声明中创建了一个控制器。设置Angular应用程序，以便每个单元都包含在其自己的模块中。例如，所有指令都包含在模块app.directive中，所有控制器都包含在app.controller中，所有服务都包含在app.service中，等等。
更复杂的是，此指令中定义的控制器只有一个依赖项，并且它包含一个函数，该函数发出$http请求以在$scope上设置值。我知道我可以使用$httpBackend模拟来模拟这种依赖，以模拟$http调用，并将适当的对象返回到此函数的调用中。在我创建的其他单元测试中，我已经做过很多次了，并且对这个概念有很好的理解。
下面的代码是用CoffeeScript编写的。
这里的是我的指令：
angular.module('app.directive')
.directive 'exampleDirective', [() ->
restrict: 'A'
templateUrl: 'partials/view.html'
scope: true
controller: ['$scope', 'Service', ($scope, Service) ->
$scope.model = {}
$scope.model.value_one = 1
# Call the dependency
Service.getValue()
.success (data) ->
$scope.model.value_two = data
.error ->
$scope.model.value_two = 0
]
]这里是依赖服务：
angular.module("app.service")
.factory 'Service', ['$http', ($http) ->
getValue: () ->
options.method = "GET"
options.url = "example/fetch"
$http _.defaults(options)这里是视图：：
<div>
{{model.value_one}} {{model.value_two}}
</div>我已经把它简化了很多，因为我的目标只是理解如何把它连接起来，我可以从那里开始。我以这种方式构造它的原因是因为我最初并没有创建它。我正在为一个现有的项目编写测试，我没有能力以任何其他方式配置它。我已经尝试过编写测试，但无法让它完成我想要的操作。
我想测试一下这些值是否绑定到视图，如果可能的话，还想测试一下控制器是否正确地创建了这些值。
这是我得到的：
'use strict'
describe "the exampleDirective Directive", ->
beforeEach module("app.directive")
beforeEach module("app/partials/view.html")
ServiceMock = {
getValue : () ->
options.method = "GET"
options.url = "example/fetch"
$http _.defaults(options)
}
#use the mock instead of the service
beforeEach module ($provide) ->
$provide.value "Service", ServiceMock
return
$httpBackend = null
scope = null
elem = null
beforeEach inject ($compile, $rootScope, $injector) ->
# get httpBackend object
$httpBackend = $injector.get("$httpBackend")
$httpBackend.whenGET("example/fetch").respond(200, "it works")
#set up the scope
scope = $rootScope
#create and compile directive
elem = angular.element('<example-directive></example-directive>')
$compile(elem)(scope)
scope.$digest()我不知道我离得有多近，也不知道这是否正确。我希望能够断言这些值已正确绑定到视图。我已经使用Vojtajina的例子在我的karma.js文件中设置了html2js，以允许我获取视图。我做了很多研究来寻找答案，但我需要一些帮助。希望一个比我聪明的程序员能给我指明正确的方向。谢谢。
回答 1
Stack Overflow用户
发布于 2013-08-14 05:22:09
在karma中创建元素，然后使用带有指令名称的.controller()函数来获取控制器。对于您的示例，将最后几行替换为以下内容：
elem = angular.element('<div example-directive></div>');
$compile(elem)($rootScope);
var controller = elem.controller('exampleDirective');请注意，给定您定义指令的方式，它应该是按属性的，而不是元素。我也不是100%确定，但我不认为你需要的scope.$digest;通常我只是把任何需要应用到一个scope.$apply(function() {})块。
https://stackoverflow.com/questions/17624315
复制相似问题