【问题标题】：Unit testing an AngularJS directive which uses scrollposition对使用滚动位置的 AngularJS 指令进行单元测试
【发布时间】：2013-05-20 06:01:57
【问题描述】：

我有一个监听滚动事件的指令，然后添加一个类（使其粘在顶部）。

我的问题是如何测试这种行为？我应该模拟 $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');
            }   
        });
    }
});

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

选项 #1：模拟 $window 对象

是的，你会模拟 $window。对于一个小指令来说，这并不过分，因为您的指令依赖于它并且仅依赖于它。根据您的说法，如果您不使用模拟进行测试，那么您根本就没有对其进行测试，那么您如何确定您的指令有效？

无论文件、类或方法多么小，都应始终由测试支持。

选项 #2：不要模拟 $window，将代码拆分为更小的可测试函数

如果您不想使用模拟，您可以重写您的代码，使其分部分执行每个步骤并让您提供变量，如下所示：

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

然后在你的测试中你可以这样做：

assert(shouldAddFilterClass(100, 50, 'static') === true);
assert(shouldRemoveFilterClass(100, 50, 'static') === false);

assert(shouldAddFilterClass(100, 200, 'fixed') === false);
assert(shouldRemoveFilterClass(100, 200, 'fixed') === true);

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

【讨论】：