Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mock object for document element

I have next test code:

it("Test", function() {     loadResources();      expect(document.getElementById('MyElement').innerHTML).toBe("my string"); }); 

Body of function loadResources():

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

My test fails with following message:

TypeError: Cannot set property "innerHTML" of null.

Looks like I need to create mock object for innerHTML. How I can do this?

like image 562
Ted Avatar asked May 06 '14 12:05

Ted


People also ask

How do you make the mock element in Jasmine?

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


2 Answers

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]; }); 
like image 88
devnull69 Avatar answered Sep 28 '22 05:09

devnull69


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); }); 
like image 27
p8ul Avatar answered Sep 28 '22 05:09

p8ul