茉莉花 - 我如何模擬history.pushState和假冒事件發射？

Question

我在history.pushState的幫助下編寫了一個支持瀏覽器導航的庫，並且還捕獲了在瀏覽器中進行導航時進行通信的popstate event。由於我正在爲此庫編寫Jasmine測試，因此我想知道如何模擬history.pushState並僞造window發出的popstate信號？下面的代碼片段應闡明問題：

庫代碼：

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中的處理。

另請參閱我的fiddle「工作」代碼。

Answer 1

可以窺探history.pushState這樣的：

spyOn(history, 'pushState'); 

當你使用jQuery綁定事件，你可以簡單地自行觸發popstate。

$(window).trigger('popstate')