Come testare direttiva AngularJS con scrolling

Question

Ho una direttiva di scorrimento infinito che sto cercando di unit test. Attualmente ho questo:

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

Tuttavia il .scrollTop (10000); non sembra attivare nulla.

Esiste un modo per unit test questo tipo di funzionalità (io sono in grado di testare unità di altre direttive con interazioni simili come cliccando sugli elementi)?

Nel caso in cui è relativo, questo è il codice di scorrimento infinito:

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

È necessario attivare l'evento di scorrimento del elemento manualmente il test:

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

Answer 2

avuto lo stesso problema recentemente. Per lo scorrimento di lavorare, è necessario impostare alcune dimensioni sul tag body, quindi la finestra è possibile scorrere.

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

Purtroppo questo non funziona in PhantomJS.

Se si esegue i test su Travis CI, è anche possibile utilizzare Chrome aggiungendo quanto segue al .travis.yml

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

E una Custom Chrome avvio nel config 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); 

};