单元测试指令，该指令规定了AngularJS控制器 [英] Unit testing a directive that defines a controller in AngularJS

问题描述

我想测试一下噶和Jasmine，做了几件事情指令。首先是它使用了templateUrl和第二它定义一个控制器。这未必是正确的术语，但它会在其声明的控制器。使每个单元都包含自己的模块内的角应用程序设置。例如，所有的指令都包括模块app.directive内，所有的控制器都包含app.controller内，并且所有的服务都包含在app.service等

I'm trying to test a directive using Karma and Jasmine that does a couple of things. First being that it uses a templateUrl and second that it defines a controller. This may not be the correct terminology, but it creates a controller in its declaration. The Angular application is set up so that each unit is contained within its own module. For example, all directives are included within module app.directive, all controllers are contained within app.controller, and all services are contained within app.service etc.

要的事情进一步复杂化，被定义在控制器内该指令有一个单一的依赖，它包含一个函数，使一个$ http请求设置在$范围值。我知道我可以使用$ httpBackend模拟来模拟$ HTTP调用和正确的对象返回这个函数的调用嘲笑这种依赖性。我已经做了，我已经创建的另一个单元测试这个无数次，并且对这一概念的pretty很好的把握。

To complicate things further, the controller being defined within this directive has a single dependency and it contains a function that makes an $http request to set a value on the $scope. I know that I can mock this dependency using $httpBackend mock to simulate the $http call and return the proper object to the call of this function. I've done this numerous times on the other unit tests that I've created, and have a pretty good grasp on this concept.

的的code下面写在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>

我已经简化这个颇有几分，因为我的目标是不仅要了解如何连接这件事，我可以把它从那里。我构建这样说的原因是因为我没有最初创建这个。我正在写作测试现有的项目，我没有配置任何其他方式的能力。我已经做出了尝试编写测试，但不能得到它做我想做的。

I've simplified this quite a bit, as my goal is only to understand how to wire this up, I can take it from there. The reason I'm structuring it this way is because I did not initially create this. I'm working on writing tests for an existing project and I don't have the ability to configure it any other way. I've made an attempt to write the test, but cannot get it to do what i want.

欲测试以查看是否值被绑定到视图中，如果可能的话也测试以查看是否控制器被正确建立的值。

I want to test to see if the values are being bound to the view, and if possible to also test to see if the controller is creating the values properly.

这里是我得到了什么：

    '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的例子建立html2js我karma.js文件，让我抢的意见。我已经做了很多的研究找到了答案，但我需要一些帮助。希望程序员更聪明，比我可以点我在正确的方向。谢谢你。

I don't know how close I am, or if this is even correct. I want to be able to assert that the values are bound to the view correctly. I've used Vojtajina's example to set up html2js in my karma.js file to allow me to grab the views. I've done a lot of research to find the answer, but I need some help. Hopefully a programmer wiser than I can point me in the right direction. Thank you.

推荐答案

创建因果报应的元素，然后使用<$c$c>.controller()与你的指令抢控制器的名称运作。对于你的榜样，这些替换最后几行：

Create the element in karma, then use the .controller() function with the name of your directive to grab the controller. For your example, replace the last couple of lines with these:

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

请注意，给定你如何定义你的指令，它应该是属性，而不是一个元素。我也不能100％肯定，但我不认为你需要的 $范围消化; 通常我只是把任何需要应用到范围。$应用（函数（）{}）块。

Note, that given how you defined your directive, it should be by attribute, and not as an element. I'm also not 100% sure, but I don't think you need the scope.$digest; usually I just put anything that needs to be applied into a scope.$apply(function() {}) block.

这篇关于单元测试指令，该指令规定了AngularJS控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！