Merge pull request wegue-oss#182 from justb4/180-fix-unit-tests

wegue-oss#180 Fixed failing Unit Tests

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: {

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

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.

src/components/measuretool/OlMeasureController.js

@@ -18,6 +18,19 @@ export default class OlMeasureController {
   constructor (olMap, measureConf) {
     this.map = olMap;
     this.measureConf = measureConf || {};
+    this.measureLayer = undefined;
+  }
+
+  /**
+   * Tears down this controller.
+   */
+  destroy () {
+    if (!this.measureLayer || !this.map) {
+      return;
+    }
+    this.removeInteraction();
+    this.map.removeLayer(this.measureLayer);
+    this.measureLayer = undefined;
   }
 
   /**
@@ -29,7 +42,7 @@ export default class OlMeasureController {
     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 +57,7 @@ export default class OlMeasureController {
       })
     });
 
-    me.map.addLayer(vector);
+    me.map.addLayer(this.measureLayer);
 
     // make vector source available as member
     me.source = source;
@@ -116,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();
     }
   }
 }

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({

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)

src/mixins/Mapable.js

@@ -16,14 +16,23 @@ export const Mapable = {
 
         if (this.onMapBound) {
           this.onMapBound();
+          this.unbound = false;
         }
       });
     } else {
       // OL map is already mounted --> directly apply as member
       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;
+      }
+    });
   }
 };

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 [];
     }
 

test/unit/index.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-
 Vue.config.productionTip = false
 
 // require all test files (files that ends with .spec.js)

test/unit/specs/components/helpwin/HelpWin.spec.js

@@ -1,29 +1,59 @@
 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
   it('is defined', () => {
     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(() => {

test/unit/specs/components/helpwin/ToggleButton.spec.js

@@ -1,16 +1,21 @@
-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
   it('is defined', () => {
     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', () => {