Question

我有一个指令，用于监视具有动态高度的元素的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);
  }
};

Answer 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();
...

单元测试使用clientHeight的指令

1 个答案: