Jasmine - 我如何模拟 history.pushState 和假事件发射？答案

【问题标题】：Jasmine - How can I mock history.pushState and also fake event emission?Jasmine - 我如何模拟 history.pushState 和假事件发射？
【发布时间】：2013-01-01 13:41:17
【问题描述】：

我正在编写一个库，它在history.pushState 的帮助下支持浏览器导航，并且还捕获了在浏览器中进行导航时进行通信的popstate event。当我试图为这个库编写Jasmine 测试时，我想知道如何模拟history.pushState 并伪造来自window 的popstate 信号的发射？以下代码 sn-ps 应该可以说明问题：

库代码：

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

测试代码（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');
    });
});

基本上，我想模拟history.pushState函数并从window发出一个假的popstate事件，以测试popstate在lib中的处理。

另请参阅我的fiddle 以获取“工作”代码。

【问题讨论】：

标签： javascript jquery testing mocking jasmine

【解决方案1】：

你可以像这样监视history.pushState：

spyOn(history, 'pushState');

当您使用 jquery 绑定事件时，您可以简单地自己触发popstate。

$(window).trigger('popstate')

【讨论】：