Unit Test angularjs Direktive mit Uhr auf Elementhöhe

Question

Ich plane Unit Test eine Winkelanweisung mit Jasmin zu testen. Meine Richtlinie sieht wie folgt aus

angular.module('xyz.directive').directive('sizeListener', function ($scope) { 
return { 
    link: function(scope, element, attrs) { 
     scope.$watch(
      function() { 
       return Math.max(element[0].offsetHeight, element[0].scrollHeight); 
      }, 
      function(newValue, oldValue) { 
       $scope.sizeChanged(newValue); 
      }, 
      true 
     ); 
    } 
}; 
}); 

Meine Einheit Testfall ist als

describe('Size listener directive', function() { 

var $rootScope, $compile, $scope, element; 

beforeEach(inject(function(_$rootScope_, _$compile_) { 
    $rootScope = _$rootScope_; 
    $compile = _$compile_; 
    $scope = $rootScope.$new(); 

    element = angular.element('<span size-listener><p></p></span>'); 
    $compile(element)($scope); 
    $scope.$digest(); 
})); 

describe("Change in size", function() { 

    it("should call sizeChanged method", function() { 

     element[0].offsetHeight = 1; 
     $compile(element)($scope); 
     $scope.$digest(); 
     $scope.$apply(function() {}); 

     expect($scope.sizeChanged).toHaveBeenCalled(); 
    }); 

}); 
}); 

folgt Der Code funktioniert gut. Aber der Komponententest schlägt fehl. Die Watch-Funktion wird aufgerufen, aber das Element [0] .offsetHeight in der Uhr gibt immer 0 zurück. Wie können wir das Element aktualisieren, damit die Uhr die neue Höhe beobachten kann? Gibt es einen Weg dies zu testen, weil wir hier kein DOM haben. Bitte leiten Sie mich über Änderungen, die mit Unit-Test durchgeführt werden müssen.

Answer 1

Um die offsetHeight eines Elements zu erhalten, ist es auf der Seite sein muss, so müssen Sie es auf das Dokument anhängen:

it("should call sizeChanged method", function() { 
    element[0].style.height = '10px'; 

    $compile(element)($scope); 
    angular.element($document[0].body).append(element); 
    $scope.$apply(); 

    expect($scope.sizeChanged).toHaveBeenCalled(); 
}); 

By the way, ist offsetHeight so schreibgeschützte Eigenschaft style.height verwenden . Für weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Dieser Beitrag hat mir geholfen, die Antwort zu finden: Set element height in PhantomJS