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

admin管理员组

文章数量:1389749

I'm writing a library that supports browser navigation with the help of history.pushState and also catches the popstate event that municates 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.

I'm writing a library that supports browser navigation with the help of history.pushState and also catches the popstate event that municates 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.

• javascript
• jquery
• testing
• mocking
• jasmine

Share Improve this question Follow asked Jan 1, 2013 at 13:41 aknuds1aknuds1 68.2k6969 gold badges206206 silver badges320320 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptJasmineHow can I mock historypushState and also fake event emissionStack Overflow