AngularJS + Jasmine - 지시어에 컨트롤러 범위 쓰기 받기

Question

저는 AngularJS 유닛 테스트에서 좀 새로운 기능으로 지시어로 작성된 컨트롤러 메소드를 테스트하는 데 어려움을 겪고 있습니다.

이

app.directive('formLogin', ['AuthService', function(AuthService){ 
    return { 
     restrict: 'E', 
     templateUrl: utils.baseUrl + 'partials/_home-form-login.html', 
     replace: true, 
     controller: function ($scope, $element, $http, $location) { 
      $scope.visible = false; 
      $scope.showForm = function() { 
       $scope.visible = !$scope.visible; 
      }; 
     } 
    }; 
}]); 

내 directive.js입니다 그리고 여기 내 단위 test.js

describe('formLogin ctrl', function() { 
    var element, scope, compile; 

    beforeEach(module('Application')); 

    beforeEach(inject(function ($rootScope, $compile) { 
     element = angular.element('<form-login></form-login>'); 
     scope = $rootScope.$new(); 
     compile = $compile(element)($scope);  
    })); 

    it('Test', function() { 
     expect(scope.visible).toBe(false); 
    }) 
}); 

그리고에 의해가 정의되지 않은 "scope.visible"올 이렇게 간다 .

"scope"변수에서 "visible"속성과 "showForm"방법을 사용한다고 $ 컨트롤러를 사용하는 방법이 있습니까?

Answer 1

는 this link 에서 당신이 지시 컨트롤러에서 scope.$digest();

Answer 2

당신의 지시 이 범위를 격리하지 않은 경우, 당신이 호출 할 수있는 방법을하고 테스트해야 할 수 있습니다처럼 보이는 방법 범위 값이 영향.

는

describe('myApp', function() { 
    var scope 
     , element 
    ; 

    beforeEach(function() { 
     module('myApp'); 
    }); 

    describe('Directive: formLogin', function() { 
     beforeEach(inject(function ($rootScope, $compile) { 
      scope = $rootScope.$new(); 
      element = angular.element('<form-login></form-login>'); 
      $compile(element)(scope); 
     })); 

     it('.showForm() – changes value of $scope.visible', function() { 
      expect(scope.visible).toBe(false); 
      scope.showForm(); 
      expect(scope.visible).toBe(true); 
     }); 
    }); 
}); 

jsfiddle은 : http://jsfiddle.net/krzysztof_safjanowski/L2rBV/1/

Answer 3

당신은 몇 가지 문제를 가지고있는 것 같습니다 :

1. compile = $compile(element)($scope); - 여기를 $scope는 정의되지 않습니다. SMK에서 언급 한 바와 같이 그것은 compile = $compile(element)(scope);
2. 을해야합니다, 당신은 지침의 작성 과정은 templateUrl을 사용하고 있기 때문에 이것은 특히 중요
   • 을 완료하기 위해 범위를 소화해야합니다. Krzysztof가 그의 예제에서와 같이 로컬로 정의 된 template을 사용하면이 단계를 건너 뛸 수 있습니다.

당신은 아마 당신이 scope.$digest()을 추가 할 때 예기치 않은 GET 요청에 대한 다른 문제를 얻을 것이다 알 수 있습니다. 이것은 Angular가 templateUrl을 얻으려고하기 때문에 테스트하는 동안 모든 HTTP 요청을 수동으로 구성/예상해야합니다. $httpBackend을 주입하고 $httpBackend.whenGet(/partials\//).respond('<div/>');과 같은 것을 시도해 볼 수는 있지만 문제는 결국 그렇게 될 것입니다.

이 작업을 수행하는 더 좋은 방법은 $templateCache 템플릿을 삽입하는 것입니다. Karma는이를 위해 프리 프로세서를 사용하거나 수동으로 수행 할 수 있습니다. 이것에 대해 읽을 수있는 다른 StackOverflow 질문이 있습니다, like this one.

in this plunkr 간단한 예제로 $templateCache에 간단한 템플릿을 삽입하도록 예제를 수정했습니다.

카르마의 html2js 프리 프로세서를보고 작업을 수행 할 수 있는지 확인해야합니다.