e2e click on map

src/App.vue

@@ -25,7 +25,7 @@
               <div class="hr-sect">OR</div>
               <gmalt-search :lat="lat" :lng="lng" @search="updatePos"></gmalt-search>
             </div>
-            <gmalt-result :lat="lat" :lng="lng" :alt="alt" :loading="loading"></gmalt-result>
+            <gmalt-result :lat="lat" :lng="lng"></gmalt-result>
           </div>
 
           <h2>Description</h2>
@@ -89,8 +89,6 @@ import GmaltMap from './components/GmaltMap'
 import GmaltSearch from './components/GmaltSearch'
 import GmaltResult from './components/GmaltResult'
 
-import AltService from './services/AltService'
-
 export default {
   name: 'app',
   components: {
@@ -103,19 +101,6 @@ export default {
     updatePos (lat, lng) {
       this.lat = lat
       this.lng = lng
-      this.loading = true
-      const requestedPosition = this.position
-      return AltService
-        .get(lat, lng)
-        .then((json) => {
-          if (JSON.stringify(requestedPosition) === JSON.stringify(this.position)) {
-            this.loading = false
-            this.alt = json.alt
-          }
-        })
-        .catch((err) => {
-          this.alt = err + ''
-        })
     }
   },
   computed: {
@@ -127,8 +112,7 @@ export default {
     return {
       lat: null,
       lng: null,
-      alt: null,
-      loading: false
+      alt: null
     }
   }
 }

src/components/GmaltResult.vue

@@ -33,19 +33,29 @@
 
 <script>
   import GeocodeService from '../services/GeocodeService'
+  import AltService from '../services/AltService'
 
   export default {
     name: 'gmalt-result',
-    props: ['lat', 'lng', 'alt', 'loading'],
+    props: ['lat', 'lng'],
     watch: {
       position () {
         this.address = ''
         if (this.lng && this.lat) {
+          const requestedPosition = this.position
           GeocodeService
             .get(this.lat, this.lng)
             .then((result) => {
               this.setAddress(result[0], result[1])
             })
+          AltService
+            .get(this.lat, this.lng)
+            .then((json) => {
+              this.setAlt(requestedPosition, json.alt)
+            })
+            .catch((err) => {
+              this.alt = err + ''
+            })
         }
       }
     },
@@ -54,6 +64,11 @@
         if (JSON.stringify(requestedPosition) === JSON.stringify(this.position)) {
           this.address = address
         }
+      },
+      setAlt (requestedPosition, altitude) {
+        if (JSON.stringify(requestedPosition) === JSON.stringify(this.position)) {
+          this.alt = altitude
+        }
       }
     },
     computed: {
@@ -63,7 +78,8 @@
     },
     data () {
       return {
-        address: ''
+        address: '',
+        alt: ''
       }
     }
   }

test/e2e/helper.js

@@ -0,0 +1,28 @@
+module.exports = {
+  loadSinon: function (onLoad) {
+    return `
+        var importScript = (function (oHead) {
+
+        function loadError (oError) {
+          throw new URIError("The script " + oError.target.src + " is not accessible.");
+        }
+    
+        return function (sSrc, fOnload) {
+          var oScript = document.createElement("script");
+          oScript.type = "text/javascript";
+          oScript.onerror = loadError;
+          if (fOnload) { oScript.onload = fOnload; }
+          oHead.appendChild(oScript);
+          oScript.src = sSrc;
+        }
+    
+      })(document.head || document.getElementsByTagName("head")[0]);
+        
+      function sinonOnLoad() {
+        ${onLoad}
+      }
+
+      importScript('https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js', sinonOnLoad);
+    `
+  }
+}

test/e2e/specs/GoogleMap.spec.js

