Angular/Karma TypeError : 속성 'offsetTop'을 읽을 수 없음 정의되지 않음

Question

스크롤 할 때 DOM을 조작하는 각도 지시문을 작성 했으므로 이제 카르마/재스민에서 테스트를 작성하려고하지만 간단한 테스트를 수행하는 데 문제가 있습니다. 통과 할 수는 있지만, 제 상황에 적용 할 수있는 해결책을 찾지 못했습니다.

이

내 지시어입니다 :

'use strict'; 

angular.module('myApp.sticky', []) 

.directive('sticky', ['$window', '$anchorScroll', 
    function($window, $anchorScroll) { 
    return { 
    restrict: 'A', 
    link: function(scope, elm, attrs) { 
     var atTop; 
     scope.atTop = atTop; 
     var stickyVal = elm.context.offsetTop; 
     scope.sticky = function() { 
     angular.element($window).bind("scroll", function() { 
     if (angular.element($window).scrollTop() > stickyVal) { 
      elm.css({position: 'fixed', top: '0px'}); 
      if (elm.children().length === 1) { 
      elm.append(elm.next().next()); 
      } 
      return true; 
     } else { 
      elm.css({position: 'static'}); 
      return false; 
     } 
     }); 
     }; 
     scope.sticky(); 
    } 
    }; 
}]); 

이것은 내 테스트를 위해 지금까지 무엇을 가지고 :

'use strict'; 
describe('myApp.sticky module', function() { 
    var scope, 
    element, 
    directive, 
    compiled, 
    html; 

    beforeEach(function() { 
    module('myApp.sticky'); 
    html = '<span sticky>test</span>'; 
    inject(function ($compile, $rootScope) { 
     scope = $rootScope.$new(); 
     element = angular.element(html); 
     compiled = $compile(element); 
     compiled(scope); 
     scope.$digest(); 
    }); 
}); 
    describe('sticky directive', function() { 
    it('should exist', function() { 
     expect(element).toBeDefined(); 
    }); 
    it('should set the element to a fixed position at a break point', 
     function() { 
     }); 
    }); 
}); 

이 내 터미널이 저를주고 무엇 :

Chrome 40.0.2214 (Mac OS X 10.10.1) myApp.sticky module sticky directive should exist FAILED 
TypeError: Cannot read property 'offsetTop' of undefined 
    at link (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive.js:12:34) 
    at nodeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6752:13) 
    at compositeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6146:13) 
    at publicLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6042:30) 
    at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:35:7) 
    at Object.invoke (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:3965:17) 
    at workFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2177:20) 
    at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2163:37) 
    at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5) 
Error: Declaration Location 
    at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2162:25) 
    at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5) 
Chrome 40.0.2214 (Mac OS X 10.10.1) myApp.sticky module sticky directive should set the element to a fixed position at a break point FAILED 
TypeError: Cannot read property 'offsetTop' of undefined 
    at link (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive.js:12:34) 
    at nodeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6752:13) 
    at compositeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6146:13) 
    at publicLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6042:30) 
    at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:35:7) 
    at Object.invoke (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:3965:17) 
    at workFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2177:20) 
    at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2163:37) 
    at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5) 
Error: Declaration Location 
    at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2162:25) 
    at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5) 
Chrome 40.0.2214 (Mac OS X 10.10.1): Executed 3 of 3 (2 FAILED) (0.378 secs/0.025 secs) 

그리고 내 conf 파일입니다.

'use strict'; 

module.exports = function(config){ 
    config.set({ 

    basePath : '../', 

    files : [ 
     'app/bower_components/jquery/jquery.js', 
     'app/bower_components/angular/angular.js', 
     'app/bower_components/angular-route/angular-route.js', 
     'app/bower_components/angular-mocks/angular-mocks.js', 
     'app/components/sticky/sticky-directive.js', 
     'app/view1/view1.js', 
     'app/app.js' 
    ], 

    autoWatch : true, 

    frameworks: ['jasmine'], 

    browsers : ['Chrome'], 

    plugins : [ 
     'karma-chrome-launcher', 
     'karma-firefox-launcher', 
     'karma-jasmine' 
     ], 

    junitReporter : { 
     outputFile: 'test_out/unit.xml', 
     suite: 'unit' 
    } 

    }); 
}; 

어떤 도움을 주셔서 감사합니다.

감사

갱신 : 내 html 파일 jQuery에 대한 참조를 주석하여 동일한 오류가 발생하려면 코드를 얻을 수 있었다, 그래서 나는 카르마가 점점되지 않도록 종속성이 있는지 궁금 아니면 순서가 잘못 되었습니까?

Answer 1

'컨텍스트'란 무엇입니까? 느릅 나무가 원시 DOM 노드 여야하므로 어떻게 작동하는지 모르겠습니다.

var stickyVal = elm.context.offsetTop; 

변경이 라인 :

var stickyVal = elm.offsetTop