mock object for document element
Set up a document body and getElement by id. I'm using jest and this works fine. Check out this example from jest documentation.
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);
});
I think you should mock getElementById
to return a dummy HTMLElement
JASMINE V1.3 OR BELOW
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);
So now, for every call to document.getElementById
it will return the dummy element. It will set the dummy element's innerHTML and compare it to the expected result in the end.
EDIT: And I guess you should replace toBe
with toEqual
. toBe
might fail because it will test for object identity instead of value equality.
EDIT2 (regarding multiple ID): I am not sure, but you could call a fake instead. It will create a new HTML element for each ID (if it doesn't exist yet) and store it in an object literal for future use (i.e. other calls to getElementById
with same ID)
JASMINE V1.3 OR BELOW
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];
});