Software -Tests ist ein Prozess der Bewertung von Software, um die Differenz zwischen der erwarteten Ausgabe und der tatsächlichen Ausgabe eines bestimmten Eingangssatzes zu erkennen. Testen, insbesondere Unit -Tests, sollten ein wesentlicher Bestandteil des Lebens jedes Entwicklers sein. Leider scheinen viele Entwickler Angst vor der Aktivität zu haben. In JavaScript können wir aus vielen Frameworks wählen, um unsere Codebasis zu testen. Zum Beispiel Mokka, Selen und Qunit. In diesem Artikel werde ich Ihnen Qunit vorstellen. Qunit ist ein vom JQuery -Team entwickeltes und gewartetes Rahmen für das Testen, das auch hinter Projekten wie JQuery und JQuery UI steht.
Schlüsselpunkte
- Qunit wird vom JQuery -Team entwickelt und gepflegt und ist ein beliebtes JavaScript -Unit -Test -Framework für die Benutzerfreundlichkeit und Einfachheit des Setups.
- Um mit Qunit zu beginnen, laden Sie die neueste Version von JavaScript- und CSS -Dateien von der Qunit -Website herunter und fügen Sie sie in Ihre HTML -Datei auf.
- Qunit bietet zwei Möglichkeiten, um neue Tests zu erstellen:
QUnit.test()für Synchroncode undQUnit.asyncTest()für asynchrone Code. Diese Tests enthalten Behauptungen, die überprüfen, ob der Code wie erwartet funktioniert. - Qunit liefert eine Vielzahl von Assertionsmethoden, einschließlich
deepEqual(),equal(),notDeepEqual(),notEqual(),propEqual(),strictEqual(),notPropEqual(),notStrictEqual(),ok(),throws(), , - ,
expect()und . Jede Methode hat ihren spezifischen Zweck und akzeptiert bestimmte Parameter.
Beim Erstellen von Tests mit Qunit besteht die beste Praxis darin, die Anzahl der Aussagen mit der -Methode festzulegen. Dies hilft sicherzustellen, dass alle Behauptungen ausgeführt werden und wenn eine oder mehrere Behauptungen nicht ausgeführt werden, schlägt der Test fehl.
Einstellungen Qunit Einer der Hauptgründe, warum viele Entwickler Qunit verwenden, ist die Benutzerfreundlichkeit. Der Einstieg mit diesem Framework ist sehr einfach und Sie können die Hauptkonzepte in wenigen Stunden beherrschen. Der erste Schritt zur Verwendung von Qunit besteht offensichtlich darin, es mit dem Herunterladen zu beginnen. Dies gibt verschiedene Möglichkeiten, dies zu tun: Laden Sie manuell von der Website herunter, verwenden Sie CDN, verwenden Sie Bower oder verwenden Sie NPM. Mein Rat ist, dass Sie sich nicht auf CDN verlassen sollten, um Ihren Code zu testen, es sei denn, Sie entwickeln eine einfache Live -Demo. Halten Sie sich also an andere Optionen. Für diesen Artikel möchte ich keine Voraussetzungen festlegen (Read Bower und NPM), also werden wir den ersten Ansatz verfolgen. Besuchen Sie daher die Qunit-Website und laden Sie die neueste Version der JavaScript-Datei (mit dem Namen Qunit-1.14.0.js) und der CSS-Datei (mit dem Namen Qunit-1.14.0.css) herunter. Setzen Sie sie in einen Ordner, in dem Sie auch einen Index.html erstellen. In dieser Datei platzieren wir den HTML -Code, der auf der Startseite der Website angezeigt wird, und ich werde ihn unten für die Bequemlichkeit wiederholen.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <🎜> <🎜> </body> </html>
Wie Sie sehen, verwendet dieser Code CDN, um CSS- und JavaScript -Dateien zu enthalten. Daher müssen Sie den Link aktualisieren, um die zuvor heruntergeladenen Dateien hinzuzufügen. In der Marke können Sie einige <div> platziert sehen. Der erste hat Qunit als ID, das vom Framework verwendet wird, um die Benutzeroberfläche anzuzeigen, wo die Testergebnisse angezeigt werden. Der zweite <code><div>, dessen ID Qunit-fixe ist, sollte von Ihnen (dem Entwickler) verwendet werden. Mit diesem Element können Entwickler den Code testen, der Elemente aus dem DOM hinzufügt, bearbeitet oder entfernt, ohne sich Sorgen darüber zu machen, dass das DOM nach jedem Test aufgeräumt wird. Wenn Sie das von Ihrem Code erstellte Element in diesem <code><div> einfügen, wird Qunit den Reset für uns abwickeln. Schließlich fügen wir eine Tests.js -Datei hinzu, die die Datei mit den Tests darstellt. Mein Rat ist, Dateien zu verwenden, um Tests bei der Arbeit mit echten Projekten zu speichern. In der Live -Demo, die ich für dieses Tutorial erstellt habe, habe ich JSBin verwendet und das Hochladen von Dateien sicherlich nicht zugelassen. In der Demo werden Sie also sehen, dass ich den Testcode eingebaut habe. Nachdem Sie verstehen, was es bedeutet, jeden Abschnitt zu markieren, öffnen Sie die Seite index.html in Ihrem Browser, um zu sehen, was passiert. Wenn alles gut geht, sollten Sie eine Live -Demo -Schnittstelle wie unten gezeigt sehen, die auch als Beispiel für JSBIN: Qunit bereitgestellt wird. In diesem Stadium ist der einzige Teil dieser Schnittstelle, das für uns relevant ist, der Teil, der die Zeit zeigt, die Qunit Verarbeitungstests verbringt, die Anzahl der definierten Behauptungen und die Anzahl der bestandenen und fehlgeschlagenen Tests. Die obige Demonstration zeigt, dass wir keine Tests definieren. Lassen Sie uns dieses Problem lösen.
<p> <strong> Erstellen Sie Tests mit Qunit </strong> </p>
<p> Qunit bietet zwei Möglichkeiten, neue Tests zu erstellen: <code>QUnit.test() und QUnit.asyncTest(). Der erste wird verwendet, um den Code zu testen, der synchron ausgeführt wird, während der zweite zum Testen asynchroner Code verwendet wird. In diesem Abschnitt werde ich beschreiben, wie Tests für Synchroncode erstellt werden. Die Signatur der Methode ist wie folgt: QUnit.test()
QUnit.test(name, testFunction)Der erste Parameter
ist eine Zeichenfolge, die uns hilft, die erstellten Tests zu identifizieren. Der zweite Parameter name ist eine Funktion, die die Behauptungen enthält, die das Framework ausführt. Das Framework übergibt einen Parameter an diese Funktion, mit dem alle Assertionsmethoden von Qunit enthüllt werden. Konvertieren Sie diese Beschreibung in Code, wir können die Datei tests.js mit dem folgenden Code aktualisieren: testFunction
QUnit.test('我的第一个测试', function(assert) {
// 断言在这里...
}); Dieser Code erstellt einen neuen Test, der durch die Zeichenfolge "Mein erster Test" und eine Funktion mit einem leeren Körper identifiziert wurde. Das Hinzufügen von Tests ohne Behauptungen ist nicht nützlich. Um dieses Problem zu lösen, müssen wir die in Qunit verfügbaren Behauptungsmethoden lernen.
Qunits Assertion -Methode
Behauptungen stehen im Mittelpunkt der Softwaretests. Sie erlauben uns zu überprüfen, ob unser Code wie erwartet funktioniert. In Qunit haben wir viele Möglichkeiten, diese Erwartungen zu überprüfen. Sie können in Tests durch Parameter von Funktionen zugegriffen werden, die an die -Methode übergeben wurden (in unserem vorherigen Beispiel QUnit.test()). Die folgende Liste fasst die verfügbaren Methoden sowie deren Funktionen und Unterschriften zusammen: assert
-
deepEqual(value, expected[, message]): Ein rekursiver strenger Vergleich, der für alle JavaScript -Typen funktioniert. Wennvalueundexpectedin Bezug auf Eigenschaften und Werte gleich sind und denselben Prototyp haben, wird die Behauptung übergeben; - : Der Parameter
equal(value, expected[, message])gleichvalueunter Verwendung von Vergleichsüberprüfung (==).expected - : Wie
notDeepEqual(value, expected[, message]), testet jedoch die Ungleichheit;deepEqual(): Wie - , testet jedoch die Ungleichheit;
notEqual(value, expected[, message])equal(): Strikter Vergleich der Eigenschaften und Werte eines Objekts. Wenn alle Attribute und Werte gleich sind, geht die Behauptung aus - : Verwenden Sie strenge Vergleich (===), um den Parameter
propEqual(value, expected[, message])gleich dem zu liefern
-
strictEqual(value, expected[, message]): Wievalue, testet jedoch die Ungleichheit;expected: Wie - , testet jedoch die Ungleichheit;
notPropEqual(value, expected[, message])propEqual(): Wenn der erste Parameter ein wahrer Wert ist, geht die Behauptung aus - : Testen Sie, ob der Rückruf eine Ausnahme ausgelöst hat, und vergleichen Sie optional die geworfenen Fehler
notStrictEqual(value, expected[, message])strictEqual()Die von diesen Methoden akzeptierten Parameter sind wie folgt: -
ok(value[, message]): Der Wert, der durch eine Funktion, Methode oder den in einer Variablen gespeicherten Wert zurückgegeben wird, der überprüft werden muss;
-
throws(function[, expected][, message]): Der zu testende Wert. Für die -Methode kann dies
: Eine optionale Zeichenfolge, die die Behauptung beschreibt;
- : Die zu ausgeführte Funktion sollte einen Fehler zurückgeben
value Jetzt, da Sie die verfügbaren Methoden und Parameter verstanden haben, ist es Zeit, einen Code zu überprüfen. Anstatt mehrere Tests für eine einzelne Funktion zu schreiben, versuche ich, ein realistischeres Beispiel zu reproduzieren. Wie auch immer, die Tests, die ich zeigen werde, sollten Sie nicht als vollständige Testsuite angesehen werden, aber sie sollten Ihnen eine bestimmte Vorstellung davon geben, wo Sie anfangen sollen. Um die genannten Tests zu schreiben, müssen wir einen Code zum Testen definieren. In diesem Fall werde ich ein Objektliteral wie folgt definieren: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <🎜> <🎜> </body> </html>
Wie Sie sehen, definieren wir ein Objektliteral mit drei Funktionen:
max(),isOdd()undsortObj(). Der erste akzeptiert eine beliebige Anzahl von Parametern und gibt den Maximalwert zurück.isOdd()Nehmen Sie eine Zahl als Parameter und testen Sie, ob es sich um eine ungerade Zahl handelt.sortObj()akzeptiert ein Array von Objekten, idealerweise sollte es ein Attribut namens Timestempe geben und sie nach dem Wert dieses Attributs sortiert. Die möglichen Testsätze dieser Funktionen sind wie folgt: (Das Beispiel für das lange Testcode wird hier weggelassen, da die Wortgrenze überschritten wurde, das Prinzip jedoch mit der vorherigen Beschreibung übereinstimmt)Setzen Sie die Erwartungen
Beim Erstellen eines Tests besteht die beste Praxis darin, die Anzahl der Ausführungen zu setzen. Wenn eine oder mehrere Behauptungen nicht ausgeführt werden, fällt der Test fehl. Das Qunit -Framework liefert zu diesem Zweck eine
Derexpect()-Methode. Diese Methode ist besonders nützlich, wenn Sie mit asynchronem Code zu tun haben, aber es ist am besten, ihn beim Testen synchroner Funktionen zu verwenden. Die Signatur der Methode ist wie folgt:expect()QUnit.test(name, testFunction)
wobei der Parameterdie erwartete Anzahl von Behauptungen angibt. (Das Beispiel für die Aktualisierung des Testcode wird auch hier weggelassen, da die Wortgrenze überschritten wurde, das Prinzip jedoch mit der vorherigen Beschreibung übereinstimmt.)
assertionsNumberQunit Einführung Schlussfolgerung
In diesem Tutorial stelle ich Sie in die magische Welt der Tests vor, insbesondere wie man den JavaScript -Code von Unit -Tests mit Qunit mithilfe von Qunit testet. Wir haben gesehen, wie einfach es ist, das Qunit -Framework einzurichten und welche Methoden es bereitstellt, um Synchronisationsfunktionen zu testen. Darüber hinaus haben Sie die vom Framework bereitgestellte Anzahl von Behauptungsfunktionen zum Testen des Codes gelernt. Schließlich erwähnte ich, wie wichtig es ist, die Anzahl der Aussagen zu setzen, die wir ausführen, und wie sie mithilfe der-Methode festgelegt werden. Ich hoffe, Sie haben diesen Beitrag genossen und erwägen, Qunit in Ihr Projekt zu integrieren. (Der FAQS -Teil wird hier weggelassen, da die Wortgrenze überschritten wurde)
expect()
Das obige ist der detaillierte Inhalt vonErste Schritte mit Qunit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ersetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AMDetaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PMIn Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PMIn dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
JQuery MatrixeffekteMar 10, 2025 am 12:52 AMBringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Mar 18, 2025 pm 03:16 PMIn dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
So bauen Sie einen einfachen JQuery SliderMar 11, 2025 am 12:19 AMIn diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann
Verbesserung des strukturellen Markups mit JavaScriptMar 10, 2025 am 12:18 AMWichtige Punkte erweiterte strukturierte Tagging mit JavaScript können die Zugänglichkeit und Wartbarkeit von Webseiteninhalten erheblich verbessern und gleichzeitig die Dateigröße reduzieren. JavaScript kann effektiv verwendet werden, um HTML -Elementen dynamisch Funktionen hinzuzufügen, z. Durch das Integrieren von JavaScript in strukturierte Tags können Sie dynamische Benutzeroberflächen erstellen, z. B. Tabletten, für die keine Seiten -Aktualisierung erforderlich ist. Es ist entscheidend sicherzustellen, dass JavaScript -Verbesserungen die grundlegende Funktionalität von Webseiten nicht behindern. Erweiterte JavaScript -Technologie kann verwendet werden (
So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterMar 10, 2025 am 01:01 AMDatensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Dreamweaver CS6
Visuelle Webentwicklungstools
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
