2

アプリで無限スクロールを可能にするディレクティブをテストしようとしています。ディレクティブは、私の製品コードで正常に機能します。

この質問は、スクロールを使用して 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) に「スクロール」させ、$scope が私のディレクティブで私の要素に関連付けられている場合、それは私が提供したメソッド (doScrollFn) をトリガーします。 )、および $scope.isScrolled が変更されます。

しかし、私が知る限り、doScrollFn はトリガーされません。

4

1 に答える 1