javascript - AngularJS:基于 Google Maps API 的单元测试应用程序

Question

我需要为大量使用 Google Maps API v3(计算距离、在 map 中创建标记等)的 AngularJS 应用程序编写单元测试，并且我知道我应该以某种方式创建或模拟 map Canvas ，以便我可以对函数进行单元测试使用 Google Maps API 并在该 Canvas 上创建标记，但我不确定该怎么做，而且我找不到任何关于如何对基于 Google Maps API 的应用程序进行单元测试(最好使用 AngularJS/Jasmine)的好的教程/资源。

任何像这样的单元测试的工作示例——即使是最简单的示例——将不胜感激。

Answer 1

从您上面的评论来看，您似乎可能需要以下信息(如果您不需要，请忽略):这是我必须给您的大量解释，如果我输入它，将相当于一本小说都起来了因此，我将给您链接很多文章，这些文章会比我向您解释每篇文章做得更好。

Angular 就是关于 dependency injection 的.如果您正在进行任何单元测试，依赖注入(inject)是至关重要的。为了完整起见，我假设您不知道依赖注入(inject)是什么，并提供一个快速解释(如果您已经知道，请原谅我):依赖注入(inject)正在设计您的代码，以便可以通过争论。依赖项可以是它所在的代码块外部的任何代码。这就是为什么在 Angular 中你必须在你的 Controller 中包含 $scope，或者可能是 $http 或 $resource...因为它们被注入(inject) 进入你的 Controller 。在单元测试中，这允许您模拟这些对象并将它们传递进来，这样您就可以以可控的方式查看测试结果。

如果您打算在您的 Controller 中使用一些外部代码(Google Maps API、Facebook API 等)，您希望通过将代码包装在 service 中来注入(inject)该代码和 injecting it into your controller .

此外，您可能需要 create a directive对于实际的 map block ，DOM 操作(例如 Google Maps API 中的 new Map() 所做的操作)应该在指令中完成。然后你只需测试指令。有关测试指令的指导，我建议查看 Angular's directive tests in their Github repository as examples .基本上你 $compile 指令，并测试操作它的结果。