300 lines
9.7 KiB
JavaScript
300 lines
9.7 KiB
JavaScript
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 }
|
|
]);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
};
|