茉莉花间谍没有被调用

Question

我有在茉莉花

一些麻烦implimenting刺探我要检查，如果一个链接被点击上使用间谍茉莉花和茉莉花jQuery的滑块。

下面是一个简化版本：

我有一些链接为html固定文件的一部分。

<a href="#" class="someLink">Link 1</a> 
<a href="#" class="someLink">Link 2</a> 

滑块：

var Slider = function(links){ 
    this.sliderLinks = $(links); 
    this.bindEvents(); 
} 

Slider.prototype.bindEvents = function(){ 
    this.sliderLinks.on('click', this.handleClick); 
} 

Slider.prototype.handleClick = function(e){ 
    console.log('i have been clicked') 
} 

spec文件：

describe('Slider', function(){ 
    var slider; 

    beforeEach(function(){ 
     loadFixtures('slider.html'); 

     slider = new Slider('.someLink'); 

    }); 

    it('should handle link click', function(){ 
     spyOn(slider, 'handleClick'); 
     $(slider.sliderLinks[0]).trigger('click'); 
     expect(slider.handleClick).toHaveBeenCalled(); 
    }); 

}); 

测试失败。但'我已被点击'已被记录到控制台，因此该方法正在被调用。

如果我做这个测试通过，但：

it('should handle link click', function(){ 
     spyon(slider, 'handleClick'); 
     slider.handleClick(); 
     expect(slider.handleClick).toHaveBeenCalled(); 
    }); 

所以我的问题本质上是：

1. 我是测试在错误的方式这种类型的东西？
2. 为什么间谍没有注册该方法被调用的事实？

Answer 1

我刚刚验证了评论中概述的解决方案。你describe应该是：

describe('Slider', function() { 

    var slider; 

    beforeEach(function() { 
     loadFixtures('slider.html'); 
     spyOn(Slider.prototype, 'handleClick'); 
     slider = new Slider('.someLink'); 
    }); 

    it('should handle link click', function(){ 
     $(slider.sliderLinks[0]).trigger('click'); 
     expect(slider.handleClick).toHaveBeenCalled(); 
    }); 

}); 

的一点是，你必须的Slider创建之前原型​​功能和间谍。

的原因是什么茉莉花spyOn确实在您提供的代码：

spyOn(slider, 'handleClick'); 

创建直接在slider实例滑块财产​​（含间谍对象）。 slider.hasOwnProperty('handleClick')在这种情况下返回true，你知道...

但是，仍然有​​原型属性，您的click事件被绑定。这意味着触发的单击事件由原型​​函数处理，而滑块对象自己的属性​​（您的间谍）保持不变。

所以答案是间谍是不登记的事实，方法被调用，因为它从来没有被称为:-)