模擬對象

Question

我有下一個測試代碼：

it("Test", function() { 
    loadResources(); 

    expect(document.getElementById('MyElement').innerHTML).toBe("my string"); 
}); 

的功能loadResources機構（）：

document.getElementById('MyElement').innerHTML = "my string"; 

我的測試失敗，以下消息：

TypeError: Cannot set property "innerHTML" of null.

看起來像我需要爲innerHTML創建模擬對象。我如何做到這一點？

Answer 1

我想你應該嘲笑getElementById返回一個HTML元素假人

var dummyElement = document.createElement('div'); 
document.getElementById = jasmine.createSpy('HTML Element').andReturn(dummyElement); 

所以現在，每次調用document.getElementById它將返回虛設的元素。它將設置虛擬元素的innerHTML並將其與最終的預期結果進行比較。

編輯：而且我想你應該用toEqual替換toBe。 toBe可能會失敗，因爲它將測試對象身份而不是值相等。編輯2（關於多個ID）：我不確定，但你可以調用一個假的代替。這將創建一個新的HTML元素的每個ID（如果不存在的話），並將其保存以備將來使用對象文本（用相同的ID，即其他調用getElementById）

var HTMLElements = {}; 
document.getElementById = jasmine.createSpy('HTML Element').andCallFake(function(ID) { 
    if(!HTMLElements[ID]) { 
     var newElement = document.createElement('div'); 
     HTMLElements[ID] = newElement; 
    } 
    return HTMLElements[ID]; 
});