Initial commit

test/spec/geo/geometry-views/coordinates-comparator.js

@@ -0,0 +1,15 @@
+var _ = require('underscore');
+
+var isCoordinateSimilar = function (coordinateA, coordinateB) {
+  return coordinateA + 0.1 > coordinateB &&
+         coordinateA - 0.1 < coordinateB;
+};
+
+module.exports = {
+  areCoordinatesSimilar: function (coordinatesA, coordinatesB) {
+    return _.every(coordinatesA, function (coordinate, index) {
+      return isCoordinateSimilar(coordinate.lat, coordinatesB[index].lat) &&
+        isCoordinateSimilar(coordinate.lng, coordinatesB[index].lng);
+    });
+  }
+};

test/spec/geo/geometry-views/create-map-view.js

@@ -0,0 +1,69 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var Map = require('../../../../src/geo/map');
+var CoordinatesComparator = require('./coordinates-comparator');
+
+module.exports = function (MapViewBase) {
+  if (!MapViewBase) throw new Error('MapViewBase is required');
+
+  // We extend the specific MapView and add some methods to make
+  // testing easier
+  var MapView = MapViewBase.extend({
+    initialize: function () {
+      MapViewBase.prototype.initialize.apply(this, arguments);
+
+      this._markers = [];
+      this._paths = [];
+    },
+
+    addMarker: function (marker) {
+      MapViewBase.prototype.addMarker.apply(this, arguments);
+      this._markers.push(marker);
+    },
+
+    removeMarker: function (marker) {
+      MapViewBase.prototype.removeMarker.apply(this, arguments);
+      var index = this._markers.indexOf(marker);
+      if (index >= 0) {
+        this._markers.splice(index, 1);
+      }
+    },
+
+    addPath: function (path) {
+      MapViewBase.prototype.addPath.apply(this, arguments);
+      this._paths.push(path);
+    },
+
+    removePath: function (path) {
+      MapViewBase.prototype.removePath.apply(this, arguments);
+      var index = this._paths.indexOf(path);
+      if (index >= 0) {
+        this._paths.splice(index, 1);
+      }
+    },
+
+    getMarkers: function () {
+      return this._markers;
+    },
+
+    getPaths: function () {
+      return this._paths;
+    },
+
+    findMarkerByLatLng: function (latlng) {
+      var markers = this.getMarkers();
+      return _.find(markers, function (marker) {
+        return CoordinatesComparator.areCoordinatesSimilar([marker.getCoordinates()], [latlng]);
+      }, this);
+    }
+  });
+
+  var map = new Map(null, {
+    layersFactory: {}
+  });
+  return new MapView({
+    mapModel: map,
+    engine: new Backbone.Model(),
+    layerGroupModel: {}
+  });
+};

test/spec/geo/geometry-views/gmaps/multi-point-view.spec.js

@@ -0,0 +1,7 @@
+var GMapsMapView = require('../../../../../src/geo/gmaps/gmaps-map-view.js');
+var GMapsMultiPointView = require('../../../../../src/geo/geometry-views/gmaps/multi-point-view.js');
+var SharedTestsForMultiPointViews = require('../shared-tests-for-multi-point-views');
+
+describe('src/geo/geometry-views/gmaps/multi-point-view.js', function () {
+  SharedTestsForMultiPointViews.call(this, GMapsMapView, GMapsMultiPointView);
+});

test/spec/geo/geometry-views/gmaps/multi-polygon-view.spec.js

@@ -0,0 +1,7 @@
+var GMapsMapView = require('../../../../../src/geo/gmaps/gmaps-map-view.js');
+var GMapsMultiPolygonView = require('../../../../../src/geo/geometry-views/gmaps/multi-polygon-view.js');
+var SharedTestsForMultiPolygonViews = require('../shared-tests-for-multi-polygon-views');
+
+describe('src/geo/geometry-views/gmaps/multi-polygon-view.js', function () {
+  SharedTestsForMultiPolygonViews.call(this, GMapsMapView, GMapsMultiPolygonView);
+});

test/spec/geo/geometry-views/gmaps/multi-polyline-view.spec.js

@@ -0,0 +1,7 @@
+var GMapsMapView = require('../../../../../src/geo/gmaps/gmaps-map-view.js');
+var GMapsMultiPolylineView = require('../../../../../src/geo/geometry-views/gmaps/multi-polyline-view.js');
+var SharedTestsForMultiPolylineViews = require('../shared-tests-for-multi-polyline-views');
+
+describe('src/geo/geometry-views/gmaps/multi-polygon-view.js', function () {
+  SharedTestsForMultiPolylineViews.call(this, GMapsMapView, GMapsMultiPolylineView);
+});

test/spec/geo/geometry-views/gmaps/point-view.spec.js

