So schließen Sie ein Projekt beginnend mit JavaScriptMVC ab und erstellen ein Testprogramm

JavaScriptMVC legt großen Wert auf das Testen. Das JavaScriptMVC-Framework verwendet das FuncUnit-Modul, um uns dabei zu helfen, Funktions- und Komponententests einfacher zu schreiben. Die Tests können im Browser oder vollständig automatisiert ausgeführt werden.

Nachdem Sie das Rezeptmodul erstellt haben, generiert es automatisch Testcode. Der folgende Artikel zeigt uns, wie wir die folgenden fünf Dinge erreichen können.

1. Führen Sie Unit-Tests durch.
2. Unit-Tests verstehen.
3. Führen Sie einen Funktionstest durch.
4. Funktionstests verstehen.
5. Testen ist eine gute Funktion.

1. Unit-Tests ausführen

FuncUnit verwendet das QUnit-Tool von Jquery, um Module und grundlegende Plug-Ins zu testen. Sie können diese Tests im Browser oder in Envjs ausführen.

Komponententests im Browser ausführen

Öffnen Sie „cookbook/qunit.html“. Sie sehen das folgende Bild:

Sehen wir uns an, wie die zweite Methode ausgeführt wird. Lassen Sie den Test zunächst in der Envjs-Umgebung ausführen.

Komponententests in der Envjs-Umgebung durchführen

Envjs ist ein einfacher Skriptbrowser. FuncUnit kann Ihre Tests in dieser simulierten Umgebung ausführen.

Geben Sie den folgenden Befehl in die Windows DOC-Konsole ein:
js funcunit/run envjs Cookbook/qunit.html

Dadurch wird qunit.html in einer simulierten Browserumgebung ausgeführt. Geben Sie Folgendes ein:

2. Unit-Tests verstehen

FuncUnit verwendet die Behauptungen des QUnit-Tools, um Testfunktionen in Modulen zu kombinieren. Wenn wir Unit-Tests besser verstehen möchten, können wir die Hilfedokumentation von QUnit lesen.
cookbook/qunit.html lädt das Steal-Modul und lässt Steal die Datei „cookbook/test/qunit/qunit.js“ laden. Diese Datei dient zum Laden aller Unit-Test-Dateien:
cookbook/test/qunit/cookbook_test. js
Cookbook/test/qunit/recipe_test.js

Die Behauptungen des Tests werden ausgeführt, sobald alle Skripte geladen wurden.

Öffnen Sie die Datei „cookbook/test/qunit/recipe_test.js“ und sehen wir uns an, wie der findAll-Test funktioniert.
//erstellt einen Test
test("findAll", function(){
//verhindert die Ausführung des nächsten Tests
stop(2000);

//fordert Rezepte an
Cookbook.Models.Recipe.findAll({}, function(recipes){

//stellt sicher, dass wir etwas haben
ok(recipes)

//stellt sicher, dass wir habe mindestens 1 Rezept
ok(recipes.length)

// stellt sicher, dass ein Rezept richtig aussieht
ok(recipes[0].name)
ok(recipes[0]. Beschreibung)

//ermöglicht den Start des nächsten Tests
start()
});
})

Funktionstest ausführen

Funktionstests werden verwendet, um Maus- und Tastaturereignisse zu testen, die durch simulierte Benutzerinteraktion mit der Schnittstelle generiert werden.

Der Funktionstest des Chef-Handbuchs besteht darin, die interaktiven Aktionen der Rezepterstellungs- und Listenoberfläche zu testen.

Führen Sie Funktionstests im Browser www.2cto.com aus.

Öffnen Sie „cookbook/funcunit.html“. Sie sehen das folgende Bild:

Führen Sie Funktionstests in der Selenium-Umgebung aus.

Selenium kann den Browser automatisch laden und in das FuncUnit-Modul kapseln.

Führen Sie den folgenden Befehl aus:
js funcunitrun selenium Cookbookfuncunit.html

Wenn Sie ein Windows-System verwenden, werden Firefox und IE-Browser geöffnet. Die Ergebnisse dieses Tests sind wie folgt:

Wenn beim Ausführen dieses Tests im IE eine Ausnahme auftritt, müssen Sie die Konfiguration des IE-Browsers ändern. Weitere Informationen finden Sie in der FuncUnit-Hilfedokumentation.

4. Funktionstests verstehen

FuncUnit plus QUnit kann andere Seiten öffnen, in diesem Beispiel „cookbook/cookbook.html“. Diese Seite verfügt über interaktive Aktionen und erhält einige Informationen daraus.

Die Seite „cookbook/funcunit.html“ funktioniert wie qunit.html, da das FuncUnit-Modul das FuncUnit-Plug-in lädt. FuncUnit wird wie die Jquery-API mit dem Alias ​​„S“ aufgerufen.

Öffnen Sie die Datei „cookbookrecipecreatecreate_test.js“ und wir sehen den folgenden Code:

test("create Recipes", function(){

//Geben Sie Ice in das Namensfeld ein
S("[name=name]").type("Ice")

//geben Sie Cold Water in das Beschreibungsfeld ein
S("[name=description]").type ( „Kaltes Wasser“)

//klicken Sie auf die Schaltfläche „Senden“
S("[type=submit]").click()

//warten Sie, bis das 2. Rezept existiert
S('.recipe:nth-child(2)').exists()

//Erhält den Text des ersten td
S('.recipe:nth-child(2) td :first').text(function(text){

//überprüft, ob Eis vorhanden ist
ok(text.match(/Ice/), "Typed Ice");
} ) ;

})

Aus dem Test ist leicht ersichtlich, dass dieser Testfall darin besteht, ein Rezept zu erstellen und das Rezept zur Liste hinzuzufügen.

5. Testen ist eine gute Funktion.

FuncUnit ermöglicht Webtests für Lesbarkeit und lineare Syntax. JavaScriptMVC bietet diese Testfunktion und leistet einen großen Beitrag zu unserer Webentwicklung.