如何用滾動測試AngularJS指令

我有一個無限的滾動指令，我試圖單元測試。目前我有這個：如何用滾動測試AngularJS指令

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

來源

2013-05-14 ryanzec

您必須在您的測試手動觸發元素上的滾動事件：

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

來源

2013-05-14 14:12:18

那麼這個代碼觸發器，但它會觸發代碼，即使scrollTop（）不適用，因爲raw.scrollTop，原始。 offsetHeight和raw.scrollHeight都在指令的代碼中計算爲0。也許這是不能進行單元測試的。 – ryanzec 2013-05-14 14:26:41

我有同樣的問題 - 看起來，元素不能添加到文檔時沒有pageYOffset/pageXOffset。將元素添加到文檔也不起作用「無法讀取屬性'createDocumentFragment'爲null」 – iRaS 2015-10-28 13:59:37

有同樣的問題最近。爲了滾動工作，您需要在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工作。

如果您在特拉維斯CI運行測試，你也可以使用Chrome通過添加以下到您的.travis.yml

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

而在你的人緣配置自定義Chrome啓動：

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

};

來源

2015-02-27 19:35:35 Stefan

如何用滾動測試AngularJS指令

回答

相關問題