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.

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.

• javascript
• google-maps
• angularjs

• 3 Did you create a service to inject Google Maps API? If so, then the unit test would be easy... if not, the unit test will be much harder. – Ben Lesh Commented Dec 2, 2012 at 3:39
• @blesh - thank you... but I am afraid I don't follow. – keepsea Commented Dec 2, 2012 at 21:25
• 1 Your unit test shouldn't test if google is alive or behaves approprietly. So basically you are not to test Google. You test if your controller, service, etc. sends the right calls to the google services needed. To do so, in your test you do not use google but some "fake" google that you create (a so called mock). A service that claims to be the google map service but is actually quite stupid and only returns results defined by you. You get where this is going? – Andresch Serj Commented Mar 6, 2014 at 9:39

1 Answer 1

From your ments 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 pleteness 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 outes 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 $pile the directives, and test the outes of manipulating it.