单元测试角度指令的最佳实践答案

【问题标题】：Best practices for unit testing angular directives单元测试角度指令的最佳实践
【发布时间】：2013-07-13 16:13:39
【问题描述】：

我正在使用 Jasmine 和 Karma 作为我的测试运行器为 AngularJS 中的指令编写一些单元测试。当我这样做时，我想知道我是否遵循了设置它的最佳方法，并希望有人可以帮助我。

如果我的指令通过 templateUrl 使用模板，最好是导入实际模板，这已被证明有点棘手，还是使用 $templateCache 插入模板的模拟并做出我的断言?对于单元测试，在我看来，创建模拟是最好的选择，因为它避免了引入额外的资源，而这些资源会使单元测试变得混乱。

另外，我在单个 DOM 元素中搜索时遇到问题，并且一直在使用 element.text() 来搜索绑定到 DOM 的内容。我见过的很多示例都使用这种方法来搜索内容，但我想知道是否有一种方法可以使用诸如 getElementById() 之类的方法来隔离 DOM 的各个部分并根据小部分进行断言一次。

假设我有以下元素作为我的模板：

    <div>
    <div id = "one">data1</div>
    <div id = "two">data2</div>
    </div>

然后我将它编译成一个 angular.element。如果我执行类似 element.getElementById("one").innerHTML 之类的操作，它不会做任何事情。 element.text("data1") 会找到值，但它不是很具体。

谢谢

【问题讨论】：

标签： unit-testing angularjs directive

【解决方案1】：

问题是该指令旨在将用户、DOM 和范围绑定在一起。所有作用域处理都应在控制器内完成（可能通过controller: 属性绑定到您的指令）。

因此，您应该为您的控制器单独进行单元测试，甚至无需触及指令部分。然后你应该测试你的指令。由于它主要是关于 DOM 处理，您可能想要测试您的真实模板，而不是模拟模板。

为了获取元素，您可以根据需要使用find() 方法。如果您根本不使用 jQuery，您可以在单元测试中加载它（在您的 AngularJs 依赖项之前）并使用 element.find('#one')，例如。所有 AngularJs elements are extended jQuery elements，如果您的项目中没有 jQuery，那么 Angular 使用 jQLite，您将不会实现选择器。

另外，看看here。我在此答案中提供了有关如何测试指令的更多详细信息。

【讨论】：