Ein Anfängerhandbuch zum Testen funktionaler JavaScript

Schlüsselpunkte

• kombiniert funktionelle Programmierung und Test kann klarer und einfacher zu verwalten. Die funktionelle Programmierung ermöglicht die unabhängige Verarbeitung von Verhalten und Daten in einer Anwendung, was zu klareren und konsistenten Code führt.
• Tests soll sicherstellen, dass der Code wie erwartet ausgeführt wird und auch nach Änderungen des Codes wie erwartet ausgeführt wird. Verschiedene Arten von Tests umfassen Unit -Tests, Integrationstests und Funktionstests.
• testgetriebene Entwicklung (TDD) ist eine Praxis des Schreibens von Unit-Tests, bevor die Funktion getestet wird. Dies fördert das Aufbrechen von Anwendungsmerkmalen und die Ermittlung der erwarteten Ergebnisse, bevor Code geschrieben wird.
• reine Funktionen hängen nicht von externen Zuständen oder Variablen ab, haben keine Nebenwirkungen und geben immer das gleiche Ergebnis für dieselbe Eingabe zurück, was die Grundlage der funktionellen Programmierung ist. Sie erleichtern Unit -Tests und bieten Vertrauen für zukünftige Code -Refactoring.
• Jasmine ist ein leistungsstarkes Test -Framework, mit dem das funktionale JavaScript getestet werden kann. Es kann verwendet werden, um reine Funktionen in einem Browser mit Testmethoden zu entwickeln. Die Praxis des Schreibens von Test-gesteuerten Code kann die Erstellung reiner Funktionen aufgrund seiner einfachen Prüfung und Änderung fördern.

Funktionelle Programmierung und Tests. Sie haben sie vielleicht separat ausprobiert, aber irgendwie haben Sie nie beide in Ihre reguläre Praxis integriert. Sie mögen selbst einfach klingen, aber Tests und funktionale Programmierung können eine unwiderstehliche Versuchung erzeugen, die Sie fast dazu zwingt, klarere, kompaktere und wartbare Code zu schreiben.

Die gute Nachricht ist, dass die Verwendung beider Technologien gleichzeitig einige praktische Vorteile bietet. Sobald Sie die Süße dieser Kombination erlebt haben, sind Sie möglicherweise wie ich süchtig danach, und ich wette, Sie werden mehr wollen.

Sehen Sie sich den Kurs "Schreiben des klaren Codes an. Befolgen Sie die funktionalen JavaScript -Prinzipien", um Ihren Code aufzubrechen und die Aufrechterhaltung zu erleichtern ... warum nicht? Sehen Sie sich diesen Kurs in diesem Artikel an, ich werde Sie in die Prinzipien des Testen funktionaler JavaScript vorstellen. Ich werde Ihnen zeigen, wie Sie das Jasmine-Framework verwenden und reine Funktionen mit testgetriebenen Methoden erstellen.

Warum es testen?

Tests besteht darin, sicherzustellen, dass der Code in der Anwendung wie erwartet ausgeführt wird, und läuft weiterhin wie erwartet, wenn Sie Änderungen vornehmen, damit Sie die verfügbaren Produkte erhalten, wenn Sie Ihre Arbeit beenden. Sie schreiben einen Test, der die in einem festgelegte Situation erwartete Funktionen definiert, den Test gegen den Code durchführen, und Sie erhalten eine Warnung, wenn das Ergebnis nicht mit dem übereinstimmt, was der Test sagt. Und Sie erhalten diese Warnung, bis Sie den Code beheben.

Dann erhalten Sie eine Belohnung.

Ja, das lässt Sie sich gut fühlen.

Es gibt viele Arten von Tests, und es gibt viel Raum für Diskussionen darüber, wo Grenzen unterteilt sind, aber kurz:

• Unit -Tests, um die Funktionalität des Isolierens von Code
zu überprüfen
• Integrationstest validiert die Wechselwirkung zwischen Datenfluss und Komponenten
• Funktionstests anzeigen das Verhalten der gesamten Anwendung

HINWEIS: Lassen Sie sich nicht durch eine Art von Test, die als Funktionstest bezeichnet werden, abgelenkt. Dies ist nicht das, worauf wir uns in diesem Artikel über das Testen funktionaler JavaScript konzentrieren möchten. Unabhängig davon, ob Sie funktionelle Programmierechniken in JavaScript verwenden oder nicht, ändert sich die Funktionstestmethoden, mit denen Sie das Gesamtverhalten Ihrer Anwendung testen, möglicherweise nicht viel. Was bei der funktionalen Programmierung wirklich hilft, ist beim Erstellen von Unit -Tests.

