茉莉花间谍不被称为

Question

我在 Jasmine 中进行间谍活动时遇到了一些麻烦

我想使用 jasmine spy 和 jasmine 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')
}

规格文件：

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

});

关键是你必须监视原型handleClick 函数和之前 Slider 创建。

原因是 Jasmine spyOn 在您提供的代码中真正做了什么：

spyOn(slider, 'handleClick');

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

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

所以答案是间谍没有记录该方法已被调用的事实，因为它从未被调用过:-)