Как проверить директиву с событием прокрутки?

Question

Я пытаюсь проверить директиву, которая позволяет мне выполнять бесконечную прокрутку в моем приложении. Директива отлично работает в моем производственном коде.

Этот вопрос очень близок к тому, как проверить директиву AngularJS с помощью прокрутки, и если кто-то скажет, что это идентичные вопросы, я удалю этот. Однако, это не решает мою проблему (по крайней мере, я не могу понять, как).

Вот моя директива:

(function(){
    "use strict";
    angular.module('moduleA').directive('whenScrolled',Directive);

    Directive.$inject = [];

    function Directive(){
        return {
            restrict : 'A', // Restrict to Attributes
            link : postLink
        };

        // Bind the element's scroll event
        function postLink(scope,elem,attr){
            var raw = elem[0];
            elem.bind('scroll',eventMethod);

            function eventMethod(){
                if ( raw.scrollTop + raw.offsetHeight >= raw.scrollHeight ) {
                    scope.$apply(attr.whenScrolled);
                }
            };
        };
    };

})();

И вот мой тест кармы:

describe('whenScrolled Directive:',function(){

    beforeEach(module('moduleA'));

    // Create a list in HTML and force overflow for a scroll event
    var html = 
    '<div id="test" ' + 
    '     style="max-height:30px;overflow-y:scroll;" ' +
    '     when-scrolled="testScroll()">' + 
    '    <ul>' + 
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '        <li>Testing</li>' +
    '    </ul>' + 
    '</div>';

    var $rootScope,
        element;

    beforeEach(inject([
        '$compile','$rootScope',
        function($compile,$rs){
            $rootScope = $rs;
            $rootScope.isScrolled = false;
            $rootScope.testScroll = function(){
                $rootScope.isScrolled = true;
            };

            element = $compile(html)($rootScope);
            $rootScope.$digest();
        }
]));

    it('should activate on scroll',function(){
        expect(element).toBeDefined();
        $rootScope.$broadcast('scroll'); <-- does nothing? -->
        expect($rootScope.isScrolled).toBe(true); <-- fails -->
    });

});

Мой karma.conf.js:

// Created May 04, 2016
module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'vendor/angular/angular.js',
        'vendor/angular/angular-mocks.js', 
        'moduleA/moduleA.view.html',
        'moduleA/moduleA.module.js',
        'moduleA/moduleA.controller.js',
        'moduleB/moduleB.view.html',
        'moduleB/moduleB.module.js',
        'moduleB/moduleB.controller.js',
        'test/module-A-tests.js',
        'test/module-B-tests.js'
    ],


    // list of files to exclude
    exclude: [
      'vendor/bootstrap*',
      'vendor/jquery*',
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-    preprocessor
    preprocessors: {
        // karma-ng-html2js-preprocessor for templates in directives
        'moduleA/moduleA.form.view.html': 'ng-html2js',
        'moduleB/moduleB.view.html': 'ng-html2js'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Я думал, что если у меня будет трансляция прокрутки $rootScope для всех его дочерних элементов (в моем случае, $scope), а директива $ привязана к моему элементу с моим элементом, то это вызовет предоставленный мною метод (doScrollFn).) и $scope.isScrolled изменится.

Но, насколько я могу судить, doScrollFn никогда не запускается.

Answer 1

Я все еще не уверен на 100%, что я сделал неправильно, но после поиска в Google karma-ng-html-препроцессора я нашел это:

https://www.npmjs.com/package/karma-ng-html2js-preprocessor-with-templates что привело меня к:

https://github.com/vojtajina/ng-directive-testing который привел меня к:

https://angularjs.org/ и, в основном, это:

https://github.com/vojtajina/ng-directive-testing/blob/start/test/tabsSpec.js.

И вот мой тест, который работает:

describe('whenScrolled Directive',function(){

    beforeEach(module('moduleA'));

    var html = 
        '<div id="test" ' +
        '       style="min-height:5px;max-height:30px;overflow-y:scroll;" ' +
        '     when-scrolled="testScroll()">' +
        '   <ul>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '       <li>Testing</li>' +
        '   </ul>' + 
        '</div>';

    var $rootScope,
        element;

    beforeEach(function(){
        inject([
            '$compile','$rootScope',
            function($compile,$rs){
                $rootScope = $rs;
                $rootScope.isScrolled = false;
                $rootScope.testScroll = function(){
                    $rootScope.isScrolled = true;
                };

                element = angular.element(html);
                $compile(element)($rootScope);
                $rootScope.$digest();
            }
    ]);
    });

    it('should activate on scroll',function(){
        expect(element.find('li').length).toBe(10);
        element.triggerHandler('scroll');
        expect($rootScope.isScrolled).toBe(true);
    });

});

Если это спасет кого-то время и проблемы, то это стоило написания.