AngularJS：基于谷歌地图API的单元测试应用程序 [英] AngularJS: unit testing application based on Google Maps API

问题描述

我需要编写一个大量使用谷歌地图API V3（计算距离，创造了地图等标记）AngularJS应用单元测试，我知道我应该以某种方式建立或模拟地图画布，所以我可以单元测试函数使用谷歌地图API，并创建画布上的标记，但我不知道该怎么做，我无法找到如何单元测试任何好的教程/资源基于谷歌应用程序（$ p与AngularJS /茉莉花pferably $）地图API。

I need to write unit tests for AngularJS application which heavily uses Google Maps API v3 (calculating distances, creating markers in the map etc.) and I know that I should somehow create or mock map canvas so I could unit test functions that use Google Maps API and create markers on that canvas but I am not sure how to do that and I was not able to find any good tutorial/resource on how to unit test (preferably with AngularJS/Jasmine) applications based on Google Maps API.

任何工作的范例 - 即使是最简单的 - 这样的单元测试将是极大的AP preciated

Any working example - even the simplest one - of unit tests like this would be greatly appreciated.

推荐答案

从上面您的意见，好像也许你需要以下信息（如果你不请无视）：这是解释了很多我得给你，如果我输入这一切将达到一本小说。因此，我只是比我的每一块给你解释给你链接的文章，会做一个更好的工作很多。

From your comments above, it seems like maybe you need the following information (if you don't please disregard): This is a LOT of explanation I'd have to give you that will amount to a novel if I typed it all up. As such, I'm just going to link you a LOT of articles that will do a much better job than I can of explaining each piece to you.

角是所有关于依赖注入。依赖注入是的重要的如果你正在做的任何单元测试。为了完整起见，我会假设你不知道依赖注入是什么，以及提供一个快速的解释（原谅我，如果你已经知道这一点）：依赖注入设计你的code，这样任何外部的依赖关系可以被注入通过论证。一个依赖是任何code外部code它在块。这就是为什么在角你必须包括在控制器$范围，或者$ HTTP或$资源......因为这些正在的注入的到控制器。在单元测试，这可以让你来模仿这些对象，并在通过他们，这样你就可以以可控的方式看测试结果。

Angular is all about dependency injection. Dependency injection is vital if you're doing any unit testing. For sake of completeness I'll assume you don't know what dependency injection is and provide a quick explanation (forgive me if you already know this): Dependency injection is designing your code such that any external dependencies can be "injected" via an argument. A dependency would be any code external to the block of code it's in. This is why in Angular you have to include $scope in your controllers, or maybe $http or $resource... because those are being injected into your controller. In unit testing, this allows you to mock up those objects and pass them in, so you can see test outcomes in a controlled way.

如果你打算在你的控制器使用一些外部code（谷歌地图API，Facebook的API，等等），你要的注入的那个code。通过在其包装一个服务并的将其注入控制器。

If you're going to use some external code (Google Maps API, Facebook API, etc) in your controller, you want to inject that code by wrapping it in a service and injecting it into your controller.

此外，您还可以创建实际的地图作为一块DOM操作指令（如什么所做新地图（）在谷歌地图API）应在指令完成。然后，你只是测试指令。有关测试指令指导下，我想建议你到在他们的Github的版本库角的指令测试范例。基本上你$编译指令，并测试其操纵的结果。

Also, you may want to create a directive for the actual map piece as DOM manipulation (such as what's done by new Map() in the Google Maps API) should be done in the directive. Then you'd just test the directive. For guidance on testing directives, I'd advise looking to Angular's directive tests in their Github repository as examples. Basically you $compile the directives, and test the outcomes of manipulating it.

这篇关于AngularJS：基于谷歌地图API的单元测试应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！