单元测试使用scrollposition的AngularJS指令

我有一个指令，它侦听scroll事件，然后添加一个类（使其粘附到顶部）

我的问题是如何测试这种行为？我应该模拟$window，还是有更好的方法？我可以考虑做一个场景测试，但仅仅测试一个小指令似乎有些过头了

该指令如下所示：

directiveModule.directive('whenFilterScroll',function($window){
    return function(scope, element, attr){
        var logoHeight = 110;
        angular.element($window).bind('scroll', function(){
            if(this.pageYOffset > logoHeight && element.css('position') != 'fixed')
            {
                element.addClass('filtersFixed');
            }
            if(this.pageYOffset < logoHeight && element.css('position') == 'fixed')
            {
                element.removeClass('filtersFixed');
            }   
        });
    }
});

var shouldAddFilterClass = function (pageYOffset, logoHeight, cssPosition) {
    return pageYOffset > logoHeight && cssPosition != 'fixed';
};

var shouldRemoveFilterClass = function (pageYOffset, logoHeight, cssPosition) {
    return pageYOffset < logoHeight && cssPosition == 'fixed';
};

/* ...rest of code... */
angular.element($window).bind('scroll', function () {
  if (shouldAddFilterClass(this.pageYOffset, logoHeight, element.css('position'))) {
    element.addClass('filtersFixed');
  }
  if (shouldRemoveFilterClass(this.pageYOffset, logoHeight, element.css('position'))) {
    element.removeClass('filtersFixed');
  }
});

指令（'whenFilterScroll'，函数（$window）{ 返回函数（范围、元素、属性）{ 高度=110； angular.element（$window.bind（'scroll'，function（））{ if（this.pageYOffset>logoHeight&&element.css（'position'）！='fixed'） { 元素addClass（'filtersFixed'）； } if（this.pageYOffset选项#1：模拟$window对象 是的，你会模仿$window。对于一个小指令来说，这并不过分，因为您的指令依赖于它，而且只依赖于它。从你所说的，如果你没有用mock测试它，你根本就没有测试它，那么你怎么能确保你的指令有效呢

无论文件、类或方法有多小，它都应该由测试来支持

选项2：不要模拟$window，将代码拆分成更小的可测试函数 如果您不想使用模拟，您可以重写代码，使其部分执行每个步骤，并允许您提供变量，如下所示：

directiveModule.directive('whenFilterScroll',function($window){
    return function(scope, element, attr){
        var logoHeight = 110;
        angular.element($window).bind('scroll', function(){
            if(this.pageYOffset > logoHeight && element.css('position') != 'fixed')
            {
                element.addClass('filtersFixed');
            }
            if(this.pageYOffset < logoHeight && element.css('position') == 'fixed')
            {
                element.removeClass('filtersFixed');
            }   
        });
    }
});

var shouldAddFilterClass = function (pageYOffset, logoHeight, cssPosition) {
    return pageYOffset > logoHeight && cssPosition != 'fixed';
};

var shouldRemoveFilterClass = function (pageYOffset, logoHeight, cssPosition) {
    return pageYOffset < logoHeight && cssPosition == 'fixed';
};

/* ...rest of code... */
angular.element($window).bind('scroll', function () {
  if (shouldAddFilterClass(this.pageYOffset, logoHeight, element.css('position'))) {
    element.addClass('filtersFixed');
  }
  if (shouldRemoveFilterClass(this.pageYOffset, logoHeight, element.css('position'))) {
    element.removeClass('filtersFixed');
  }
});

这样，您就可以检查回调所检查的条件。然后可以进行测试，以确保元素具有正确的CSS类。所有这些都没有嘲笑$window