[SMOKES] Dynamic VS Vector decision + Vector Infowindows / Tooltips

src/geo/ui/legends/legends-view.js

@@ -76,13 +76,15 @@ var LegendsView = View.extend({
 
   _showOrHideShadows: function () {
     var $el = $(this._container());
-    var currentPos = $el.scrollTop();
-    var max = $el.get(0).scrollHeight;
-    var height = $el.outerHeight();
-    var maxPos = max - height;
-
-    this.$shadowTop.toggleClass('is-visible', currentPos > 0);
-    this.$shadowBottom.toggleClass('is-visible', currentPos < maxPos);
+    if ($el.length) {
+      var currentPos = $el.scrollTop();
+      var max = $el.get(0).scrollHeight;
+      var height = $el.outerHeight();
+      var maxPos = max - height;
+
+      this.$shadowTop.toggleClass('is-visible', currentPos > 0);
+      this.$shadowBottom.toggleClass('is-visible', currentPos < maxPos);
+    }
   },
 
   _onScrollBottom: function () {

src/vis/vis-view.js

@@ -10,7 +10,7 @@ var OverlaysView = require('../geo/ui/overlays-view');
  */
 var Vis = View.extend({
   initialize: function (options) {
-    this.model.once('load', this.render, this);
+    this.model.once('reloaded', this.render, this);
     this.model.on('invalidateSize', this._invalidateSize, this);
 
     this._overlaysCollection = this.model.overlaysCollection;

test/spec/api/create-vis.spec.js

@@ -10,9 +10,21 @@ describe('src/api/create-vis', function () {
     this.container = $('<div id="map">').css('height', '200px');
     this.containerId = this.container[0].id;
     $('body').append(this.container);
+
+    this.$ajax = $.ajax;
+    spyOn($, 'ajax').and.callFake(function (options) {
+      if (options.url.indexOf(options.url.indexOf('http://cdb.localhost.lan:8181/api/v1/map/named/tpl_6a31d394_7c8e_11e5_8e42_080027880ca6/jsonp?') === 0)) {
+        options.success && options.success({
+          layergroupid: '1234567890'
+        });
+      }
+
+      this.$ajax(options);
+    }.bind(this));
   });
 
   afterEach(function () {
+    $.ajax = this.$ajax;
     this.container.remove();
   });
 
@@ -255,10 +267,6 @@ describe('src/api/create-vis', function () {
   };
 
   describe('map instantiation', function () {
-    beforeEach(function () {
-      spyOn($, 'ajax');
-    });
-
     it('should instantiate map using a GET request', function (done) {
       this.vis = createVis(this.containerId, fakeVizJSON, {});
 

test/spec/vis/vis-view.spec.js

@@ -21,6 +21,17 @@ VisView = VisView.extend({
   }
 });
 
+var createVisView = function (container, visModel, settingsModel) {
+  var options = {
+    el: container,
+    widgets: new Backbone.Collection(),
+    model: visModel,
+    settingsModel: settingsModel
+  };
+
+  return new VisView(options);
+};
+
 describe('vis/vis-view', function () {
   beforeEach(function () {
     this.container = $('<div>').css('height', '200px');
@@ -52,17 +63,7 @@ describe('vis/vis-view', function () {
       showLayerSelector: true
     });
 
-    this.createNewVis = function (attrs) {
-      attrs.widgets = new Backbone.Collection();
-      attrs.model = this.visModel;
-      attrs.settingsModel = this.settingsModel;
-      this.visView = new VisView(attrs);
-      return this.visView;
-    };
-
-    this.createNewVis({
-      el: this.container
-    });
+    this.visView = createVisView(this.container, this.visModel, this.settingsModel);
 
     this.visModel.load(new VizJSON(this.mapConfig));
     this.visView.render();
@@ -75,78 +76,64 @@ describe('vis/vis-view', function () {
   describe('map provider', function () {
     beforeEach(function () {
       this.fakeMapViewFactory = this.visView._getMapViewFactory();
-      this.fakeMapViewFactory.createMapView.calls.reset();
-
-      this.visView.render();
     });
 
     it('should have created a LeafletMap by default', function () {
       expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('leaflet');
     });
 
-    it('should create a gmaps when provider changes to leaflet', function () {
-      this.visModel.map.set('provider', 'something');
-      this.visModel.map.set('provider', 'leaflet');
-
-      this.visView.render();
-
-      expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('leaflet');
-    });
-
-    it('should create a google maps map when provider is googlemaps', function () {
-      this.visModel.map.set('provider', 'something', { silent: true });
+    it('should create a re-create the map view using a new provider when it changes', function () {
       this.visModel.map.set('provider', 'googlemaps');
-
-      this.visView.render();
-
       expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('googlemaps');
+
+      this.visModel.map.set('provider', 'leaflet');
+      expect(this.fakeMapViewFactory.createMapView.calls.mostRecent().args[0]).toEqual('leaflet');
     });
   });
 
-  it('should bind resize changes when map height is 0', function () {
+  var INVALIDATE_SIZE_WAIT_IN_MS = 160;
+
+  it('should center map to origin once when map height is 0 initially and window is resized', function () {
     jasmine.clock().install();
     spyOn(this.visModel, 'invalidateSize');
 
     var container = $('<div>').css('height', '0');
-    var vis = this.createNewVis({ el: container });
-    spyOn(vis, '_onResize').and.callThrough();
-
-    this.visModel.load(new VizJSON(this.mapConfig));
+    this.visView = createVisView(container, this.visModel, this.settingsModel);
 
-    // Wait until view has been rendered after load
-    jasmine.clock().tick(10);
+    this.visView.render();
 
+    // First time the window is resized -> map is centered to origin
     $(window).trigger('resize');
 
-    expect(vis._onResize).toHaveBeenCalled();
-    vis._onResize.calls.reset();
-
-    jasmine.clock().tick(160);
+    jasmine.clock().tick(INVALIDATE_SIZE_WAIT_IN_MS);
 
     expect(this.visModel.invalidateSize).toHaveBeenCalled();
 
+    this.visModel.invalidateSize.calls.reset();
+
+    // Second time the window is resized -> map is NOT centered to origin
+
     $(window).trigger('resize');
-    expect(vis._onResize).not.toHaveBeenCalled();
+
+    jasmine.clock().tick(INVALIDATE_SIZE_WAIT_IN_MS);
+
+    expect(this.visModel.invalidateSize).not.toHaveBeenCalled();
+    jasmine.clock().uninstall();
   });
 
-  it('should NOT bind resize changes when map height is greater than 0', function () {
+  it('should NOT center map to origin when map height is greated than O initially and window is resized', function () {
     jasmine.clock().install();
     spyOn(this.visModel, 'invalidateSize');
 
-    var container = $('<div>').css('height', '200px');
-    var vis = this.createNewVis({el: container});
-    spyOn(vis, '_onResize').and.callThrough();
+    var container = $('<div>').css('height', '800px');
+    this.visView = createVisView(container, this.visModel, this.settingsModel);
 
-    this.visModel.load(new VizJSON(this.mapConfig));
-
-    // Wait until view has been rendered after load
-    jasmine.clock().tick(10);
+    this.visView.render();
 
+    // Window is resized by map is not centered since height hasn't changed
     $(window).trigger('resize');
 
-    expect(vis._onResize).not.toHaveBeenCalled();
-
-    jasmine.clock().tick(160);
+    jasmine.clock().tick(INVALIDATE_SIZE_WAIT_IN_MS);
 
     expect(this.visModel.invalidateSize).not.toHaveBeenCalled();
   });