javascript - Angular/karma 类型错误 : Cannot Read Property 'offsetTop' of Undefined

Question

我写了一个 Angular Directive(指令)来操纵滚动的 DOM，现在我正尝试在 Karma/Jasmine 中编写一个测试，但我什至无法通过一个简单的测试，但我一直没能找到一个我可以适用于我的情况的解决方案。

这是我的指令:

'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)

这是我的配置文件:

'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 的引用，我已经能够让我的代码抛出同样的错误，所以我想知道是否存在 karma 没有得到的依赖或者是错误的订购？

Answer 1

什么是“上下文”？我不知道它是如何工作的，因为 elm 应该是原始 DOM 节点。

  var stickyVal = elm.context.offsetTop;

将该行更改为:

var stickyVal = elm.offsetTop