AngularJS指令单元测试时父元素未定义导致height调用报错

这个问题我之前也碰到过，本质上是单元测试环境里，你直接编译指令元素时，它默认没有嵌套的父元素结构，导致element.parent().parent()返回的是空的jQuery/jQLite对象，调用height()自然会报错。下面给你两种靠谱的解决思路：

1. 测试前模拟真实的DOM嵌套结构 #

在单元测试里，手动创建两层父元素，把指令元素嵌套进去，再编译整个DOM结构，这样就能模拟真实环境中的层级关系了。举个具体的测试代码例子：

describe('yourDirective', function() {
  var $compile, $rootScope;

  // 加载指令所在的模块
  beforeEach(module('yourAppModule'));

  // 注入需要的服务
  beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('should set element height to grandparent\'s height', function() {
    // 第一步：创建模拟的三层DOM结构
    var grandparent = angular.element('<div style="height: 300px;"></div>'); // 第二层父元素，设置固定高度
    var parent = angular.element('<div></div>'); // 第一层父元素
    var directiveElem = angular.element('<your-directive></your-directive>'); // 你的指令元素

    // 第二步：组装层级关系
    parent.append(directiveElem);
    grandparent.append(parent);

    // 第三步：编译整个DOM结构并触发digest
    $compile(grandparent)($rootScope);
    $rootScope.$digest();

    // 第四步：验证结果
    expect(directiveElem.height()).toBe(300);
  });
});

这种方法最贴近真实场景，能准确测试指令的逻辑是否正常工作。

2. 在指令中添加防御性判断 #

为了让指令本身更健壮，即使在父元素不存在的场景下（比如测试或者意外的DOM结构）也不会报错，可以在link函数里先检查父元素是否存在：

angular.module('yourAppModule').directive('yourDirective', function() {
  return {
    restrict: 'E',
    scope: {}, // 你的隔离作用域
    link: function(scope, element) {
      // 先获取祖父元素，再判断是否存在
      var grandparent = element.parent().parent();
      if (grandparent.length > 0) {
        element.height(grandparent.height());
      }
      // 可选：如果父元素不存在，可以添加默认高度或者日志提示
      // else {
      //   element.height('100%');
      //   console.warn('Grandparent element not found for yourDirective');
      // }
    }
  };
});

这种方式既能避免测试报错，也能让指令在异常DOM结构下有更好的容错性。

小提示 #

如果你的指令依赖于父元素的某些样式或属性，测试时尽量模拟和真实环境一致的条件（比如设置固定高度），这样测试结果才更可信。

内容的提问来源于stack exchange，提问作者Bijay Timilsina