Merge pull request #99 from amercader/master

Add tests and various fixes for the map view

src/view-map.js

@@ -117,6 +117,10 @@ my.Map = Backbone.View.extend({
 
     // Listen to changes in the documents
     this.model.currentDocuments.bind('add', function(doc){self.redraw('add',doc)});
+    this.model.currentDocuments.bind('change', function(doc){
+        self.redraw('remove',doc);
+        self.redraw('add',doc);
+    });
     this.model.currentDocuments.bind('remove', function(doc){self.redraw('remove',doc)});
     this.model.currentDocuments.bind('reset', function(){self.redraw('reset')});
 
@@ -293,7 +297,9 @@ my.Map = Backbone.View.extend({
         // TODO: mustache?
         html = ''
         for (key in doc.attributes){
-          html += '<div><strong>' + key + '</strong>: '+ doc.attributes[key] + '</div>'
+          if (!(self.state.get('geomField') && key == self.state.get('geomField'))){
+            html += '<div><strong>' + key + '</strong>: '+ doc.attributes[key] + '</div>';
+          }
         }
         feature.properties = {popupContent: html};
 
@@ -356,7 +362,7 @@ my.Map = Backbone.View.extend({
         // We'll create a GeoJSON like point object from the two lat/lon fields
         var lon = doc.get(this.state.get('lonField'));
         var lat = doc.get(this.state.get('latField'));
-        if (lon && lat) {
+        if (!isNaN(parseFloat(lon)) && !isNaN(parseFloat(lat))) {
           return {
             type: 'Point',
             coordinates: [lon,lat]
@@ -446,8 +452,10 @@ my.Map = Backbone.View.extend({
         if (layer instanceof L.Marker){
           bounds.extend(layer.getLatLng());
         } else {
-          bounds.extend(layer.getBounds().getNorthEast());
-          bounds.extend(layer.getBounds().getSouthWest());
+          if (layer.getBounds){
+            bounds.extend(layer.getBounds().getNorthEast());
+            bounds.extend(layer.getBounds().getSouthWest());
+          }
         }
       }, this);
       return (typeof bounds.getNorthEast() !== 'undefined') ? bounds : null;

test/index.html

@@ -42,6 +42,7 @@
 
   <script type="text/javascript" src="view-grid.test.js"></script>
   <script type="text/javascript" src="view-graph.test.js"></script>
+  <script type="text/javascript" src="view-map.test.js"></script>
   <script type="text/javascript" src="view.test.js"></script>
   <script type="text/javascript" src="util.test.js"></script>
 </head>

test/view-map.test.js

@@ -0,0 +1,132 @@
+(function ($) {
+
+module("View - Map");
+
+var GeoJSONFixture = {
+  getDataset: function() {
+    var fields = [
+        {id: 'id'},
+        {id: 'x'},
+        {id: 'y'},
+        {id: 'z'},
+        {id: 'geom'}
+      ];
+    var documents = [
+      {id: 0, x: 1, y: 2, z: 3, geom: '{"type":"Point","coordinates":[13.40,52.35]}'},
+      {id: 1, x: 2, y: 4, z: 6, geom: {type:"Point",coordinates:[13.40,52.35]}},
+      {id: 2, x: 3, y: 6, z: 9, geom: {type:"LineString",coordinates:[[100.0, 0.0],[101.0, 1.0]]}}
+    ];
+    var dataset = recline.Backend.createDataset(documents, fields);
+    return dataset;
+  }
+};
+
+test('basics', function () {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.Map({
+    model: dataset
+  });
+  $('.fixtures').append(view.el);
+
+  //Fire query, otherwise the map won't be initialized
+  dataset.query();
+
+  assertPresent('.editor',view.el);
+
+  // Check that the Leaflet map was set up
+  assertPresent('.leaflet-container',view.el);
+
+  ok(view.map instanceof L.Map);
+  ok(view.features instanceof L.GeoJSON);
+
+  view.remove();
+});
+
+test('Lat/Lon geom fields', function () {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.Map({
+    model: dataset
+  });
+  $('.fixtures').append(view.el);
+
+  //Fire query, otherwise the map won't be initialized
+  dataset.query();
+
+  // Check that all markers were created
+  equal(_getFeaturesCount(view.features),6);
+
+  // Delete a document
+  view.model.currentDocuments.remove(view.model.currentDocuments.get('1'));
+  equal(_getFeaturesCount(view.features),5);
+
+  // Add a new one
+  view.model.currentDocuments.add({id: 7, x: 7, y: 14, z: 21, country: 'KX', label: 'seventh', lat:13.23, lon:23.56}),
+  equal(_getFeaturesCount(view.features),6);
+
+  view.remove();
+});
+
+test('GeoJSON geom field', function () {
+  var dataset = GeoJSONFixture.getDataset();
+  var view = new recline.View.Map({
+    model: dataset
+  });
+  $('.fixtures').append(view.el);
+
+  //Fire query, otherwise the map won't be initialized
+  dataset.query();
+
+  // Check that all features were created
+  equal(_getFeaturesCount(view.features),3);
+
+  // Delete a document
+  view.model.currentDocuments.remove(view.model.currentDocuments.get('2'));
+  equal(_getFeaturesCount(view.features),2);
+
+  // Add it back
+  view.model.currentDocuments.add({id: 2, x: 3, y: 6, z: 9, geom: {type:"LineString",coordinates:[[100.0, 0.0],[101.0, 1.0]]}}),
+  equal(_getFeaturesCount(view.features),3);
+
+  view.remove();
+});
+
+test('Popup', function () {
+  var dataset = GeoJSONFixture.getDataset();
+  var view = new recline.View.Map({
+    model: dataset
+  });
+  $('.fixtures').append(view.el);
+
+  //Fire query, otherwise the map won't be initialized
+  dataset.query();
+
+  var marker = view.el.find('.leaflet-marker-icon').first();
+
+  assertPresent(marker);
+
+  _.values(view.features._layers)[0].fire('click');
+
+  var popup = view.el.find('.leaflet-popup-content');
+
+  assertPresent(popup);
+
+  var text = popup.text();
+  ok((text.indexOf('geom') === -1))
+  _.each(view.model.fields.toJSON(),function(field){
+    if (field.id != 'geom'){
+      ok((text.indexOf(field.id) !== -1))
+    }
+  });
+
+  view.remove();
+});
+
+var _getFeaturesCount = function(features){
+  var cnt = 0;
+  features._iterateLayers(function(layer){
+    cnt++;
+  });
+  return cnt;
+}
+
+})(this.jQuery);