objet mock pour l'élément de document
J'ai le code de test suivant:
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: impossible de définir la propriété "innerHTML" de null.
On dirait que j'ai besoin de créer un objet fictif pour innerHTML. Comment je peux faire?
2 réponses
Je pense que vous devriez vous moquer de getElementById pour retourner un HTMLElement factice
var dummyElement = document.createElement('div');
document.getElementById = jasmine.createSpy('HTML Element').andReturn(dummyElement);
Alors maintenant, pour chaque appel à {[3] } il retournera l'élément factice. Il définira innerHTML de l'élément factice et le comparera au résultat attendu à la fin.
EDIT: et je suppose que vous devriez remplacer toBe par toEqual. {[4] } peut échouer car il testera l'identité de l'objet au lieu de l'égalité de la valeur.
EDIT2 (concernant plusieurs ID): Je ne suis pas sûr, mais vous pourriez appeler un faux à la place. Il créez un nouvel élément HTML pour chaque ID (s'il n'existe pas encore) et stockez-le dans un littéral d'objet pour une utilisation future (c'est-à-dire d'autres appels à getElementById avec le 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];
});
Configurez un corps de document et getElement par id. J'utilise la plaisanterie et cela fonctionne bien. Consultez cet exemple de la documentation 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);
});