Update node dependencies

js/test/api_gmaps.test.js

@@ -40,15 +40,9 @@ describe('Google Maps map API tests', () => {
     container = document.createElement('div');
     mockViewModel = { mapElement: container, model: {} };
     api = new GoogleMapsApi(mockViewModel);
-    spyOn(google.maps, 'InfoWindow').and.callThrough();
-    spyOn(google.maps, 'LatLngBounds').and.callThrough();
-    spyOn(google.maps, 'Map').and.callThrough();
-    spyOn(google.maps, 'Marker').and.callThrough();
-    spyOn(google.maps, 'Polyline').and.callThrough();
     spyOnProperty(GoogleMapsApi, 'loadTimeoutMs', 'get').and.returnValue(loadTimeout);
     spyOn(uAlert, 'error');
     spyOn(lang, '_').and.returnValue('{placeholder}');
-    gmStub.applyPrototypes();
   });
 
   afterEach(() => {
@@ -99,6 +93,7 @@ describe('Google Maps map API tests', () => {
 
   it('should initialize map engine with config values', () => {
     // given
+    spyOn(google.maps, 'Map').and.callThrough();
     spyOn(google.maps.InfoWindow.prototype, 'addListener');
     // when
     api.initMap();
@@ -107,13 +102,13 @@ describe('Google Maps map API tests', () => {
     expect(google.maps.Map.calls.mostRecent().args[0]).toEqual(container);
     expect(google.maps.Map.calls.mostRecent().args[1].center.latitude).toEqual(config.initLatitude);
     expect(google.maps.Map.calls.mostRecent().args[1].center.longitude).toEqual(config.initLongitude);
-    expect(google.maps.InfoWindow).toHaveBeenCalledTimes(1);
     expect(google.maps.InfoWindow.prototype.addListener).toHaveBeenCalledTimes(1);
     expect(google.maps.InfoWindow.prototype.addListener).toHaveBeenCalledWith('closeclick', jasmine.any(Function));
   });
 
   it('should initialize map engine without Google API key', (done) => {
     // given
+    spyOn(google.maps, 'Map').and.callThrough();
     spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
     // when
     api.init()
@@ -144,6 +139,7 @@ describe('Google Maps map API tests', () => {
 
   it('should show alert if authorization error occurs after initialization', (done) => {
     // given
+    spyOn(google.maps, 'Map').and.callThrough();
     spyOn(uUtils, 'loadScript').and.returnValue(Promise.resolve());
     lang._.and.returnValue('authfailure');
     // when
@@ -230,6 +226,7 @@ describe('Google Maps map API tests', () => {
     // given
     const track = TrackFactory.getTrack();
     spyOn(api, 'setMarker');
+    spyOn(google.maps, 'Polyline').and.callThrough();
     spyOn(google.maps, 'LatLng').and.callThrough();
     spyOn(google.maps.LatLngBounds.prototype, 'extend').and.callThrough();
     const expectedPolyOptions = {
@@ -269,18 +266,18 @@ describe('Google Maps map API tests', () => {
   it('should fit bounds if update without zoom (should not add listener for "bounds_changed")', () => {
     // given
     const track = TrackFactory.getTrack();
-    spyOn(google.maps.event, 'addListenerOnce');
-    spyOn(google.maps.Map.prototype, 'fitBounds');
-    spyOn(api, 'setMarker');
-    spyOn(window, 'setTimeout');
     api.map = new google.maps.Map(container);
+    spyOn(google.maps.event, 'addListenerOnce');
+    spyOn(api, 'setMarker');
+    spyOn(api.map, 'fitBounds');
+    spyOn(window, 'setTimeout');
     // when
     api.displayTrack(track, true);
     // then
     expect(api.polies.length).toBe(1);
     expect(api.polies[0].path.length).toBe(track.length);
     expect(api.setMarker).toHaveBeenCalledTimes(track.length);
-    expect(google.maps.Map.prototype.fitBounds).toHaveBeenCalledTimes(1);
+    expect(api.map.fitBounds).toHaveBeenCalledTimes(1);
     expect(google.maps.event.addListenerOnce).toHaveBeenCalledTimes(1);
     expect(setTimeout).not.toHaveBeenCalled();
   });
@@ -308,8 +305,7 @@ describe('Google Maps map API tests', () => {
     // given
     const track = TrackFactory.getTrack(1);
     track.positions[0].timestamp = 1;
-    spyOn(google.maps.Marker.prototype, 'addListener');
+    spyOn(google.maps, 'Marker').and.callThrough();
-    spyOn(google.maps.Marker.prototype, 'setIcon');
     spyOn(GoogleMapsApi, 'getMarkerIcon');
     api.map = new google.maps.Map(container);
 
@@ -322,12 +318,27 @@ describe('Google Maps map API tests', () => {
     expect(google.maps.Marker.calls.mostRecent().args[0].position.longitude).toBe(track.positions[0].longitude);
     expect(google.maps.Marker.calls.mostRecent().args[0].title).toContain('1970');
     expect(google.maps.Marker.calls.mostRecent().args[0].map).toEqual(api.map);
+    expect(api.markers.length).toBe(1);
+  });
+
+  it('should create marker from track position and set its icon and listener', () => {
+    // given
+    const track = TrackFactory.getTrack(1);
+    track.positions[0].timestamp = 1;
+    spyOn(google.maps.Marker.prototype, 'addListener');
+    spyOn(google.maps.Marker.prototype, 'setIcon');
+    spyOn(GoogleMapsApi, 'getMarkerIcon');
+    api.map = new google.maps.Map(container);
+
+    expect(api.markers.length).toBe(0);
+    // when
+    api.setMarker(0, track);
+    // then
     expect(google.maps.Marker.prototype.setIcon).toHaveBeenCalledTimes(1);
     expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledTimes(3);
     expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledWith('click', jasmine.any(Function));
     expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledWith('mouseover', jasmine.any(Function));
     expect(google.maps.Marker.prototype.addListener).toHaveBeenCalledWith('mouseout', jasmine.any(Function));
-    expect(api.markers.length).toBe(1);
   });
 
   it('should create marker different marker icon for start, end and normal position', () => {

js/test/api_openlayers.test.js

@@ -271,6 +271,7 @@ describe('Openlayers map API tests', () => {
     const track = TrackFactory.getTrack();
     spyOn(api, 'setMarker');
     spyOn(api, 'fitToExtent');
+    spyOn(api.map, 'un');
     // when
     api.displayTrack(track, false);
     let zoomControl;
@@ -299,6 +300,7 @@ describe('Openlayers map API tests', () => {
     const track = TrackFactory.getPositionSet();
     spyOn(api, 'setMarker');
     spyOn(api, 'fitToExtent');
+    spyOn(api.map, 'un');
     // when
     api.displayTrack(track, false);
     let zoomControl;
@@ -327,6 +329,7 @@ describe('Openlayers map API tests', () => {
     const markersExtent = [ 3, 2, 1, 0 ];
     spyOn(api, 'fitToExtent').and.callFake((_extent) => _extent);
     spyOn(ol.source.Vector.prototype, 'getExtent').and.returnValue(markersExtent);
+    spyOn(api.map, 'un');
     // when
     api.displayTrack(track, true);
     let zoomControl;

js/test/fixtures/main.html

@@ -19,6 +19,12 @@
 
       <div id="summary" class="section" data-bind="summary"></div>
 
+      <div class="section" data-bind="trackColor">
+        <div class="menu-title">Track color</div>
+        <input id="color-speed" type="checkbox" data-bind="speedVisible"> <label for="color-speed">Speed</label><br>
+        <input id="color-altitude" type="checkbox" data-bind="altitudeVisible"> <label for="color-altitude">Altitude</label><br>
+      </div>
+
       <div id="other" class="section">
         <a id="altitudes" data-bind="onChartToggle">Altitudes chart</a>
       </div>

js/test/helpers/googlemaps.stub.js

@@ -17,13 +17,9 @@
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 
-/* eslint-disable func-style */
+/* eslint-disable func-style,lines-between-class-members,class-methods-use-this,max-classes-per-file */
-const stubObj = {};
-const stubFn = function() {/* ignore */};
-const stubFnObj = function() { return stubObj; };
-
 export const setupGmapsStub = () => {
-  // noinspection JSUnresolvedVariable,JSConstantReassignment
+  // noinspection JSUnresolvedVariable,JSConstantReassignment,JSUnusedGlobalSymbols
   window.google = {
     maps: {
       Animation: {
@@ -31,67 +27,72 @@ export const setupGmapsStub = () => {
         DROP: 2
       },
       event: {
-        addListener: stubFn,
+        addListener: () => {/* ignore */},
-        addListenerOnce: stubFn,
+        addListenerOnce: () => {/* ignore */},
-        removeListener: stubFn,
+        removeListener: () => {/* ignore */},
-        clearListeners: stubFn
+        clearListeners: () => {/* ignore */}
       },
-      Icon: stubFn,
+      Icon: class Icon {/* ignore */},
-      InfoWindow: stubFn,
+      InfoWindow: class InfoWindow {
-      LatLng: function(lat, lng) {
+        addListener() {/* ignore */}
+        open() {/* ignore */}
+        close() {/* ignore */}
+        getMap() {/* ignore */}
+        setContent() {/* ignore */}
+      },
+      LatLng: class LatLng {
+        constructor(lat, lng) {
           this.latitude = parseFloat(lat);
           this.longitude = parseFloat(lng);
+        }
+        lat() { return this.latitude; }
+        lng() { return this.longitude; }
       },
-      LatLngBounds: function(sw, ne) {
+      LatLngBounds: class LatLngBounds {
+        constructor(sw, ne) {
           this.sw = sw;
           this.ne = ne;
+        }
+        extend() {/* ignore */}
+        getNorthEast() { return this.ne; }
+        getSouthWest() { return this.sw; }
+      },
+      Map: class Map {
+        fitBounds() {/* ignore */}
+        getBounds() {/* ignore */}
+        getCenter() {/* ignore */}
+        getDiv() {/* ignore */}
+        getZoom() {/* ignore */}
+        setCenter() {/* ignore */}
+        setMapTypeId() {/* ignore */}
+        setOptions() {/* ignore */}
+        setZoom() {/* ignore */}
       },
-      Map: stubFn,
       MapTypeId: {
         HYBRID: 1,
         ROADMAP: 2,
         SATELLITE: 3,
         TERRAIN: 4
       },
-      Marker: stubFn,
+      Marker: class Marker {
-      Point: stubFnObj,
+        addListener() {/* ignore */}
-      Polyline: function(opts) {
+        getIcon() {/* ignore */}
+        getPosition() {/* ignore */}
+        setAnimation() {/* ignore */}
+        setIcon() {/* ignore */}
+        setMap() {/* ignore */}
+      },
+      Point: class Point {/* ignore */},
+      Polyline: class Polyline {
+        constructor(opts) {
           this.options = opts;
           this.path = [];
         }
+        getPath() { return this.path; }
+        setMap() {/* ignore */}
+      }
     }
   };
-  applyPrototypes(stubFn, stubObj);
-};
-
-export const applyPrototypes = () => {
-  window.google.maps.InfoWindow.prototype.addListener = stubFn;
-  window.google.maps.InfoWindow.prototype.close = stubFn;
-  window.google.maps.InfoWindow.prototype.getMap = stubFn;
-  window.google.maps.InfoWindow.prototype.open = stubFn;
-  window.google.maps.InfoWindow.prototype.setContent = stubFn;
-  window.google.maps.LatLng.prototype.lat = function () { return this.latitude; };
-  window.google.maps.LatLng.prototype.lng = function () { return this.longitude; };
-  window.google.maps.LatLngBounds.prototype.extend = stubFn;
-  window.google.maps.LatLngBounds.prototype.getNorthEast = function () { return this.ne; };
-  window.google.maps.LatLngBounds.prototype.getSouthWest = function () { return this.sw; };
-  window.google.maps.Map.prototype.fitBounds = stubFn;
-  window.google.maps.Map.prototype.getBounds = stubFn;
-  window.google.maps.Map.prototype.getCenter = stubFn;
-  window.google.maps.Map.prototype.getDiv = stubFn;
-  window.google.maps.Map.prototype.getZoom = stubFn;
-  window.google.maps.Map.prototype.setCenter = stubFn;
-  window.google.maps.Map.prototype.setMapTypeId = stubFn;
-  window.google.maps.Map.prototype.setOptions = stubFn;
-  window.google.maps.Map.prototype.setZoom = stubFn;
-  window.google.maps.Marker.prototype.addListener = stubFn;
-  window.google.maps.Marker.prototype.getIcon = stubFn;
-  window.google.maps.Marker.prototype.getPosition = stubFn;
-  window.google.maps.Marker.prototype.setAnimation = stubFn;
-  window.google.maps.Marker.prototype.setIcon = stubFn;
-  window.google.maps.Marker.prototype.setMap = stubFn;
-  window.google.maps.Polyline.prototype.getPath = function () { return this.path; };
-  window.google.maps.Polyline.prototype.setMap = stubFn;
 };
 
 export const clear = () => {

package.json

@@ -19,9 +19,9 @@
   "license": "GPL-3.0-or-later",
   "devDependencies": {
     "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.11.4",
-    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-env": "^7.11.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "browserlist": "^1.0.1",
@@ -29,34 +29,34 @@
     "copy-webpack-plugin": "^6.0.3",
     "core-js": "^3.6.5",
     "csso": "^4.0.3",
-    "eslint": "^7.5.0",
+    "eslint": "^7.7.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jasmine": "^4.1.1",
     "husky": "^4.2.5",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "jasmine": "^3.6.0",
+    "jasmine": "^3.6.1",
-    "karma": "^5.1.0",
+    "karma": "^5.1.1",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "^3.3.1",
+    "karma-jasmine": "^4.0.1",
-    "karma-sourcemap-loader": "^0.3.7",
+    "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^4.0.2",
     "prepush-if-changed": "^1.0.8",
     "puppeteer": "^5.2.1",
     "regenerator-runtime": "^0.13.7",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
-    "terser-webpack-plugin": "^3.0.7",
+    "terser-webpack-plugin": "^4.1.0",
-    "webpack": "^4.43.0",
+    "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
-    "webpack-merge": "^5.0.9"
+    "webpack-merge": "^5.1.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.5",
+    "@babel/runtime": "^7.11.2",
-    "@babel/runtime-corejs3": "^7.10.5",
+    "@babel/runtime-corejs3": "^7.11.2",
     "chartist": "^0.11.4",
     "chartist-plugin-axistitle": "0.0.7",
-    "ol": "^6.3.1"
+    "ol": "^6.4.3"
   },
   "babel": {
     "presets": [

webpack.dev.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {

webpack.prod.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const TerserPlugin = require('terser-webpack-plugin');
 
@@ -16,7 +16,7 @@ module.exports = merge(common, {
             pure_funcs: [ 'console.log' ]
           },
           output: {
-            comments: false,
+            comments: false
           }
         },
         extractComments: false