Jasmine spy 不被称为

Question

我在 Jasmine 中进行 spy 事件时遇到了一些麻烦

我想检查是否使用 jasmine spy 和 jasmine jquery 在 slider 上单击了链接。

这是一个简化版本:

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

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

slider :

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

所以我的问题本质上是:

我是否以错误的方式测试这种类型的东西？

为什么 spy 没有记录该方法已被调用的事实？

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

});

关键是你必须窥探原型(prototype) handleClick函数和之前 Slider创建。

原因是什么 Jasmine spyOn确实在您提供的代码中:

spyOn(slider, 'handleClick');

创建 slider 属性 handleClick (包含 spy 对象)直接在 slider实例。 slider.hasOwnProperty('handleClick')在这种情况下返回 true ， 你知道...

但是，还有 handleClick您的点击事件绑定(bind)到的原型(prototype)属性。这意味着刚刚触发的点击事件由原型(prototype) handleClick 处理。 slider 对象拥有属性 handleClick 时的函数(你的 spy )保持不变。

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