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?
Es gibt viele verschiedene Möglichkeiten.
Wenn Sie es funktionell testen möchten (wie ein Benutzer), dann verwenden Sie etwas wie Selenium oder Watir . Dies funktioniert durch Ihre Website als Benutzer und würde den JavaScript- und den Backend-Code ausführen.
Wenn Sie nur JavaScript selbst testen möchten, verwende ich JSTestDriver . Sie können Ihr JavaScript testen. Es unterstützt keine Async-Aufrufe, kann aber den Test durchführen.
Es gibt ein neues Tool, das kürzlich veröffentlicht wurde: 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 persönlich benutze auch Jasmine für meine Unit-Tests, wie auch das Ext JS-Team intern, obwohl es nicht besonders gut geeignet ist zu UI-Tests (es ist großartig, um Code zu testen).
Diese Seite war nützlich, um die Testplattform für das Enterprise ExtJS GUI-Projekt von Grund auf zu verbessern. Hier ist ein Addon und Topic Update und unsere endgültige Wahl, basierend auf ein paar Tagen Erfahrung. Ich hoffe jemand spart die Zeit, trifft Entscheidungen und entgeht ersten Testfehlern.
Der erste Versuch bestand darin, alles in Netbeans zu verschrauben und die integrierte jsTestDriver-Engine mit der standardmäßigen Jasmine-Bibliotheksunterstützung 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 beschlossen wir aufzugeben, um Zeit zu sparen.
Da Siesta die naheliegendste Wahl für ein solches Projekt ist, war der nächste Schritt, es genau nach dem Original zu tun Brynthum Tutorial . Obwohl es nicht wünschenswert war, außerhalb der IDE zu gehen und Produktionsfenster mit einem Verlust der Integration zu multiplizieren.
Wichtig, dieses Brynthum-Tutorial hat auch einen Trick. 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. Für Ihre Projektzwecke kann eine andere Version der ExtJS-Bibliothek in der Konfigurationsdatei hochgeladen werden.
Tags und Links javascript unit-testing user-interface extjs