Единица измерения угловой директивы с часами на высоте элемента

Question

Я планирую модульное испытание угловой директивы с использованием жасмина. Моя директива выглядит следующим образом

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

Мой блок тест выглядит следующим образом

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(); 
    }); 

}); 
}); 

код работает отлично. Но единичный тест терпит неудачу. Функция watch вызывается, но элемент [0] .offsetHeight в часах всегда возвращает 0. Как мы можем обновить элемент, чтобы часы могли наблюдать новую высоту. Есть ли способ проверить это, потому что у нас на самом деле нет DOM. Прошу проинструктировать меня об изменениях, которые необходимо выполнить с помощью модульного теста.

Answer 1

Чтобы получить offsetHeight элемента, он должен быть на странице, так что вам нужно, чтобы присоединить его к документу:

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(); 
}); 

Кстати, offsetHeight это свойство только для чтения, так что используйте style.height , Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Это сообщение помогло мне найти ответ: Set element height in PhantomJS