Ich benutze PHPUnit, um meinen PHP-Quellcode zu testen, aber ich brauche auch eine Möglichkeit, clientseitigen Code zu testen. Ich benutze ExtJS, um ziemlich komplexe Schnittstellen zu erstellen, die den Server nach Daten aufrufen. Ich frage mich, wie kann man die Benutzeroberfläche testen?Wie testet man ExtJS oder ähnliche JavaScript-basierte Schnittstellen?
Es gibt viele verschiedene Möglichkeiten.
Wenn Sie es funktionell (wie ein Benutzer) testen möchten, dann verwenden Sie etwas wie Selenium oder Watir. Dies funktioniert wie ein Benutzer durch Ihre Site und übt den JavaScript- und den Backend-Code aus.
Wenn Sie nur JavaScript selbst testen möchten, würde ich JSTestDriver verwenden. Sie können Ihr JavaScript testen. Es unterstützt keine Async-Anrufe, kann aber den Test durchführen.
Es gibt ein neues Werkzeug, das kürzlich herauskam Siesta. Es ist speziell auf Ext JS ausgerichtet (obwohl es auch jeden JS-Code testen kann) und eignet sich hervorragend zum Testen von Ext JS UI-Code, da es eine erweiterte Ext JS-Ereignissimulation und -aufzeichnung enthält.
Ich benutze auch persönlich Jasmine für meine Unit-Tests, wie auch das Ext JS-Team intern, obwohl es nicht besonders gut für UI-Tests geeignet ist (es ist großartig für den Test von Code).
Ich lief gerade über Siesta, die speziell für ExtJS ist. Es sieht vielversprechend aus. Genau das hat das Ext-Team zum Testen seiner API bei der Migration von v3 auf v4 verwendet.
Diese Seite wurde gefunden, während die Testplattform für Enterprise ExtJS GUI-Projekt von Grund auf neu eingerichtet wurde. Hier ist ein Addon und Topic Update und unsere endgültige Wahl, basierend auf ein paar Tagen Erfahrung. Ich hoffe, dass jemand die Zeit spart, Entscheidungen trifft und ersten Testfehlern entgeht.
Der erste Versuch war, alles in Netbeans zu schrauben und seine eingebaute jsTestDriver-Engine mit der Standard-Jasmine-Bibliothek zu verwenden. Erfolgreich, aber da Jasmin meist Unit-Tests (isolierte Codebausteine) testet, konnten wir ein gewöhnliches JavaScript-Objekt erstellen, aber Ext-Komponenten und damit deren Inhalt nicht zeichnen. Wir haben versucht, Siesta-Bibliothek mit dem gleichen Standardansatz (in jsTestDriver.conf-Datei) zu importieren, sah es durch Code-Vervollständigung, aber immer noch keine Hilfe mit ExtJS-Objekten. Ich fand auf Siesta Foren, dass es zwischen Siesta und jsTestDriver einige prinzipielle Unterschiede in der Architektur gab, also entschieden wir uns aufzugeben, um Zeit zu sparen.
Da Siesta die naheliegendste Wahl für solch ein Projekt ist, war nächster Schritt, es genau dem Original Brynthum tutorial zu folgen. Obwohl es nicht wünschenswert war, außerhalb der IDE zu gehen und Produktionsfenster mit einem Verlust der Integration zu multiplizieren.
Wichtig, dass Brynthum Tutorial auch einen Trick hat. Nachdem Sie Ihren ersten Test im Brynthum Harness Browser bestanden haben, sehen Sie rechts keine Testdetails und es wird ein Browserfehler angezeigt. Uncaught TypeError: Die Eigenschaft 'parentNode' von null kann nicht gelesen werden. Der Grund dafür ist, dass die ExtJS-Bibliothek für Brynthum Harness Browser der Siesta-Bibliotheksversion entsprechen muss. Derzeit Siesta 2.0.5 = Ext 4.2.0. Zu Ihren Projektzwecken kann eine andere Version der ExtJS-Bibliothek in der Konfigurationsdatei hochgeladen werden.
JsTestDriver unterstützt jetzt das Testen von Async-Aufrufen! Siehe http://code.google.com/p/js-test-driver/wiki/AsyncTestCase – mistaecko