title: Testing Google Maps with Jasmine
body: <p>I have an application which relies on Google Maps, and I am writing unit tests using Jasmine and Karma. I have a fake Google.maps.Map instance which I use to test my code:</p>
  
  <p><em>myFunction</em></p>
  
  <pre><code>var myFunction(map) {
    var foo = false;
    var projection = map.getProjection();
    // ... do dome stuff
    return foo;
  }
  </code></pre>
  
  <p><em>tests</em></p>
  
  <pre><code>describe('myFunction() {
  
   var fakeMap = function() {
      var map;
      // create fake DOM element for map
      mapCanvas = document.createElement("div");
      mapCanvas.setAttribute("id", 'map-canvas');
      // map instance
      map = new google.maps.Map(mapCanvas);
      return map
    }
  
    it("should test my function", function () {
      var map = fakeMap();
      foo = myfunction(map);
      expect(foo).toBe(true);
    })
  
  });
  </code></pre>
  
  <p>However, this fails as in <code>myFuntion</code>,  <code>projection</code> is <code>undefined</code>.</p>
  
  <p>I <a href="https://stackoverflow.com/questions/3710745/google-maps-v3-overlayview-getprojection">read</a> that the google maps instance needs to be idle before <code>getProjection</code> will return correctly, so I tried this:</p>
  
  <pre><code>it("should test my function", function () {
    var map = fakeMap();
    google.maps.event.addListener(map, 'idle', function() {
      foo = myfunction(map);
      expect(foo).toBe(true);
    });
  });
  </code></pre>
  
  <p><strong>EDIT</strong> and this:</p>
  
  <pre><code>it("should test my function", function () {
    var map = fakeMap();
    google.maps.event.addListener(map, 'projection_changed', function() {
      foo = myfunction(map);
      expect(foo).toBe(true);
    });
  });
  </code></pre>
  
  <p>But in this case the test is never executed, presumably because the map never reaches <code>idle</code> or <code>projection_changed</code> state.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I also tried to trigger the event manually:</p>
  
  <pre><code>it("should test my function", function () {
    var map = fakeMap();
    google.maps.event.addListener(map, 'projection_changed', function() {
      foo = myfunction(map);
      expect(foo).toBe(true);
    });
    google.maps.event.trigger(map, 'projection_changed');
  });
  </code></pre>
  
  <p>How can I test with a <code>Map</code> instance which will return all it's methods as expected in the functioning application?</p>