@@ -0,0 +1,7 @@
+var GMapsMapView = require('../../../../../src/geo/gmaps/gmaps-map-view.js');
+var GMapsPointView = require('../../../../../src/geo/geometry-views/gmaps/point-view.js');
+var SharedTestsForPointViews = require('../shared-tests-for-point-views');
+
+describe('src/geo/geometry-views/gmaps/point-view.js', function () {
+  SharedTestsForPointViews.call(this, GMapsMapView, GMapsPointView);
+});

test/spec/geo/geometry-views/gmaps/polygon-view.spec.js

@@ -0,0 +1,7 @@
+var GMapsMapView = require('../../../../../src/geo/gmaps/gmaps-map-view.js');
+var GMapsPolygonView = require('../../../../../src/geo/geometry-views/gmaps/polygon-view.js');
+var SharedTestsForPolygonViews = require('../shared-tests-for-polygon-views');
+
+describe('src/geo/geometry-views/gmaps/polygon-view.js', function () {
+  SharedTestsForPolygonViews.call(this, GMapsMapView, GMapsPolygonView);
+});

test/spec/geo/geometry-views/gmaps/polyline-view.spec.js

@@ -0,0 +1,7 @@
+var GMapsMapView = require('../../../../../src/geo/gmaps/gmaps-map-view.js');
+var GMapsPolylineView = require('../../../../../src/geo/geometry-views/gmaps/polyline-view.js');
+var SharedTestsForPolylineViews = require('../shared-tests-for-polyline-views');
+
+describe('src/geo/geometry-views/gmaps/polyline-view.js', function () {
+  SharedTestsForPolylineViews.call(this, GMapsMapView, GMapsPolylineView);
+});

test/spec/geo/geometry-views/leaflet/multi-point-view.spec.js

@@ -0,0 +1,7 @@
+var LeafletMapView = require('../../../../../src/geo/leaflet/leaflet-map-view.js');
+var LeafletMultiPointView = require('../../../../../src/geo/geometry-views/leaflet/multi-point-view.js');
+var SharedTestsForMultiPointViews = require('../shared-tests-for-multi-point-views');
+
+describe('src/geo/geometry-views/leaflet/multi-point-view.js', function () {
+  SharedTestsForMultiPointViews.call(this, LeafletMapView, LeafletMultiPointView);
+});

test/spec/geo/geometry-views/leaflet/multi-polygon-view.spec.js

@@ -0,0 +1,7 @@
+var LeafletMapView = require('../../../../../src/geo/leaflet/leaflet-map-view.js');
+var LeafletMultiPolygonView = require('../../../../../src/geo/geometry-views/leaflet/multi-polygon-view.js');
+var SharedTestsForMultiPolygonViews = require('../shared-tests-for-multi-polygon-views');
+
+describe('src/geo/geometry-views/leaflet/multi-polygon-view.js', function () {
+  SharedTestsForMultiPolygonViews.call(this, LeafletMapView, LeafletMultiPolygonView);
+});

test/spec/geo/geometry-views/leaflet/multi-polyline-view.spec.js

@@ -0,0 +1,7 @@
+var LeafletMapView = require('../../../../../src/geo/leaflet/leaflet-map-view.js');
+var LeafletMultiPolylineView = require('../../../../../src/geo/geometry-views/leaflet/multi-polyline-view.js');
+var SharedTestsForMultiPolylineViews = require('../shared-tests-for-multi-polyline-views');
+
+describe('src/geo/geometry-views/leaflet/multi-polyline-view.js', function () {
+  SharedTestsForMultiPolylineViews.call(this, LeafletMapView, LeafletMultiPolylineView);
+});

test/spec/geo/geometry-views/leaflet/point-view.spec.js

@@ -0,0 +1,7 @@
+var LeafletMapView = require('../../../../../src/geo/leaflet/leaflet-map-view.js');
+var LeafletPointView = require('../../../../../src/geo/geometry-views/leaflet/point-view.js');
+var SharedTestsForPointViews = require('../shared-tests-for-point-views');
+
+describe('src/geo/geometry-views/leaflet/point-view.js', function () {
+  SharedTestsForPointViews.call(this, LeafletMapView, LeafletPointView);
+});

test/spec/geo/geometry-views/leaflet/polygon-view.spec.js

@@ -0,0 +1,7 @@
+var LeafletMapView = require('../../../../../src/geo/leaflet/leaflet-map-view.js');
+var LeafletPolygonView = require('../../../../../src/geo/geometry-views/leaflet/polygon-view.js');
+var SharedTestsForPolygonViews = require('../shared-tests-for-polygon-views');
+
+describe('src/geo/geometry-views/leaflet/polygon-view.js', function () {
+  SharedTestsForPolygonViews.call(this, LeafletMapView, LeafletPolygonView);
+});

