Jasmine - How can I mock history.pushState and also fake event emission?

Question

I'm writing a library that supports browser navigation with the help of history.pushState and also catches the popstate event that communicates when navigation takes place in the browser. As I'm trying to write Jasmine tests for this library, I'm wondering how I can mock history.pushState and also fake the emission of the popstate signal from window? The following code snippets should elucidate the problem:

Library code:

var lib = (function() {
    function navigate(path) {
        history.pushState(null, null, path);
    }

    function onPopState(event) {
        if (lib.callback) {
            lib.callback(document.location);
        }
    }

    $(window).bind('popstate', onPopState);

    return {
        navigate: navigate
    };
})();

Test code (Jasmine):

describe("Test navigate", function() {
    it("Should invoke callback upon state change", function() {
        var invokedWith;
        function callback(url) {
            invokedWith = url;
        }
        lib.callback = callback;
        lib.navigate('/path');
        // Doesn't work, callback invoked asynchronously
        expect(invokedWith).toEqual('/path');
    });
});

Basically, I want to mock the history.pushState function and emit a fake popstate event from window, so as to test the popstate handling in lib.

See also my fiddle for "working" code.

Answer 1

You can spy on history.pushState like this:

spyOn(history, 'pushState');

As you use jquery to bind the event you can simply trigger popstate by yourself.

$(window).trigger('popstate')