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

Posted 2023-02-19

【中文标题】测试指令元素时未定义父级

【英文标题】：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。

【参考方案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);