objet fantaisie pour élément de document

Question

Je prochain code de test:

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

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

corps de la fonction loadResources():

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

Mon test échoue avec le message suivant:

TypeError: Cannot set property "innerHTML" of null.

On dirait que j'ai besoin de créer un objet fantaisie pour innerHTML. Comment je peux le faire?

Answer 1

Je pense que vous devriez se moquer getElementById de retourner un HTMLElement factice

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

Alors maintenant, pour chaque appel à document.getElementById il retournera l'élément factice. Il va définir innerHTML de l'élément factice et le comparer au résultat attendu à la fin.

EDIT: Et je suppose que vous devriez remplacer toBe par toEqual. toBe peut échouer car il testera l'identité de l'objet au lieu de l'égalité des valeurs.

EDIT2 (concernant plusieurs ID): Je ne suis pas sûr, mais vous pourriez appeler un faux à la place. Il va créer un nouvel élément HTML pour chaque ID (si elle n'existe pas encore) et le stocker dans un littéral d'objet pour une utilisation future (c.-à-autres appels à getElementById avec la même ID)

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