From 411e4f0ebafda00251f9afc499a0e27033ab6c11 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Thu, 24 Aug 2017 17:33:49 +0200
Subject: [PATCH] unit test checking zooming of touch map
---
frontend-js/src/main/js/map/TouchMap.js | 8 -
frontend-js/src/test/js/google-map-mock.js | 178 ++++++++++---------
frontend-js/src/test/js/map/TouchMap-test.js | 48 +++--
3 files changed, 122 insertions(+), 112 deletions(-)
diff --git a/frontend-js/src/main/js/map/TouchMap.js b/frontend-js/src/main/js/map/TouchMap.js
index 8cf49856b5..bdc9954b22 100644
--- a/frontend-js/src/main/js/map/TouchMap.js
+++ b/frontend-js/src/main/js/map/TouchMap.js
@@ -166,27 +166,19 @@ TouchMap.prototype.moveMap = function(dx, dy) {
TouchMap.prototype.zoomMap = function(pointX, pointY, zoomLevel) {
var self = this;
if (self.lastZoom !== zoomLevel) {
- logger.debug(this.getMap().getDiv());
- logger.debug(this.getMap().getDiv().id);
var div = this.getMap().getDiv();
self.lastZoom = zoomLevel;
- logger.debug("zoom6: " + zoomLevel);
- logger.debug("zoom6: " + $(div));
var topPos = $(div).offset().top;
var leftPos = $(div).offset().left;
- logger.debug("rel: " + leftPos + " - " + topPos);
pointX -= leftPos;
pointY -= topPos;
var height = $(div).height();
var width = $(div).width();
- logger.debug(pointX + " - " + pointY);
- logger.debug(width + " - " + height);
var dx = width / 2 - pointX;
var dy = height / 2 - pointY;
self.getMap().panBy(-dx, -dy);
self.getMap().setZoom(zoomLevel);
self.getMap().panBy(dx, dy);
- logger.debug(dx + " - " + dy + " - " + zoomLevel);
}
};
diff --git a/frontend-js/src/test/js/google-map-mock.js b/frontend-js/src/test/js/google-map-mock.js
index 9db90a0a3a..7b8d8245c3 100644
--- a/frontend-js/src/test/js/google-map-mock.js
+++ b/frontend-js/src/test/js/google-map-mock.js
@@ -7,20 +7,20 @@ var Promise = require("bluebird");
var logger = require('./logger');
var google = {
- maps : {
- event : {
- _data : [],
- addListener : function(object, type, fun) {
+ maps: {
+ event: {
+ _data: [],
+ addListener: function (object, type, fun) {
google.maps.event._data.push({
- object : object,
- type : type,
- fun : fun
+ object: object,
+ type: type,
+ fun: fun
});
},
- addDomListener : function(object, type, fun) {
+ addDomListener: function (object, type, fun) {
object.addEventListener(type, fun);
},
- trigger : function(object, type, param) {
+ trigger: function (object, type, param) {
var promises = [];
for (var i = 0; i < google.maps.event._data.length; i++) {
var e = google.maps.event._data[i];
@@ -31,62 +31,62 @@ var google = {
return Promise.all(promises);
},
},
- drawing : {
- DrawingManager : function(options) {
+ drawing: {
+ DrawingManager: function (options) {
this.options = options;
if (this.options === undefined) {
this.options = {};
}
- this.setMap = function(map) {
+ this.setMap = function (map) {
this.options.map = map;
};
- this.setDrawingMode = function(mode) {
+ this.setDrawingMode = function (mode) {
this.options.drawingMode = mode;
};
- this.getDrawingMode = function() {
+ this.getDrawingMode = function () {
return this.options.drawingMode;
};
},
- OverlayType : {
- MARKER : "MARKER",
+ OverlayType: {
+ MARKER: "MARKER",
},
},
- ControlPosition : {
- TOP_LEFT : "TOP_LEFT",
- LEFT_BOTTOM : "LEFT_BOTTOM",
- RIGHT_BOTTOM : "RIGHT_BOTTOM",
+ ControlPosition: {
+ TOP_LEFT: "TOP_LEFT",
+ LEFT_BOTTOM: "LEFT_BOTTOM",
+ RIGHT_BOTTOM: "RIGHT_BOTTOM",
},
- LatLng : function(lat, lng) {
+ LatLng: function (lat, lng) {
this.latitude = parseFloat(lat);
this.longitude = parseFloat(lng);
- this.lat = function() {
+ this.lat = function () {
return this.latitude;
};
- this.lng = function() {
+ this.lng = function () {
return this.longitude;
};
},
- LatLngBounds : function(ne, sw) {
+ LatLngBounds: function (ne, sw) {
var data = {
- ne : ne,
- sw : sw
+ ne: ne,
+ sw: sw
};
return {
- getSouthWest : function() {
+ getSouthWest: function () {
return data.sw;
},
- getNorthEast : function() {
+ getNorthEast: function () {
return data.ne;
},
- getCenter : function() {
+ getCenter: function () {
return new google.maps.LatLng((data.ne.lat() + data.sw.lat()) / 2, (data.ne.lng() + data.sw.lng()) / 2);
},
- isEmpty : function() {
+ isEmpty: function () {
return data.ne === data.sw || (data.ne.lat() === data.sw.lat() && data.ne.lng() === data.sw.lng());
},
- extend : function(arg) {
+ extend: function (arg) {
if (data.sw === undefined) {
data.sw = new google.maps.LatLng(arg.lat(), arg.lng());
} else {
@@ -112,47 +112,47 @@ var google = {
};
},
- OverlayView : function() {
+ OverlayView: function () {
return {};
},
- ImageMapType : function() {
+ ImageMapType: function () {
return {};
},
- InfoWindow : function(options) {
+ InfoWindow: function (options) {
this.options = options;
if (this.options === undefined) {
this.options = {};
}
- this.getMap = function() {
+ this.getMap = function () {
return this.options.map;
};
- this.setMap = function(map) {
+ this.setMap = function (map) {
this.options.map = map;
};
- this.open = function(map) {
+ this.open = function (map) {
this.setMap(map);
};
- this.setContent = function() {
+ this.setContent = function () {
};
},
- Marker : function(options) {
+ Marker: function (options) {
this.options = options;
this.position = options.position;
- this.getMap = function() {
+ this.getMap = function () {
return this.options.map;
};
- this.setMap = function(map) {
+ this.setMap = function (map) {
this.options.map = map;
};
- this.setIcon = function(icon) {
+ this.setIcon = function (icon) {
this.options.icon = icon;
};
},
- MarkerImage : function() {
+ MarkerImage: function () {
return {};
},
- Map : function(div, options) {
+ Map: function (div, options) {
var data = {};
if (options !== undefined) {
data = options;
@@ -166,89 +166,97 @@ var google = {
}
return {
- controls : {
- "TOP_LEFT" : [],
- "LEFT_BOTTOM" : [],
- "RIGHT_BOTTOM" : [],
+ controls: {
+ "TOP_LEFT": [],
+ "LEFT_BOTTOM": [],
+ "RIGHT_BOTTOM": [],
},
- getDiv : function() {
+ getDiv: function () {
return data.div;
},
- mapTypes : {
- set : function() {
+ mapTypes: {
+ set: function () {
},
},
- getMapTypeId : function() {
+ getMapTypeId: function () {
return data.mapTypeId;
},
- setMapTypeId : function(id) {
+ setMapTypeId: function (id) {
data.mapTypeId = id;
google.maps.event.trigger(this, "maptypeid_changed", id);
},
- setOptions : function() {
+ setOptions: function () {
},
- getZoom : function() {
+ getZoom: function () {
return data.zoom;
},
- setZoom : function(zoom) {
+ setZoom: function (zoom) {
data.zoom = zoom;
return google.maps.event.trigger(this, "zoom_changed", zoom);
},
- getCenter : function() {
+ getCenter: function () {
return data.center;
},
- setCenter : function(center) {
+ panBy: function (x, y) {
+ if (data.center !== undefined) {
+ data.center.x += x;
+ data.center.y += y;
+ } else {
+ data.center = new google.maps.Point(x, y);
+ }
+ },
+ setCenter: function (center) {
data.center = center;
return google.maps.event.trigger(this, "center_changed", center);
},
- getBounds : function() {
+ getBounds: function () {
return data.bounds;
},
- setBounds : function(bounds) {
+ setBounds: function (bounds) {
data.bounds = bounds;
},
- fitBounds : function(bounds) {
+ fitBounds: function (bounds) {
this.setBounds(bounds);
this.setCenter(bounds.getCenter());
},
};
},
- MVCArray : function(data) {
+ MVCArray: function (data) {
if (data !== undefined) {
this.data = data;
} else {
this.data = [];
}
- this.getLength = function() {
+ this.getLength = function () {
return this.data.length;
};
this.length = this.data.length;
- this.getAt = function(index) {
+ this.getAt = function (index) {
return this.data[index];
};
},
- Point : function(x, y) {
+ Point: function (x, y) {
this.x = x;
this.y = y;
},
- Polyline : function(options) {
+ Polyline: function (options) {
this.options = options;
if (this.options === undefined) {
this.options = {};
}
- this.setOptions = function() {
+ this.setOptions = function () {
};
- this.getPath = function() {
+ this.getPath = function () {
return new google.maps.MVCArray();
};
- this.getMap = function() {
+ this.getMap = function () {
return this.options.map;
};
- this.setMap = function(map) {
+ this.setMap = function (map) {
this.options.map = map;
};
},
- Polygon : function(options) {
+ Polygon: function (options) {
this.options = options;
if (this.options.paths !== undefined) {
this.options.path = new google.maps.MVCArray(this.options.paths);
@@ -256,49 +264,49 @@ var google = {
if (this.options.path === undefined) {
this.options.path = new google.maps.MVCArray();
}
- this.getPath = function() {
+ this.getPath = function () {
return this.options.path;
};
- this.getMap = function() {
+ this.getMap = function () {
return this.options.map;
};
- this.setMap = function(map) {
+ this.setMap = function (map) {
this.options.map = map;
};
},
- Rectangle : function(options) {
+ Rectangle: function (options) {
this.options = options;
if (this.options === undefined) {
this.options = {};
}
- this.getMap = function() {
+ this.getMap = function () {
return this.options.map;
};
- this.setMap = function(map) {
+ this.setMap = function (map) {
this.options.map = map;
};
- this.setOptions = function(options) {
- for ( var attrname in options) {
+ this.setOptions = function (options) {
+ for (var attrname in options) {
this.options[attrname] = options[attrname];
}
};
- this.getBounds = function() {
+ this.getBounds = function () {
return this.options.bounds;
};
- this.setBounds = function(bounds) {
+ this.setBounds = function (bounds) {
this.options.bounds = bounds;
};
},
- Size : function() {
+ Size: function () {
return {};
},
- ZoomControlStyle : {
- LARGE : "LARGE",
+ ZoomControlStyle: {
+ LARGE: "LARGE",
},
}
};
-google.maps.Map.prototype.fitBounds = function() {
+google.maps.Map.prototype.fitBounds = function () {
};
module.exports = google;
diff --git a/frontend-js/src/test/js/map/TouchMap-test.js b/frontend-js/src/test/js/map/TouchMap-test.js
index f162c25743..d310858228 100644
--- a/frontend-js/src/test/js/map/TouchMap-test.js
+++ b/frontend-js/src/test/js/map/TouchMap-test.js
@@ -1,17 +1,19 @@
"use strict";
+require("../mocha-config");
+
var TouchMap = require('../../../main/js/map/TouchMap');
var chai = require('chai');
var assert = chai.assert;
-describe('TouchMap', function() {
- it("simple contructor", function() {
+describe('TouchMap', function () {
+ it("constructor", function () {
var map = helper.createCustomMap();
var touchMap = new TouchMap(map);
assert.ok(touchMap);
});
- it("TouchMap handleStart", function() {
+ it("handleStart", function () {
var map = helper.createCustomMap();
var touchMap = new TouchMap(map);
@@ -20,19 +22,19 @@ describe('TouchMap', function() {
var evt = document.createEvent('UIEvent');
evt.initUIEvent('touchstart', true, true, window, null);
- evt.changedTouches = [ {
- pageX : 200,
- pageY : 200,
- identifier : 1,
- clientX : 100,
- clientY : 100
- } ];
+ evt.changedTouches = [{
+ pageX: 200,
+ pageY: 200,
+ identifier: 1,
+ clientX: 100,
+ clientY: 100
+ }];
touchMap.handleStart(evt);
assert.ok(touchMap.firstFingerId);
});
- it("TouchMap updateCoordinates", function() {
+ it("updateCoordinates", function () {
var map = helper.createCustomMap();
var touchMap = new TouchMap(map);
touchMap.firstFingerId = 1;
@@ -40,13 +42,13 @@ describe('TouchMap', function() {
var evt = document.createEvent('UIEvent');
evt.initUIEvent('touchstart', true, true, window, null);
- evt.changedTouches = [ {
- pageX : 200,
- pageY : 200,
- identifier : 1,
- clientX : 100,
- clientY : 100
- } ];
+ evt.changedTouches = [{
+ pageX: 200,
+ pageY: 200,
+ identifier: 1,
+ clientX: 100,
+ clientY: 100
+ }];
assert.notOk(touchMap.firstEndX);
assert.notOk(touchMap.firstEndY);
@@ -55,11 +57,19 @@ describe('TouchMap', function() {
assert.ok(touchMap.firstEndY);
});
- it("TouchMap lineDistance", function() {
+ it("lineDistance", function () {
var map = helper.createCustomMap();
var touchMap = new TouchMap(map);
var dist = touchMap.lineDistance(1, 1, 4, 5);
assert.equal(5, dist);
});
+
+ it("zoomMap", function () {
+ var map = helper.createCustomMap();
+ var touchMap = new TouchMap(map);
+
+ touchMap.zoomMap(1, 2, 4);
+ assert.equal(map.getGoogleMap().getZoom(), 4);
+ });
});
--
GitLab