drag and drop google map marker e2e test

gmalt · Aug 8, 2017 · 6a87ec6 · 6a87ec6
1 parent 3b1663e
commit 6a87ec6
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 42 deletions.
diff --git a/test/e2e/helper.js b/test/e2e/helper.js
@@ -24,5 +24,56 @@ module.exports = {
 
       importScript('https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js', sinonOnLoad);
     `
+  },
+
+  clickOnMapCenter: function (browser, altitude) {
+    browser
+      .waitForElementVisible('.vue-map-container .gm-style', 8000)
+      .execute(this.loadSinon(`
+        let stubedFetch = sinon.stub(window, 'fetch', function() {           
+           return Promise.resolve({status: 200, json: function() { return {alt: ${altitude}} }})
+        });
+
+        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
+      .waitForElementPresent('.card .card-item:nth-child(1) strong', 3000)
+      .waitForElementPresent('.card .card-item:nth-child(2) strong', 3000)
+
+    return { relX, relY }
   }
 }
diff --git a/test/e2e/specs/GoogleMap.spec.js → test/e2e/specs/GmaltMap.spec.js b/test/e2e/specs/GoogleMap.spec.js → test/e2e/specs/GmaltMap.spec.js
@@ -7,51 +7,10 @@ module.exports = {
     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')
+    helper.clickOnMapCenter(browser, 234)
 
     browser
-      .moveToElement('.vue-map', relX, relY)
-      .mouseButtonClick()
-
-    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)
 
@@ -104,5 +63,34 @@ module.exports = {
       .assert.containsText('.card .card-item:nth-child(3) strong', '31 Rue de Rome, 75008 Paris, France')
       .assert.containsText('.card .card-item:nth-child(4) strong', '345 m')
       .end()
+  },
+
+  'dragging map marker updates result': 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)
+
+    let {relX, relY} = helper.clickOnMapCenter(browser, 567)
+
+    browser
+      .moveToElement('.vue-map', relX, relY)
+      .mouseButtonDown()
+      .moveTo(null, 10, 10)
+      .mouseButtonUp()
+
+    browser
+      .waitForElementPresent('.card .card-item:nth-child(3) strong', 3000)
+      .waitForElementPresent('.card .card-item:nth-child(4) strong', 3000)
+
+    browser
+      .assert.value('#form-latitude', '48.860169300692185')
+      .assert.value('#form-longitude', '2.3457956314086914')
+      .assert.containsText('.card .card-item:nth-child(1) strong', '48.860169300692185')
+      .assert.containsText('.card .card-item:nth-child(2) strong', '2.3457956314086914')
+      .assert.containsText('.card .card-item:nth-child(3) strong', '17P Rue des Halles, 75001 Paris, France')
+      .assert.containsText('.card .card-item:nth-child(4) strong', '567 m')
+      .end()
   }
 }