Jasmine spies not being called

Question

I am having some trouble implimenting spying in Jasmine

I want to check if a link has been clicked on a slider using a jasmine spy and jasmine jquery.

Here is a simplified version:

I have some links as part of an html fixture file.

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

spec file:

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

});

The test is failing. But the 'i have been clicked' has been logged to the console so the method is being called.

If I do this the test passes though:

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

So my question essentially is:

1. Am i testing for this type of thing in the wrong way?
2. why is the spy not registering the fact that the method has been called?

Freaky

I guess in this case you should spy on the prototype: spyOn(Slider.prototype, 'handleClick') and put this code before the Slider creation new Slider(...) (as @EliranMalka commented). Have you tried this? – Aylward

Answer 1

I've just verified the solution outlined in the comment. Your describe should be:

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

});

The point is that you have to spy on prototype handleClick function and before the Slider creation.

The reason is what Jasmine spyOn really does in the code you provided:

spyOn(slider, 'handleClick');

creates slider property handleClick (containing the spy object) directly on the slider instance. slider.hasOwnProperty('handleClick') in this case returns true, you know...

But still, there is handleClick prototype property to which your click event is bound. That means just triggered click event is handled by the prototype handleClick function while the slider object own property handleClick (your spy) stays untouched.

So the answer is that the spy is not registering the fact that the method has been called because it has never been called :-)

Aylward

+1 your explanation of prototype vs own property is spot on and is not mentioned anywhere in the docs. thanks very much! – Chalcedony