From 9a5fe0402f9a2823616d6498a60a0f70a9654c85 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Thu, 24 Aug 2017 18:18:27 +0200
Subject: [PATCH] unit tests of touchMap implementation
---
.../src/main/js/map/AbstractCustomMap.js | 14 ++-
frontend-js/src/main/js/map/TouchMap.js | 81 ++++++--------
frontend-js/src/test/js/map/TouchMap-test.js | 105 +++++++++++++++++-
frontend-js/src/test/js/mocha-config.js | 2 +
4 files changed, 151 insertions(+), 51 deletions(-)
diff --git a/frontend-js/src/main/js/map/AbstractCustomMap.js b/frontend-js/src/main/js/map/AbstractCustomMap.js
index 06bccc48ba..4aa5ab3a45 100644
--- a/frontend-js/src/main/js/map/AbstractCustomMap.js
+++ b/frontend-js/src/main/js/map/AbstractCustomMap.js
@@ -316,11 +316,15 @@ AbstractCustomMap.prototype.registerMapClickEvents = function () {
google.maps.event.addListener(this.getGoogleMap(), 'click', function (mouseEvent) {
var point = self.fromLatLngToPoint(mouseEvent.latLng);
var searchDb = customMap.getOverlayByName('search');
- return searchDb.searchByCoordinates({
- modelId: self.getModel().getId(),
- coordinates: point,
- zoom: self.getGoogleMap().getZoom()
- }).then(null, GuiConnector.alert);
+ if (searchDb !== undefined) {
+ return searchDb.searchByCoordinates({
+ modelId: self.getModel().getId(),
+ coordinates: point,
+ zoom: self.getGoogleMap().getZoom()
+ }).then(null, GuiConnector.alert);
+ } else {
+ logger.warn("Search is impossible because search db is not present");
+ }
});
// select last clicked map
diff --git a/frontend-js/src/main/js/map/TouchMap.js b/frontend-js/src/main/js/map/TouchMap.js
index bdc9954b22..c772a26dde 100644
--- a/frontend-js/src/main/js/map/TouchMap.js
+++ b/frontend-js/src/main/js/map/TouchMap.js
@@ -14,42 +14,42 @@ function TouchMap(paramCustomMap) {
var self = this;
var el = this.getMap().getDiv();
- el.addEventListener('touchstart', function(evt) {
+ el.addEventListener('touchstart', function (evt) {
self.handleStart(evt);
}, true);
- el.addEventListener("touchend", function(evt) {
+ el.addEventListener("touchend", function (evt) {
self.handleEnd(evt);
}, true);
- el.addEventListener("touchcancel", function(evt) {
+ el.addEventListener("touchcancel", function (evt) {
self.handleCancel(evt);
}, true);
- el.addEventListener("touchleave", function(evt) {
+ el.addEventListener("touchleave", function (evt) {
self.handleEnd(evt);
}, true);
- el.addEventListener("touchmove", function(evt) {
+ el.addEventListener("touchmove", function (evt) {
self.handleMove(evt);
}, true);
this.clearTouchData();
this.latLng = new google.maps.LatLng(0.0, 0.0);
- google.maps.event.addListener(this.getMap(), 'mouseover', function(mouseEvent) {
+ google.maps.event.addListener(this.getMap(), 'mouseover', function (mouseEvent) {
self.latLng = mouseEvent.latLng;
});
- google.maps.event.addListener(this.getMap(), 'mousemove', function(mouseEvent) {
+ google.maps.event.addListener(this.getMap(), 'mousemove', function (mouseEvent) {
self.latLng = mouseEvent.latLng;
});
- google.maps.event.addListener(this.getMap(), 'zoom_changed', function() {
+ google.maps.event.addListener(this.getMap(), 'zoom_changed', function () {
self.getCustomMap().getTopMap().refreshMarkers();
});
}
-TouchMap.prototype.getCustomMap = function() {
+TouchMap.prototype.getCustomMap = function () {
return this._customMap;
};
-TouchMap.prototype.clearTouchData = function() {
+TouchMap.prototype.clearTouchData = function () {
this.firstFingerId = null;
this.firstStartX = null;
this.firstStartY = null;
@@ -79,7 +79,7 @@ TouchMap.prototype.clearTouchData = function() {
this.longClickTime = 1000;
};
-TouchMap.prototype.handleStart = function(evt) {
+TouchMap.prototype.handleStart = function (evt) {
logger.debug("touchstart.");
evt.preventDefault();
evt.stopPropagation();
@@ -94,7 +94,7 @@ TouchMap.prototype.handleStart = function(evt) {
for (var i = 0; i < touches.length; i++) {
self.ongoingTouches.push(self.copyTouch(touches[i]));
- logger.debug("touchstart:" + i + ". " + touches[i].identifier);
+ logger.debug("touchstart: " + i + ". " + touches[i].identifier);
if (self.ongoingTouches.length === 1) {
self.firstFingerId = touches[i].identifier;
@@ -129,12 +129,9 @@ TouchMap.prototype.handleStart = function(evt) {
self.lastStartedFinger = touches[i].identifier;
self.lastStartedTime = (new Date()).getTime();
}
-
- // log3();
-
};
-TouchMap.prototype.updateCoordinates = function(touch) {
+TouchMap.prototype.updateCoordinates = function (touch) {
var self = this;
if (touch.identifier === self.firstFingerId) {
self.firstEndX = touch.clientX;
@@ -146,7 +143,7 @@ TouchMap.prototype.updateCoordinates = function(touch) {
}
};
-TouchMap.prototype.lineDistance = function(x1, y1, x2, y2) {
+TouchMap.prototype.lineDistance = function (x1, y1, x2, y2) {
var xs = 0;
var ys = 0;
xs = x2 - x1;
@@ -156,14 +153,14 @@ TouchMap.prototype.lineDistance = function(x1, y1, x2, y2) {
return Math.sqrt(xs + ys);
};
-TouchMap.prototype.moveMap = function(dx, dy) {
+TouchMap.prototype.moveMap = function (dx, dy) {
var self = this;
self.getMap().panBy(dx - self.lastMoveDx, dy - self.lastMoveDy);
self.lastMoveDx = dx;
self.lastMoveDy = dy;
};
-TouchMap.prototype.zoomMap = function(pointX, pointY, zoomLevel) {
+TouchMap.prototype.zoomMap = function (pointX, pointY, zoomLevel) {
var self = this;
if (self.lastZoom !== zoomLevel) {
var div = this.getMap().getDiv();
@@ -182,7 +179,7 @@ TouchMap.prototype.zoomMap = function(pointX, pointY, zoomLevel) {
}
};
-TouchMap.prototype.makeMove = function() {
+TouchMap.prototype.makeMove = function () {
var self = this;
if (self.firstFingerId !== null && self.firstFingerId !== undefined) {
if (self.secondFingerId !== null && self.secondFingerId !== undefined) {
@@ -202,26 +199,25 @@ TouchMap.prototype.makeMove = function() {
}
};
-TouchMap.prototype.makeLeftClick = function(x, y) {
+TouchMap.prototype.makeLeftClick = function (x, y) {
logger.debug("Make left click on " + x + ", " + y + ".");
var self = this;
var el = $(document.elementFromPoint(x, y));
- logger.debug(el);
// if we clicked on one of the elements on the map then emulate the click
if (el.attr('src') !== undefined || el.attr('id') !== undefined || el.attr('title') !== undefined) {
el.click();
} else {
var mev = {
- stop : null,
- latLng : self.getCustomMap().getMouseLatLng()
+ stop: null,
+ latLng: self.getCustomMap().getMouseLatLng()
};
google.maps.event.trigger(self.getMap(), 'click', mev);
}
};
-TouchMap.prototype.makeRightClick = function(x, y) {
+TouchMap.prototype.makeRightClick = function (x, y) {
logger.debug("Make right click on " + x + ", " + y);
var self = this;
var el = $(document.elementFromPoint(x, y));
@@ -231,28 +227,27 @@ TouchMap.prototype.makeRightClick = function(x, y) {
el.click();
} else {
var mev = {
- stop : null,
- latLng : self.getCustomMap().getMouseLatLng()
+ stop: null,
+ latLng: self.getCustomMap().getMouseLatLng()
};
google.maps.event.trigger(self.getMap(), 'rightclick', mev);
}
};
-TouchMap.prototype.handleEnd = function(evt) {
+TouchMap.prototype.handleEnd = function (evt) {
evt.preventDefault();
evt.stopPropagation();
var touches = evt.changedTouches;
var self = this;
for (var i = 0; i < touches.length; i++) {
var idx = self.ongoingTouchIndexById(touches[i].identifier);
- logger.debug("touch end:" + idx + "...");
+ logger.debug("touch end: " + idx + "...");
logger.debug("first finger: " + self.firstFingerId);
logger.debug("last started: " + self.lastStartedFinger);
var dist = Math.abs(self.firstEndX - self.firstStartX) + Math.abs(self.firstEndY - self.firstStartY);
if (idx === self.firstFingerId && idx === self.lastStartedFinger && (dist < self.clickRange)) {
var clickTime = (new Date().getTime() - self.lastStartedTime);
- logger.debug(clickTime + ", " + self.longClickTime);
if (clickTime < self.longClickTime) {
self.makeLeftClick(GuiConnector.xPos, GuiConnector.yPos);
} else {
@@ -282,7 +277,7 @@ TouchMap.prototype.handleEnd = function(evt) {
}
};
-TouchMap.prototype.handleMove = function(evt) {
+TouchMap.prototype.handleMove = function (evt) {
evt.preventDefault();
evt.stopPropagation();
var touches = evt.changedTouches;
@@ -304,15 +299,13 @@ TouchMap.prototype.handleMove = function(evt) {
self.makeMove();
- // clear logs
- logger.debug("", true);
for (i = 0; i < self.ongoingTouches.length; i++) {
var touch = self.ongoingTouches[i];
logger.debug(touch.identifier + ": " + touch.clientX + "," + touch.clientY);
}
};
-TouchMap.prototype.handleCancel = function(evt) {
+TouchMap.prototype.handleCancel = function (evt) {
var self = this;
evt.preventDefault();
evt.stopPropagation();
@@ -323,34 +316,32 @@ TouchMap.prototype.handleCancel = function(evt) {
}
};
-TouchMap.prototype.copyTouch = function(touch) {
+TouchMap.prototype.copyTouch = function (touch) {
return {
- identifier : touch.identifier,
- pageX : touch.pageX,
- pageY : touch.pageY,
- clientX : touch.clientX,
- clientY : touch.clientY
+ identifier: touch.identifier,
+ pageX: touch.pageX,
+ pageY: touch.pageY,
+ clientX: touch.clientX,
+ clientY: touch.clientY
};
};
-TouchMap.prototype.ongoingTouchIndexById = function(idToFind) {
+TouchMap.prototype.ongoingTouchIndexById = function (idToFind) {
var self = this;
for (var i = 0; i < self.ongoingTouches.length; i++) {
var id = self.ongoingTouches[i].identifier;
-
if (id === idToFind) {
- // log(id+","+idToFind+","+i);
return i;
}
}
return -1; // not found
};
-TouchMap.prototype.setMap = function(map) {
+TouchMap.prototype.setMap = function (map) {
this._map = map;
};
-TouchMap.prototype.getMap = function() {
+TouchMap.prototype.getMap = function () {
return this._map;
};
diff --git a/frontend-js/src/test/js/map/TouchMap-test.js b/frontend-js/src/test/js/map/TouchMap-test.js
index d310858228..fecc0a813d 100644
--- a/frontend-js/src/test/js/map/TouchMap-test.js
+++ b/frontend-js/src/test/js/map/TouchMap-test.js
@@ -30,12 +30,115 @@ describe('TouchMap', function () {
clientY: 100
}];
- touchMap.handleStart(evt);
+ map.getElement().dispatchEvent(evt);
+
assert.ok(touchMap.firstFingerId);
});
+ describe("handleEnd", function () {
+ it("after move", function () {
+ var map = helper.createCustomMap();
+ var touchMap = new TouchMap(map);
+
+ var evt = document.createEvent('UIEvent');
+ evt.initUIEvent('touchstart', true, true, window, null);
+
+ evt.changedTouches = [{
+ pageX: 200,
+ pageY: 200,
+ identifier: 1,
+ clientX: 100,
+ clientY: 100
+ }];
+
+ map.getElement().dispatchEvent(evt);
+
+ evt = document.createEvent('UIEvent');
+ evt.initUIEvent('touchend', true, true, window, null);
+
+ evt.changedTouches = [{
+ pageX: 300,
+ pageY: 300,
+ identifier: 1,
+ clientX: 200,
+ clientY: 200
+ }];
+
+ map.getElement().dispatchEvent(evt);
+
+ assert.notOk(touchMap.firstFingerId);
+ });
+ it("as a click", function () {
+ return ServerConnector.getProject().then(function (project) {
+ var map = helper.createCustomMap(project);
+ var touchMap = new TouchMap(map);
+
+ var evtLocation = {
+ pageX: 10,
+ pageY: 10,
+ identifier: 0,
+ clientX: 10,
+ clientY: 10
+ };
+
+ var evt = document.createEvent('UIEvent');
+ evt.initUIEvent('touchstart', true, true, window, null);
+ evt.changedTouches = [evtLocation];
+ map.getElement().dispatchEvent(evt);
+
+ var clicked = false;
+ google.maps.event.addListener(map.getGoogleMap(), "click", function () {
+ clicked = true;
+ })
+ evt = document.createEvent('UIEvent');
+ evt.initUIEvent('touchend', true, true, window, null);
+ evt.changedTouches = [evtLocation];
+ map.getElement().dispatchEvent(evt);
+
+ assert.notOk(touchMap.firstFingerId);
+ assert.ok(clicked);
+ });
+ });
+ });
+
+ describe("handleMove", function () {
+ it("default", function () {
+ var map = helper.createCustomMap();
+ var coordinates = map.getGoogleMap().getCenter();
+ var touchMap = new TouchMap(map);
+
+ var evtLocation = {
+ pageX: 10,
+ pageY: 10,
+ identifier: 0,
+ clientX: 10,
+ clientY: 10
+ };
+
+ var evt = document.createEvent('UIEvent');
+ evt.initUIEvent('touchstart', true, true, window, null);
+ evt.changedTouches = [evtLocation];
+ map.getElement().dispatchEvent(evt);
+
+ evt = document.createEvent('UIEvent');
+ evt.initUIEvent('touchmove', true, true, window, null);
+ evtLocation.pageX += 10;
+ evtLocation.pageY += 10;
+ evtLocation.clientX += 10;
+ evtLocation.clientY += 10;
+ evt.changedTouches = [evtLocation];
+ map.getElement().dispatchEvent(evt);
+
+ var coordinates2 = map.getGoogleMap().getCenter();
+
+ assert.ok(coordinates.x != coordinates2.x);
+ assert.ok(coordinates.y != coordinates2.y);
+
+ });
+ });
it("updateCoordinates", function () {
var map = helper.createCustomMap();
+
var touchMap = new TouchMap(map);
touchMap.firstFingerId = 1;
diff --git a/frontend-js/src/test/js/mocha-config.js b/frontend-js/src/test/js/mocha-config.js
index 5b999e0f42..a22a4f79ec 100644
--- a/frontend-js/src/test/js/mocha-config.js
+++ b/frontend-js/src/test/js/mocha-config.js
@@ -38,6 +38,8 @@ before(function () {
global.dom = new jsdom.JSDOM();
global.window = global.dom.window;
global.document = window.document;
+ global.document.elementFromPoint = function () {
+ }
global.$ = require('jquery');
global.jQuery = $;
--
GitLab