Подтвердить что ты не робот

Макет объекта для элемента документа

У меня есть следующий тестовый код:

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

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

Тело функции loadResources():

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

Мой тест завершился неудачей со следующим сообщением:

TypeError: невозможно установить свойство "innerHTML" null.

Похоже, мне нужно создать mock-объект для innerHTML. Как я могу это сделать?

Ответ 1

Я думаю, что вы должны высмеивать getElementById, чтобы вернуть фиктивный HTMLElement

JASMINE V1.3 ИЛИ НИЖЕ

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

JASMINE V2. 0+

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

Итак, теперь для каждого вызова document.getElementById он возвращает фиктивный элемент. Он установит фиктивный элемент innerHTML и в конце сравнит его с ожидаемым результатом.

ОБНОВЛЕНИЕ: И я думаю, вы должны заменить toBe на toEqual. toBe может потерпеть неудачу, потому что он проверит идентичность объекта вместо равенства значений.

ОБНОВЛЕНИЕ 2 (относительно нескольких ID): я не уверен, но вы могли бы вместо этого назвать подделку. Он создаст новый элемент HTML для каждого идентификатора (если он еще не существует) и сохранит его в литерале объекта для будущего использования (то есть других вызовов getElementById с тем же идентификатором)

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

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

Ответ 2

Настройте тело документа и getElement по идентификатору. Я использую шутку, и это прекрасно работает. Посмотрите этот пример из документации по шуткам.

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