카르마 테스트 지시문에 angular.element에는 'hide'라는 메서드가 없습니다.

Question

빌드중인 각도 어플리케이션을 테스트하기 위해 카르마를 설정하려고합니다. 이미 서비스와 컨트롤러에 대한 테스트를 설정했지만 테스트하기에 다소 복잡한 지시문을 찾고 있습니다.

이 지침 :

angular.module('Directives',[]) 
    .directive('tooltip', function factory(){ 
    return { 
     link: { 
     post: function(scope, $element, instanceAttrs, controller){ 

      $element.parent().append('<span class="tooltip-wrapper"><aside class="tooltip-container"></aside></span>'); 

      var $tooltipWrapper = $element.next() 
      , $tooltip  = angular.element($tooltipWrapper.children()[0]); 

      if(instanceAttrs.icon){ 
      $tooltipWrapper.addClass('help icon standalone'); 
      $element = $tooltipWrapper; 
      } 

      if(instanceAttrs.position){ 
      $tooltip.addClass('tooltip-position-' + instanceAttrs.position); 
      } else { 
      $tooltip.addClass('tooltip-position-bottom-center'); 
      } 

      if(instanceAttrs.position === 'right'){ 
      $tooltipWrapper.addClass('tooltip-wrapper-right'); 
      } 

      if(typeof instanceAttrs.message === 'undefined'){ 

      $tooltip.html(instanceAttrs.$$element[0].childNodes[0].data); 
      $element.parent().children('tooltip').remove(); 
      } 
      else { 
      $tooltip.html(instanceAttrs.message); 
      } 

      $tooltip.hide(); // <--- this is where the error gets thrown 
      $element.on('mouseover', goTooltip); 

      function goTooltip(){ 
      $tooltip.show(); 
      $element.on('mouseleave', killTooltip); 
      $element.off('mouseover'); 
      } 
      function killTooltip(){ 
      $tooltip.hide(); 
      $element.off('mouseleave'); 
      $element.on('mouseover', goTooltip); 
      } 
     } 
     }, 

     scope: false, 
     replace: false, 
     restrict:'EA' 
    }; 
    }); 

테스트 : 나는 테스트를 실행하면

describe("The tooltip", function(){ 

    var elm 
    , scope; 

    beforeEach(module("RPMDirectives")); 

    beforeEach(inject(function($rootScope, $compile){ 

    elm = angular.element(
     '<div>' + 
     '<a></a>' + 
     '<tooltip icon="true" position="bottom-center-left">bar</tooltip>' + 
     '</div>'); 

    scope = $rootScope; 
    $compile(elm)(scope); 
    scope.$digest(); 
    })); 

    it('should do something', inject(function($compile, $rootScope){ 
    expect(elm.find('aside')).toBe('bar'); 
    })) 
}); 

그것은 개체 [개체 개체] (지시어에서 주석으로 표시 $ 툴팁이)가 말한다 어떤 방법도 숨기지 않습니다. 지시문은 브라우저에서 사용할 때 잘 작동하며 jqlite에는 hide 메서드가 있으므로 손실이 발생합니다. 테스트 환경에서 jquery를 포함 시켜서 작동하도록 할 수는 있지만, 제작용 앱의 Angular를 사용하여 jquery를 제거하고 그 시나리오를 여기에서 증명할 때 수행하지 않을 것입니다. 중요합니다.

Answer 1

위의 도덕적 인 apeman 덕분입니다. 각도 문서의 잘못된 버전을보고 있었고 hide는 더 이상 angular 요소의 메서드가 아닙니다. Jasmine이나 Karma에 문제가 없으며 Angular 테스트는 여전히 꿈입니다.