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.');
  };
});

-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!