AngularJS -Test -Tipps: Testanweisungen

Schlüsselpunkte

• Die Anweisungen in AngularJs sind für DOM -Operationen von entscheidender Bedeutung und können bei Unit -Tests nicht ignoriert werden, da sie die Verfügbarkeit Ihrer Anwendung erheblich beeinflussen.
In
• Unterrichtstests werden eine Testumgebung errichtet, in der Anweisungen manuell zusammengestellt und die erforderlichen Objekte und Dienste verspottet werden, um die Funktionen von Anweisungen zu isolieren.
Die
• -Funktion in der link -Richtlinie ist für Kernlogikimplementierungen wie DOM -Operationen und Ereignisbehandlungen verantwortlich und sollte mit dem Test -Dienstprogramm von AngularJS gründlich getestet werden.
• vereinfacht den Testprozess durch Integration der vom Befehl verwendeten Vorlage in $templateCache während des Tests.
• Bei isolierten Testen von Anweisungen, die scopiert werden, stellen Sie sicher, dass die Eigenschaften des Bereichs wie erwartet ordnungsgemäß gebunden und ausgeführt werden, was für die beabsichtigte Funktionalität der Richtlinie in der Anwendung von entscheidender Bedeutung ist.

Unit -Tests ist ein wesentlicher Bestandteil der Softwareentwicklung und hilft bei der Reduzierung von Codefehlern. Das Testen ist eine von mehreren Aufgaben zur Verbesserung der Codequalität. AngularJS wird unter Berücksichtigung der Testbarkeit erstellt, sodass jeder Code, der über den Framework geschrieben wurde, leicht getestet werden kann. In meinem letzten Beitrag zum Test habe ich Unit -Testcontroller, Dienste und Anbieter abgedeckt. In diesem Artikel wird weiterhin Unterrichtstests erläutert. Die Richtlinien unterscheiden sich von anderen Komponenten, da sie nicht als Objekte im JavaScript -Code verwendet werden, sondern in HTML -Vorlagen von Anwendungen. Wir schreiben Anweisungen, um DOM -Operationen auszuführen, und wir können sie in Unit -Tests nicht ignorieren, da sie eine wichtige Rolle spielen. Darüber hinaus beeinflussen sie direkt die Verfügbarkeit der Anwendung. Ich schlage vor, Sie lesen frühere Artikel über verspottete Abhängigkeiten bei AngularJS -Tests, da wir einige der Techniken aus diesem Artikel in diesem Artikel anwenden werden. Wenn Sie den in diesem Tutorial entwickelten Code ausprobieren möchten, können Sie sich das GitHub -Repository ansehen, das ich für Sie eingerichtet habe.

Befehlstest

Richtlinien sind die wichtigsten und komplexesten Komponenten in AngularJs. Richtlinientests sind schwierig, da sie nicht wie Funktionen bezeichnet werden. In einer Anwendung werden Anweisungen deklarativ auf HTML -Vorlagen angewendet. Wenn Vorlagen zusammengestellt werden und der Benutzer mit Anweisungen interagiert, werden ihre Aktionen ausgeführt. Bei der Durchführung von Unit -Tests müssen wir Benutzeroperationen automatisieren und HTML manuell kompilieren, um die Funktionalität der Richtlinie zu testen.

Setzen Sie das Objekt des Testbefehls

Genau wie eine Sprache oder die Verwendung eines logischen Ausschnitts in einem Rahmen, müssen wir vor dem Starten der Testanweisung einen Verweis auf das erforderliche Objekt erhalten. Das hier erstellte Schlüsselobjekt ist ein Element, das die zu testende Anweisung enthält. Wir müssen ein HTML -Fragment mit bestimmten Anweisungen zusammenstellen, damit die Richtlinie wirksam wird. Betrachten Sie beispielsweise die folgende Richtlinie:

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

Der Lebenszyklus der

-Richtlinie beginnt und die Kompilierungs- und Verbindungsfunktionen werden ausgeführt. Wir können jede HTML -Vorlage mit dem $compile -Dienst manuell kompilieren. Der folgende beforeEach Block erstellt die obigen Anweisungen:

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

Nach der Zusammenstellung beginnt der Lebenszyklus der Anweisung. Nach dem nächsten Digest -Zyklus befindet sich das Richtlinieobjekt im selben Zustand wie auf der Seite. Wenn die Richtlinie von einem Dienst zur Implementierung ihrer Funktionen abhängt, müssen die Dienste vor dem Zusammenstellen der Direktiven imitiert werden, damit die Aufrufe einer Servicemethode im Test überprüft werden können. Wir werden im nächsten Abschnitt ein Beispiel sehen.

