测试指令元素时未定义父级答案

【问题标题】：Parent not defined when testing a directive element测试指令元素时未定义父级
【发布时间】：2018-10-21 15:52:15
【问题描述】：

我有一个 angularjs 指令，它只是在链接函数中将元素的高度分配为其第二个父元素的高度（类似于element.height = element.parent().parent().height）。

但是，当我在单元测试中针对隔离范围创建并尝试编译指令元素时，我得到 element.parent().parent().height 不是函数。我想在编译时父级是不确定的。

如何使用相同或不同的方法解决？谢谢。

【问题讨论】：

这个element.parent().parent().heightcode smell。使用这种方法，您会强制您的子指令依赖于父元素的标记和结构，这使得不可重用且易于测试，正如我们从您的问题中看到的那样。
当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。见How to create a Minimal, Complete, and Verifiable example。

标签： javascript angularjs angularjs-directive

【解决方案1】：

您可以使用虚假的高度响应来模拟 element.parent().parent().height 调用，并检查您的元素的高度是否设置为该值。

我要做的是实现一个函数并将该函数作为单元测试的“排列”步骤的一部分调用。

mockGetHeightFromParent = function (mockHeight) {
    spyOn(element, 'parent').and.returnValue({
        parent: function () {
            return mockHeight;
        }
    )};
}

it("should use height of the parent's parent", function () {
    // Arrange
    mockGetHeightFromParent(1337);

    // Act
    // Instantiate directive

    // Assert
    expect(element.height).toEqual(1337);
}

【讨论】：