How to assert a spy is invoked with event on click using jasmine?

Toran_Billups_2701 0
Viewed 21531

I'm writing a simple click handler and need the event passed in (like so)

Thing = function($){

    var MyObject = function(opts){
        this.opts = opts;
    };

    MyObject.prototype.createSomething = function(){
        var that = this;
        $('#some_dom_element').live('click', function(e) {
            that.doStuff(e);
        });
    };

    MyObject.prototype.doStuff = function(e) {
        //do some javascript stuff ...
        e.preventDefault();
    };

    return MyObject;

}(jQuery);

Currently in my jasmine spec I've got something to spy on the function I expect gets invoked (but since it's called with e -not without args- my assertion is failing)

    it ("live click handler added to the dom element", function(){
        var doSpy = spyOn(sut, 'doStuff');
        sut.createSomething();
        $("#some_dom_element").trigger('click');
        expect(doSpy).toHaveBeenCalledWith();
    });

How can I correct this "toHaveBeenCalledWith" to work as I expect?

UPDATE

I couldn't get the accepted answer to work as is but I was able to alter it just a little and the below is my 100% working example

    it ("should prevent default on click", function(){
        var event = {
            type: 'click',
            preventDefault: function () {}
        };
        var preventDefaultSpy = spyOn(event, 'preventDefault');
        sut.createSomething();
        $("#some_dom_element").trigger(event);
        expect(preventDefaultSpy).toHaveBeenCalledWith();
    });
jasmine-jquery jasmine dom-events javascript
2 Answers

If you can't use jQuery you may use dispatchEvent and check its return value (based on this answer).

const domElem = document.getElementById('some_dom_element');
const clickEvent = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});

const cancelled = !domElem.dispatchEvent(clickEvent);
expect(cancelled).toBeTruthy();
user_99079390
Related