Testverbindungsfunktion

link Funktionen sind die am häufigsten verwendeten Eigenschaften in DDOs (Richtliniendefinitionsobjekte). Es enthält den größten Teil der Kernlogik der Anweisung. Diese Logik enthält einfache DOM -Operationen, Hören für Veröffentlichungen/Abonnements, Überwachung von Änderungen in Objekten oder Attributen, Rufdiensten, Handhabung von UI -Ereignissen und mehr. Wir werden versuchen, die meisten dieser Szenarien abzudecken.

DOM -Operation

Beginnen wir mit dem im vorherigen Abschnitt definierten Fall der Anweisung. Diese Richtlinie fügt dem Inhalt des Elements, das die Richtlinie anwendet, ein Spannelement hinzu. Es kann getestet werden, indem Sie nach einer Spanne innerhalb der Richtlinie suchen. Der folgende Testfall behauptet dieses Verhalten:

var compile, scope, directiveElem;

beforeEach(function(){
  module('sampleDirectives');

  inject(function($compile, $rootScope){
    compile = $compile;
    scope = $rootScope.$new();
  });

  directiveElem = getCompiledElement();
});

function getCompiledElement(){
  var element = angular.element('<div first-directive=""></div>');
  var compiledElement = compile(element)(scope);
  scope.$digest();
  return compiledElement;
}

Beobachter

Da Anweisungen auf den aktuellen Stand des Umfangs wirken, sollten sie Beobachter haben, um die Anweisungen zu aktualisieren, wenn sich der Zustand des Umfangs ändert. Der Unit -Test des Beobachters muss die Daten manipulieren und den Beobachter zum Ausführen von $digest erzwingen, und der Status der Anweisung muss nach dem Verdauungszyklus überprüft werden. Der folgende Code ist eine leicht modifizierte Version der obigen Anweisung. Es verwendet Felder auf dem Umfang, um den Text in Span zu binden:

it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});

Testen Sie diese Richtlinie ähnlich der ersten Richtlinie; Die folgenden Testfälle überprüfen, ob sich der Status der Anweisung geändert hat:

angular.module('sampleDirectives').directive('secondDirective', function(){
  return function(scope, elem){
    var spanElement = angular.element('' + scope.text + '');
    elem.append(spanElement);

    scope.$watch('text', function(newVal, oldVal){
      spanElement.text(newVal);
    });
  };
});

Die gleiche Technik kann auch für Beobachter in Testeigenschaften verwendet werden.

(Der nachfolgende Inhalt wird aufgrund von Platzbeschränkungen vereinfacht und zusammengefasst, und die Kerntestmethoden und -ideen werden beibehalten)

DOM Ereignis Sie können JQLite triggerHandler verwenden, um Klick -Ereignisse zu simulieren und die Ergebnisse zu überprüfen.

Anweisungsvorlagenprüfung Vorlastvorlagen mit $templateCache, um die Tests zu vereinfachen.

Direktiven -Scope -Test Überprüfen Sie die Eigenschaftsbindung und die Methode auf Isolationsbereiche.

Erfordern Sie Test Überprüfen Sie die Anweisungsabhängigkeiten, einschließlich strenger und optionaler Abhängigkeiten.

TEST Überprüfen Sie, ob das Anweisungselement ersetzt wird.

transklude test Stellen Sie sicher, dass die Anweisung den übersetzten Inhalt korrekt verarbeitet.

Zusammenfassung

Wie in diesem Artikel gezeigt, sind Anweisungen schwieriger zu testen als andere Konzepte in AngularJs. Gleichzeitig können sie nicht ignoriert werden, da sie einige wichtige Teile der Anwendung steuern. AngularJS 'Test -Ökosystem erleichtert es uns, einen Teil des Projekts zu testen. Ich hoffe, dass Sie durch dieses Tutorial jetzt sicherer sein werden, Anweisungen zu testen. Bitte lassen Sie mich wissen, was Sie im Kommentarbereich denken. Wenn Sie den in diesem Tutorial entwickelten Code ausprobieren möchten, können Sie sich das GitHub -Repository ansehen, das ich für Sie eingerichtet habe.

(Der FAQS -Teil wird hier aufgrund der Länge des Artikels weggelassen. Der Kerninhalt wurde oben abgedeckt.)

Das obige ist der detaillierte Inhalt vonAngularJS -Test -Tipps: Testanweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!