AngularJS: unit testing application based on Google Maps API

Question

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.

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

Answer 1

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.

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.

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.

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.