文档元素的模拟对象

Question

我有下一个测试代码：

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

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

函数体loadResources() ：

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

我的测试失败并显示以下消息：

类型错误：无法设置 null 的属性“innerHTML”。

看起来我需要为innerHTML 创建模拟对象。 我怎么能做到这一点？

Answer 1

我认为你应该模拟getElementById返回一个虚拟的 HTMLElement

茉莉花 V1.3 或以下

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

茉莉花 V2.0+

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

所以现在，对于每次调用document.getElementById它将返回虚拟元素。 它将设置虚拟元素的 innerHTML 并将其与最终的预期结果进行比较。

编辑：我想你应该用toBe替换toEqual 。 toBe可能会失败，因为它将测试对象身份而不是值相等。

EDIT2（关于多个 ID）：我不确定，但你可以称它为假。 它将为每个 ID 创建一个新的 HTML 元素（如果它还不存在）并将其存储在一个对象文字中以备将来使用（即对具有相同 ID 的getElementById其他调用）

茉莉花 V1.3 或以下

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

茉莉花 V2.0+

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

Answer 2

通过 id 设置文档正文和 getElement。 我正在使用开玩笑，这很好用。 从 jest 文档中查看此示例。

test('Toggle innerHtml of an element', () =>{
document.body.innerHTML =
            '<div>' +
            '  <div id="username" >Hello</div>' +
            '  <button id="button" />' +
            '</div>';
var el = document.getElementById('username');
var newText = 'new inner text';
el.innerText = newText;
expect(el.innerText).toEqual(newText);
});

Answer 3

尝试这个：

it('should blah', () => {
  const elementMock = {
    innerHTML: 'my string'
  };    

  loadResources();

  jasmine.spyOn(document, 'getElementById').and.returnValue(elementMock);

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