diff --git a/test/e2e/helper.js b/test/e2e/helper.js index 40fecc0..0db009e 100644 --- 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 b/test/e2e/specs/GmaltMap.spec.js similarity index 63% rename from test/e2e/specs/GoogleMap.spec.js rename to test/e2e/specs/GmaltMap.spec.js index dcb350d..0876199 100644 --- a/test/e2e/specs/GoogleMap.spec.js +++ b/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() } }