@@ -0,0 +1,70 @@
+let helper = require('../helper')
+
+module.exports = {
+  'click on map updates altitude': function (browser) {
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .resizeWindow(1280, 800)  // Fix size to be sure that clicks occurs always at the same place
+      .url(devServer)
+      .waitForElementVisible('.vue-map-container .gm-style', 8000)
+      .execute(helper.loadSinon(`
+        let stubedFetch = sinon.stub(window, 'fetch', function() {           
+           return Promise.resolve({status: 200, json: function() { return {alt: 234} }})
+        });
+
+        let sinonLoaded = document.createElement('div')
+        sinonLoaded.style.visibility = 'hidden'
+        sinonLoaded.id = 'sinonLoaded'
+        document.head.appendChild(sinonLoaded)
+      `))
+      .execute(() => {
+        // https://stackoverflow.com/questions/43280070/how-can-i-click-on-a-pin-in-a-google-map-embedded-from-javascript
+        // Get middle of the map and store it in a div to be used later
+        let rect = document.querySelector('.vue-map').getBoundingClientRect()
+        let centerY = rect.bottom - rect.top
+        let centerX = rect.right - rect.left
+
+        let divX = document.createElement('div')
+        divX.style.visibility = 'hidden'
+        divX.id = 'offsetX'
+        divX.innerHTML = centerX.toString()
+        let divY = document.createElement('div')
+        divY.style.visibility = 'hidden'
+        divY.innerHTML = centerY.toString()
+        divY.id = 'offsetY'
+        document.head.appendChild(divX)
+        document.head.appendChild(divY)
+      })
+
+    browser
+      .waitForElementPresent('#offsetX', 3000)
+      .waitForElementPresent('#offsetY', 3000)
+      .waitForElementPresent('#sinonLoaded', 3000)
+
+    let relX = browser.getValue('#offsetX')
+    let relY = browser.getValue('#offsetY')
+
+    browser
+      .moveToElement('.vue-map', relX, relY)
+      .mouseButtonClick()
+
+    browser
+      .execute(`
+        server.respond()
+      `)
+
+    browser
+      .waitForElementPresent('.card .card-item:nth-child(1) strong', 3000)
+      .waitForElementPresent('.card .card-item:nth-child(2) strong', 3000)
+      .waitForElementPresent('.card .card-item:nth-child(3) strong', 3000)
+      .waitForElementPresent('.card .card-item:nth-child(4) strong', 3000)
+
+    browser
+      .assert.containsText('.card .card-item:nth-child(1) strong', '48.86031047029195')
+      .assert.containsText('.card .card-item:nth-child(2) strong', '2.3455810546875')
+      .assert.containsText('.card .card-item:nth-child(3) strong', '36 Rue des Bourdonnais, 75001 Paris, France')
+      .assert.containsText('.card .card-item:nth-child(4) strong', '234 m')
+      .end()
+  }
+}

test/e2e/specs/test.js

@@ -16,45 +16,5 @@ module.exports = {
       .assert.containsText('h2', 'Get My ALTitude')
       .assert.elementPresent('main')
       .end()
-  },
-
-  'click on map updates page': function (browser) {
-    // automatically uses dev Server port from /config.index.js
-    // default: http://localhost:8080
-    // see nightwatch.conf.js
-    const devServer = browser.globals.devServerURL
-
-    browser
-      .resizeWindow(1280, 800)
-      .url(devServer)
-      .waitForElementVisible('.vue-map-container .gm-style', 8000)
-      .execute(() => {
-        let rect = document.querySelector('.vue-map').getBoundingClientRect()
-        let centerY = rect.bottom - rect.top
-        let centerX = rect.right - rect.left
-
-        let divX = document.createElement('div')
-        divX.style.visibility = 'hidden'
-        divX.id = 'offsetX'
-        divX.innerHTML = centerX.toString()
-        let divY = document.createElement('div')
-        divY.style.visibility = 'hidden'
-        divY.innerHTML = centerY.toString()
-        divY.id = 'offsetY'
-        document.head.appendChild(divX)
-        document.head.appendChild(divY)
-      })
-    browser.pause(3000)
-    browser.waitForElementPresent('#offsetX', 3000)
-    let relX = browser.getValue('#offsetX')
-    let relY = browser.getValue('#offsetY')
-    browser.moveToElement('.vue-map', relX, relY).mouseButtonClick()
-    browser.pause(3000)
-    browser
-      .assert.containsText('.card .card-item:nth-child(1) strong', '48.86031047029195')
-      .assert.containsText('.card .card-item:nth-child(2) strong', '2.3455810546875')
-      .assert.containsText('.card .card-item:nth-child(3) strong', '36 Rue des Bourdonnais, 75001 Paris, France')
-      .assert.elementPresent('main')
-      .end()
   }
 }