From c92c65a89b1006a95002585033ddd5b94b35c6d0 Mon Sep 17 00:00:00 2001
From: Just van den Broecke <just@justobjects.nl>
Date: Fri, 26 Feb 2021 02:34:33 +0100
Subject: [PATCH 1/3] #180 fixed Unit Tests except MeasureWin.spec.js -
 lifecycle issues

---
 src/components/helpwin/HelpWin.vue            | 11 ++--
 src/components/helpwin/ToggleButton.vue       | 12 ++---
 src/components/measuretool/MeasureWin.vue     | 47 ++++++++++++----
 .../measuretool/OlMeasureController.js        | 20 ++++++-
 src/components/ol/Map.vue                     |  8 +++
 src/components/ol/PermalinkController.js      | 16 +++++-
 src/mixins/Mapable.js                         |  9 ++++
 src/util/Layer.js                             |  2 -
 test/unit/index.js                            |  3 +-
 .../specs/components/helpwin/HelpWin.spec.js  | 40 ++++++++++++--
 .../components/helpwin/ToggleButton.spec.js   | 14 +++--
 .../components/measuretool/MeasureWin.spec.js | 34 +++++++++---
 test/unit/specs/components/ol/Map.spec.js     | 40 +++++++++++---
 .../components/ol/PermalinkController.spec.js | 54 ++++++++++++++-----
 14 files changed, 246 insertions(+), 64 deletions(-)

diff --git a/src/components/helpwin/HelpWin.vue b/src/components/helpwin/HelpWin.vue
index 3c2ae703..68bdadfe 100644
--- a/src/components/helpwin/HelpWin.vue
+++ b/src/components/helpwin/HelpWin.vue
@@ -35,13 +35,14 @@
       icon: {type: String, required: false, default: 'help'}
     },
     data () {
+      let config = this.$appConfig.modules['wgu-helpwin'] || {};
       return {
         show: false,
-        windowTitle: this.$appConfig.modules['wgu-helpwin'].windowTitle,
-        textTitle: this.$appConfig.modules['wgu-helpwin'].textTitle,
-        htmlContent: this.$appConfig.modules['wgu-helpwin'].htmlContent,
-        infoLinkUrl: this.$appConfig.modules['wgu-helpwin'].infoLinkUrl,
-        infoLinkText: this.$appConfig.modules['wgu-helpwin'].infoLinkText
+        windowTitle: config.windowTitle || 'About',
+        textTitle: config.textTitle || 'About Wegue',
+        htmlContent: config.htmlContent || '<h3>WebGIS with OpenLayers and Vue.js</h3>',
+        infoLinkUrl: config.infoLinkUrl || 'https://github.com/meggsimum/wegue',
+        infoLinkText: config.infoLinkText || 'More info'
       }
     },
     methods: {
diff --git a/src/components/helpwin/ToggleButton.vue b/src/components/helpwin/ToggleButton.vue
index 0b704b4b..96f07095 100644
--- a/src/components/helpwin/ToggleButton.vue
+++ b/src/components/helpwin/ToggleButton.vue
@@ -1,11 +1,11 @@
-
 <template>
 
- <v-dialog v-model="show" max-width="300" :hide-overlay="false">
-   <template v-slot:activator="{ on }">
-    <v-btn icon dark="dark" v-on="on" >
-      <v-icon medium>{{icon}}</v-icon></v-btn>
-      {{text}}
+  <v-dialog v-model="show" max-width="300" :hide-overlay="false">
+    <template v-slot:activator="{ on }">
+      <v-btn icon dark="dark" v-on="on" >
+        <v-icon medium>{{icon}}</v-icon>
+        {{text}}
+      </v-btn>
     </template>
 
     <wgu-helpwin
diff --git a/src/components/measuretool/MeasureWin.vue b/src/components/measuretool/MeasureWin.vue
index 2d1e73f7..44e7e120 100644
--- a/src/components/measuretool/MeasureWin.vue
+++ b/src/components/measuretool/MeasureWin.vue
@@ -62,20 +62,30 @@
         top: this.initPos ? this.initPos.top + 'px' : '0'
       }
     },
