アプリで無限スクロールを可能にするディレクティブをテストしようとしています。ディレクティブは、私の製品コードで正常に機能します。
この質問は、スクロールを使用して 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 はトリガーされません。