Question

我写了一个角度指令来操纵滚动中的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)

这是我的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

什么是'背景'？我不知道这是怎么回事，因为elm应该是原始的DOM节点。

  var stickyVal = elm.context.offsetTop;

将该行更改为：

var stickyVal = elm.offsetTop

Angular / Karma TypeError：无法读取属性＆＃39; offsetTop＆＃39;未定义的

1 个答案: