[question] Testing angular-google-maps apps: mocking the module google-maps

[LeandroLovisolo]

Hi all,

I'm trying to test a single-module application which lists google-maps as one of its dependencies. I'm using the Karma test runner. All the required dependencies are included in my karma.conf.js file.

Right now I'm getting the following error message:

Uncaught ReferenceError: google is not defined
    at /home/leandro/myproject/app/bower_components/angular-google-maps/dist/angular-google-maps.js:5089

I'm guessing this is because the google maps API code isn't being loaded in the browser.

So my question is: what is the recommended way to test a module that depends on google-maps? Should I mock the module google-maps or is there a simpler way to do this?

I'm using angular-google-maps 1.0.9.

Thanks.

[nmccready]

So your trying to test a directive visually instead of just testing it internal code correct? If you really need the directive loaded into the DOM then you will need to modify the Jasmine/Istanbul template to have an angular app init. So basically you would need to create a spec/template/ directory with a testing controller, and testing template. Easiest thing to do is to take the template generated by Jasmine or Istanbul and modify to make it work.

Then in the runt file you tell it to use the specific template.

Key Grunt file code for vendor script loading.

vendor: ["http://maps.googleapis.com/maps/api/js?sensor=false&language=en",
                             "bower_components/jquery/jquery.js",
                             "bower_components/angular/angular.js", "bower_components/angular-mocks/angular-mocks.js",
                             "bower_components/underscore/underscore.js",
                             "dist/angular-google-maps.js"]

[nmccready]

We have not done this yet in our specs yet because we are trying to keep the directive really dum where most of the functionality is in the factories and services. This make testing the underlying logic way easier and a real unit test. Where loading the UI becomes more of a integration test.

I know for one this was possible (your needed scenario) as it used to be in the project but it became dead code.

[nmccready]

And here it is on version 1.0.0 https://github.com/nlaplante/angular-google-maps/blob/1.0.0/spec/templates/angular-google-maps.html .

https://github.com/nlaplante/angular-google-maps/blob/1.0.0/Gruntfile.js#L164

[nmccready]

https://github.com/nlaplante/angular-google-maps/blob/1.0.0/spec/templates/angular-google-maps.html#L108-L111

[LeandroLovisolo]

Thanks, @nmccready.

Adding "http://maps.googleapis.com/maps/api/js?sensor=false&language=en" to my karma.conf.js file did the trick.

So your trying to test a directive visually instead of just testing it internal code correct?

No, I don't need the directive loaded into the DOM. I'm just testing a bunch of controllers that live on the same module that depends on google-maps. The tests don't even know about google-maps. The only reason I'm loading angular-google-maps.js in my karma.conf.js file is because if I don't, I get the following error:

    Error: [$injector:modulerr] Failed to instantiate module myApp due to:
    Error: [$injector:modulerr] Failed to instantiate module google-maps due to:
    Error: [$injector:nomod] Module 'google-maps' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

If I include angular-google-maps.js in my karma.conf.js file I get the error in my original comment (Uncaught ReferenceError: google is not defined ....)

So my two options are either commenting out the google-map dependency on my module everytime I run my tests, which works, or adding the Google Maps API URL to karma.conf.js, which also works.

Ideally I would like my tests to be self contained, i.e. not depend on an external URL. This is to keep my unit tests fasts and to be able to work offline. If I could just mock the global google variable somehow so I don't get the Uncaught ReferenceError: google is not defined error, that would be best. Any ideas?

Thanks again.

[nmccready]

Just put a check on your beforeEach for

beforeEach ->
if (google?)
   tempG = google
google = mock

afterEach or afterAll ->
  google = tempG

On 2/21/14, Leandro Lovisolo notifications@github.com wrote:

Thanks, @nmccready.

Adding "http://maps.googleapis.com/maps/api/js?sensor=false&language=en" to
my karma.conf.js file did the trick.

So your trying to test a directive visually instead of just testing it
internal code correct?

No, I don't need the directive loaded into the DOM. I'm just testing a bunch
of controllers that live on the same module that depends on google-maps.
The tests don't even know about google-maps. The only reason I'm loading
angular-google-maps.js in my karma.conf.js file is because if I don't, I
get the following error:

  Error: [$injector:modulerr] Failed to instantiate module myApp due to:
  Error: [$injector:modulerr] Failed to instantiate module google-maps due
to:
  Error: [$injector:nomod] Module 'google-maps' is not available! You either
misspelled the module name or forgot to load it. If registering a module
ensure that you specify the dependencies as the second argument.

If I include angular-google-maps.js in my karma.conf.js file I get the
error in my original comment (Uncaught ReferenceError: google is not defined ....)

So my two options are either commenting out the google-map dependency on
my module everytime I run my tests, which works, or adding the Google Maps
API URL to karma.conf.js, which also works.

Ideally I would like my tests to be self contained, i.e. not depend on an
external URL. This is to keep my unit tests fasts and to be able to work
offline. If I could just mock the global google variable somehow so I
don't get the Uncaught ReferenceError: google is not defined error, that
would be best. Any ideas?

Thanks again.

---

Reply to this email directly or view it on GitHub:
#270 (comment)

Nicholas McCready

Personal Email: nmccready@gmail.com
Web site: http://codemonkeyseedo.blogspot.com/
Twitter: nmccready https://twitter.com/#!/nmccready

[archanasv]

Hi. I'm trying to integrate google maps in my project i'm getting same error as
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module google-maps due to:
Error: [$injector:nomod] Module 'google-maps' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Can you please help me to integrate maps in my project
Thanks

[nmccready]

@archanasv your project or are you trying to add specs for it? Your question is unrelated to this thread so please post a new question with a jsbin w/ your issue.

[sentient]

I know it has been asked 5 times already, but I'm still a bit lost where I have to define the
vendor: [
"http://maps.googleapis.com/maps/api/js?sensor=false&language=en"
],

Is this a karma option or a karma-grunt option?

My project started of from ngBoilerplate. They have a karma-unit.tpl.js but there is no vendor attribute.

Code works fine. It is just killing all my other unittests because of
can't find variable google

Running "karma:continuous" (karma) task
INFO [karma]: Karma v0.11.14 server started at http://localhost:9018/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket JyCwCU-25oyxxFlLj8Vz with id 22012928
PhantomJS 1.9.7 (Linux) ERROR
ReferenceError: Can't find variable: google

---

See answer below what worked for me

[34r7h]

what was the actual answer to this issue?

[astik]

Hi all,
For those who wants to have self-contained tests in their application and don't need to test the google map API, you can mock it.

To do so, you just have to load mock in your karma conf, for example :

    files: [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/underscore/underscore-min.js',
      'test/mocks/**/*.js',
      'app/bower_components/angular-google-maps/dist/angular-google-maps.js',
      'app/scripts/*.js',
      'app/scripts/**/*.js',
      'test/spec/**/*.js'
    ],

Then you need to create a mock into test/mocks/maps.googleapis.com-maps-api.js :

var google = {
    maps : {
        OverlayView : function () {
        },
        Marker : function () {
        },
        InfoWindow : function () {
        }
    }
};

Your google map mocked implementation wont do much but you'll be safe to do your own interesting tests.