4

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

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

1 回答 1

0

选项 #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。

于 2014-07-31T03:46:27.273 回答