Question

I’m having difficulties in writing tests for a page which loads a google maps. I’m always getting the error

” Cannot read property ‘offsetWidth’ of undefined “

which means that when the map script loads the div that i use to hold the map probably has already been removed (i’m setting width and height in the style property of the div to be 100% sure that it has a width and height).

I’m loading my gmaps script in a pretty complex way that involves requirejs but i don’t think that the issue is related to that (even if i get an error from requirejs when i run the specRunner, but everything works fine live).

How should i test this?

Answer 1

I used waitFor() and it worked.

describe( "Test suite for the 'Event location' Box", function() {
    it( "Should show the map when the appropriate checkbok is clicked and should hide it when clicked again", function() {
        // Wait for the loading of the gmaps. This is simply when the <div> we use as a container has some html
        waitsFor(function() {
            return $('#ai1ec_map_canvas').html() !== '';
        }, "gmaps never loaded", 15000 );
        runs( function() {
            $( "#ai1ec_google_map" ).click();
            expect( $( '#ai1ec_map_canvas' ) ).toBeVisible();
            $( "#ai1ec_google_map" ).click();
            expect( $( '#ai1ec_map_canvas' ) ).not.toBeVisible();
        } );
    } );
} );