디렉티브의 링크 함수에서의 동작을 테스트하는 방법

디렉티브의 링크 함수에서의 동작을 테스트하는 방법

일부 지시사항에서는 지시사항에 고유한 로직을 처리하는 기능을 스코프에 추가하고 있습니다.예를 들어 다음과 같습니다.

link: function(scope, element, attrs) {
         scope.doStuff = function() {
            //do a bunch of stuff I want to test
         }        
      }

그 기능을 테스트하려면 어떻게 해야 하나요?지령을 어떻게 테스트하는지를 구글에서 검색했지만, 발견한 것은 요소의 변화를 테스트하는 것에 가까웠습니다.각 테스트 전에 지시사항을 작성할 수는 있지만, 그럴 때마다 내 시야가 사라집니다.스코프의 속성이 변경되면 기능을 테스트하고 싶습니다.

디렉티브 정의에서 반환된 오브젝트를 입수할 수 있는 방법이 있습니까?그러면 링크 함수를 직접 호출하여 스코프에 정의된 각 함수의 동작을 테스트할 수 있습니다.이 모든 것을 할 수 있는 더 좋은 방법이 없을까?

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★describe 개의 기능을할 수 .it동일한 스코프 데이터에 대해 기능합니다.

기본적으로 링크 함수 자체를 테스트하는 것이 아니라 명령어의 결과를 프로그래밍 방식으로 테스트합니다.명령어를 , 「」를 사용합니다.$compile각진 과정을 거치게 됩니다.그런 다음 출력을 테스트하여 모든 것이 올바르게 배선되었는지 확인합니다.

앵글의 정보원은 이걸 어떻게 하는지 보여주는 좋은 예들로 가득해...예를 들어 ngRepeat 지시어에 대한 Angular의 테스트

(이변경)이라는 설정하고 을 알 수 .$rootScope 해서 ( )을(를)$digest출력되는 DOM을 테스트하여 모든 것이 올바르게 배선되어 있는지 확인합니다.지시사항이 변경되는 경우 범위 내의 내용을 테스트할 수도 있습니다.

ngClick 테스트는 브라우저의 상호작용 테스트와 범위에 미치는 영향을 보여주기 때문에 매우 흥미롭습니다.

완성도를 높이기 위해 ngClick 테스트의 일부를 소개합니다.지시 테스트의 개요는 다음과 같습니다.

 it('should get called on a click', inject(function($rootScope, $compile) {
   element = $compile('<div ng-click="clicked = true"></div>')($rootScope);
   $rootScope.$digest();
   expect($rootScope.clicked).toBeFalsy();

   browserTrigger(element, 'click');
   expect($rootScope.clicked).toEqual(true);
 }));

so so so so so so so so so so so 의 경우scope.doStuff스코프에 영향을 주는 것은 무엇이든 테스트하고, 그 후에 DOM 요소에 영향을 주는 만큼, 그 기능을 테스트하지 않습니다.

필요에 따라서, 디렉티브의 링크 메서드를 직접 유닛으로 테스트할 수 있습니다.각얼음 모듈의 유닛 테스터 "지시적 구성 테스트"를 참조하십시오.

http://bverbist.github.io/angular-ice/ #/unit Tester

사용 예: https://github.com/bverbist/angular-ice/blob/master/app/components/icebank/bank-account-number-directive_link_test.js

이 경우 디렉티브의 링크 메서드에 전달한 스코프 객체에 대한 참조를 유지하고 해당 스코프에서 doStuff 함수를 직접 테스트할 수 있습니다.

저는 이 문제를 조금 다르게 해결했습니다.

디렉티브에 매우 단순한 링크 함수가 있고 세 번째 인수(attrs)가 필요하지 않은 경우 링크 함수를 삭제하고 디렉티브를 컨트롤러에 할당합니다.

app.directive('loadIndicator', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'blahblah/indicator.html',
    controller: 'LoadIndicatorController'
  };
});

디렉티브의 링크 함수에서 scope와 element에 대한 args를 가지고 있는 것과 마찬가지로 이 2개의 args는 $syslog와 $syslog로 테스트하기 쉬운 컨트롤러에 삽입할 수 있습니다.

컨트롤러를 작성하고 이러한 컨트롤러를 유닛에서 테스트할 수 있다면 이 작업은 매우 간단합니다.

@sqlexception에 대한 코멘트 응답에 기재되어 있습니다.지침의 범위를 파악하기만 하면 됩니다.그것은 어렵지 않습니다.테스트에 적합하도록 코드를 수정하는 것은 바람직하지 않습니다.반대로 해야 합니다.

지시문의 범위를 얻으려면 다음과 같이 컴파일하십시오.

var element = $compile(<directive's html>).($scope)

어디에$scope로 선언되어 있다.$scope = $rootScrope.$new()이제 격리 범위를 취득할 수 있습니다.element.scope()

저는 최근에 "Testing a Linking Function with plunker" (플런커를 사용한 링크 기능 테스트)에 관한 짧은 블로그 투고를 작성했습니다.

 it('should get called on a click', inject(function($rootScope, $compile) {
   var scope = $rootScope.$new();
   element = $compile('<div ng-click="doIt()"></div>')(scope);
   scope.$digest();
   expect(scope.$$childHead.doIt()).toBeDefined();
 }));

이 $$child 사용헤드는 같은 문제에 대한 해결책이었고, 이것으로 테스트에서 호출되지 않은 기능을 커버할 수 있습니다.

언급URL : https://stackoverflow.com/questions/13406491/how-to-test-behavior-in-the-link-function-of-a-directive