Nachdem Sie Stunden verbracht haben, können Sie eine fantastische neue Funktion für Ihre Webanwendung endgültig in Aktion sehen. Sie fügen den neuen Code zu Ihrer JavaScript -Basis hinzu, erstellen den Release -Kandidaten und starten Ihren Browser, um erstaunt zu sein. Dann… ähm, oh… die neue Funktion mag einwandfrei funktionieren, aber ein anderer kritischer Teil Ihrer App - ein Teil, den Sie bei der Entwicklung der neuen Version nicht berührt haben - ist schrecklich schief geworden. Jetzt sind Sie vor der Herausforderung, durch Arbeitstage zu versuchen, herauszufinden, wie Sie den vorhandenen Code gebrochen haben. Happy Days sind definitiv nicht wieder da. Dieses Szenario hat mich mehr gebissen, als ich zugeben möchte. Und wenn Sie eine Weile codiert haben, haben Sie es wahrscheinlich auch gesehen. Bedenken Sie jedoch, was dieses Szenario so schmerzhaft macht. Es liegt nicht wirklich daran, dass unser neuer Code den vorhandenen Code gebrochen hat. Das ist unvermeidlich in der Entwicklung. Der wahre Schmerz ist, dass es so lange dauerte, um den Bruch zu bemerken. Bei so viel Entwicklung, da wir wussten, dass unsere Anwendung funktioniert, gibt es eine große Menge an Code, in dem sich der Fehler versteckt. Und obwohl es ein bisschen wie die Jagd nach einer Nadel in einem Heuhaufen erscheinen mag, haben wir keine andere Wahl, als sie zu tauchen.
In diesem Artikel werden wir dieses Szenario aus unserer JavaScript -Entwicklung wirklich verbannen. Kein Durchsuchen von Stunden, Tagen oder Wochen Code, die nach einer Nadel suchen. Das Prinzip, das wir übernehmen werden, ist einfach: Finden Sie einen Fehler, sobald wir
es erstellen. Das ist richtig. Wir werden eine Entwicklungsumgebung und einen Prozess einrichten, der uns sofort mitteilt, wenn wir Code schreiben, der einen Fehler einführt. Darüber hinaus wird die zusätzliche Anstrengung, die wir in den Prozess unternommen haben, nicht nach Abschluss der Erstentwicklung nicht mehr verschwendet. Der gleiche Testcode, der unsere Entwicklungsfehler fängt, ist in einer Integrationsumgebung vollständig wiederverwendbar. Wir können die Tests problemlos in unser Quellcode -Managementsystem einbeziehen und Fehler blockieren, bevor sie überhaupt in unsere Codebasis einsteigen können.In den folgenden vier Abschnitten werden wir uns zunächst die Tools ansehen, die wir für eine JavaScript -Testumgebung benötigen. Wir werden dann eine triviale Anwendung in Betracht ziehen, die einfach genug ist, um sie zu verstehen, aber über alle Funktionen und Funktionen verfügt, die in einer realen Webanwendung vorhanden sind. Die letzten beiden Abschnitte zeigen, wie wir unsere Umgebung nutzen können, um die Beispiel -App während der Entwicklung zu testen, und nach Abschluss der ersten Entwicklung während der Integration.
Unsere Einheitstests Nirvana erfordert einige Entwicklungstools, die (noch) nicht in Ihrer Workbench enthalten sind. Die Nachrichten, sowohl gut als auch schlecht, ist, dass es viele Optionen gibt. Das sind gute Nachrichten, weil es uns Optionen gibt, und das sind schlechte Nachrichten, denn das Tempo der heutigen Entwicklung von Front End bedeutet, dass es viel zu viele Optionen gibt. Um unsere Bewertung zu fokussieren, lassen Sie uns explizit über unsere beiden besten Ziele gehen. Alles andere ist sekundär:
Für die JavaScript -Codierung gibt es keine bessere Entwicklungsumgebung als der moderne Webbrowser. Unabhängig davon, ob Ihr Geschmack Firebug oder Webkit's Developer Tools ist, unterstützt der Browser die Live -DOM -Inspektion und -bearbeitung, das vollständige interaktive Debugging und die hoch entwickelte Leistungsanalyse. Webbrowser eignen sich hervorragend für die Entwicklung. Daher müssen sich unsere Testwerkzeuge und unsere Umgebung in die Entwicklung des Browsers integrieren. Webbrowser sind jedoch nicht so gut für Integrationstests. Integrationstests werden häufig irgendwo in der Cloud (oder am wenigsten irgendwo im Rechenzentrum) auf Servern stattfinden. Diese Systeme haben nicht einmal eine grafische Benutzeroberfläche, geschweige denn ein moderner Webbrowser. Für effiziente Integrationstests benötigen wir einfache Befehlszeilenskripte und eine JavaScript -Ausführungsumgebung, die sie unterstützt. Für diese Anforderungen ist das Tool der Wahl Node.js. Obwohl es eine andere Befehlszeile für JavaScript -Umgebungen gibt, hat keiner die Breite und Tiefe der Unterstützung, um Node.js. In der Integrationsphase müssen sich unsere Testwerkzeuge in node.js.
integrierenJetzt, da wir festgestellt haben, dass unsere Test -Tools sowohl Webbrowser- als auch Node.js -Umgebungen unterstützen müssen, können wir die Auswahlmöglichkeiten eingrenzen, um ein Kern -Test -Framework auszuwählen. Es gibt viele JavaScript -Test -Frameworks, aber die meisten sind stark auf Browser -Tests voreingenommen. Es ist normalerweise möglich, sie mit node.js zum Arbeiten zu bringen, erfordert jedoch oft unelegante Hacks oder Änderungen. Ein Rahmen, der nicht unter diesem Problem leidet, ist Mokka, das sich zu Recht als:
beschreibtMokka ist ein featurereiches JavaScript-Test-Framework, das auf Knoten und Browser ausgeführt wird, wodurch asynchrone Tests einfach und unterhaltsam sind.
Ursprünglich für Node.js entwickelt, wurde Mokka erweitert, um auch Webbrowser zu unterstützen. Durch die Verwendung von Mocha als Testframework können wir Tests schreiben, die sowohl die Entwicklung als auch die Integration ohne Änderung unterstützen.
Im Gegensatz zu einigen JavaScript -Test -Frameworks wurde Mokka für maximale Flexibilität ausgelegt. Infolgedessen müssen wir ein paar zusätzliche Teile auswählen, um es vollständig zu machen. Insbesondere brauchen wir eine JavaScript -Assertion -Bibliothek. Dafür verlassen wir uns auf die Chai Assertion Library. Chai ist insofern etwas einzigartig, als es alle gängigen Assertionsstile unterstützt - Assert , erwarten, und sollten. Code. Unter den Abdeckungen sind sie alle gleichwertig. Es ist einfach, Tests von einem Behauptungsstil zum anderen zu übersetzen. Der Hauptunterschied in den Behauptungsstilen ist ihre Lesbarkeit. Die Auswahl des Behauptungsstils hängt hauptsächlich davon ab, welchen Stil Sie (oder Ihr Team) am lesbarsten finden und welcher Stil die verständlichsten Tests erzeugt. Um den Unterschied zu erkennen, sollten Sie einen trivialen Test für den folgenden Code entwickeln:
<span>var sum = 2 + 2;</span>
assert<span>.equal(sum, 4, "sum should equal 4");</span>
<span>expect(sum).to.equal(4);</span>
sum<span>.should.equal(4);</span>
Spione, Stubs und Mocks
Das letzte Werkzeug für unsere Test -Workbench ist eine Entwicklungsumgebung für Unit -Tests. In unserem Beispiel werden wir Test'EM verwenden. Test'EM ist eine Sammlung praktischer Skripte, um eine kontinuierliche Testumgebung einzurichten und auszuführen. Wir könnten, wenn wir uns dafür entscheiden, die Skripte selbst schreiben und die Umgebung manuell verwalten. Toby Ho (Test’em's Creator) hat jedoch ein fantastisches Paket zusammengestellt, das uns die Mühe sparen kann.
Um unsere Testumgebung in Aktion zu sehen, betrachten wir eine einfache Anwendung. Obwohl diese Anwendung mit seinen nötigen Wesentlichen entspricht, enthält sie alle Funktionen für eine reale Anwendung. (Der vollständige Quellcode für die Anwendung ist auf GitHub verfügbar.)
Benutzer können ihre Liste der Todos sehen und sie können auf ein Kontrollkästchen klicken, um den Status eines jeden Todo zu umschalten.
Unsere Anwendung beginnt mit einer Datenbanktabelle, in der die Informationen für TODOS enthalten sind. Hier ist der SQL, mit dem wir diese Tabelle erstellen können.
<span>var sum = 2 + 2;</span>
Und so ist die Tabelle, für die wir einige Testdaten einfügen könnten.
Wie die Tabelle zeigt, enthalten unsere Todos nur einen Primärschlüssel (ID), einen Titel und ein Statusbit, um anzuzeigen, ob sie vollständig sind oder nicht.
Unsere Webanwendung benötigt Zugriff auf diese Datenbank, sodass wir eine Standard -REST -Schnittstelle bereitstellen. Die API folgt den Ruby Conventions, kann jedoch einfach von jeder Servertechnologie implementiert werden. Insbesondere:
Wenn Sie Ruby nicht besonders mögen, enthält der Quellcode eine vollständige PHP -Implementierung dieser API.
Unsere bescheidene Anwendung ist einfach genug, um in reinem JavaScript ohne Bibliotheken zu implementieren, aber wir haben weitaus größere Pläne. Wir starten vielleicht klein, aber schließlich wird die App erstaunliche Funktionen und eine entzückende Benutzeroberfläche bieten. In Vorbereitung auf diesen Tag werden wir auf einem Framework aufbauen, das unsere Ultimate Killer -App unterstützen kann:
Jetzt, da wir die Komponenten kennen, die unsere Anwendung umfassen, können wir das HTML -Skelett definieren, das es unterstützt. Es ist (noch) nichts Besonderes, nur ein minimales HTML5 -Dokument, einige JavaScript -Dateien und ein kleines Stück Code, um die Dinge zu beginnen.
<span>var sum = 2 + 2;</span>
Nachdem wir unsere Tools ausgewählt und die Anwendung angegeben haben, ist es an der Zeit, die Entwicklung zu beginnen. Unsere erste Aufgabe ist die Installation der Tools.
Obwohl wir uns im Browser entwickeln werden, beruht unsere Testumgebung auf node.js. Der allererste Schritt ist daher die Installation von Node.js und dem Node Package Manager (NPM). Auf der Website node.js gibt es ausführbare Binärdateien für OS X, Windows, Linux und Sunos sowie einen Quellcode für andere Betriebssysteme. Nach dem Ausführen des Installationsprogramms können Sie sowohl node.js als auch npm über die Befehlszeile überprüfen.
assert<span>.equal(sum, 4, "sum should equal 4");</span>
Alles andere, was wir brauchen, ist bequem als Knotenpaket erhältlich. Der Knotenpaket -Manager kann seine Installation sowie alle Abhängigkeiten verarbeiten.
<span>expect(sum).to.equal(4);</span>
Der Quellcode für dieses Beispiel enthält eine vollständige Projektstruktur mit den folgenden 15 Dateien:
sum<span>.should.equal(4);</span>
Hier ist, was jeder Ordner und die Datei enthält:
Während der Entwicklung interessieren wir uns nur für drei dieser Dateien, testem.json, src/App-todos.js und test/App-todos-test.js.
Der letzte Schritt vor der tatsächlichen Entwicklung ist die Definition der Test'EM -Konfiguration. Diese Konfiguration befindet sich im JSON-formatierten Testem.json und ist einfach genug, um in jedem Texteditor zu erstellen. Wir geben lediglich an, dass wir Mokka verwenden (test’em unterstützt mehrere Frameworks) und listen die JavaScript -Dateien auf, die unsere Anwendung und unser Testcode benötigt.
<span>var sum = 2 + 2;</span>
Schließlich können wir codieren. Navigieren Sie in einer Befehlsschale zum Stammordner unseres Projekts und führen Sie das Befehlstestem aus. In den Tests -Skripten wird das Terminalfenster gelöscht und uns eine URL oben rechts geben. Kopieren Sie diese URL in unseren Browser Ihrer Wahl und wir sind ausgeschaltet.
Sobald wir den Webbrowser starten, werden automatisch alle von uns definierten Tests ausgeführt. Da wir gerade erst mit der Entwicklung beginnen, haben wir keinen Code oder keine Testfälle. Der Browser wird uns freundlich darauf hinweisen.
Das Terminalfenster, aus dem wir Test'EM gestartet haben, gibt uns auch den Status.
Im Geiste der echten testgetriebenen Entwicklung werden wir mit unserem ersten Testfall in der Datei test/App-todos-test.js schreiben. Wie bei jeder guten Web -App möchten wir die Verschmutzung des globalen Namensraums minimieren. Dazu verlassen wir uns auf eine einzelne globale Variable, Todoapp, um unseren gesamten Code zu enthalten. In unserem ersten Testfall wird sichergestellt
<span>var sum = 2 + 2;</span>
In einem Testblock dokumentieren wir jeden Testfall nach dem, was es testet. Das ist der Zweck der IT () -Funktion. Der Weg zum Lesen eines Testfalls besteht darin, die Beschreibung () und IT () in eine einzelne Aussage zu kombinieren. Unser erster Testfall ist daher
Anwendung erstellt eine globale Variable für den NamensraumDer Testcode selbst befindet sich im IT () -Block. Unser Testfall ist
assert<span>.equal(sum, 4, "sum should equal 4");</span>
Das Terminalfenster aktualisiert auch automatisch.
Um den Testpass zu erstellen, müssen wir die globale Variable der Namensraum erstellen. Wir wechseln zur Datei srcapp-todos.js und fügen den erforderlichen Code hinzu.
<span>expect(sum).to.equal(4);</span>
Treten Sie für einen Moment zurück und überlegen Sie, was passiert! Jedes Mal, wenn wir eine Änderung des Testcode oder in unserer Anwendung vornehmen, werden Tests unsere gesamte Testsuite sofort erneut ausführen. Alles, was wir tun müssen, ist, den Browser- oder Terminalfenster von Test’em in einer Ecke unseres Bildschirms sichtbar zu halten, und wir können die Gesundheit unseres Code in Echtzeit sehen, , während wir entwickeln. Wir werden wissen, sobald wir einen Fehler einführen, auch wenn sich der Fehler in einem Teil des Codes manifestiert, der sich von dem Ort unterscheidet, in dem wir arbeiten. Kein Durchgabestand durch Stunden, Tage oder Wochen neuer Code, um herauszufinden, wann wir einen Fehler eingeführt haben.
Mit unserer jetzt vollständig etablierten Entwicklungsumgebung können wir mit der Entwicklung der Anwendung beginnen. Da unsere App eine Liste von Todos zeigt, ist es möglicherweise gut, ein Modell für diese Todos zu erstellen. Das Modell muss sowohl den Titel des Todo als auch des Status im Auge behalten. Fügen wir einen Unit -Test hinzu, der überprüft, dass wir ein Todo mit angemessenen Standardeinstellungen erstellen können.
<span>var sum = 2 + 2;</span>
Es sind mehrere Aspekte dieser Tests erwähnenswert.
, da wir den Modellcode noch nicht geschrieben haben, werden alle unsere Tests fehlschlagen. (Und das werden wir sofort wissen.) Aber sobald wir den Code für unser Modell hinzugefügt haben, bestehen die Tests und wir sind auf dem Weg.
assert<span>.equal(sum, 4, "sum should equal 4");</span>
Jetzt, da wir ein einfaches Modell für Todos haben, können wir beginnen, sein Verhalten zu definieren. Eine Sache, die unser Modell tun sollte, ist die Datenbank zu aktualisieren, wenn sich eine der Eigenschaften ändert. In einer Unit -Testumgebung haben wir jedoch keine tatsächliche Datenbank zu überprüfen. Andererseits schreiben wir keinen Code, um das Datenbankaktualisierung durchzuführen. Vielmehr verlassen wir uns auf das Rückgrat, um diese Interaktion zu bewältigen. Dies deutet auf eine Unit -Teststrategie für diesen Testfall hin. Alles, was wir wissen müssen, ist, dass Backbone -Modelle die Save () -Methode verwenden, um den Backing -Store zu aktualisieren, der das Modell anhält. In unserem Fall ist dieser Backing -Store die Datenbank. Hier ist der Unit -Testcode, den wir verwenden können:
<span>expect(sum).to.equal(4);</span>
Wir haben vor jedem Test einen zusätzlichen Code beigefügt und nach jedem Test einen Codeabschnitt hinzugefügt. Dieser zusätzliche Code verwaltet einen Sinon -Stub, eine Funktion, die eine andere Funktion im Code effektiv aufgibt. In unserem Fall nimmt der Stub die Save () -Methode dieser. Mit dem Stub gehen Anrufe der Methode nicht in die Backnone -Bibliothek. Stattdessen fängt Sinon diese Anrufe ab und kehrt einfach sofort zurück. Dieses Verhalten ist wichtig. Wenn wir versuchen, die tatsächliche Backbone Save () -Methode in einer Unit -Testumgebung auszuführen, würde der Anruf fehlschlagen, da keine Datenbank oder Server -API verfügbar wäre.
Mit dem Stub können unsere Testfälle das Verhalten des Modells überprüfen. Im ersten Testfall setzen wir den Titel des Todo sofort auf einen neuen Wert. Da dies die Titeleigenschaft ändert, möchten wir, dass unser Modell seinen Backing -Store aktualisiert. Um zu überprüfen, ob wir einfach überprüfen, ob der Stub aufgerufen wurde. Damit unser Modell diese Tests bestanden hat, können wir nach Änderungsereignissen suchen und angemessen reagieren.
<span>var sum = 2 + 2;</span>
Natürlich wird unsere App niemandem gut tun, wenn sie den Benutzern die Todos nicht tatsächlich anzeigt, und dies erfordert das Erstellen von HTML. Wir werden Backbone -Ansichten für diese Funktionalität verwenden. In unserer trivialen App möchten wir einfach jeden Todo als Listenelement rendern. Hier sind die Testfälle, die uns anfangen.
assert<span>.equal(sum, 4, "sum should equal 4");</span>
Wir beginnen unsere Tests der Ansicht mit zwei Testfällen. Zuerst stellen wir sicher, dass die Render () -Methode der Ansicht die Ansicht selbst zurückgibt. Dies ist eine übliche und sehr bequeme Konvention im Rückgrat, da sie die Methodenverkettung ermöglicht. Unser zweiter Testfall überprüft, dass das HTML -Element, das das Render erstellt, ein Listenelement ist (
<span>expect(sum).to.equal(4);</span>
Als nächstes können wir den detaillierten Inhalt dieser Listenelementansicht entwickeln. Als Beispiel möchten wir, dass das vollständige Listenelement ungefähr wie folgt aussieht.
sum<span>.should.equal(4);</span>
Für unsere Testfälle können wir JQuery nutzen, um einzelne Elemente aus dem Hauptelement der Ansicht zu extrahieren.
CREATE TABLE `todos` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.', `title` varchar(256) NOT NULL DEFAULT '' COMMENT 'The text for the todo item.', `complete` bit(1) NOT NULL DEFAULT b'0' COMMENT 'Boolean indicating whether or not the item is complete.', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'
Beachten Sie, dass wir im letzten Testfall die Methode des Modells Save () gestoppt haben. Da wir eine Eigenschaft von ihrem Standardwert ändern, wird unser Modell pflichtbewusst versuchen, diese Änderung in seinem Backing -Shop zu bestehen. In einer Unit -Testumgebung verfügen wir jedoch nicht über eine Datenbank oder eine Server -API. Der Stub tritt an die Stelle der fehlenden Komponenten und ermöglicht die Tests ohne Fehler. Um diese Tests zu bestehen, müssen wir unserer Ansicht einen zusätzlichen Code hinzufügen.
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span> <span><span><span><title</span>></span><span><span></title</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><h1</span>></span>List of Todos<span><span></h1</span>></span>
</span>
<span><span><span><script</span> src<span>="lib/jquery-1.9.0.min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> src<span>="lib/underscore-min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> src<span>="lib/backbone-min.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span> src<span>="src/app-todos.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span>></span><span>
</span></span><span><span> <span>$(function () {
</span></span></span><span><span> <span>var todos = new todoApp<span>.Todos</span>();
</span></span></span><span><span> todos<span>.fetch();
</span></span></span><span><span> <span>var list = new todoApp<span>.TodosList</span>({collection: todos});
</span></span></span><span><span> <span>$("body").append(list.el);
</span></span></span><span><span> <span>})
</span></span></span><span><span> </span><span><span></script</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>Jetzt, da wir überprüft haben, dass unsere Ansichtsimplementierung das richtige HTML -Markup erstellt, können wir seine Interaktion mit unserem Modell testen. Insbesondere möchten wir sicherstellen, dass Benutzer einen Todo -Status umschalten können, indem wir auf das Kontrollkästchen klicken. Unsere Testumgebung erfordert keinen tatsächlichen menschlichen Benutzer, daher werden wir JQuery verwenden, um das Click -Ereignis zu generieren. Dazu müssen wir jedoch einem echten Live -Dom Inhalte hinzufügen. Dieser Inhalt wird als Test Fixture bezeichnet. Hier ist der Unit -Testcode.
bash-3.2$ node --version v0.8.18 bash-3.2$ npm --version 1.2.2 bash-3.2$
Beachten Sie, dass wir die Save () -Methode des Todo erneut stürzen. Andernfalls versucht Backbone, einen nicht existierenden Backing-Store zu aktualisieren, wenn wir den Todo-Status mit unserem simulierten Klick ändern.
Für den Testfall selbst erstellen wir zunächst ein
<span>var sum = 2 + 2;</span>
In der Ansicht möchten wir Klickereignisse im Element
assert<span>.equal(sum, 4, "sum should equal 4");</span>
Zu diesem Zeitpunkt ist unsere Bewerbung nahezu vollständig. Die einzige verbleibende Funktionalität besteht darin, alle Todos zusammen zu sammeln. Natürlich verwenden wir eine Backbone -Sammlung. Wir werden mit unserer Sammlung eigentlich nichts Besonderes machen, daher brauchen wir keine Unit -Tests.
<span>expect(sum).to.equal(4);</span>
Wir können jedoch überprüfen, ob unsere Implementierung der Ansicht der Sammlung angemessen ist. Wir möchten, dass diese Ansicht als ungeordnete Liste (
sum<span>.should.equal(4);</span>
Die Implementierung der Ansicht ist ebenfalls unkompliziert. Es verfolgt alle Ergänzungen zur Sammlung und aktualisiert die Ansicht. Für das erste Render () fügt es einfach alle Modelle in der Sammlung einzeln hinzu.
CREATE TABLE `todos` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary key for the table.', `title` varchar(256) NOT NULL DEFAULT '' COMMENT 'The text for the todo item.', `complete` bit(1) NOT NULL DEFAULT b'0' COMMENT 'Boolean indicating whether or not the item is complete.', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='To Do items.'
Da unsere REST -API perfekt der API übereinstimmt, die das Rückgrat erwartet, benötigten wir keinen benutzerdefinierten Code, um die API -Interaktion zu verwalten. Infolgedessen benötigen wir keine Unit -Testfälle. In der realen Welt haben Sie vielleicht nicht so viel Glück. Wenn Ihre API nicht den Rückgratkonventionen entspricht, müssen Sie möglicherweise einen Teil des Backbone-Code überschreiben oder erweitern, um mit der nicht standardmäßigen API umzugehen. Dieser zusätzliche Code benötigt auch Unit -Tests. Glücklicherweise ist es relativ einfach, API -Wechselwirkungen zu testen, selbst in einer Unit -Testumgebung.
Der einfachste Weg, die API -Interaktionen zu testen, basiert auf der gefälschten Serverfunktionalität von Sinon.js. Leider ist diese Funktionalität nur (derzeit) in der Browser -Implementierung von Sinon verfügbar. Es wird ausdrücklich von der Implementierung von Node.js ausgeschlossen. Es gibt einige Hacks, die es in Node.js zum Laufen bringen, aber diese Hacks sind ziemlich spröde und verlassen sich auf interne Implementierungsdetails. Es wäre am besten, sie nach Möglichkeit zu vermeiden. Glücklicherweise können wir ohne Sinons gefälschten Server auskommen.
Das Geheimnis besteht darin, zu wissen, dass Backbone auf Jquerys $ .ajax () -Funktion zur Implementierung von REST -APIs angewiesen ist. Wir können die API -Wechselwirkungen abfangen, indem wir diese Funktion stützen. Wenn wir die Funktion stützen, möchten wir unsere eigene Antwort ersetzen. Die Methode der Stub gibt uns genau diese Gelegenheit. Es sagt Sinon, welche zusätzlichen Maßnahmen es ergreifen sollte, wenn der Stub aufgerufen wird. Hier ist ein vollständiger Testfall, um zu überprüfen, ob unsere Sammlung sich selbst mithilfe der Rest -API initialisiert.
<span>var sum = 2 + 2;</span>
Testen während der Integration Während des Erstellungsprozesses möchten wir unsere Tests wahrscheinlich eher aus der Befehlszeile als in einem Webbrowser ausführen. Wir brauchen nicht die Details einzelner Testfälle, sondern nur eine Zusicherung, dass sie alle bestehen. Node.js macht es einfach genug, diese Anforderung zu erfüllen. Wir müssen nur einige kleine Ergänzungen zu unseren Quellcode- und Unit -Testcode -Dateien vornehmen.
Unser Code benötigt diese Modifikationen, da Node.js globale Variablen unterschiedlich behandelt als Webbrowser. In einem Webbrowser sind JavaScript -Variablen standardmäßig global im Bereich. Node.js dagegen beschränkt Variablen standardmäßig auf ihr lokales Modul. In dieser Umgebung kann unser Code nicht in der Lage sein, die von ihm benötigten Bibliotheken von Drittanbietern zu finden (JQuery, Undercore und Backbone. Wenn wir zu Beginn die folgenden Aussagen hinzufügen Wir haben diese Aussagen so konstruiert, dass sie im Webbrowser keinen Schaden zufügen, damit wir sie dauerhaft im Code lassen können.
Wir müssen auch unseren Testcode anpassen. Die Testskripte benötigen Zugriff auf ihre eigenen Bibliotheken (JQuery, Chai, Sinon.js und Sinon-Chai). Darüber hinaus müssen wir ein wenig zusätzlich hinzufügen, um das DOM -Browser -Dokumentobjektmodell (Webbrowser) zu simulieren. Erinnern Sie sich daran, dass unsere Tests zum Klicken auf die Klickhandhabung der Webseite vorübergehend ein „Fixture“
assert<span>.equal(sum, 4, "sum should equal 4");</span>
<span>var sum = 2 + 2;</span>
Die Bedingung, die diese Anweisungen testet, um festzustellen, ob wir in der node.js -Umgebung anstelle eines Webbrowsers ausgeführt werden. In einem Browser sind die zusätzlichen Aussagen nicht erforderlich, sodass wir sie sicher überspringen können.
Mit diesen Änderungen können wir die vollständige Testsuite aus der Befehlszeile ausführen. Navigieren Sie einfach zum Stammordner des Projekts und führen Sie den Befehl Mokka aus. Das Ergebnis sieht ziemlich vertraut aus.
Natürlich gibt Mokka ein Ausstiegsniveau zurück, um anzugeben, ob alle Tests bestanden haben oder nicht. Dadurch automatisieren wir die Tests im Rahmen eines kontinuierlichen Integrationsprozesses oder einfach als lokales Skript vor dem Kommunikation, um unsere eigene Gesundheit zu erhalten.
Zu diesem Zeitpunkt haben wir unsere Ziele erreicht. Wir haben eine Unit -Testumgebung, die während der Entwicklung im Hintergrund läuft und uns sofort benachrichtigt, wenn ein Test fehlschlägt. Die Tests werden in einem Webbrowser durchgeführt, sodass wir den vollen Zugriff auf die Entwicklungstools des Browsers haben, während wir codieren. Die gleichen Tests werden auch gleich gut aus einem Befehlszeilenskript ausgeführt, sodass wir ihre Ausführung während des Erstellungs- oder Integrationsprozesses automatisieren können.
Hier sind die im Artikel verwendeten Testressourcen der Haupteinheiten.
Wie schreibe ich Unit -Tests für Backbone.js -Anwendungen? Tests für Backbone.JS -Anwendungen umfassen das Erstellen von Testfällen für jede Komponente der Anwendung. Dies umfasst Modelle, Ansichten und Sammlungen. Jeder Testfall sollte eine spezifische Funktionalität der Komponente abdecken und von anderen Testfällen unabhängig sein. Sie können Test -Frameworks wie Mokka oder Jasmine verwenden, um Ihre Tests zu schreiben. Diese Frameworks bieten Funktionen zum Definieren von Testfällen, zum Aufbau von Testumgebungen und zum Vorgehen. JS hängt vom von Ihnen verwendeten Test -Framework ab. Wenn Sie beispielsweise Mokka verwenden, können Sie Ihre Tests mit dem MOKA-Befehlszeilen-Tool ausführen. Wenn Sie Jasmine verwenden, können Sie Ihre Tests mit dem Jasmine Command-Line-Tool ausführen. Diese Tools bieten Optionen, um einzelne Testfälle, ganze Testsuiten oder alle Tests in Ihrer Anwendung auszuführen. Sie liefern auch detaillierte Berichte über die Ergebnisse der Tests, einschließlich der Anzahl der bestandenen, fehlgeschlagenen und übersprungenen Tests. Automatisieren Sie Unit -Tests in Backbone.js. Bei der Automatisierung wird ein CII -System (Continuous Integration) eingerichtet, das Ihre Tests automatisch ausführt, wenn Änderungen am Code vorgenommen werden. Dies stellt sicher, dass alle durch die Änderungen eingeführten Fehler sofort gefangen werden. Es stehen mehrere CI -Tools zur Verfügung, wie Jenkins, Travis CI und Circleci, die JavaScript unterstützen und zur Automatisierung von Unit -Tests in Backbone.js.
verwendet werden können.Das obige ist der detaillierte Inhalt vonUnit -Tests Backbone.js Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Unicode zu Chinesisch
VIVO ist eine Marke aus welchem Land?
So legen Sie Startelemente beim Start fest
Was bedeutet Aktivität?
Was ist los mit meinem Mobiltelefon, das telefonieren, aber nicht im Internet surfen kann?
Verwendung zum Löschen der Datenbank
Zusammengesetzte Verwendung
So schalten Sie Douyin Xiaohuoren ein und aus
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
