使用茉莉花測試原型自定義事件

Question

我發佈了這些仍然使用PrototypeJS並且想要使用jasmine和jasmine-prototype插件測試自定義事件。

我們根據用戶點擊或表單提交來觸發自定義事件。我們想要一個簡單的方法來測試自定義事件是否正確觸發。

下面是一個例子：

var CustomEventsDispatcher = (function() { 
    function init(){ 

    //if elements exists 
    if($$('a.trigger_bomb')) { 
     // Observe the elements 
     $$(elements).each(function(element) { 
      element.observe('click', function(e) { 
       this.fire("bomb:explode", {}) 
      }); 
     }); 
    } 


    return {'init' : init}; 
})(); 

使用網絡上可用的資源，我創建了一個夾具...

// spec/fixtures/links.html 
<a class="trigger_bomb" href="#"> Trigger Bomb </a> 

...和測試套件：

//spec/trigger_bomb_spec.js 
describe("Trigger Bombs", function() { 

    beforeEach(function(){ 
     loadFixtures("links.html") 
     CustomEventsDispatcher.init(); 
    }) 

    it("should raise the custom event", function(){ 
     var element=$$('a.trigger_bomb').first(); 
     spyOnEvent(element, 'click'); 
     element.click(); 

     expect('click').toHaveBeenTriggeredOn(element); 
     expect('bomb:explode').toHaveBeenTriggeredOn(element); 
    }); 
}); 

第一個斷言正常，但不是第二個。原因是spyOnEvent改變了點擊事件在element上的處理方式。

Answer 1

最簡單的方法是嘲笑fire功能是這樣的：

//spec/trigger_bomb_spec.js 
describe("Trigger Bombs", function() { 

    beforeEach(function(){ 
     loadFixtures("links.html") 
     CustomEventsDispatcher.init(); 
    }) 

    it("should raise the custom event", function(){ 
     var element=$$('a.trigger_bomb').first(); 
     spyOn(element, 'fire') 
     element.click() 
     expect(element.fire).toHaveBeenCalledWith('bomb:explode', {}) 
    }); 
}); 

但是這種解決方案有一個副作用：點擊將被執行，這將導致茉莉頁面結果不斷刷新。你需要攔截單擊事件並停止默認行爲具有全球beforeEach鉤：

// spec/helpers/spec_helper.js 
beforeEach(function(){ 

    // stop all clicks from fixtures 
    // (but allow clicks from the user in the jasmine result page) 
    document.observe('click', function(e){ 
     var element = e.findElement('#HTMLReporter') 
     if (element == document) { 
      Event.stop(e) 
     } 
    })    
}) 

希望這將有助於有人救調試的幾個小時:)。隨意評論/改進/提出一個更好的選擇。