如何通过滚动测试 AngularJS 指令答案

【问题标题】：How to test AngularJS Directive with scrolling如何通过滚动测试 AngularJS 指令
【发布时间】：2013-05-14 12:53:49
【问题描述】：

我有一个无限滚动指令，我正在尝试对其进行单元测试。目前我有这个：

describe('Infinite Scroll', function(){
  var $compile, $scope;

  beforeEach(module('nag.infiniteScroll'));

  beforeEach(inject(function($injector) {
    $scope = $injector.get('$rootScope');
    $compile = $injector.get('$compile');

    $scope.scrolled = false;
    $scope.test = function() {
      $scope.scrolled = true;
    };
  }));

  var setupElement = function(scope) {
    var element = $compile('<div><div id="test" style="height:50px; width: 50px;overflow: auto" nag-infinite-scroll="test()">a<br><br><br>c<br><br><br><br>e<br><br>v<br><br>f<br><br>g<br><br>m<br>f<br><br>y<br></div></div>')(scope);
    scope.$digest();
    return element;
  }

  it('should have proper initial structure', function() {
    var element = setupElement($scope);

    element.find('#test').scrollTop(10000);

    expect($scope.scrolled).toBe(true);
  });
});

但是 .scrollTop(10000);似乎没有触发任何东西。

是否对这种类型的功能进行单元测试（我能够对具有类似交互的其他指令进行单元测试，例如单击元素）？

如果是相对的，这是无限滚动代码：

angular.module('nag.infiniteScroll', [])
.directive('nagInfiniteScroll', [
  function() {
    return function(scope, elm, attr) {
      var raw = elm[0];

      elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
          scope.$apply(attr.nagInfiniteScroll);
        }
      });
    };
  }
]);

【问题讨论】：

标签： testing angularjs jasmine

【解决方案1】：

您必须在测试中手动触发元素上的滚动事件：

element.find('#test').scrollTop(10000);
element.find('#test').triggerHandler('scroll');

【讨论】：

好吧，这使代码触发了，但是即使 scrollTop() 不适用，它也会触发代码，因为 raw.scrollTop，raw。 offsetHeight 和 raw.scrollHeight 在指令的代码中都计算为 0。也许这是无法进行单元测试的东西。
我有同样的问题 - 似乎元素在未添加到文档时不能有 pageYOffset/pageXOffset。将元素添加到文档也不起作用“无法读取 null 的属性‘createDocumentFragment’”

【解决方案2】：

最近遇到了同样的问题。为了滚动工作，您需要在 body 标签上设置一些尺寸，以便可以滚动窗口。

var scrollEvent = document.createEvent( 'CustomEvent' ); // MUST be 'CustomEvent'
scrollEvent.initCustomEvent( 'scroll', false, false, null );

var expectedLeft = 123;
var expectedTop = 456;

mockWindow.document.body.style.minHeight = '9000px';
mockWindow.document.body.style.minWidth = '9000px';
mockWindow.scrollTo( expectedLeft, expectedTop );
mockWindow.dispatchEvent( scrollEvent );

很遗憾，这在 PhantomJS 中不起作用。

如果您在 Travis CI 上运行测试，您还可以通过将以下内容添加到您的 .travis.yml 来使用 Chrome

before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

还有一个自定义 Chrome 启动器在您的 karma 配置中：

module.exports = function(config) {
    var configuration = {

        // ... your default content

        // This is the new content for your travis-ci configuration test
        //  Custom launcher for Travis-CI
        customLaunchers: {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        },

        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: true 
    };

    if(process.env.TRAVIS){
        configuration.browsers = ['Chrome_travis_ci'];
    }

    config.set( configuration );

};

【讨论】：