fixes #15

dist/components/__tests__/gmaps-test.js

@@ -1,13 +1,12 @@
 'use strict';
 
 jest.dontMock('../../mixins/listener');
+jest.dontMock('../../utils');
 jest.dontMock('../gmaps');
 
 describe('Gmaps', function () {
 
-  var React = require('react/addons');
-  var TestUtils = React.addons.TestUtils;
-  var Gmaps = require('../gmaps');
+  var React = undefined;
 
   var gmaps = undefined;
 
@@ -21,6 +20,11 @@ describe('Gmaps', function () {
   var onMapCreated = jest.genMockFunction();
 
   beforeEach(function () {
+    React = require('react/addons');
+    var TestUtils = React.addons.TestUtils;
+    var Utils = require('../../utils');
+    Utils.addScript = function () {};
+    var Gmaps = require('../gmaps');
     delete window.google;
     var Child = React.createClass({
       displayName: 'Child',

dist/components/gmaps.js

@@ -24,6 +24,10 @@ var _mixinsListener = require('../mixins/listener');
 
 var _mixinsListener2 = _interopRequireDefault(_mixinsListener);
 
+var _utils = require('../utils');
+
+var _utils2 = _interopRequireDefault(_utils);
+
 var Gmaps = _react2['default'].createClass({
   displayName: 'Gmaps',
 
@@ -38,7 +42,7 @@ var Gmaps = _react2['default'].createClass({
   },
 
   componentDidMount: function componentDidMount() {
-    this.loadMaps();
+    _utils2['default'].loadMaps(this.props.libraries, this.mapsCallback);
   },
 
   componentWillUnmount: function componentWillUnmount() {
@@ -49,22 +53,7 @@ var Gmaps = _react2['default'].createClass({
     return this.map;
   },
 
-  loadMaps: function loadMaps() {
-    if (!window.google) {
-      window.mapsCallback = this.mapsCallback;
-      var src = 'https://maps.googleapis.com/maps/api/js';
-      src += '?callback=mapsCallback';
-      src += '&libraries=' + (this.props.libraries || '');
-      var script = document.createElement('script');
-      script.setAttribute('src', src);
-      document.head.appendChild(script);
-    } else {
-      setTimeout(this.mapsCallback);
-    }
-  },
-
   mapsCallback: function mapsCallback() {
-    delete window.mapsCallback;
     this.createMap();
     this.addListeners(this.map, _eventsMap2['default']);
   },

dist/utils/__tests__/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+jest.dontMock('../../utils');
+
+describe('Utils', function () {
+
+  var Utils = undefined;
+
+  beforeEach(function () {
+    delete window.google;
+    delete window.mapsCallback;
+    Utils = require('../../utils');
+  });
+
+  it('registers the callbacks if google does not exist', function () {
+    expect(Utils.callbacks.length).toBe(0);
+    Utils.loadMaps(null, function () {});
+    expect(Utils.callbacks.length).toBe(1);
+  });
+
+  it('adds the script if not added', function () {
+    expect(Utils.added).toBe(false);
+    Utils.loadMaps(null, function () {});
+    expect(Utils.added).toBe(true);
+  });
+
+  it('fires the callback if google exists', function () {
+    window.google = {};
+    var callback = jest.genMockFunction();
+    Utils.loadMaps(null, callback);
+    jest.runAllTimers();
+    expect(callback).toBeCalled();
+  });
+
+  it('fires the callbacks on mapsCallback', function () {
+    var callback = jest.genMockFunction();
+    Utils.loadMaps(null, callback);
+    window.mapsCallback();
+    expect(callback).toBeCalled();
+  });
+
+  it('deletes the global mapsCallback', function () {
+    window.mapsCallback = {};
+    Utils.mapsCallback();
+    expect(window.mapsCallback).toBeUndefined();
+  });
+});

dist/utils/index.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports['default'] = {
+
+  callbacks: [],
+
+  added: false,
+
+  loadMaps: function loadMaps(libraries, callback) {
+    if (!window.google) {
+      this.callbacks.push(callback);
+      if (!this.added) {
+        window.mapsCallback = this.mapsCallback.bind(this);
+        this.addScript(libraries);
+      }
+    } else {
+      console.log('sss');
+      setTimeout(callback);
+    }
+  },
+
+  addScript: function addScript(libraries) {
+    var src = 'https://maps.googleapis.com/maps/api/js';
+    src += '?callback=mapsCallback';
+    src += '&libraries=' + (libraries || '');
+    var script = document.createElement('script');
+    script.setAttribute('src', src);
+    document.head.appendChild(script);
+    this.added = true;
+  },
+
+  mapsCallback: function mapsCallback() {
+    delete window.mapsCallback;
+    this.callbacks.forEach(function (callback) {
+      return callback();
+    });
+    this.callbacks = [];
+  }
+
+};
+module.exports = exports['default'];

src/components/__tests__/gmaps-test.js

@@ -1,11 +1,10 @@
 jest.dontMock('../../mixins/listener');
+jest.dontMock('../../utils');
 jest.dontMock('../gmaps');
 
 describe('Gmaps', () => {
 
-  const React = require('react/addons');
-  const TestUtils = React.addons.TestUtils;
-  const Gmaps = require('../gmaps');
+  let React;
 
   let gmaps;
 
@@ -19,6 +18,11 @@ describe('Gmaps', () => {
   const onMapCreated = jest.genMockFunction();
 
   beforeEach(() => {
+    React = require('react/addons');
+    const TestUtils = React.addons.TestUtils;
+    const Utils = require('../../utils');
+    Utils.addScript = () => {};
+    const Gmaps = require('../gmaps');
     delete window.google;
     const Child = React.createClass({
       render() {

src/components/gmaps.js

@@ -2,6 +2,7 @@ import React from 'react';
 import assign from 'react/lib/Object.assign';
 import MapEvents from '../events/map';
 import Listener from '../mixins/listener';
+import Utils from '../utils';
 
 const Gmaps = React.createClass({
 
@@ -16,7 +17,7 @@ const Gmaps = React.createClass({
   },
 
   componentDidMount() {
-    this.loadMaps();
+    Utils.loadMaps(this.props.libraries, this.mapsCallback);
   },
 
   componentWillUnmount() {
@@ -27,22 +28,7 @@ const Gmaps = React.createClass({
     return this.map;
   },
 
-  loadMaps() {
-    if (!window.google) {
-      window.mapsCallback = this.mapsCallback;
-      let src = 'https://maps.googleapis.com/maps/api/js';
-      src += '?callback=mapsCallback';
-      src += `&libraries=${this.props.libraries || ''}`;
-      const script = document.createElement('script');
-      script.setAttribute('src', src);
-      document.head.appendChild(script);
-    } else {
-      setTimeout(this.mapsCallback);
-    }
-  },
-
   mapsCallback() {
-    delete window.mapsCallback;
     this.createMap();
     this.addListeners(this.map, MapEvents);
   },

src/utils/__tests__/index.js

@@ -0,0 +1,47 @@
+jest.dontMock('../../utils');
+
+describe('Utils', () => {
+
+  let Utils;
+
+  beforeEach(() => {
+    delete window.google;
+    delete window.mapsCallback;
+    Utils = require('../../utils');
+  });
+
+  it('registers the callbacks if google does not exist', () => {
+    expect(Utils.callbacks.length).toBe(0);
+    Utils.loadMaps(null, () => {});
+    expect(Utils.callbacks.length).toBe(1);
+  });
+
+  it('adds the script if not added', () => {
+    expect(Utils.added).toBe(false);
+    Utils.loadMaps(null, () => {});
+    expect(Utils.added).toBe(true);
+  });
+
+  it('fires the callback if google exists', () => {
+    window.google = {};
+    const callback = jest.genMockFunction();
+    Utils.loadMaps(null, callback);
+    jest.runAllTimers();
+    expect(callback).toBeCalled();
+  });
+
+  it('fires the callbacks on mapsCallback', () => {
+    const callback = jest.genMockFunction();
+    Utils.loadMaps(null, callback);
+    window.mapsCallback();
+    expect(callback).toBeCalled();
+  });
+
+  it('deletes the global mapsCallback', () => {
+    window.mapsCallback = {};
+    Utils.mapsCallback();
+    expect(window.mapsCallback).toBeUndefined();
+  });
+
+});
+

src/utils/index.js

@@ -0,0 +1,35 @@
+export default {
+
+  callbacks: [],
+
+  added: false,
+
+  loadMaps(libraries, callback) {
+    if (!window.google) {
+      this.callbacks.push(callback);
+      if (!this.added) {
+        window.mapsCallback = this.mapsCallback.bind(this);
+        this.addScript(libraries);
+      }
+    } else {
+      setTimeout(callback);
+    }
+  },
+
+  addScript(libraries) {
+    let src = 'https://maps.googleapis.com/maps/api/js';
+    src += '?callback=mapsCallback';
+    src += `&libraries=${libraries || ''}`;
+    const script = document.createElement('script');
+    script.setAttribute('src', src);
+    document.head.appendChild(script);
+    this.added = true;
+  },
+
+  mapsCallback() {
+    delete window.mapsCallback;
+    this.callbacks.forEach(callback => callback());
+    this.callbacks = [];
+  }
+
+};