In eckigen wie kann ich testen, eine Scope-Funktion wird in meiner Direktive aufgerufen?

Question

In eckigen wie kann ich testen, eine Scope-Funktion wird in meiner Richtlinie aufgerufen?

Ich bin mit Jasmin, Karma Läufer und js Unit-Tests mit kantiger Version 1.er

Dies ist meine Richtlinie Code:

angular.module("myApp.directives") 
    .directive("test", ["$rootScope", function($rootScope) { 
     return { 
      restrict: "E", 
      scope: { 
       "figures": "=" 
      }, 
      templateUrl: "templates/components/test.html", 
      link: function(scope) { 

       scope.init = function() { 
        if (scope.figures !== undefined) { 
         for (let i = 0; i < scope.figures.length; i++) { 
          scope.figures[i].isModalVisible = false; 
         } 
        } 
       }; 

       scope.init(); 
      } 
     }; 
    }]); 

Das ist mein Unit-Test:

Dies ist der Fehler, den ich derzeit bekomme: "Erwartet Spion-Init wurde angerufen. "

Answer 1

Erstens: Ihre spyOn(scope, "init") und expect(scope, "init") sind beide auf dem falschen Umfang durchgeführt. Sie fügen init innerhalb Direktive zu isolierten Bereich hinzu, so sollte es spyOn(otherScope, "init") und expect(otherScope, "init") sein.

Zweitens wird der erste Punkt immer noch fehlschlagen. :) Der Grund ist, dass init() nur einmal ausgeführt wird, wenn link() aufgerufen wird, was auf dem Bereich. $ Digest() in Ihrem beforeEach-Block geschieht - aber Sie geben dort keine Daten ein. Sie geben es später im Test an, wenn es zu spät ist, da die Direktive bereits im ersten Digest-Zyklus verknüpft wurde und init() in Ihrem Test nicht auf dem zweiten scope.$digect() aufgerufen wird. Um dies zu beheben, müssen Sie den ersten Digest-Zyklus verschieben, bis Sie alle Daten im Testfall selbst bereit haben.

Und drittens müssen Sie zuerst HTML-Element an das DOM anhängen und erst dann kompilieren. In solch einem einfachen Fall wird es wahrscheinlich funktionieren, aber wenn irgendetwas in deinem Element Direktiven irgendwo auf Elternelementen benötigt (dh Direktive innerhalb hat eine Konfiguration wie require: "^something"), dann wird das Kompilieren fehlschlagen: Es gibt nur keine Elternelemente, die benötigte Entitäten für dein neues Element enthalten Sie fügen es tatsächlich in das DOM ein.

UPDATE

Sie können dieses Szenario so nicht testen. Der richtige Zeitpunkt für das Installieren von Spion wäre nach dem Hinzufügen von init() zu dem Bereich, aber vor dem Aufruf, aber das Problem ist, dass dieser Zeitpunkt innerhalb der Direktive seit Funktionsaufruf direkt nach dem Hinzufügen von Funktion zu Bereich ausgelöst wird. Da dieser Punkt nicht im Testcode enthalten ist, haben Sie keine Möglichkeit, den Test auf diese Weise zu schreiben.

Aber betrachten wir diese Situation aus einem anderen Blickwinkel. Was macht init()? Es setzt Flags in Ihrem Datenarray zurück. So können Sie diese Flags mit true Werte vor$digest() initialisieren, und Sie können überprüfen, ob diese Flags zurückgesetzt wurden oder nicht nach aufrufen $ Digest(). Auf diese Weise können Sie Ihre Daten einfach vorbereiten und Ergebnisse bestätigen. Ihr Test wird Ihnen klar sagen können, ob init() tatsächlich aufgerufen wurde, und sogar mehr - wenn es tat, was es tun sollte.