AngularJS e2e-Tests mit ngMockE2E

Für unser Projekt benötigten wir ein Mock-HTTP-Backend, das wir anweisen konnten, vordefinierte Antworten zurückzugeben, damit wir unsere vollständige Anwendung e2e testen konnten, ohne ein 'echtes' Backend zu haben. Auf diese Weise müssen wir keine Rücksicht auf den Zustand des Backends nehmen und können unsere Tests isoliert durchführen.

Anforderungen

• Verwenden Sie das für unsere Unit-Tests erstellte Mockdata-Objekt wieder
• Verwenden Sie das Config-Objekt wieder, in dem wir die Backend-Endpunkte definieren
• Wenig oder keine Auswirkungen auf den Produktionscode haben

Die Lösung

Zunächst ist ein zweites Modul erforderlich, das vom ng-app-Modul Ihrer Anwendung und von ngMockE2E abhängt. Nehmen wir also an, Ihre ngApp heißt 'myApp', dann definieren Sie zunächst ein Modul myAppE2E: [javascript] angular.module('myAppE2E', ['myApp', 'ngMockE2E']); [/javascript] Dieses Wrapper-Modul ist dafür verantwortlich, der ngMockE2E-Version von $httpBackend mitzuteilen, was sie auf welche Anfrage antworten soll. Für diese Anweisung verwenden wir die Methode run des Typs angular.Module: [javascript] angular.module('myAppE2E', ['myApp', 'ngMockE2E']).run(function ($httpBackend, $cookies) { // alle Ansichten durchlassen (die tatsächlichen html-Ansichten aus dem Ordner views sollten geladen werden) $httpBackend.whenGET(new RegExp('views/.*')).passThrough(); // Mock out den Aufruf von '/service/hello' $httpBackend.whenGET('/service/hello').respond(200, {message: 'world'}); // Reagieren Sie mit 404 für alle anderen Service-Aufrufe $httpBackend.whenGET(new RegExp('service/.*')).respond(404) }); [/javascript] Wie Sie sehen, haben wir hier 2 testbare Szenarien erstellt: 1 erfolgreicher Aufruf und 1 Fehlerszenario. Beachten Sie, dass das Fehlerszenario nach dem Erfolgsszenario definiert werden sollte, da das Fehlerszenario einen allgemeineren Selektor hat und auch das Erfolgsszenario behandeln würde. Dies ist auch der Punkt, an dem Sie alle in Ihrem 'myApp'-Modul verwendeten Objekte einfügen können, wie z.B. ein config-Objekt oder ein mockData-Objekt. Jetzt, da wir unser Modul haben, brauchen wir eine nicht-intrusive Methode, um es in unsere index.html einzufügen. Hierfür haben wir processHtml gewählt. Wir haben den folgenden Abschnitt am Ende unserer index.html hinzugefügt: [html] <!-- build:include:e2e e2e.html --> <!-- /build --> [/html] Dieser Abschnitt wird durch den Inhalt der Datei e2e.html ersetzt, wenn processHtml im Modus e2e ausgeführt wird und in allen anderen Modi belassen. Der Inhalt der Datei e2e.html lautet wie folgt: [html] <!-- Wir brauchen angular-mocks, da es ngMockE2E enthält.> <script src="bower_components/angular-mocks/angular-mocks.js"></script> <!-- Diese Datei enthält das myAppE2E-Modul, das für das Priming des $httpBackend --> <script src="test/e2e/util/myAppE2E.js"></script> <!-- Ersetzen Sie das ursprüngliche ng-app-Attribut durch den Namen des myAppE2E-Moduls, damit ein --> <script type="text/javascript"> $('body').attr('ng-app', 'myAppE2E'); </script> [/html] Jetzt müssen wir Grunt nur noch anweisen, processHtml im e2e-Testmodus auszuführen. Zunächst müssen wir die Konfiguration in den Abschnitt initConfig einfügen. Hier weisen wir ihn an, index.html als Eingabe zu verwenden und index_e2e.html als Ausgabe zu erstellen: [javascript] grunt.initConfig({ processhtml: { e2e: { files: { '<%= yeoman.app %>/index_e2e.html':[/javascript]['< %= yeoman.app %> /index.html'] } } }, // Ausschnitte aus allen möglichen anderen Konfigurationen } Als nächstes erweitern wir einfach die (von yeoman generierte) e2e Aufgabe, um procssHtml:e2e auszuführen, bevor wir den Server starten [javascript] grunt.registerTask('e2e', [ 'clean:server', // Fügen Sie einfach die Aufgabe hinzu: 'processhtml:e2e', 'concurrent:server', 'autoprefixer', 'connect:e2e', 'karma:e2e' ]); [/javascript] Da haben Sie es. Nein, wenn Sie grunt e2e starten und zu index_e2e.html gehen, haben Sie die volle Kontrolle über die http-Antworten und können e2e-Tests schreiben, bei denen Sie keinen Zustand des Backends berücksichtigen müssen.

E2E-Modus - aber keine Tests

Hin und wieder ist es nützlich, die komplette Anwendung isoliert zu testen, ohne die e2e-Tests auszuführen. Dafür haben wir eine spezielle Grunt-Aufgabe erstellt, die sich wie die Yeoman-Standardaufgabe 'Server' verhält, bei der jedoch das ngMockE2E-Modul läuft. Auf diese Weise wird jede Änderung an einer Ressource in Ihrem Projekt sofort verarbeitet und Sie können die Ergebnisse sehen, indem Sie den Task aktualisieren, anstatt die e2e-Aufgabe neu zu starten. [javascript] grunt.registerTask('e2enotest', [ 'clean:server', 'processhtml:e2e', 'concurrent:server', 'autoprefixer', 'connect:e2e', 'watch' ]); [/javascript]