骨幹測試 - 在'select'元素上觸發「更改」事件

Question

在我正在處理的Backbone應用程序中，即測試中，我有一個視圖，它有事件哈希集，當發生change事件時觸發函數在DOM中的select元素上。

當我監聽我爲該功能創建的spy的呼叫時，從不會調用該呼叫。

如何手動觸發select元素中option元素的change事件？

我有以下代碼來創建事件：

it('change on element "select" calls "clickedElement"', function() { 

     // Create a new 'change' event 
     var event = document.createEvent("HTMLEvents"); 
     event.initEvent("change", true, true); 

     // Dispatch it. 
     this._view.el.querySelector('option[selected]').dispatchEvent(event); 

     expect(this.clickedElementSpy).has.been.called; 

    }); 

Answer 1

一種解決方案可能：

var log = function(val){ document.body.insertAdjacentHTML('beforeend' ,'<div>' + val + '</div>'); 
 
}; 
 

 

 
var sel = document.getElementsByTagName('select')[0]; 
 

 

 
sel.onchange = function(){ 
 
    log('changed') 
 
}; 
 

 

 
var event = new Event('change'); 
 

 
// Dispatch it. 
 
sel.dispatchEvent(event);

<select> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>

因此，在您的使用案例：

it('change on element "select" calls "clickedElement"', function() { 

    // Create a new 'change' event 
     //var event = document.createEvent("HTMLEvents"); 
     //event.initEvent("change", true, true); 

    var event = new Event('change'); 


    // Dispatch it. 
     //this._view.el.querySelector('option[selected]').dispatchEvent(event); 

    this._view.el.querySelector('select').dispatchEvent(event); 

    expect(this.clickedElementSpy).has.been.called; 

});