Sie können während des Codierungsprozesses jederzeit Tests schreiben, aber ich finde es immer am effektivsten, Unit -Tests zu schreiben, bevor sie Funktionen schreiben, die sie testen möchten. Diese Praxis, die als testgetriebene Entwicklung (TDD) bekannt ist dieses Ergebnis zu erzeugen.

Ein Nebeneffekt ist, dass TDD Sie häufig dazu zwingt, detaillierte Diskussionen mit den Personen zu führen, die Sie dafür bezahlen, Programme zu schreiben, um sicherzustellen, dass das Programm, das Sie schreiben, tatsächlich das ist, nach dem sie suchen. Schließlich ist es einfach, einen einzigen Test zu bestehen. Die Schwierigkeit besteht darin, festzustellen, ob alle möglichen Eingaben verarbeitet werden, denen Sie begegnen können, und alle Eingaben korrekt zu verarbeiten, ohne etwas zu brechen.

Warum eine funktionale Programmierung wählen?

Wie Sie sich vorstellen können, hängt die Art und Weise, wie Sie Ihren Code schreiben, eng mit der Schwierigkeit des Tests zusammen. Einige Codemuster, wie z. B. eng das Verhalten einer Funktion an eine andere, oder es stützt sich stark auf globale Variablen, erschweren die Einheitstests des Codes. Manchmal müssen Sie möglicherweise unbequeme Techniken verwenden, z. Diese Fälle sind nicht immer vermeidbar, aber es ist häufig möglich, dort zu isolieren, wo diese Fälle im Code benötigt werden, damit der Rest des Codes leichter getestet werden kann.

Mit

funktionale Programmierung können Sie Daten und Verhalten in Ihrer Anwendung unabhängig umgehen. Sie können Ihre Anwendung erstellen, indem Sie eine separate Reihe von Funktionen erstellen, die unabhängig funktionieren und nicht vom externen Zustand abhängen. Infolgedessen wird Ihr Code zu einem fast selbstdokumentierten Code und kombiniert kleine, klar definierte Funktionen, die sich konsequent verhalten und leicht zu verstehen haben.

funktionale Programmierung steht normalerweise im Gegensatz zu imperativen Programmierungen und objektorientierter Programmierung. JavaScript kann all diese Technologien unterstützen und sogar mischen. Funktionelle Programmierung kann als eine weitere wertvolle Alternative zum Erstellen von imperativen Codesequenzen dienen, die die Anwendungszustände verfolgen, bis das Ergebnis zurückgegeben wird. Oder erstellen Sie Ihre Anwendung durch Interaktionen über komplexe Objekte hinweg, die alle Methoden einschließen, die für eine bestimmte Datenstruktur gelten.

wie man reine Funktionen arbeitet

funktionale Programmierung ermutigt Sie, Ihre Anwendung mit winzigen, wiederverwendbaren und komponierbaren Funktionen zu erstellen, die nur eine bestimmte Sache ausführen und jedes Mal den gleichen Wert für dieselbe Eingabe zurückgeben. Solche Funktionen werden als reine Funktionen bezeichnet. Reine Funktionen sind die Grundlage für die funktionale Programmierung und haben alle die folgenden drei Merkmale:

• nicht abhängig von externen Zuständen oder Variablen
• Keine Nebenwirkungen oder Änderungen an externen Variablen
• geben Sie immer dasselbe Ergebnis für dasselbe Eingabe
zurück

Ein weiterer Vorteil des Schreibens von Funktionscode besteht darin, dass die Unit -Tests erleichtert werden. Je mehr Code Sie Unit -Test haben können, desto einfacher wird es, sich auf Ihre Fähigkeit zu verlassen, Ihren Code in Zukunft neu zu gestalten, ohne die Grundfunktionalität zu brechen.

Was macht den Funktionscode einfach zu testen?

Wenn Sie das Konzept betrachten, das wir gerade besprochen haben, verstehen Sie möglicherweise bereits, warum der Funktionscode einfacher zu testen ist. Das Schreiben von Tests für reine Funktionen ist sehr einfach, da jeder Eingang eine konsistente Ausgabe aufweist. Sie setzen nur die erwarteten Werte und führen sie gegen den Code aus. Es ist nicht erforderlich, einen Kontext festzulegen, nicht erforderlich, Abhängigkeiten zwischen Funktionen zu verfolgen, den Änderungsstatus außerhalb der Funktion nicht zu simulieren, und es muss auch nicht die externe Datenquelle von Variablen simulieren.

