Я пытаюсь проверить директиву, используя Карму и Жасмин, которая делает пару вещей. Во-первых, он использует templateUrl, а во-вторых, определяет контроллер. Возможно, это не правильная терминология, но она создает контроллер в своем объявлении. Приложение Angular настроено таким образом, чтобы каждый модуль содержался в своем собственном модуле. Например, все директивы включены в модуль app.directive, все контроллеры содержатся в app.controller, а все сервисы содержатся в app.service и т. Д.

Чтобы усложнить ситуацию, контроллер, определяемый в этой директиве, имеет одну зависимость и содержит функцию, которая делает запрос $ http для установки значения в области $. Я знаю, что могу смоделировать эту зависимость, используя макет $ 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()

Я не знаю, насколько я близок, или это даже правильно. Я хочу быть в состоянии утверждать, что значения привязаны к представлению правильно. Я использовал пример Войтажины, чтобы настроить html2js в моем файле karma.js, чтобы позволить мне получать представления. Я провел много исследований, чтобы найти ответ, но мне нужна помощь. Надеюсь, программист умнее, чем я, может указать мне правильное направление. Спасибо.