对使用 clientHeight 的指令进行单元测试

【问题标题】：Unit testing a directive that uses clientHeight对使用 clientHeight 的指令进行单元测试
【发布时间】：2016-05-06 18:27:39
【问题描述】：

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

【问题讨论】：

标签： angularjs unit-testing angularjs-directive

【解决方案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();
...

【讨论】：