Es gibt viele Testoptionen, von vollständigen Frameworks bis hin zu Versorgungsbibliotheken und einfachen Testwerkzeugen. Dazu gehören Jasmine, Mokka, Enzym, Scherz und viele andere Werkzeuge. Jedes Tool verfügt über unterschiedliche Vor- und Nachteile, beste Anwendungsfälle und eine treue Anhängerschaft. Jasmine ist ein leistungsstarker Rahmen, der in einer Vielzahl von Situationen verwendet werden kann. Hier finden Sie eine kurze Demonstration, wie Sie reine Funktionen mit Jasmine und TDD in Ihrem Browser entwickeln können.

Sie können ein HTML -Dokument erstellen, das Jasmin -Testbibliotheken aus lokalen oder CDN extrahiert. Ein Beispiel für eine Seite, die die Jasmine -Bibliothek und den Testläufer enthält, könnte so aussehen:

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

Dies führt die Jasmine -Bibliothek sowie die Jasmine HTML -Bootskripte und -stile vor. In diesem Fall ist der Körper des Dokuments leer und wartet darauf, dass Ihr JavaScript getestet wird und Ihre Jasmintests.

Test funktionaler JavaScript - unser erster Test

<script></script> Schreiben wir zuerst den ersten Test. Wir können dies in einem separaten Dokument tun oder es in das describe -Element auf der Seite aufnehmen. Wir werden die von der Jasmine -Bibliothek definierte

-Funktion verwenden, um das gewünschte Verhalten einer neuen Funktion zu beschreiben, die wir noch nicht geschrieben haben.

isPalindrome Die neue Funktion, die wir schreiben werden, heißt true, und wenn die in der in den Gäste bestandene Zeichenfolge vor und nach dem gleichen Ab false die gleiche ist, wird sie

zurückgegeben. Der Test sieht so aus:

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});</code>

Wenn wir dies dem Skript in der Seite hinzufügen und in den Browser laden, erhalten wir eine funktionierende Jasmine -Berichtsseite, die den Fehler zeigt. Das wollen wir in diesem Moment. Wir möchten wissen, ob der Test ausgeführt wird und ob er fehlschlägt. Auf diese Weise wissen unser Gehirn, die sich bemüht, erkannt zu werden, dass wir etwas reparieren müssen.

Schreiben wir also eine einfache Funktion in JavaScript, bei der es nur genügend Logik gibt, um unsere Tests zu bestehen. In diesem Fall ist es nur eine Funktion, die einen unserer Tests durch die Rückgabe des erwarteten Wertes verabschiedet hat.

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

Ja, wirklich. Ich weiß, dass es lächerlich aussieht, aber bitte bleiben Sie dabei.

Wenn Sie das Testprogramm erneut ausführen, wird es verabschiedet. sicherlich. Aber natürlich erfüllt dieser einfache Code unsere Erwartungen für das Palindrome -Testprogramm nicht. Was wir jetzt brauchen, ist die zusätzliche Erwartung. Fügen wir also unserer describe -Funktion eine weitere Behauptung hinzu:

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});</code>

Nach dem Laden unserer Seite wird nun die Testausgabe rot und scheitert. Wir erhielten eine Nachricht, in der das Problem war und das Testergebnis rot wurde.

rot!

Unser Gehirn fühlt, dass etwas nicht stimmt.

Natürlich gibt es ein Problem. Jetzt gibt unsere einfache isPalindrome -Funktion jedes Mal nur true zurück und hat sich als nicht in der Lage, diesen neuen Test effektiv abzunehmen. Aktualisieren wir also isPalindrome und fügen Sie die Möglichkeit hinzu, die Funktionen vor und nach der eingehenden Zeichenfolge zu vergleichen.

<code class="language-javascript">const isPalindrome = (str) => true;</code>

Tests sind süchtig

Gehen Sie wieder grün. Das ist befriedigend. Wenn Sie die Seite neu laden, erhalten Sie diesen kleinen Dopaminschub?

Bei diesen Änderungen geht unser Test erneut ab. Unser neuer Code vergleicht effektiv die Vor- und Nachbekämpfungsketten und gibt true zurück, wenn die Vor- und Nachfolger gleich sind, ansonsten false.

Dieser Code ist eine reine Funktion, da er nur eine Sache ausreicht und bei einem konsistenten Eingabwert ohne Nebenwirkungen konsistent ausgeführt wird, wodurch Variablen oder Abhängigkeiten außerhalb von sich selbst oder im Anwendungsstatus geändert werden. Jedes Mal, wenn Sie eine Zeichenfolge an diese Funktion übergeben, vergleicht sie zwischen den Vorder- und Rückschnitten und gibt das Ergebnis zurück, wann oder wie es aufgerufen wird.

