10

単体テストしようとしている無限スクロール ディレクティブがあります。現在、私はこれを持っています：

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);
        }
      });
    };
  }
]);
4

2 に答える 2

7

テストで要素のスクロール イベントを手動でトリガーする必要があります。

element.find('#test').scrollTop(10000);
element.find('#test').triggerHandler('scroll');
于 2013-05-14T14:12:18.470 に答える