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

Question

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

库代码：

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

测试代码（茉莉花）：

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函数并从中发出一个假popstate事件window，以便popstate测试lib.

另请参阅我的小提琴“工作”代码。

Answer 1

你可以这样监视history.pushState：

spyOn(history, 'pushState');

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

$(window).trigger('popstate')