AngularJS：基于 Google Maps API 的单元测试应用程序答案

【问题标题】：AngularJS: unit testing application based on Google Maps APIAngularJS：基于 Google Maps API 的单元测试应用程序
【发布时间】：2012-12-01 09:03:17
【问题描述】：

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

任何工作示例——即使是最简单的单元测试——我们都将不胜感激。

【问题讨论】：

您是否创建了注入 Google Maps API 的服务？如果是这样，那么单元测试会很容易......如果不是，那么单元测试会更难。
@blesh - 谢谢你......但我恐怕不会跟随。
您的单元测试不应测试 google 是否存在或行为是否恰当。所以基本上你不要测试谷歌。您测试您的控制器、服务等是否向所需的 google 服务发送正确的调用。为此，在您的测试中，您不使用谷歌，而是使用您创建的一些“假”谷歌（所谓的模拟）。一个声称是谷歌地图服务的服务，但实际上很愚蠢，只返回你定义的结果。你知道这是怎么回事吗？

标签： javascript google-maps angularjs

【解决方案1】：

从您上面的 cmets 看来，您可能需要以下信息（如果您不这样做，请忽略）：这是我必须给您的很多解释，如果我输入它，这将相当于一本小说全部起来。因此，我将向您链接很多文章，这些文章会比我向您解释每篇文章做得更好。

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

如果您要在控制器中使用一些外部代码（Google Maps API、Facebook API 等），您希望通过将其包装在 service 和 @ 中来注入该代码987654323@.

此外，您可能希望 create a directive 获取实际的地图片段，因为 DOM 操作（例如 Google Maps API 中的 new Map() 所做的操作）应在指令中完成。然后你只需测试指令。有关测试指令的指导，我建议您查看Angular's directive tests in their Github repository as examples。基本上你 $compile 指令，并测试操作它的结果。

【讨论】：