Estou tentando testar uma diretiva usando Karma e Jasmine que faz algumas coisas. Primeiro sendo que ele usa um templateUrl e segundo que define um controlador. Esta pode não ser a terminologia correta, mas cria um controlador em sua declaração. O aplicativo Angular é configurado de forma que cada unidade esteja contida em seu próprio módulo. Por exemplo, todas as diretivas estão incluídas no módulo app.directive, todos os controladores estão contidos no app.controller e todos os serviços estão contidos no app.service etc.

Para complicar ainda mais, o controlador que está sendo definido dentro dessa diretiva tem uma única dependência e contém uma função que faz uma solicitação $ http para definir um valor no $ escopo. Eu sei que eu posso zombar dessa dependência usando $ httpBackend mock para simular a chamada $ http e retornar o objeto adequado para a chamada desta função. Já fiz isso várias vezes nos outros testes unitários que criei e tenho uma boa noção desse conceito.

O código abaixo está escrito em CoffeeScript.

Aqui está minha diretiva:

    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
        ]
      ]

Aqui está o serviço de dependência:

    angular.module("app.service")
      .factory 'Service', ['$http', ($http) ->

      getValue: () ->
        options.method = "GET"
        options.url = "example/fetch"

        $http _.defaults(options)

Aqui está a visão:

    <div>
      {{model.value_one}} {{model.value_two}}
    </div>

Eu simplifiquei isso um pouco, já que meu objetivo é apenas entender como conectar isso, eu posso levar a partir daí. A razão pela qual estou estruturando dessa maneira é porque inicialmente não criei isso. Eu estou trabalhando em escrever testes para um projeto existente e não tenho a capacidade de configurá-lo de outra maneira. Eu fiz uma tentativa de escrever o teste, mas não consigo fazer o que eu quero.

Eu quero testar para ver se os valores estão sendo vinculados à visão e, se possível, também testar para ver se o controlador está criando os valores corretamente.

Aqui está o que eu tenho:

    '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()

Eu não sei o quão perto estou ou se isso está correto. Eu quero ser capaz de afirmar que os valores estão vinculados à exibição corretamente. Eu usei o exemplo do Vojtajina para configurar o html2js no meu arquivo karma.js para permitir que eu agarrasse os pontos de vista. Fiz muita pesquisa para encontrar a resposta, mas preciso de ajuda. Espero que um programador mais sábio do que eu possa me apontar na direção certa. Obrigado.