Mocking InnerHTML-Ausgangstext Javascript

Question

Ich mache derzeit ein Projekt, wo wir eine Web-App erstellen und nur mit Vanille-Javascript. Wir wurden herausgefordert, unser eigenes Test-Framework zu schreiben und es dann zum Testen der App zu verwenden.

Ich versuche, meinen Controller zu testen, so dass es den richtigen InnerHTML-Text zu meinem ID-Tag ausgibt.

Dabei verwende ich Spott, um diesen Test zu isolieren. Ich verspotte meine Konstruktorparameter und erstelle ein benutzerdefiniertes Tag und eine benutzerdefinierte ID, aber meine console.logs scheint es nicht zu erkennen.

// Notiz-controller.js

(function(exports) { 
    function NoteController(list, listView, tag) { 
    this.list = list; 
    this.listView = listView; 
    this.tag = tag; 
    } 

    NoteController.prototype.getListView = function() { 
    return this.listView.converted; 
    }; 

    NoteController.prototype.outputHTML = function() { 
    document.getElementById(this.tag).innerHTML = this.getListView(); 
    }; 

    exports.NoteController = NoteController; 
})(this); 

// Controller-tests.js

describe("#outputHTML",() => { 
    var list = { text: "hello this is another note" }; 
    var listView = { 
     converted: "<ul><li><div>hello this is another note</div></li></ul>" 
    }; 
    var mockElement = document.createElement("div"); 
    mockElement.id = "mock"; 
    mockElement.innerHTML = "hello"; 
    var noteController = new NoteController(list, listView, "mock"); 

    console.log(mockElement); 
// outputs <div id="mock">hello</div> 

    console.log(document.getElementById("mock")); 
// outputs null 

    expect.isEqual(
     "outputs the note as HTML to the page", 
     noteController.outputHTML(), 
     "<ul><li><div>hello this is another note</div></li></ul>" 
    ); 
    }); 

Wissen Sie, warum dieser Tag erstellt wird, nicht in der zweiten console.log erkannt?

Ich weiß, das ist noch nicht richtig, aber ich versuche nur, die document.getElementById als einen Schritt in die richtige Richtung zu verspotten. Ist das Ihrer Meinung nach eine effektive Strategie, um meine outputHTML Funktion zu testen?

Answer 1

Vielen Dank Sidney für Ihre Vorschläge. Das ist es, was ich mir ausgedacht habe, um den bestandenen Test zu bekommen.

Ich schaffte es, ein temporäres Element-Tag zu erstellen, das meine Funktion erkennen würde, um den Test zu bestehen. Nach dem Test entferne ich es, wie es tatsächlich auf die Specrunner-Seite angewendet wird, die ich erstellt habe.