स्क्रॉलिंग

Question

के साथ 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); 
     } 
     }); 
    }; 
    } 
]); 

Answer 1

आप अपने परीक्षण में मैन्युअल रूप से अपने तत्व पर स्क्रॉल घटना चालू करने के लिए:

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

Answer 2

एक ही मुद्दा था हाल ही में। काम करने के लिए स्क्रॉलिंग के लिए, आपको बॉडी टैग पर कुछ आयाम सेट करने की आवश्यकता होगी, इसलिए विंडो को स्क्रॉल किया जा सकता है।

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.yml

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

और अपने कर्म config में एक कस्टम 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); 

};