+    destroy () {
+      if (this.olMapCtrl) {
+        this.olMapCtrl.destroy();
+        this.olMapCtrl = undefined;
+      }
+    },
     watch: {
       show () {
-        var me = this;
-        if (me.show === true) {
-          me.olMapCtrl.addInteraction(me.measureType, me.onMeasureVertexSet);
+        if (!this.olMapCtrl) {
+          return;
+        }
+        if (this.show === true) {
+          this.olMapCtrl.addInteraction(this.measureType, this.onMeasureVertexSet);
         } else {
-          me.olMapCtrl.removeInteraction();
+          this.olMapCtrl.removeInteraction();
         }
       },
       measureType () {
-        var me = this;
+        if (!this.olMapCtrl) {
+          return;
+        }
         // reset old geom
-        me.measureGeom = {};
-        me.olMapCtrl.addInteraction(me.measureType, me.onMeasureVertexSet);
+        this.measureGeom = {};
+        this.olMapCtrl.addInteraction(this.measureType, this.onMeasureVertexSet);
       }
     },
     methods: {
@@ -93,11 +103,26 @@
        * This function is executed, after the map is bound (see mixins/Mapable)
        */
       onMapBound () {
-        const me = this;
-        const measureConf = me.$appConfig.modules[me.moduleName] || {};
-        this.olMapCtrl = new OlMeasureController(me.map, measureConf);
+        if (this.unbound) {
+          return;
+        }
+        // Only create if specified in config
+        if (!this.$appConfig.modules || !this.$appConfig.modules[this.moduleName]) {
+          return;
+        }
+        const measureConf = this.$appConfig.modules[this.moduleName] || {};
+        this.olMapCtrl = new OlMeasureController(this.map, measureConf);
 
-        me.olMapCtrl.createMeasureLayer();
+        this.olMapCtrl.createMeasureLayer();
+      },
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapUnbound () {
+        if (this.olMapCtrl) {
+          this.olMapCtrl.destroy();
+          this.olMapCtrl = undefined;
+        }
       },
       /**
        * Callback function executed when user sets a measure point on the map.
diff --git a/src/components/measuretool/OlMeasureController.js b/src/components/measuretool/OlMeasureController.js
index f1b86659..8ac1aaed 100644
--- a/src/components/measuretool/OlMeasureController.js
+++ b/src/components/measuretool/OlMeasureController.js
@@ -18,6 +18,21 @@ export default class OlMeasureController {
   constructor (olMap, measureConf) {
     this.map = olMap;
     this.measureConf = measureConf || {};
+    this.measureLayer = undefined;
+  }
+
+  /**
+   * Tears down this controller.
+   */
+  destroy () {
+    console.info('====> OlMeasureController.destroy')
+    if (!this.measureLayer || !this.map) {
+      return;
+    }
+    this.removeInteraction();
+    console.info('====> OlMeasureController.removeLayer')
+    this.map.removeLayer(this.measureLayer);
+    this.measureLayer = undefined;
   }
 
   /**
@@ -25,11 +40,12 @@ export default class OlMeasureController {
    * map.
    */
   createMeasureLayer () {
+    console.info('====> OlMeasureController.createMeasureLayer')
     const me = this;
     const measureConf = me.measureConf;
     // create a vector layer to
     var source = new VectorSource();
-    var vector = new VectorLayer({
+    this.measureLayer = new VectorLayer({
       name: 'Measure Layer',
       displayInLayerList: false,
       source: source,
@@ -44,7 +60,7 @@ export default class OlMeasureController {
       })
     });
 
-    me.map.addLayer(vector);
+    me.map.addLayer(this.measureLayer);
 
     // make vector source available as member
     me.source = source;
diff --git a/src/components/ol/Map.vue b/src/components/ol/Map.vue
index e38c08ad..d274ef6c 100644
--- a/src/components/ol/Map.vue
+++ b/src/components/ol/Map.vue
@@ -79,6 +79,14 @@ export default {
       me.setupMapHover();
     }, 200);
   },
+  destroyed () {
+    if (this.permalinkController) {
+      this.permalinkController.tearDown();
+      this.permalinkController = undefined;
+    }
+    // Send the event 'ol-map-unmounted' with the OL map as payload
+    WguEventBus.$emit('ol-map-unmounted', this.map);
+  },
   created () {
     // make map rotateable according to property
     const interactions = defaultInteractions({
diff --git a/src/components/ol/PermalinkController.js b/src/components/ol/PermalinkController.js
index 7e4d9668..86d06206 100644
--- a/src/components/ol/PermalinkController.js
+++ b/src/components/ol/PermalinkController.js
@@ -57,7 +57,7 @@ export default class PermalinkController {
     // restore the view state when navigating through the history (browser back/forward buttons), see
     // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
     window.addEventListener('popstate', (event) => {
-      if (event.state === null) {
+      if (event.state === null || this.map === null) {
         return;
       }
 
@@ -85,10 +85,21 @@ export default class PermalinkController {
     });
   }
 
+  /**
+   * Stop this instance.
+   */
+  tearDown () {
+    this.unsubscribeLayers();
+    this.map = null;
+  }
+
   /**
    * Subscribe to Layer visibility changes.
    */
   subscribeLayers () {
+    if (!this.map) {
+      return;
+    }
     // First unsubscribe from all
     this.unsubscribeLayers();
 
@@ -105,6 +116,9 @@ export default class PermalinkController {
    * Unsubscribe to Layer visibility changes.
    */
   unsubscribeLayers () {
+    if (!this.map) {
+      return;
+    }
     // Listen to each Layer's visibility changes.
     this.layerListeners.forEach((item) => {
       item.layer.un(item.key.type, item.key.listener)
diff --git a/src/mixins/Mapable.js b/src/mixins/Mapable.js
index 46f40540..0c6ba1c6 100644
--- a/src/mixins/Mapable.js
+++ b/src/mixins/Mapable.js
@@ -16,6 +16,7 @@ export const Mapable = {
 
         if (this.onMapBound) {
           this.onMapBound();
+          this.unbound = false;
         }
       });
     } else {
@@ -23,7 +24,15 @@ export const Mapable = {
       this.map = this.$map;
       if (this.onMapBound) {
         this.onMapBound();
+        this.unbound = false;
       }
     }
+    WguEventBus.$on('ol-map-unmounted', () => {
+      // Make the OL map unaccessible in this component
+      if (this.onMapUnbound) {
+        this.onMapUnbound();
+        this.unbound = true;
+      }
+    });
   }
 };
diff --git a/src/util/Layer.js b/src/util/Layer.js
index 998f7131..72122428 100644
--- a/src/util/Layer.js
+++ b/src/util/Layer.js
@@ -12,8 +12,6 @@ const LayerUtil = {
    */
   getLayersBy (key, value, olMap) {
     if (!olMap) {
-      console.warn('No OL map passed to LayerUtil.getLayersBy - ' +
-        'no layer detection possible!');
       return [];
     }
 
diff --git a/test/unit/index.js b/test/unit/index.js
index c69f33fd..8c08b858 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
-
+// import Vuetify from 'vuetify';
+// Vue.use(Vuetify);
 Vue.config.productionTip = false
 
 // require all test files (files that ends with .spec.js)
diff --git a/test/unit/specs/components/helpwin/HelpWin.spec.js b/test/unit/specs/components/helpwin/HelpWin.spec.js
index 3288c89b..e7368fa2 100644
--- a/test/unit/specs/components/helpwin/HelpWin.spec.js
+++ b/test/unit/specs/components/helpwin/HelpWin.spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import HelpWin from '@/components/helpwin/HelpWin'
+import Vue from 'vue';
 
 describe('helpwin/HelpWin.vue', () => {
   // Inspect the raw component options
@@ -7,23 +8,52 @@ describe('helpwin/HelpWin.vue', () => {
     expect(typeof HelpWin).to.not.equal('undefined');
   });
 
-  describe('props', () => {
+  describe('unconfigured', () => {
     let comp;
     beforeEach(() => {
+      Vue.prototype.$appConfig = {modules: {}};
       comp = shallowMount(HelpWin);
     });
 
     it('has correct default props', () => {
       expect(comp.vm.color).to.equal('red darken-3');
       expect(comp.vm.icon).to.equal('help');
-      expect(comp.vm.title).to.equal('About');
-      expect(comp.vm.headline).to.equal('About Wegue');
-      expect(comp.vm.content).to.equal('<h3>WebGIS with OpenLayers and Vue.js</h3> Template and re-usable components for webmapping applications with OpenLayers and Vue.js');
-      expect(comp.vm.infoLink).to.equal('https://github.com/meggsimum/wegue');
+      expect(comp.vm.windowTitle).to.equal('About');
+      expect(comp.vm.textTitle).to.equal('About Wegue');
+      expect(comp.vm.htmlContent).to.equal('<h3>WebGIS with OpenLayers and Vue.js</h3>');
+      expect(comp.vm.infoLinkUrl).to.equal('https://github.com/meggsimum/wegue');
       expect(comp.vm.infoLinkText).to.equal('More info');
     });
   });
 
+  describe('configured', () => {
+    let comp;
+    beforeEach(() => {
+      // Config is fetched on 'mount' so need to defined before.
+      Vue.prototype.$appConfig = {
+        modules: {
+          'wgu-helpwin': {
+            'windowTitle': 'My Window Title',
+            'htmlContent': '<h1>MY CONTENT</h1>',
+            'infoLinkUrl': 'https://wegue.org',
+            'infoLinkText': 'Some Info Link Text'
+          }
+        }
+      };
+      comp = shallowMount(HelpWin);
+    });
+
+    it('has correct configured and default props', () => {
+      expect(comp.vm.color).to.equal('red darken-3');
+      expect(comp.vm.icon).to.equal('help');
+      expect(comp.vm.windowTitle).to.equal('My Window Title');
+      expect(comp.vm.textTitle).to.equal('About Wegue');
+      expect(comp.vm.htmlContent).to.equal('<h1>MY CONTENT</h1>');
+      expect(comp.vm.infoLinkUrl).to.equal('https://wegue.org');
+      expect(comp.vm.infoLinkText).to.equal('Some Info Link Text');
+    });
+  });
+
   describe('data', () => {
     let comp;
     beforeEach(() => {
diff --git a/test/unit/specs/components/helpwin/ToggleButton.spec.js b/test/unit/specs/components/helpwin/ToggleButton.spec.js
index 216b8ddd..0ff11b6e 100644
--- a/test/unit/specs/components/helpwin/ToggleButton.spec.js
+++ b/test/unit/specs/components/helpwin/ToggleButton.spec.js
@@ -1,5 +1,9 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import HelpWinToggleBtn from '@/components/helpwin/ToggleButton';
+import Vue from 'vue';
+
+// Note: shallowMount does not work for vue test with scoped slots
+// https://github.com/vuejs/vue-test-utils/issues/1261
 
 describe('helpwin/ToggleButton.vue', () => {
   // Inspect the raw component options
@@ -7,10 +11,11 @@ describe('helpwin/ToggleButton.vue', () => {
     expect(typeof HelpWinToggleBtn).to.not.equal('undefined');
   });
 
-  describe('props', () => {
+  describe('default props', () => {
     let comp;
     beforeEach(() => {
-      comp = shallowMount(HelpWinToggleBtn);
+      Vue.prototype.$appConfig = {modules: {}};
+      comp = mount(HelpWinToggleBtn);
     });
 
     it('has correct default props', () => {
@@ -24,7 +29,8 @@ describe('helpwin/ToggleButton.vue', () => {
   describe('data', () => {
     let comp;
     beforeEach(() => {
-      comp = shallowMount(HelpWinToggleBtn);
+      Vue.prototype.$appConfig = {modules: {}};
+      comp = mount(HelpWinToggleBtn);
     });
 
     it('has correct default data', () => {
diff --git a/test/unit/specs/components/measuretool/MeasureWin.spec.js b/test/unit/specs/components/measuretool/MeasureWin.spec.js
index 867177fc..e34434a3 100644
--- a/test/unit/specs/components/measuretool/MeasureWin.spec.js
+++ b/test/unit/specs/components/measuretool/MeasureWin.spec.js
@@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import MeasureWin from '@/components/measuretool/MeasureWin';
 import OlMap from 'ol/Map';
 import LineStringGeom from 'ol/geom/LineString';
+import Vue from 'vue';
+
+const appConfig = {modules: { 'wgu-measuretool': {} }};
 
 describe('measuretool/MeasureWin.vue', () => {
   it('is defined', () => {
@@ -11,6 +14,7 @@ describe('measuretool/MeasureWin.vue', () => {
   describe('props', () => {
     let comp;
     beforeEach(() => {
+      Vue.prototype.$appConfig = appConfig;
       comp = shallowMount(MeasureWin);
     });
 
@@ -21,11 +25,17 @@ describe('measuretool/MeasureWin.vue', () => {
       expect(comp.vm.draggable).to.equal(true);
       expect(comp.vm.initPos).to.equal(undefined);
     });
+
+    afterEach(() => {
+      comp.destroy();
+      Vue.prototype.$appConfig = undefined;
+    });
   });
 
   describe('data', () => {
     let comp;
     beforeEach(() => {
+      Vue.prototype.$appConfig = appConfig;
       comp = shallowMount(MeasureWin);
     });
 
@@ -37,14 +47,20 @@ describe('measuretool/MeasureWin.vue', () => {
       expect(comp.vm.left).to.equal('0');
       expect(comp.vm.top).to.equal('0');
     });
+    afterEach(() => {
+      comp.destroy();
+      Vue.prototype.$appConfig = undefined;
+    });
   });
 
   describe('watchers', () => {
     let comp;
     let vm;
     beforeEach(() => {
+      Vue.prototype.$appConfig = appConfig;
       comp = shallowMount(MeasureWin);
       vm = comp.vm;
+      vm.$appConfig = appConfig;
     });
 
     it('watches show setting to false', done => {
@@ -52,10 +68,8 @@ describe('measuretool/MeasureWin.vue', () => {
       let mockFn = () => {
         cnt++;
       };
-      vm.$appConfig = {modules: {}};
 
-      const map = new OlMap({});
-      vm.map = map;
+      vm.map = new OlMap({});
       vm.onMapBound();
       vm.olMapCtrl.removeInteraction = mockFn;
       // toggle to trigger the watcher
@@ -76,10 +90,8 @@ describe('measuretool/MeasureWin.vue', () => {
       let mockFn = () => {
         cnt++;
       };
-      vm.$appConfig = {modules: {}};
 
-      const map = new OlMap({});
-      vm.map = map;
+      vm.map = new OlMap({});
       vm.onMapBound();
       vm.olMapCtrl.addInteraction = mockFn;
       vm.show = true;
@@ -96,12 +108,18 @@ describe('measuretool/MeasureWin.vue', () => {
         done();
       })
     });
+    afterEach(() => {
+      vm.olMapCtrl.destroy();
+      comp.destroy();
+      Vue.prototype.$appConfig = undefined;
+    });
   });
 
   describe('methods', () => {
     let comp;
     let vm;
     beforeEach(() => {
+      Vue.prototype.$appConfig = appConfig;
       comp = shallowMount(MeasureWin);
       vm = comp.vm;
     });
@@ -121,5 +139,9 @@ describe('measuretool/MeasureWin.vue', () => {
       vm.onMeasureVertexSet(lineGeom);
       expect(vm.measureGeom.geom).to.equal(lineGeom);
     });
+    afterEach(() => {
+      comp.destroy();
+      Vue.prototype.$appConfig = undefined;
+    });
   });
 });
diff --git a/test/unit/specs/components/ol/Map.spec.js b/test/unit/specs/components/ol/Map.spec.js
index b9db4545..4d2851ed 100644
--- a/test/unit/specs/components/ol/Map.spec.js
+++ b/test/unit/specs/components/ol/Map.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Map from '@/components/ol/Map';
 import OlMap from 'ol/Map';
 import Feature from 'ol/Feature';
@@ -37,7 +37,7 @@ describe('ol/Map.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = {modules: {}};
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -46,13 +46,17 @@ describe('ol/Map.vue', () => {
       expect(vm.collapsibleAttribution).to.equal(false);
       expect(vm.rotateableMap).to.equal(false);
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('data', () => {
     let comp;
     let vm;
     beforeEach(() => {
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -62,8 +66,12 @@ describe('ol/Map.vue', () => {
       expect(vm.center).to.equal(undefined);
       expect(vm.tileGridDefs).to.be.empty;
       expect(vm.tileGrids).to.be.empty;
-      expect(vm.projection).to.deep.equal({code: 'EPSG:3857', units: 'm'});
       expect(vm.map.getView().getProjection().getCode()).to.equal('EPSG:3857');
+      expect(vm.map.getView().getProjection().getUnits()).to.equal('m');
+    });
+
+    afterEach(() => {
+      comp.destroy();
     });
   });
 
@@ -72,7 +80,7 @@ describe('ol/Map.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = { tileGridDefs: tileGridDefs };
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -82,6 +90,10 @@ describe('ol/Map.vue', () => {
       expect(vm.tileGridDefs['dutch_rd']).to.deep.equal(tileGridDefs['dutch_rd']);
       expect(vm.tileGrids['dutch_rd']).to.not.be.empty;
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('data - Projection Definitions', () => {
@@ -98,7 +110,7 @@ describe('ol/Map.vue', () => {
           ['EPSG:28992', '+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs']
         ]
       };
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -110,13 +122,17 @@ describe('ol/Map.vue', () => {
       expect(mapProjection).to.not.be.empty;
       expect(mapProjection.getCode()).to.equal('EPSG:28992');
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('methods', () => {
     let comp;
     let vm;
     beforeEach(() => {
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -287,6 +303,10 @@ describe('ol/Map.vue', () => {
       expect(vm.overlayEl.innerHTML).to.equal('bar');
       expect(vm.overlay.getPosition()).to.equal(undefined);
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('methods - TileGrids and Projections', () => {
@@ -317,7 +337,7 @@ describe('ol/Map.vue', () => {
           'visible': true
         }]
       };
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -333,5 +353,9 @@ describe('ol/Map.vue', () => {
       const source = layers[0].getSource();
       expect(source.getProjection().getCode()).to.equal('EPSG:28992');
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 });
diff --git a/test/unit/specs/components/ol/PermalinkController.spec.js b/test/unit/specs/components/ol/PermalinkController.spec.js
index 63f8b11e..71405aaa 100644
--- a/test/unit/specs/components/ol/PermalinkController.spec.js
+++ b/test/unit/specs/components/ol/PermalinkController.spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Map from '@/components/ol/Map';
 import VectorLayer from 'ol/layer/Vector';
 const permalinkDef = {
@@ -12,7 +12,7 @@ const permalinkDef = {
     'isBaseLayer': false,
     'visible': true,
     'selectable': false,
-    'displayInLayerList': true
+    'displayInLayerList': false
   },
   {
     'type': 'WMS',
@@ -36,22 +36,29 @@ const permalinkDef = {
     'projection': 'EPSG:4326',
     'paramPrefix': '',
     'history': true
-  }
+  },
+  modules: {}
 };
 
+document.location.hash = '';
+
 describe('ol/Map.vue', () => {
   describe('data - Map NOT Provides PermalinkController when NOT defined', () => {
     let comp;
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = {};
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
     it('Map has NOT instantiated permalinkController', () => {
       expect(vm.permalinkController).to.equal(undefined);
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('data - Map Provides PermalinkController when defined', () => {
@@ -59,13 +66,17 @@ describe('ol/Map.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = permalinkDef;
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
     it('Map has instantiated permalinkController', () => {
       expect(vm.permalinkController).to.not.be.empty;
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('data - PermalinkController successfully setup', () => {
@@ -73,24 +84,33 @@ describe('ol/Map.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = permalinkDef;
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
     it('Setup permalinkController', () => {
-      vm.permalinkController.setup();
+      // vm.permalinkController.setup();
       expect(vm.permalinkController.shouldUpdate).equals(true);
-      expect(vm.permalinkController.layerListeners.length).to.equal(2);
+      expect(vm.map.getLayers().getLength()).to.equal(2);
+      // expect(vm.permalinkController.layerListeners.length).to.equal(2);
       vm.permalinkController.unsubscribeLayers();
       expect(vm.permalinkController.layerListeners.length).to.equal(0);
       vm.permalinkController.subscribeLayers();
       expect(vm.permalinkController.layerListeners.length).to.equal(2);
     });
+
     it('Layer Listeners are (re)created when the layer stack changes', () => {
-      vm.permalinkController.setup();
-      expect(vm.permalinkController.layerListeners.length).to.equal(2);
+      // vm.permalinkController.setup();
+      // expect(vm.permalinkController.layerListeners.length).to.equal(2);
       vm.map.addLayer(new VectorLayer());
       expect(vm.permalinkController.layerListeners.length).to.equal(3);
+      expect(vm.map.getLayers().getLength()).to.equal(3);
+      vm.permalinkController.unsubscribeLayers();
+      expect(vm.permalinkController.layerListeners.length).to.equal(0);
+    });
+
+    afterEach(() => {
+      comp.destroy();
     });
   });
 
@@ -99,7 +119,7 @@ describe('ol/Map.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = permalinkDef;
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -127,6 +147,10 @@ describe('ol/Map.vue', () => {
       });
       expect(vm.permalinkController.getParamStr()).to.equal('#z=' + newZoom + '&c=8.9832%2C17.6789&r=0&l=ahocevar-wms%2Cosm-bg');
     });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 
   describe('data - PermalinkController applied from document.location.hash/search', () => {
@@ -134,7 +158,7 @@ describe('ol/Map.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = permalinkDef;
-      comp = shallowMount(Map);
+      comp = mount(Map);
       vm = comp.vm;
     });
 
@@ -152,7 +176,7 @@ describe('ol/Map.vue', () => {
       expect(Math.round(mapView.getCenter()[1])).to.equal(6800125);
       expect(Math.round(map.getLayers().getLength())).to.equal(2);
     });
-    // Below gives problems in Karma as the document is reloaded by setting document.locaiton.search!
+    // Below gives problems in Karma as the document is reloaded by setting document.location.search!
     // it('Setup and apply permalinkController - apply from document.location.search', () => {
     //   permalinkDef.permalink.location = 'search';
     //   vm.permalinkController.setup();
@@ -168,5 +192,9 @@ describe('ol/Map.vue', () => {
     //   expect(Math.round(mapView.getCenter()[1])).to.equal(6800125);
     //   expect(Math.round(map.getLayers().getLength())).to.equal(2);
     // });
+
+    afterEach(() => {
+      comp.destroy();
+    });
   });
 });

From 8ddeaeb9ca5525e04798168f1ac6f6a227dccc9d Mon Sep 17 00:00:00 2001
From: Just van den Broecke <just@justobjects.nl>
Date: Fri, 26 Feb 2021 12:23:25 +0100
Subject: [PATCH 2/3] #180 All Unit Tests Green - mainly lifecycle and Vue Test
 Utils issues

---
 .../measuretool/OlMeasureController.js        | 13 ++--
 .../components/measuretool/MeasureWin.spec.js | 69 ++++++++++++++-----
 2 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/components/measuretool/OlMeasureController.js b/src/components/measuretool/OlMeasureController.js
index 8ac1aaed..4262b793 100644
--- a/src/components/measuretool/OlMeasureController.js
+++ b/src/components/measuretool/OlMeasureController.js
@@ -25,12 +25,10 @@ export default class OlMeasureController {
    * Tears down this controller.
    */
   destroy () {
-    console.info('====> OlMeasureController.destroy')
     if (!this.measureLayer || !this.map) {
       return;
     }
     this.removeInteraction();
-    console.info('====> OlMeasureController.removeLayer')
     this.map.removeLayer(this.measureLayer);
     this.measureLayer = undefined;
   }
@@ -40,7 +38,6 @@ export default class OlMeasureController {
    * map.
    */
   createMeasureLayer () {
-    console.info('====> OlMeasureController.createMeasureLayer')
     const me = this;
     const measureConf = me.measureConf;
     // create a vector layer to
@@ -132,12 +129,12 @@ export default class OlMeasureController {
    * Removes the current interaction and clears the values.
    */
   removeInteraction () {
-    var me = this;
-    if (me.draw) {
-      me.map.removeInteraction(me.draw);
+    if (this.draw) {
+      this.map.removeInteraction(this.draw);
+      this.draw = undefined;
     }
-    if (me.source) {
-      me.source.clear();
+    if (this.source) {
+      this.source.clear();
     }
   }
 }
diff --git a/test/unit/specs/components/measuretool/MeasureWin.spec.js b/test/unit/specs/components/measuretool/MeasureWin.spec.js
index e34434a3..2625f275 100644
--- a/test/unit/specs/components/measuretool/MeasureWin.spec.js
+++ b/test/unit/specs/components/measuretool/MeasureWin.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import MeasureWin from '@/components/measuretool/MeasureWin';
 import OlMap from 'ol/Map';
 import LineStringGeom from 'ol/geom/LineString';
@@ -15,7 +15,7 @@ describe('measuretool/MeasureWin.vue', () => {
     let comp;
     beforeEach(() => {
       Vue.prototype.$appConfig = appConfig;
-      comp = shallowMount(MeasureWin);
+      comp = mount(MeasureWin);
     });
 
     it('has correct default props', () => {
@@ -36,7 +36,7 @@ describe('measuretool/MeasureWin.vue', () => {
     let comp;
     beforeEach(() => {
       Vue.prototype.$appConfig = appConfig;
-      comp = shallowMount(MeasureWin);
+      comp = mount(MeasureWin);
     });
 
     it('has correct default data', () => {
@@ -47,23 +47,24 @@ describe('measuretool/MeasureWin.vue', () => {
       expect(comp.vm.left).to.equal('0');
       expect(comp.vm.top).to.equal('0');
     });
+
     afterEach(() => {
       comp.destroy();
       Vue.prototype.$appConfig = undefined;
     });
   });
 
-  describe('watchers', () => {
+  describe('watchers - set show true', () => {
     let comp;
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = appConfig;
-      comp = shallowMount(MeasureWin);
+      comp = mount(MeasureWin);
       vm = comp.vm;
       vm.$appConfig = appConfig;
     });
 
-    it('watches show setting to false', done => {
+    it('watches show setting to true', done => {
       let cnt = 0;
       let mockFn = () => {
         cnt++;
@@ -71,21 +72,30 @@ describe('measuretool/MeasureWin.vue', () => {
 
       vm.map = new OlMap({});
       vm.onMapBound();
-      vm.olMapCtrl.removeInteraction = mockFn;
-      // toggle to trigger the watcher
+      vm.olMapCtrl.addInteraction = mockFn;
       vm.show = true;
-      vm.$nextTick(() => {
-        expect(cnt).to.equal(0);
-        done();
-      });
-      vm.show = false;
       vm.$nextTick(() => {
         expect(cnt).to.equal(1);
         done();
       });
     });
 
-    it('watches show setting to true', done => {
+    afterEach(() => {
+      Vue.prototype.$appConfig = undefined;
+    });
+  });
+
+  describe('watchers - set show false', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      Vue.prototype.$appConfig = appConfig;
+      comp = mount(MeasureWin);
+      vm = comp.vm;
+      vm.$appConfig = appConfig;
+    });
+
+    it('watches show setting to false', done => {
       let cnt = 0;
       let mockFn = () => {
         cnt++;
@@ -93,24 +103,47 @@ describe('measuretool/MeasureWin.vue', () => {
 
       vm.map = new OlMap({});
       vm.onMapBound();
-      vm.olMapCtrl.addInteraction = mockFn;
+      vm.olMapCtrl.removeInteraction = mockFn;
+
+      // toggle to trigger the watcher
       vm.show = true;
+      vm.$nextTick(() => {
+        expect(cnt).to.equal(0);
+        done();
+      });
+      vm.show = false;
       vm.$nextTick(() => {
         expect(cnt).to.equal(1);
         done();
       });
     });
 
+    afterEach(() => {
+      Vue.prototype.$appConfig = undefined;
+    });
+  });
+
+  describe('watchers - measureType', () => {
+    let comp;
+    let vm;
+    beforeEach(() => {
+      Vue.prototype.$appConfig = appConfig;
+      comp = mount(MeasureWin);
+      vm = comp.vm;
+      vm.$appConfig = appConfig;
+    });
+
     it('watches measureType resets old data', done => {
+      vm.map = new OlMap({});
+      vm.onMapBound();
       vm.measureType = 'area';
       vm.$nextTick(() => {
         expect(vm.measureGeom).to.be.an('object').that.is.empty;
         done();
       })
     });
+
     afterEach(() => {
-      vm.olMapCtrl.destroy();
-      comp.destroy();
       Vue.prototype.$appConfig = undefined;
     });
   });
@@ -120,7 +153,7 @@ describe('measuretool/MeasureWin.vue', () => {
     let vm;
     beforeEach(() => {
       Vue.prototype.$appConfig = appConfig;
-      comp = shallowMount(MeasureWin);
+      comp = mount(MeasureWin);
       vm = comp.vm;
     });
 

From 70e5d7f1b35185915f9cb09a8055a2ea575dd0bb Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Thu, 18 Mar 2021 11:06:58 +0100
Subject: [PATCH 3/3] Minor code cleanup #182

---
 test/unit/index.js                                        | 2 --
 test/unit/specs/components/ol/PermalinkController.spec.js | 4 ----
 2 files changed, 6 deletions(-)

diff --git a/test/unit/index.js b/test/unit/index.js
index 8c08b858..e4a5ebc3 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,6 +1,4 @@
 import Vue from 'vue'
-// import Vuetify from 'vuetify';
-// Vue.use(Vuetify);
 Vue.config.productionTip = false
 
 // require all test files (files that ends with .spec.js)
diff --git a/test/unit/specs/components/ol/PermalinkController.spec.js b/test/unit/specs/components/ol/PermalinkController.spec.js
index 71405aaa..7804095e 100644
--- a/test/unit/specs/components/ol/PermalinkController.spec.js
+++ b/test/unit/specs/components/ol/PermalinkController.spec.js
@@ -89,10 +89,8 @@ describe('ol/Map.vue', () => {
     });
 
     it('Setup permalinkController', () => {
-      // vm.permalinkController.setup();
       expect(vm.permalinkController.shouldUpdate).equals(true);
       expect(vm.map.getLayers().getLength()).to.equal(2);
-      // expect(vm.permalinkController.layerListeners.length).to.equal(2);
       vm.permalinkController.unsubscribeLayers();
       expect(vm.permalinkController.layerListeners.length).to.equal(0);
       vm.permalinkController.subscribeLayers();
@@ -100,8 +98,6 @@ describe('ol/Map.vue', () => {
     });
 
     it('Layer Listeners are (re)created when the layer stack changes', () => {
-      // vm.permalinkController.setup();
-      // expect(vm.permalinkController.layerListeners.length).to.equal(2);
       vm.map.addLayer(new VectorLayer());
       expect(vm.permalinkController.layerListeners.length).to.equal(3);
       expect(vm.map.getLayers().getLength()).to.equal(3);