Модульное тестирование директивы, использующей clientHeight

У меня есть директива, которая отслеживает высоту клиента элемента с динамической высотой и устанавливает переменную области в это значение, но я не могу понять, как ее вообще тестировать. Все, что я сделал в модульных тестах, clientHeight всегда возвращает 0. Я пробовал несколько различных решений, которые я читал для подобных проблем здесь, но ни одно из них не работает.

Вот директива:

return {
  link: function (scope, element, attrs) {
    scope.$watch(function () { return element[0].clientHeight; },
      function(newValue, oldValue) {
        if (newValue !== oldValue) {
          scope.$parent.headerHeight = newValue;
        }
      }, true);
  }
};

1 ответ

  1. Размеры отсоединенного элемента DOM равны 0. Элемент должен быть добавлен к DOM, прежде чем его размеры будут измерены и сняты в конце испытания:

    element = $compile('<directive>')(scope);
    angular.element(document.body).append(element);
    scope.$digest();
    ...
    element.remove();
    

    Чтобы эффективно протестировать его отдельно от DOM (который является доменом тестов e2e, а не модульных тестов) анонимная функция наблюдения должна быть подвержена области

    scope._getHeight = function () { return element[0].clientHeight; };
    scope.$watch('_getHeight()', ...);
    

    и насмехались, потому что это директивная логика, которая тестируется, а не механизм визуализации браузера:

    element = $compile('<directive>')(scope);
    spyOn(scope, '_getHeight').and.returnValue(100);
    scope.$digest();
    ...