test/spec/geo/geometry-views/leaflet/polyline-view.spec.js

@@ -0,0 +1,7 @@
+var LeafletMapView = require('../../../../../src/geo/leaflet/leaflet-map-view.js');
+var LeafletPolylineView = require('../../../../../src/geo/geometry-views/leaflet/polyline-view.js');
+var SharedTestsForPolylineViews = require('../shared-tests-for-polyline-views');
+
+describe('src/geo/geometry-views/leaflet/polyline-view.js', function () {
+  SharedTestsForPolylineViews.call(this, LeafletMapView, LeafletPolylineView);
+});

test/spec/geo/geometry-views/shared-tests-for-multi-geometry-views.js

@@ -0,0 +1,31 @@
+var _ = require('underscore');
+
+module.exports = function () {
+  beforeEach(function () {
+    spyOn(_, 'debounce').and.callFake(function (func) { return function () { func.apply(this, arguments); }; });
+
+    this.geometryView.render();
+  });
+
+  describe('when the model is removed', function () {
+    it('should remove each geometry', function () {
+      this.geometry.geometries.each(function (polygon) {
+        spyOn(polygon, 'remove');
+      });
+
+      this.geometry.remove();
+
+      expect(this.geometry.geometries.all(function (geometry) {
+        return geometry.remove.calls.count() === 1;
+      })).toBe(true);
+    });
+
+    it('should remove the view', function () {
+      spyOn(this.geometryView, 'remove');
+
+      this.geometry.remove();
+
+      expect(this.geometryView.remove).toHaveBeenCalled();
+    });
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-multi-point-views.js

@@ -0,0 +1,27 @@
+var MultiPoint = require('../../../../src/geo/geometry-models/multi-point');
+var SharedTestsForMultiGeometryViews = require('./shared-tests-for-multi-geometry-views');
+var createMapView = require('./create-map-view');
+
+module.exports = function (MapView, MultiPointView) {
+  beforeEach(function () {
+    this.geometry = new MultiPoint(null, {
+      latlngs: [
+        [0, 1],
+        [1, 2]
+      ]
+    });
+    this.mapView = createMapView(MapView);
+    this.mapView.render();
+
+    this.geometryView = new MultiPointView({
+      model: this.geometry,
+      mapView: this.mapView
+    });
+  });
+
+  SharedTestsForMultiGeometryViews.call(this);
+
+  it('should render the geometries', function () {
+    expect(this.mapView.getMarkers().length).toEqual(2); // 2 points
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-multi-polygon-views.js

@@ -0,0 +1,38 @@
+var MultiPolygon = require('../../../../src/geo/geometry-models/multi-polygon');
+var SharedTestsForMultiGeometryViews = require('./shared-tests-for-multi-geometry-views');
+var createMapView = require('./create-map-view');
+
+module.exports = function (MapView, MultiPolygonView) {
+  beforeEach(function () {
+    this.geometry = new MultiPolygon(null, {
+      latlngs: [
+        [
+          [0, 1],
+          [1, 2],
+          [2, 3],
+          [3, 4]
+        ],
+        [
+          [0, 10],
+          [10, 20],
+          [20, 30],
+          [30, 40]
+        ]
+      ]
+    });
+    this.mapView = createMapView(MapView);
+    this.mapView.render();
+
+    this.geometryView = new MultiPolygonView({
+      model: this.geometry,
+      mapView: this.mapView
+    });
+  });
+
+  SharedTestsForMultiGeometryViews.call(this);
+
+  it('should render the geometries', function () {
+    expect(this.mapView.getPaths().length).toEqual(2); // 2 geometries
+    expect(this.mapView.getMarkers().length).toEqual(8); // 4 markers for each geometry
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-multi-polyline-views.js

@@ -0,0 +1,38 @@
+var MultiPolyline = require('../../../../src/geo/geometry-models/multi-polyline');
+var SharedTestsForMultiGeometryViews = require('./shared-tests-for-multi-geometry-views');
+var createMapView = require('./create-map-view');
+
+module.exports = function (MapView, MultiPolylineView) {
+  beforeEach(function () {
+    this.geometry = new MultiPolyline(null, {
+      latlngs: [
+        [
+          [0, 1],
+          [1, 2],
+          [2, 3],
+          [3, 4]
+        ],
+        [
+          [0, 10],
+          [10, 20],
+          [20, 30],
+          [30, 40]
+        ]
+      ]
+    });
+    this.mapView = createMapView(MapView);
+    this.mapView.render();
+
+    this.geometryView = new MultiPolylineView({
+      model: this.geometry,
+      mapView: this.mapView
+    });
+  });
+
+  SharedTestsForMultiGeometryViews.call(this);
+
+  it('should render the geometries', function () {
+    expect(this.mapView.getPaths().length).toEqual(2); // 2 geometries
+    expect(this.mapView.getMarkers().length).toEqual(8); // 4 markers for each geometry
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-path-views.js

@@ -0,0 +1,299 @@
+var _ = require('underscore');
+var Point = require('../../../../src/geo/geometry-models/point.js');
+var createMapView = require('./create-map-view');
+var CoordinatesComparator = require('./coordinates-comparator');
+
+module.exports = function (Path, MapView, PathView) {
+  beforeEach(function () {
+    spyOn(_, 'debounce').and.callFake(function (func) { return function () { func.apply(this, arguments); }; });
+
+    this.mapView = createMapView(MapView);
+    this.mapView.render();
+
+    this.geometry = new Path(null, {
+      latlngs: [
+        [-1, 1], [1, 2], [3, 4]
+      ]
+    });
+
+    this.geometryView = new PathView({
+      model: this.geometry,
+      mapView: this.mapView
+    });
+
+    this.geometryView.render();
+  });
+
+  it('should render some markers and the path', function () {
+    var paths = this.mapView.getPaths();
+    var markers = this.mapView.getMarkers();
+    expect(paths.length).toEqual(1);
+    expect(markers.length).toEqual(3); // 3 markers
+
+    expect(markers[0].getCoordinates()).toEqual({ lat: -1, lng: 1 });
+    expect(markers[0].isDraggable()).toBe(false);
+
+    expect(markers[1].getCoordinates()).toEqual({ lat: 1, lng: 2 });
+    expect(markers[1].isDraggable()).toBe(false);
+
+    expect(markers[2].getCoordinates()).toEqual({ lat: 3, lng: 4 });
+    expect(markers[2].isDraggable()).toBe(false);
+
+    expect(paths[0].getCoordinates()).toEqual([
+      { lat: -1, lng: 1 }, { lat: 1, lng: 2 }, { lat: 3, lng: 4 }
+    ]);
+  });
+
+  it('should not render duplicated markers', function () {
+    var paths = this.mapView.getPaths();
+    var markers = this.mapView.getMarkers();
+    expect(paths.length).toEqual(1);
+    expect(markers.length).toEqual(3); // 3 markers
+
+    this.geometry.setCoordinates([
+      [-1, 1], [1, 2], [3, 4], [-1, 1]
+    ]);
+
+    paths = this.mapView.getPaths();
+    markers = this.mapView.getMarkers();
+    expect(paths.length).toEqual(1);
+    expect(markers.length).toEqual(4); // 4 markers
+  });
+
+  describe('when the model is updated', function () {
+    describe('when a point changed', function () {
+      beforeEach(function () {
+        this.geometry.points.at(0).set('latlng', [ -45, 45 ]);
+      });
+
+      it("should update the path's latlng", function () {
+        expect(this.geometry.getCoordinates()).toEqual([
+          [ -45, 45 ], [ 1, 2 ], [ 3, 4 ]
+        ]);
+      });
+    });
+
+    describe('when points are added', function () {
+      beforeEach(function () {
+        this.numberOfMarkersBefore = this.mapView.getMarkers().length;
+        var point = new Point({
+          latlng: [
+            -40,
+            40
+          ]
+        });
+        this.geometry.addPoint(point);
+      });
+
+      it('should update the path\'s latlng', function () {
+        expect(this.geometry.getCoordinates()).toEqual([
+          [ -40, 40 ], [ -1, 1 ], [ 1, 2 ], [ 3, 4 ]
+        ]);
+      });
+
+      it('should render a new marker', function () {
+        var numberOfMarkersAfter = this.mapView.getMarkers().length;
+
+        expect(numberOfMarkersAfter).toEqual(this.numberOfMarkersBefore + 1);
+      });
+    });
+
+    describe('when the point triggers a dblclick event', function () {
+      beforeEach(function () {
+        this.geometry.setCoordinates([
+          [ -10, 10 ], [ 10, 20 ], [ 30, 40 ]
+        ]);
+      });
+
+      it('should remove the geometry point', function () {
+        var pointToDelete = new Point({
+          latlng: [ -40, 40 ]
+        });
+
+        this.geometry.addPoint(pointToDelete);
+
+        expect(this.geometry.getCoordinates()).toEqual([
+          [-40, 40], [ -10, 10 ], [ 10, 20 ], [ 30, 40 ]
+        ]);
+
+        pointToDelete.trigger('dblclick');
+
+        expect(this.geometry.getCoordinates()).toEqual([
+          [ -10, 10 ], [ 10, 20 ], [ 30, 40 ]
+        ]);
+      });
+    });
+
+    describe('when points are resetted,', function () {
+      beforeEach(function () {
+        this.geometry.setCoordinates([
+          [ -10, 10 ], [ 10, 20 ], [ 30, 40 ]
+        ]);
+      });
+
+      it("should update the path's latlng", function () {
+        expect(this.geometry.getCoordinates()).toEqual([
+          [ -10, 10 ], [ 10, 20 ], [ 30, 40 ]
+        ]);
+      });
+
+      it('should render the right number of markers', function () {
+        var numberOfMarkersAfter = this.mapView.getMarkers().length;
+        expect(numberOfMarkersAfter).toEqual(3);
+      });
+    });
+  });
+
+  describe('when the model is removed', function () {
+    it('should remove the markers and path from the map', function () {
+      var paths = this.mapView.getPaths();
+      var markers = this.mapView.getMarkers();
+      expect(paths.length).toEqual(1);
+      expect(markers.length).toEqual(3); // 3 markers
+
+      this.geometry.remove();
+
+      paths = this.mapView.getPaths();
+      markers = this.mapView.getMarkers();
+      expect(paths.length).toEqual(0);
+      expect(markers.length).toEqual(0);
+    });
+
+    it('should remove the view', function () {
+      spyOn(this.geometryView, 'remove');
+
+      this.geometry.remove();
+
+      expect(this.geometryView.remove).toHaveBeenCalled();
+    });
+  });
+
+  describe('expandable paths', function () {
+    beforeEach(function (done) {
+      this.mapView = createMapView(MapView);
+      this.mapView.render();
+
+      this.geometry = new Path({
+        editable: true,
+        expandable: true
+      }, {
+        latlngs: [
+          [0, 0], [10, 0], [10, 10], [0, 10]
+        ]
+      });
+
+      this.geometryView = new PathView({
+        model: this.geometry,
+        mapView: this.mapView
+      });
+
+      // Listen for the map to be ready
+      this.mapView.onReady(function () {
+        this.geometryView.render();
+
+        // Marker that we'll interact with in the tests
+        this.middlePointMarker = this.mapView.findMarkerByLatLng({ lat: 5, lng: 0 });
+        var markers = this.mapView.getMarkers();
+        this.numberOfMarkersBefore = markers.length;
+
+        done();
+      }.bind(this));
+    });
+
+    describe('when the model is removed', function () {
+      it('should remove the markers, middle points, and path from the map', function () {
+        var paths = this.mapView.getPaths();
+        var markers = this.mapView.getMarkers();
+        expect(paths.length).not.toEqual(0);
+        expect(markers.length).not.toEqual(0);
+
+        this.geometry.remove();
+
+        paths = this.mapView.getPaths();
+        markers = this.mapView.getMarkers();
+        expect(paths.length).toEqual(0);
+        expect(markers.length).toEqual(0);
+      });
+    });
+
+    describe('when user mousedowns a middle point', function () {
+      beforeEach(function () {
+        expect(this.middlePointMarker.getIconURL()).toEqual(Point.MIDDLE_POINT_ICON_URL);
+
+        this.middlePointMarker.trigger('mousedown');
+      });
+
+      it('should add a vertex to the geometry at [5, 0]', function () {
+        var paths = this.mapView.getPaths();
+        expect(paths.length).toEqual(1);
+
+        // Coordinates have different precissions and we just check they are similar
+        expect(CoordinatesComparator.areCoordinatesSimilar(paths[0].getCoordinates(), [
+          { lat: 0, lng: 0 }, { lat: 5, lng: 0 }, { lat: 10, lng: 0 }, { lat: 10, lng: 10 }, { lat: 0, lng: 10 }
+        ])).toBeTruthy();
+      });
+
+      it('should change the icon of the middle point', function () {
+        expect(this.middlePointMarker.getIconURL()).toEqual(Point.DEFAULT_ICON_URL);
+      });
+
+      it('should add two middle points at [2.5] and [7.5, 0]', function () {
+        var markers = this.mapView.getMarkers();
+        expect(markers.length).toEqual(this.numberOfMarkersBefore + 2);
+
+        expect(this.mapView.findMarkerByLatLng({ lat: 2.5, lng: 0 })).toBeDefined();
+        expect(this.mapView.findMarkerByLatLng({ lat: 7.5, lng: 0 })).toBeDefined();
+      });
+
+      it('should remove the markers, middle points, and path from the map when the model is removed', function () {
+        var paths = this.mapView.getPaths();
+        var markers = this.mapView.getMarkers();
+        expect(paths.length).not.toEqual(0);
+        expect(markers.length).not.toEqual(0);
+
+        this.geometry.remove();
+
+        paths = this.mapView.getPaths();
+        markers = this.mapView.getMarkers();
+        expect(paths.length).toEqual(0);
+        expect(markers.length).toEqual(0);
+      });
+
+      describe('when user drags a middle point', function () {
+        beforeEach(function () {
+          // Simulate a drag and drop to [5, -5]
+          spyOn(this.middlePointMarker, 'getCoordinates').and.returnValue({ lat: 5, lng: -5 });
+          this.middlePointMarker.trigger('dragstart');
+          this.middlePointMarker.trigger('drag');
+          this.middlePointMarker.trigger('dragend');
+        });
+
+        it('should update the coordinates of the new vertex to [5, -5]', function () {
+          var paths = this.mapView.getPaths();
+          expect(paths.length).toEqual(1);
+          expect(paths[0].getCoordinates()).toEqual([
+            { lat: 0, lng: 0 }, { lat: 5, lng: -5 }, { lat: 10, lng: 0 }, { lat: 10, lng: 10 }, { lat: 0, lng: 10 }
+          ]);
+        });
+
+        it('should add two middle points at [2.5] and [7.5, 0]', function () {
+          var markers = this.mapView.getMarkers();
+          expect(markers.length).toEqual(this.numberOfMarkersBefore + 2); // Only two middle points have been added
+
+          expect(this.mapView.findMarkerByLatLng({ lat: 2.5, lng: -2.5 })).toBeDefined();
+          expect(this.mapView.findMarkerByLatLng({ lat: 7.5, lng: -2.5 })).toBeDefined();
+        });
+
+        it('should delete the new point after dblclick event', function () {
+          this.middlePointMarker.trigger('mousedown');
+          this.middlePointMarker.trigger('dblclick');
+          var paths = this.mapView.getPaths();
+
+          expect(paths[0].getCoordinates()).toEqual([
+            { lat: 0, lng: 0 }, { lat: 10, lng: 0 }, { lat: 10, lng: 10 }, { lat: 0, lng: 10 }
+          ]);
+        });
+      });
+    });
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-point-views.js

@@ -0,0 +1,191 @@
+var _ = require('underscore');
+var Point = require('../../../../src/geo/geometry-models/point.js');
+var createMapView = require('./create-map-view');
+
+module.exports = function (MapView, PointView) {
+  beforeEach(function () {
+    spyOn(_, 'debounce').and.callFake(function (func) { return function () { func.apply(this, arguments); }; });
+
+    this.point = new Point({
+      latlng: [
+        -40,
+        40
+      ]
+    });
+    this.mapView = createMapView(MapView);
+    this.mapView.render();
+
+    this.pointView = new PointView({
+      model: this.point,
+      mapView: this.mapView
+    });
+
+    this.pointView.render();
+  });
+
+  it('should add a marker to the map', function () {
+    var markers = this.mapView.getMarkers();
+    expect(markers.length).toEqual(1);
+    expect(markers[0].getCoordinates()).toEqual({
+      lat: -40,
+      lng: 40
+    });
+    expect(markers[0].isDraggable()).toBe(false);
+  });
+
+  it('should add a marker to the map when the model gets a lat and lng', function () {
+    this.point = new Point();
+    this.mapView = createMapView(MapView);
+    this.mapView.render();
+
+    this.pointView = new PointView({
+      model: this.point,
+      mapView: this.mapView
+    });
+
+    this.pointView.render();
+
+    var markers = this.mapView.getMarkers();
+    expect(markers.length).toEqual(0);
+
+    this.point.set('latlng', [ -45, 45 ]);
+
+    markers = this.mapView.getMarkers();
+    expect(markers.length).toEqual(1);
+  });
+
+  describe('when the model is updated', function () {
+    it("should update the marker's latlng", function () {
+      var markers = this.mapView.getMarkers();
+      expect(markers.length).toEqual(1);
+      expect(markers[0].getCoordinates()).toEqual({
+        lat: -40,
+        lng: 40
+      });
+
+      this.point.set('latlng', [ -45, 45 ]);
+
+      markers = this.mapView.getMarkers();
+      expect(markers.length).toEqual(1);
+      expect(markers[0].getCoordinates()).toEqual({
+        lat: -45,
+        lng: 45
+      });
+    });
+  });
+
+  describe('when the model is removed', function () {
+    it('should remove the marker if model is removed', function () {
+      expect(this.mapView.getMarkers().length).toEqual(1);
+
+      this.point.remove();
+
+      expect(this.mapView.getMarkers().length).toEqual(0);
+    });
+
+    it('should remove the view', function () {
+      spyOn(this.pointView, 'remove');
+
+      this.point.remove();
+
+      expect(this.pointView.remove).toHaveBeenCalled();
+    });
+  });
+
+  describe('editable points', function () {
+    beforeEach(function () {
+      this.point = new Point({
+        latlng: [
+          -40,
+          40
+        ],
+        editable: true
+      });
+
+      this.mapView = createMapView(MapView);
+      this.mapView.render();
+
+      this.pointView = new PointView({
+        model: this.point,
+        mapView: this.mapView
+      });
+
+      this.pointView.render();
+      this.marker = this.mapView.getMarkers()[0];
+    });
+
+    it('should add an editable marker to the map', function () {
+      expect(this.marker.isDraggable()).toBe(true);
+    });
+
+    it("should update model's latlng when the marker is dragged & dropped", function () {
+      spyOn(this.marker, 'getCoordinates').and.returnValue({
+        lat: -90,
+        lng: 90
+      });
+
+      this.marker.trigger('dragstart');
+      this.marker.trigger('drag');
+      this.marker.trigger('dragend');
+
+      expect(this.point.getCoordinates()).toEqual([ -90, 90 ]);
+    });
+
+    it("shouldn't update the marker's latlng while dragging", function () {
+      this.marker.trigger('dragstart');
+
+      this.point.set('latlng', [
+        -50,
+        50
+      ]);
+
+      expect(this.marker.getCoordinates().lat).toEqual(-40);
+      expect(this.marker.getCoordinates().lng).toEqual(40);
+
+      this.marker.trigger('drag');
+      this.marker.trigger('dragend');
+
+      this.point.set('latlng', [
+        -50,
+        50
+      ]);
+
+      expect(this.marker.getCoordinates().lat).toEqual(-50);
+      expect(this.marker.getCoordinates().lng).toEqual(50);
+    });
+
+    it('should bind marker events', function () {
+      var callback = jasmine.createSpy('callback');
+      var marker = this.mapView.getMarkers()[0];
+
+      this.pointView.on('mousedown', callback);
+      marker.trigger('mousedown');
+
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it('should unbind marker events when the view is cleaned', function () {
+      var callback = jasmine.createSpy('callback');
+      var marker = this.mapView.getMarkers()[0];
+
+      this.pointView.on('mousedown', callback);
+      this.pointView.clean();
+
+      marker.trigger('mousedown');
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('.clean', function () {
+    it('should remove the marker from the map', function () {
+      var markers = this.mapView.getMarkers();
+      expect(markers.length).toEqual(1);
+
+      this.pointView.clean();
+
+      markers = this.mapView.getMarkers();
+      expect(markers.length).toEqual(0);
+    });
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-polygon-views.js

@@ -0,0 +1,96 @@
+var Polygon = require('../../../../src/geo/geometry-models/polygon');
+var SharedTestsForPathViews = require('./shared-tests-for-path-views');
+var createMapView = require('./create-map-view');
+var CoordinatesComparator = require('./coordinates-comparator');
+
+module.exports = function (MapView, PathView) {
+  SharedTestsForPathViews.call(this, Polygon, MapView, PathView);
+
+  describe('expandable polygons', function () {
+    beforeEach(function (done) {
+      this.mapView = createMapView(MapView);
+      this.mapView.render();
+
+      this.geometry = new Polygon({
+        editable: true,
+        expandable: true
+      }, {
+        latlngs: [
+          [0, 0], [10, 0], [10, 10], [0, 10]
+        ]
+      });
+
+      this.geometryView = new PathView({
+        model: this.geometry,
+        mapView: this.mapView
+      });
+
+      // Listen for the map to be ready
+      this.mapView.onReady(function () {
+        this.geometryView.render();
+
+        done();
+      }.bind(this));
+    });
+
+    it('should render markers for each vertex, the path, and middle points', function () {
+      var paths = this.mapView.getPaths();
+      var markers = this.mapView.getMarkers();
+      expect(paths.length).toEqual(1);
+      expect(markers.length).toEqual(8); // 4 markers + 4 middle points
+
+      // Markers
+      expect(markers[0].getCoordinates()).toEqual({ lat: 0, lng: 0 });
+      expect(markers[0].isDraggable()).toBe(true);
+
+      expect(markers[1].getCoordinates()).toEqual({ lat: 10, lng: 0 });
+      expect(markers[1].isDraggable()).toBe(true);
+
+      expect(markers[2].getCoordinates()).toEqual({ lat: 10, lng: 10 });
+      expect(markers[2].isDraggable()).toBe(true);
+
+      expect(markers[3].getCoordinates()).toEqual({ lat: 0, lng: 10 });
+      expect(markers[3].isDraggable()).toBe(true);
+
+      // Middle points
+      // Coordinates have different precissions and we just check they are similar
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[4].getCoordinates() ],
+        [ { lat: 5, lng: 0 } ])
+      ).toBeTruthy();
+      expect(markers[4].isDraggable()).toBe(true);
+
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[5].getCoordinates() ],
+        [ { lat: 10, lng: 5 } ])
+      ).toBeTruthy();
+      expect(markers[5].isDraggable()).toBe(true);
+
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[6].getCoordinates() ],
+        [ { lat: 5, lng: 10 } ])
+      ).toBeTruthy();
+      expect(markers[6].isDraggable()).toBe(true);
+
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[7].getCoordinates() ],
+        [ { lat: 0, lng: 5 } ])
+      ).toBeTruthy();
+      expect(markers[7].isDraggable()).toBe(true);
+
+      expect(paths[0].getCoordinates()).toEqual([
+        { lat: 0, lng: 0 }, { lat: 10, lng: 0 }, { lat: 10, lng: 10 }, { lat: 0, lng: 10 }
+      ]);
+    });
+
+    it('should re-render middle points when map is zoomed', function () {
+      spyOn(this.mapView, 'removeMarker');
+      spyOn(this.mapView, 'addMarker');
+
+      this.mapView.trigger('zoomend');
+
+      expect(this.mapView.removeMarker.calls.count()).toEqual(4);
+      expect(this.mapView.addMarker.calls.count()).toEqual(4);
+    });
+  });
+};

test/spec/geo/geometry-views/shared-tests-for-polyline-views.js

@@ -0,0 +1,90 @@
+var Polyline = require('../../../../src/geo/geometry-models/polyline');
+var SharedTestsForPathViews = require('./shared-tests-for-path-views');
+var createMapView = require('./create-map-view');
+var CoordinatesComparator = require('./coordinates-comparator');
+
+module.exports = function (MapView, PathView) {
+  SharedTestsForPathViews.call(this, Polyline, MapView, PathView);
+
+  describe('expandable polylines', function () {
+    beforeEach(function (done) {
+      this.mapView = createMapView(MapView);
+      this.mapView.render();
+
+      this.geometry = new Polyline({
+        editable: true,
+        expandable: true
+      }, {
+        latlngs: [
+          [0, 0], [10, 0], [10, 10], [0, 10]
+        ]
+      });
+
+      this.geometryView = new PathView({
+        model: this.geometry,
+        mapView: this.mapView
+      });
+
+      // Listen for the map to be ready
+      this.mapView.onReady(function () {
+        this.geometryView.render();
+
+        done();
+      }.bind(this));
+    });
+
+    it('should render markers for each vertex, the path, and middle points', function () {
+      var paths = this.mapView.getPaths();
+      var markers = this.mapView.getMarkers();
+      expect(paths.length).toEqual(1);
+      expect(markers.length).toEqual(7); // 4 markers + 3 middle points
+
+      // Markers
+      expect(markers[0].getCoordinates()).toEqual({ lat: 0, lng: 0 });
+      expect(markers[0].isDraggable()).toBe(true);
+
+      expect(markers[1].getCoordinates()).toEqual({ lat: 10, lng: 0 });
+      expect(markers[1].isDraggable()).toBe(true);
+
+      expect(markers[2].getCoordinates()).toEqual({ lat: 10, lng: 10 });
+      expect(markers[2].isDraggable()).toBe(true);
+
+      expect(markers[3].getCoordinates()).toEqual({ lat: 0, lng: 10 });
+      expect(markers[3].isDraggable()).toBe(true);
+
+      // Middle points
+      // Coordinates have different precissions and we just check they are similar
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[4].getCoordinates() ],
+        [ { lat: 5, lng: 0 } ])
+      ).toBeTruthy();
+      expect(markers[4].isDraggable()).toBe(true);
+
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[5].getCoordinates() ],
+        [ { lat: 10, lng: 5 } ])
+      ).toBeTruthy();
+      expect(markers[5].isDraggable()).toBe(true);
+
+      expect(CoordinatesComparator.areCoordinatesSimilar(
+        [ markers[6].getCoordinates() ],
+        [ { lat: 5, lng: 10 } ])
+      ).toBeTruthy();
+      expect(markers[6].isDraggable()).toBe(true);
+
+      expect(paths[0].getCoordinates()).toEqual([
+        { lat: 0, lng: 0 }, { lat: 10, lng: 0 }, { lat: 10, lng: 10 }, { lat: 0, lng: 10 }
+      ]);
+    });
+
+    it('should re-render middle points when map is zoomed', function () {
+      spyOn(this.mapView, 'removeMarker');
+      spyOn(this.mapView, 'addMarker');
+
+      this.mapView.trigger('zoomend');
+
+      expect(this.mapView.removeMarker.calls.count()).toEqual(3);
+      expect(this.mapView.addMarker.calls.count()).toEqual(3);
+    });
+  });
+};