Sie können sehen, wie einfach diese Konsistenz die Einheitsprüfung dieser Funktion macht. Tatsächlich kann das Schreiben von Test-gesteuerten Code Sie dazu ermutigen, reine Funktionen zu schreiben, da sie leichter zu testen und zu ändern sind.

Und Sie möchten die Zufriedenheit des Tests erhalten. Ich weiß, dass du es wirst.

rekonstruieren reine Funktion

Zu diesem Zeitpunkt ist es sehr einfach, andere Funktionen hinzuzufügen (z. B. Umgang mit Nicht-String-Eingaben, das ignorieren Unterschiede zwischen den oberen und unteren Fallbuchstaben usw.). Fragen Sie einfach den Produktbesitzer, wie das Programm ausgeführt wird. Da wir bereits Tests haben, um zu überprüfen, ob die Zeichenfolge konsequent verarbeitet wird, können wir jetzt Fehlerprüfung oder String-Casting oder ein Verhalten hinzufügen, das wir nicht ausstrahlen möchten.

Lassen Sie uns zum Beispiel sehen, was passiert, wenn wir einen Test für die Nummer 1001 hinzufügen, die als Palindrome interpretiert werden kann, wenn es sich um eine Zeichenfolge handelt:

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
  it("returns false if the string isn't a palindrome", () => {
    expect(isPalindrome("Bubba")).toEqual(false);
  });
});</code>

Dies macht unseren Bildschirm erneut rot und lässt den Test fehlschlagen, da unsere aktuelle isPalindrome -Funktion nicht weiß, wie er nicht betroffene Eingaben behandelt.

Die Panik begann. Wir sehen rot. Der Test ist fehlgeschlagen.

Aber jetzt können wir es sicher aktualisieren, um Nicht-String-Eingänge zu verarbeiten, sie in Saiten zu werfen und dann zu überprüfen. Wir könnten eine Funktion entwickeln, die mehr so ​​aussieht:

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

Jetzt, da alle Tests bestanden werden, sehen wir grüne, süße Dopamin in unser testgetriebenes Gehirn.

Durch Hinzufügen von toString() zur Bewertungskette können wir uns vor dem Testen an die Nicht-String-Eingabe anpassen und in eine Zeichenfolge konvertieren. Das Beste von allen, da unsere anderen Tests jedes Mal durchgeführt werden, können wir sicher sein, dass wir durch Hinzufügen dieser neuen Funktion zu unseren reinen Funktionen die zuvor erhaltenen Funktionen nicht brechen. Das Endergebnis ist wie folgt:

(Der Codepen -Code sollte hier eingefügt werden, aber da ich nicht auf die externe Website zugreifen kann, kann ich den CodePen -Link nicht angeben.)

Probieren Sie diesen Test aus und schreiben Sie Ihre eigenen Tests mit Jasmine oder einer anderen Testbibliothek, die für Sie funktioniert.

Sobald Sie Tests in Ihren Code -Design -Workflow einbezogen und reine Funktionen für Unit -Tests schreiben, fällt es Ihnen möglicherweise schwierig, in Ihr früheres Leben zurückzukehren. Aber das werden Sie niemals tun wollen.

