Frage So testen Sie das Verhalten in der Verknüpfungsfunktion einer Anweisung


In einigen meiner Direktiven füge ich dem Bereich Funktionen hinzu, um die für die Direktive spezifische Logik zu behandeln. Beispielsweise:

link: function(scope, element, attrs) {
         scope.doStuff = function() {
            //do a bunch of stuff I want to test
         }        
      }

Wie gehe ich vor, um diese Funktion zu testen? Ich habe gegoogelt für wie eine Richtlinie testen, aber die Dinge, die ich gefunden habe Es ging mehr darum, Änderungen am Element zu testen. Ich kann meine Direktive sicherlich vor jedem meiner Tests zusammenstellen, aber das würde jedes Mal meinen Umfang auslöschen. Ich möchte die Funktion als Eigenschaften in meinem Bereich Änderungen testen.

Gibt es eine Möglichkeit, das von der Richtliniendefinition zurückgegebene Objekt zu erhalten? Dann könnte ich einfach die Link-Funktion direkt aufrufen und das Verhalten jeder der auf dem Scope definierten Funktionen testen. Gibt es einen besseren Weg, all dies zu tun?

Ich benutze Jasmine, um meine Tests durchzuführen, und ich möchte mein Scope Setup in der describe Funktionen, so kann ich mehrere haben it Funktionen für die gleichen Scope-Daten.


43
2017-11-15 21:25


Ursprung


Antworten:


Anstatt die Verknüpfungsfunktion selbst zu testen, würden Sie das Ergebnis der Richtlinie programmatisch testen. Was Sie tun würden, ist die Anweisung in eine Zeichenfolge zu schreiben und zu verwenden $compile Winkelprozeß haben. Dann testen Sie die Ausgabe, um sicherzustellen, dass alles korrekt verdrahtet ist.

Angulars Quelle ist voll von guten Beispielen, wie man das macht ... zum Beispiel Angulars Test der ngRepeat-Direktive

Sie können sehen, was sie tun, ist die Richtlinie einrichten, Ändern Sie den Umfang (in diesem Fall $rootScope) Stellen Sie sicher, dass es ist $digested und testet das DOM, das es ausgibt, um sicherzustellen, dass alles korrekt verdrahtet ist. Sie können auch testen, was sich im Bereich befindet, wenn die Anweisung dies ändert.

Der Test für ngClick ist auch ziemlich interessant, weil es das Testen einer Browserinteraktion und deren Auswirkung auf den Umfang zeigt.

Der Vollständigkeit halber, hier ist ein Ausschnitt aus den ngClick-Tests, der das Testen einer Direktive ziemlich gut zusammenfasst:

 it('should get called on a click', inject(function($rootScope, $compile) {
   element = $compile('<div ng-click="clicked = true"></div>')($rootScope);
   $rootScope.$digest();
   expect($rootScope.clicked).toBeFalsy();

   browserTrigger(element, 'click');
   expect($rootScope.clicked).toEqual(true);
 }));

Also im Falle deines scope.doStuff Funktion, ich würde nicht testen, was es ist tunSo sehr ich testen würde, was auch immer auf dem Bereich betroffen ist, und es hat anschließend DOM-Elemente bewirkt.


42
2017-11-16 15:59



Ich habe dieses Problem ein wenig anders gelöst.

Wenn Sie eine sehr einfache Link-Funktion in Ihrer Direktive haben und Sie nicht das 3. Argument benötigen (Attr), entfernen Sie einfach die Link-Funktion und weisen Sie die Direktive a zu Regler stattdessen.

app.directive('loadIndicator', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'blahblah/indicator.html',
    controller: 'LoadIndicatorController'
  };
});

Genau wie Sie die Argumente für den Bereich und das Element in der Link-Funktion einer Direktive haben, können diese zwei Argumente in einen einfach zu testenden Controller eingegeben werden $ Bereich und $ Element.

Wenn Sie in der Lage sind, Controller zu erstellen und diese Controller zu testen, wird dies sehr einfach.


1
2017-10-28 23:44



Bei Bedarf ist es möglich, die Link-Methode einer Direktive direkt zu testen. Siehe Unit-Tester des Winkeleis-Moduls: "Testen einer direktiven Konfiguration"

http://bverbist.github.io/angular-ice/#/unitTester

Beispielverwendung: https://github.com/bverbist/angular-ice/blob/master/app/components/icebank/bank-account-number-irective_link_test.js

In Ihrem Fall können Sie einen Verweis auf das Bereichsobjekt beibehalten, das Sie an die Verknüpfungsmethode der Anweisung übergeben, und dann können Sie die doStuff-Funktion für diesen Bereich direkt testen.


1
2017-08-03 21:59



Wie in einer Kommentarantwort auf @sqlexception angegeben. Sie müssen nur wirklich den Umfang der Richtlinie in den Griff bekommen, was nicht schwer ist. Was Sie nicht tun möchten, ist, Ihren Code zu ändern, um Ihre Tests zu erfüllen, wie es umgekehrt sein sollte.

Um den Gültigkeitsbereich der Direktive zu erhalten, einfach so kompilieren:

var element = $compile(<directive's html>).($scope) 

woher $scope ist mit deklariert $scope = $rootScrope.$new(). Jetzt können wir den Umfang isolieren, indem wir es tun element.scope()

Ich habe gerade einen kurzen Blogeintrag darüber hier gefunden Eine Verknüpfungsfunktion testen  mit einem Plünderer zu helfen:


0
2018-02-05 18:02