在 Angular 中测试具有多个依赖项的控制器

Question

我正在学习为我的 Angular 应用程序编写单元测试。我的控制器对资源、工厂、服务等有几个依赖项

angular.module('app').controller('Ctrl1',['$scope','Factory1','Factory2','Resource1','Resource2' ... and so on 

Resource1、Resource2 等当然是从服务器获取数据。其中一些资源用于从服务器获取数据并初始化 $scope。

在网上阅读了无数教程后，我对编写 jasmine 测试的正确方法有一些疑问

1. 在 jasmine 测试的 beforeEach 部分中，我应该立即提供所有依赖项还是应该只提供我关心的测试项

2. 我要测试的是，调用 Resource1 并获取一些数据并初始化 $scope 的某些部分，然后调用 Resource2 并获取一些数据并初始化范围的其他部分等

执行上述操作的正确方法是什么。我的意思是我实际上是想在测试中获取数据还是应该使用一些模拟 http 服务。我知道教程提到我们应该使用模拟 http 服务，但是这将如何测试我的控制器，因为我实际上并没有获取正确的数据。

这部分真的很令人困惑，我还没有找到一篇可以清楚解释这一点的博客/文章（我可能会在弄清楚之后才写一篇。我相信其他人也很困惑）

Answer 1

在哪里提供依赖项

您应该在第一个 beforeEach 语句中提供所有依赖项。我用SinonJs 模拟/伪造我的。这可以帮助您利用 Angular 的依赖注入来隔离应用程序的每个部分。永远不要调用依赖项并期望它的实际实例在单元测试中返回数据，因为这会增加代码的耦合并使其变得更加脆弱。

模拟资源调用

对于资源调用，我只是创建了一个包含承诺和其他内容的虚假资源对象。然后，您可以解决或拒绝这些承诺，并提供虚假数据来测试您的控制器逻辑。

在下面的小插曲中，我基本上模拟了整个承诺链。您只需告诉您的测试拒绝或解决这些承诺，假装对资源的成功或失败调用。然后，您必须确保您的示波器循环使用scope.$apply()。刚才我居然忘了做这件事给我带来了不小的麻烦。

结论

这里是Plunk。如果您需要查看我如何测试存储库中的实际资源代码，请告诉我。在这些服务中，我必须实际模拟 HTTP 调用，而 Angular 使这非常容易。

我不确定这是否是“最佳实践”，但它对我有用。我通过查看其他人的源代码和观看此 Pluralsite 视频 AngularJS Fundamentals 学习了基础知识，其中只有一小部分是关于测试的。

有用的资源

• Testing AngularJS Directives。这是 Angular 中最难测试和理解的事情。或者至少对我来说是这样。

• 这个是Dependency Injection in Angular。我有标记 他们从哪里开始谈论单元测试。

• 这个Plural Sight Course 让我开始测试 JavaScript。如果您是新手，对学习 Jasmine 非常有帮助。

• 如果您想查看 Jasmine 测试的实际效果，AngularJS Github 存储库非常有用。这是一组模拟 HTTP 后端的tests。