유닛을 AngularJS로 컨트롤러를 정의하는 유닛을 테스트하십시오.

Question

나는 몇 가지 일을하는 Karma와 Jasmine을 사용하여 지시문을 테스트하려고합니다. 첫 번째는 templateUrl을 사용하고 두 번째는 컨트롤러를 정의한다는 것입니다. 이것은 올바른 용어는 아니지만 선언에 제어기를 작성합니다. 각도 적용은 각 장치가 자체 모듈에 포함되도록 설정됩니다. 예를 들어, 모든 지시문은 app.directive 모듈에 포함되고 모든 컨트롤러는 app.controller에 포함되며 모든 서비스는 app.service 등에 포함됩니다.

이 지시문에서 정의되는 컨트롤러에는 단일 종속성이며 $ 범위에서 값을 설정하기 위해 $ http 요청을하는 함수가 포함되어 있습니다. 나는 $ http 호출을 시뮬레이트하기 위해 $ httpBackend mock을 사용하여이 의존성을 조롱 할 수 있다는 것을 알고이 함수의 호출에 적절한 객체를 리턴한다. 나는 내가 만든 다른 단위 테스트에 대해이 작업을 여러 번 해보았으며이 개념을 아주 잘 이해하고 있습니다.

아래 코드는 CoffeeScript로 작성되었습니다.

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

:

다음

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

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

     $http _.defaults(options) 

뷰입니다 :

다음

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

종속성 서비스입니다 : 여기

내 지시어입니다

필자는 이것을 단순화했습니다. 내 목표는이를 연결하는 방법을 이해하는 것 뿐이므로 여기에서 가져올 수 있습니다. 이 방법으로 구조화하는 이유는 처음에 이것을 만들지 않았기 때문입니다. 기존 프로젝트의 테스트를 작성하고 있는데 다른 방법으로 구성 할 수있는 능력이 없습니다. 나는 시험을 치려고했지만, 내가 원하는 것을 할 수는 없다.

필자는 값이 뷰에 바인딩되는지 테스트하고 가능한 경우 컨트롤러가 값을 올바르게 작성하는지 테스트 할 수도 있습니다.이

'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를 설정하여보기를 가져올 수있게했습니다. 대답을 찾기 위해 많은 연구를했지만, 도움이 필요합니다. 바라건대 프로그래머보다 현명한 방향으로 나를 가리킬 수 있습니다. 고맙습니다.

Answer 1

karma에서 요소를 만든 다음 지시문의 이름과 함께 .controller() 함수를 사용하여 컨트롤러를 가져옵니다. 귀하의 예를 들어, 다음과 라인의 지난 몇 교체 :

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

주, 즉 당신이 당신의 지시자를 정의하는 방법을 감안할 때, 그것은 속성에 의해, 그리고하지 요소로한다. 나는 또한 100 % 확신하지는 않지만, 보통 scope.$digest;이 필요하다고 생각하지 않습니다. 보통 scope.$apply(function() {}) 블록에 적용해야 할 내용을 넣습니다.