wegue-oss#122 andd ShareButton and fix unit tests

Author: justb4

app-starter/components/AppHeader.vue

@@ -58,7 +58,7 @@ import LayerListToggleButton from '../../src/components/layerlist/ToggleButton'
 import HelpWinToggleButton from '../../src/components/helpwin/ToggleButton'
 import MeasureToolToggleButton from '../../src/components/measuretool/ToggleButton'
 import InfoClickButton from '../../src/components/infoclick/ToggleButton'
-import ShareButton from '../../src/sharebutton/ShareButton'
+import ShareButton from '../../src/components/sharebutton/ShareButton'
 import ZoomToMaxExtentButton from '../../src/components/maxextentbutton/ZoomToMaxExtentButton'
 import Geocoder from '../../src/components/geocoder/Geocoder'
 

app-starter/static/app-conf-projected.json

@@ -32,7 +32,7 @@
     "layers": true,
     "extent": true,
     "paramPrefix": "pl_",
-    "history": true,
+    "history": false,
     "precision": 6
   },
 
@@ -161,7 +161,10 @@
     "wgu-helpwin": {
       "target": "toolbar",
       "darkLayout": true
+    },
+    "wgu-share": {
+      "target": "toolbar",
+      "darkLayout": true
     }
   }
-
 }

app-starter/static/app-conf.json

@@ -15,12 +15,13 @@
   "mapCenter": [0, 0],
 
   "permalink": {
-    "location": "search",
+    "location": "hash",
     "layers": true,
     "extent": false,
     "projection": "EPSG:4326",
     "paramPrefix": "",
-    "history": false
+    "history": true,
+    "precision": 6
   },
 
   "mapLayers": [

src/components/ol/Map.vue

@@ -4,6 +4,7 @@
 
 import Vue from 'vue';
 import Map from 'ol/Map'
+import Group from 'ol/layer/Group'
 import View from 'ol/View'
 import Attribution from 'ol/control/Attribution';
 import Zoom from 'ol/control/Zoom';
@@ -119,13 +120,24 @@ export default {
       this.permalinkController.setup();
     }
   },
+  beforeDestroy () {
+    if (this.$appConfig.permalink) {
+      this.permalinkController.teardown();
+      this.permalinkController = undefined;
+    }
+    // Remove all Layers from Map.
+    this.map.setLayerGroup(new Group());
+  },
 
   methods: {
     /**
      * Creates the OL layers due to the "mapLayers" array in app config.
      * @return {ol.layer.Base[]} Array of OL layer instances
      */
     createLayers () {
+      // Remove all Layers from Map.
+      this.map.setLayerGroup(new Group());
+
       const me = this;
       let layers = [];
       const appConfig = this.$appConfig;

src/components/ol/PermalinkController.js

@@ -84,6 +84,9 @@ export default class PermalinkController {
       }
     });
   }
+  teardown () {
+    this.unsubscribeLayers();
+  }
 
   /**
    * Subscribe to Layer visibility changes.

src/components/sharebutton/ShareButton.vue

@@ -35,7 +35,7 @@
                <v-icon medium>email</v-icon>
              </v-list-tile-action>
             <v-list-tile-content>
-              <v-list-tile-title v-html="mailToUrl"/>
+              <v-list-tile-title><a :href="mailToUrl">{{emailUrlText}}</a></v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
         </v-list>
@@ -71,7 +71,7 @@ export default {
     copyUrlText: {type: String, required: false, default: 'Copy Hyperlink'},
     copyEmbedHtmlText: {type: String, required: false, default: 'Copy HTML Embed Code'},
     emailUrlText: {type: String, required: false, default: 'Email Hyperlink'},
-    emailSubjectText: {type: String, required: false, default: 'NPLH Url Share'}
+    emailSubjectText: {type: String, required: false, default: 'Wegue Url Share'}
   },
   data () {
     return {
@@ -143,7 +143,7 @@ export default {
       try {
         const permalinkController = this.map.get('permalinkcontroller');
         const url = encodeURIComponent(permalinkController.getShareUrl());
-        this.mailToUrl = `<a href="mailto:?subject=${this.emailSubjectText}&body=${url}">${this.emailUrlText}</a>`
+        this.mailToUrl = `mailto:?subject=${this.emailSubjectText}&body=${url}`;
       } catch (error) {
         this.showAlert(this.alertErrorText);
       }
@@ -160,7 +160,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style>
+<style scoped>
   .v-alert.wgu-alert {
     position: fixed;
     top: 5em;

test/unit/specs/components/ol/PermalinkController.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import {enableAutoDestroy, shallowMount} from '@vue/test-utils';
 import Map from '@/components/ol/Map';
 import VectorLayer from 'ol/layer/Vector';
 const permalinkDef = {
@@ -39,6 +39,9 @@ const permalinkDef = {
   }
 };
 
+// calls wrapper.destroy() after each test
+enableAutoDestroy(afterEach);
+
 describe('ol/Map.vue', () => {
   describe('data - Map NOT Provides PermalinkController when NOT defined', () => {
     let comp;