AngularJS와 지침 다음 지시문 내 단위 테스트에

Question

임 점점 오류를 바인딩 elm.on을() 테스트 :

.directive('flashMessage', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     template: "<div class='alert alert-{{flash.alert}}'>{{flash.msg}}</div>", 
     scope: { 
      flash: "=" 
     }, 
     link: function(scope, elem, attrs) 
     { 
      elem.on('click', function() { 
       elem.hide('slow'); 
      }); 

      scope.$watch('flash', function() { 
       if (scope.flash) { 
        elem.slideDown('slow'); 
       } else { 
        elem.hide(); 
       } 
      }); 
     } 
    }; 
}) 

단위 테스트 :

describe('Flash Messenger', function() 
{ 
    var elm, html, scope; 

    beforeEach(module('common.directives')); 

    beforeEach(inject(['$compile', '$rootScope', function($c, $r) { 
     $compile = $c; 
     $rootScope = $r.$new(); 
     elm = angular.element('<flash-message flash="flash"></flash-message>'); 
     console.log('BEFORE', elm); 
     $compile(elm)($rootScope); 
     $rootScope.$digest(); 
    }])); 

    // tests start here 
    it('should have an alert of success', function() 
    { 
     $rootScope.flash = {"alert":"success", "msg":"Success"}; 
     $rootScope.$digest(); 
    }); 
}); 

그 결과

LOG: 'BEFORE', Object{0: <flash-message flash="flash"></flash-message>, length: 1} 
Chrome 34.0.1847 (Windows 8) Flash Messenger should have an alert of success FAILED 
     TypeError: undefined is not a function 
      at link (E:/Repos/sandown/Source/Dev/site/js/directives.js?80b1c100e6d9acbd3c73fe2379761915ab1e05c0:9:18839) 
      at k (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:44:444) 
      at e (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:40:139) 
      at E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:39:205 
      at null.<anonymous> (E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:12:16) 
      at Object.d [as invoke] (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:28:304) 
      at workFn (E:/Repos/sandown/Source/Dev/site/tests/lib/angular/angular-mocks.js:1876:20) 
     Error: Declaration Location 
      at window.inject.angular.mock.inject (E:/Repos/sandown/Source/Dev/site/tests/lib/angular/angular-mocks.js:1862:25) 
      at null.<anonymous> (E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:7:13) 
      at E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:1:1 

내가 볼 수있는 것은 느릅 나무에는 .on 함수 또는 .slideDown 함수가 없다는 것입니다. 어떻게 테스트할까요?

Answer 1

문제는 karma.conf.js 파일에로드 된 파일의 순서가 문제였습니다. jquery가 먼저로드되고 문제가 해결되도록 변경했습니다.