(Dieser Artikel wurde von Vildan Softic überprüft. Dank aller SitePoint-Peer-Rezensenten für die Erhöhung des SidePoint-Inhalt FAQs über funktionale JavaScript -Tests (FAQ)

Was ist funktionale JavaScript -Tests?

funktionale JavaScript -Tests ist ein Test, der die Funktionen verschiedener Teile des Codes (z. B. Funktionen) überprüft, um sicherzustellen, dass sie wie erwartet funktionieren. Dies beinhaltet das Schreiben von Testfällen, die Funktionen mit unterschiedlichen Eingaben aufrufen und die Ausgabe mit den erwarteten Ergebnissen vergleichen. Es ist ein entscheidender Bestandteil der Softwareentwicklung und trägt dazu bei, Fehler im Entwicklungsprozess so früh wie möglich zu erkennen und die Qualität und Zuverlässigkeit des Codes sicherzustellen.

Wie schreibe ich Funktionstests in JavaScript?

Schreiben von Funktionstests in JavaScript beinhaltet das Erstellen eines Testfalls, in dem die Funktion mithilfe einer bestimmten Eingabe getestet werden soll, und überprüft dann, ob der Ausgang mit dem erwarteten Ergebnis übereinstimmt. Dies kann mit verschiedenen Testframeworks wie Scherz, Mokka oder Jasmine erfolgen. Diese Frameworks bieten Funktionen, um Testfälle zu definieren, auszuführen und die Ergebnisse zu überprüfen.

Wie lautet die Regexp -Testmethode in JavaScript?

Die Regexp -Testmethode in JavaScript ist eine Möglichkeit, Übereinstimmungen in einer Zeichenfolge zu testen. Gibt

zurück, wenn ein Match gefunden wird, ansonsten

zurückgibt. Diese Methode ist besonders nützlich, wenn Sie die Benutzereingaben oder die Suche nach Mustern in Zeichenfolgen überprüfen müssen. true false Wie verwenden Sie die Regexp -Testmethode in JavaScript?

Um die Regexp -Testmethode in JavaScript zu verwenden, müssen Sie zunächst ein Regexp -Objekt unter Verwendung des von Ihnen angepassten Musters erstellen. Anschließend rufen Sie die Testmethode dieses Objekts auf und übergeben die String, die als Parameter getestet werden soll. Wenn eine Übereinstimmung gefunden wird, gibt die Methode

, ansonsten

zurück. true

Was ist der Unterschied zwischen Funktionstests und Unit -Tests in JavaScript?

Funktionstests und Unit -Tests sind beide wichtige Komponenten des Testprozesses, ihr Zweck ist jedoch unterschiedlich. Die Unit -Tests konzentrieren sich auf die Isolierung verschiedener Teile des Testcode (z. B. Funktionen oder Methoden) und das Isolieren des Restes des Systems. Funktionstests dagegen testen die größeren Merkmalsbrocken des Systems (z. B. Module oder ganze Anwendungen), um sicherzustellen, dass sie bei der Integration wie erwartet funktionieren.

Wie verbessert man die Funktionstests in JavaScript?

Verbesserung der Funktionstests in JavaScript beinhaltet normalerweise die Gewährleistung, dass Ihre Tests alle möglichen Situationen, einschließlich extremer Situationen und potenziellen Fehlerbedingungen, abdecken. Es ist auch wichtig sicherzustellen, dass Ihre Tests unabhängig sind und in jeder Reihenfolge durchgeführt werden können, da dies zuverlässiger und leichter zu warten ist. Die Verwendung eines Testframeworks kann auch dazu beitragen, Tests zu erstellen und nützliche Tools zur Überprüfung von Ergebnissen und Berichtensfehlern bereitzustellen.

Was sind einige gute Praktiken für Funktionstests in JavaScript?

Einige gute Praktiken für Funktionstests in JavaScript umfassen das Schreiben klarer und prägnanter Testfälle, das Testen positiver und negativer Szenarien und die Sicherstellung, dass die Tests unabhängig sind und in jeder Reihenfolge ausgeführt werden können. Die Verwendung eines Testframeworks ist auch eine gute Idee, da es nützliche Werkzeuge und Strukturen für Ihre Tests bietet.

Wie kann man Funktionstests in JavaScript debuggen?

Eine Vielzahl von Tools und Techniken kann verwendet werden, um Funktionstests in JavaScript zu debuggen. Eine gemeinsame Methode ist die Verwendung der console.log -Antage, um den Wert während der Testausführung auszudrucken. Sie können auch Debugging -Tools verwenden, die von der Entwicklungsumgebung oder der Test -Frameworks bereitgestellt werden, mit denen Sie den Code durchlaufen und Variablen zu verschiedenen Zeitpunkten überprüfen können.

Was sind einige häufige Herausforderungen bei der Funktionstests in JavaScript?

Einige häufige Herausforderungen bei der Funktionstests in JavaScript umfassen die Handhabung asynchroner Code, Testcode, die mit externen Systemen interagieren und die Komplexität großer Testsuiten verwalten. Eine Vielzahl von Technologien und Tools kann verwendet werden, um diese Herausforderungen zu lösen, z. async/await

Wie kann man funktionale Tests in JavaScript weiter lernen?

Es gibt viele Ressourcen, um mehr über Funktionstests in JavaScript zu erfahren. Dies beinhaltet Online -Tutorials, Bücher und Kurse. Websites wie W3Schools, Mozilla Developer Network und Geeks for Geeks bieten umfassende Leitfäden und Tutorials zu diesem Thema. Sie können auch viele Video -Tutorials auf Plattformen wie YouTube finden. Darüber hinaus bieten viele JavaScript -Test -Frameworks wie Scherz, Mokka und Jasmine detaillierte Dokumentation und Leitlinien auf ihrer offiziellen Website.

Das obige ist der detaillierte Inhalt vonEin Anfängerhandbuch zum Testen funktionaler JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!