18

我正在尝试使用 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，以允许我获取视图。我做了很多研究来找到答案，但我需要一些帮助。希望比我更聪明的程序员可以为我指明正确的方向。谢谢你。

4

1 回答 1

32

在 karma 中创建元素，然后使用.controller()带有指令名称的函数来获取控制器。对于您的示例，将最后几行替换为：

elem = angular.element('<div example-directive></div>');
$compile(elem)($rootScope);
var controller = elem.controller('exampleDirective');

请注意，鉴于您定义指令的方式，它应该是属性，而不是元素。我也不是 100% 确定，但我认为您不需要scope.$digest;通常我只是将需要应用的任何内容放入一个scope.$apply(function() {})块中。

于 2013-08-13T21:22:08.930 回答