How to handle google maps events in jasmine test framework

Question

I am trying to write Javascript tests for Google Maps using the jasmine framework. What I am trying to do is initiate the map and change the bounds (zoom out) and test that the map was correctly zoomed out.

The problems I am encountering are that jasmine doesn't seem to have any way to handle events. Jasmine has the spyOn() method that looks for a usage of a method (not an event). There is also the waits() method in jasmine that waits a specific amount of time. None of these methods are spot on for working with events. Does anybody have any experience with events in jasmine?

The code I'm working with:

describe('Map view', function () {
    beforeEach(function () {
        $('body').append("<div data-role='page' id='page-map'><div id='map_canvas'></div></div>");

        this.view = new MapView({el: $('#map_canvas')});
    });

    afterEach(function () {
        $('body div#page-map').remove();
    });

    describe('zoom to a new bound in the map', function () {
        it('should set map bounds correctly', function () {
            this.view.zoomToBounds(this.fixtures.Locations.valid.bounds);
    
            google.maps.event.addListener(this.view.map, 'bounds_changed', function() {
                // expect() doesn't work in this context.. (ex: expect(5).toEqual(1) will pass)
                expect(this.getBounds().getSouthWest().lat()).toBeGreaterThan(self.fixtures.Locations.valid.bounds.minLat);
                expect(this.getBounds().getSouthWest().lng()).toBeGreaterThan(self.fixtures.Locations.valid.bounds.minLng);
                expect(this.getBounds().getNorthEast().lat()).toBeLessThan(self.fixtures.Locations.valid.bounds.maxLat);
                expect(this.getBounds().getNorthEast().lng()).toBeLessThan(self.fixtures.Locations.valid.bounds.maxLng);
            });
        });
    });
});

The backbone view will initiate, and the Google map will render. The zoomToBounds method works fine, but it's when I want to check the result that I run into some problems. Inside the google.maps.event.addListener() clause the (jasmine) expect() calls doesn't seem to work .

The best way to do this would of course be to use jasmine methods for catching the event directly, but I haven't figured out a way to do this.

Anybody here has any idea on how to handle this?

Answer 1

The best way to do this would of course be to use jasmine methods for catching the event directly

Have you tried using the jasmine spies to spy on the prototype of the object that has the events bound on it? I think your events might be bound before the spies are setup:

Here is a simple example (in coffeescript)

  it 'calls render when a model is added to the collection', ->
    spyOn(MyView.prototype, 'render')
    view = new MyView({
      collection : new Backbone.Collection([])
    })
    view.collection.add({})
    expect(view.render).toHaveBeenCalled()