Schlüsselpunkte

• Verwenden Sie Jasmine und Karma für Unit-Tests und End-to-End (E2E) -Tests von AngularJs, um die Zuverlässigkeit der Code zu gewährleisten und Fehler frühzeitig zu erkennen.
• Schreiben von Unit -Tests für AngularJS -Komponenten wie Controller, Anweisungen, Filter und Fabriken, um unabhängige Code -Snippets zu überprüfen.
• implementieren Sie End-to-End (E2E) -Tests, um die Integration von Komponenten in AngularJS-Anwendungen zu überprüfen, um sicherzustellen, dass sie wie erwartet im tatsächlichen Szenario funktionieren.
• Verwenden Sie Mocks und Spione in Unit -Tests, um funktionale und isolierte Testumgebungen zu simulieren.
• Verbesserte E2E-Tests mit integrierten Testunterstützung von AngularJS und dem Protraktor-Framework, einschließlich Merkmalen wie automatischem Warten und spezifischen Locator-Richtlinien für Winkelanwendungen.

Unit -Tests ist eine Technik, mit der Entwickler unabhängige Code -Snippets überprüfen können. End-to-End-Tests (E2E) werden verwendet, um festzustellen, ob ein Satz von Komponenten nach der Integration erwartet funktioniert. AngularJS ist ein modernes JavaScript -MVC -Framework, das Unit -Tests und E2E -Tests vollständig unterstützt. Das Schreiben von Tests während der Entwicklung von Winkelanwendungen kann viel Zeit sparen, da sie ansonsten bei der Behebung unerwarteter Fehler verschwendet werden. In diesem Tutorial wird erläutert, wie Unit -Tests und E2E -Tests in Winkelanwendungen einbezogen werden. In diesem Tutorial geht davon aus, dass Sie mit AngularJS -Entwicklung vertraut sind. Sie sollten auch mit den verschiedenen Komponenten vertraut sein, aus denen Winkelanwendungen besteht. Wir werden Jasmine als Test -Framework und Karma als Testläufer verwenden. Sie können Yeoman verwenden, um Projekte für Sie problemlos zu erstellen oder die Anwendung von Angular Seed direkt von GitHub zu erhalten. Wenn Sie keine Testumgebung haben, befolgen Sie die folgenden Schritte: 1. Laden Sie Node.js herunter und installieren Sie es (falls Sie es noch nicht getan haben). 2. Installieren Sie Karma mit NPM (NPM install -g karma). 3. Laden Sie die Demo -Anwendung für dieses Tutorial von Github herunter und entpacken Sie sie.

In der unzippierten Anwendung finden Sie Tests in den Verzeichnissen Test/Einheit und Test/E2E. Um die Ergebnisse des Unit -Tests anzuzeigen, führen Sie einfach Skripte/test.bat aus und starten Sie den Karma -Server. Unsere Haupt-HTML-Datei ist App/Notes.html, auf die über http: //localhost/angular-seed/app/notes.html zugegriffen werden kann.

Anfänger von Unit -Tests

Anstatt nur zu prüfen, wie Unit -Tests geschrieben werden, erstellen Sie eine einfache Winkelanwendung und sehen Sie, wie Unit -Tests in den Entwicklungsprozess passen. Beginnen wir also mit einer Anwendung und wenden Sie gleichzeitig Unit -Tests auf einzelne Komponenten an. In diesem Abschnitt erfahren Sie, wie Sie Unit -Tests durchführen: - Controller - Anweisungen - Filter - Factory

Wir werden eine sehr einfache Aufgaben-Notizen-Bewerbung erstellen. Unser Tag enthält ein Textfeld, in dem der Benutzer einfache Notizen schreiben kann. Notizen werden der Notizliste hinzugefügt, wenn die Taste gedrückt wird. Wir werden HTML5 Local Storage verwenden, um Notizen zu speichern. Das anfängliche HTML -Tag ist unten angezeigt. Bootstrap wird verwendet, um schnell Layouts zu erstellen.

    
    
    
    
    
    
    


    

      

        

        

           
        
        

          Add
        
        

      
      

        

        

          

            

              {{note}}
            
          
        
        

      
    

Wie in der obigen Marke gezeigt, ist unser Winkelmodul TodoApp und der Controller ist Todocontroller. Der Eingangstext ist an das Notizmodell gebunden. Es gibt auch eine Liste aller hinzugefügten Notizen. Wenn die Schaltfläche angeklickt wird, wird die Funktion createNote () unseres TodoController ausgeführt. Öffnen wir nun die mitgelieferte App.js -Datei und erstellen Sie das Modul und den Controller. Fügen Sie App.js. den folgenden Code hinzu.

var todoApp = angular.module('todoApp',[]);

todoApp.controller('TodoController', function($scope, notesFactory) {
  $scope.notes = notesFactory.get();
  $scope.createNote = function() {
    notesFactory.put($scope.note);
    $scope.note = '';
    $scope.notes = notesFactory.get();
  }
});

todoApp.factory('notesFactory', function() {
  return {
    put: function(note) {
      localStorage.setItem('todo'   (Object.keys(localStorage).length   1), note);
    },
    get: function() {
      var notes = [];
      var keys = Object.keys(localStorage);

      for(var i = 0; i 

Unser TodoController verwendet eine Fabrik namens NotesFactory, um Notizen zu speichern und abzurufen. Wenn die Funktion createNote () ausgeführt wird, wird die Fabrik verwendet, um die Notizen in LocalStorage zu setzen und dann das Notizmodell zu beseitigen. Wenn wir also Unit -Tests auf Todocontroller sind, müssen wir sicherstellen, dass der Bereich eine bestimmte Anzahl von Notizen enthält, wenn der Controller initialisiert wird. Nach dem Ausführen der Funktion "Scoped createNote ()) sollte die Anzahl der Notizen eins mehr als die vorherige Nummer sein. Unser Unit -Testcode ist unten angezeigt.

... (Der nachfolgende Inhalt ähnelt dem Eingabetxt. Aufgrund von Platzbeschränkungen werden hier die verbleibenden Code und Erläuterungsteile weggelassen. Bitte beachten Sie, dass dies nur eine Umschreibung des Eingabetxtes ist, wobei die ursprüngliche Bedeutung und die Synonyme und Satzstrukturanpassungen auf einige Aussagen vorgenommen werden, um den Zweck von Pseudo-Aginalität zu erreichen.