From a941cefe83f5c9fd254e790e8e46fcc26d0a0897 Mon Sep 17 00:00:00 2001
From: Amandus Butzer <amandus.butzer@heigit.org>
Date: Mon, 5 Dec 2022 11:18:30 +0100
Subject: [PATCH] test: Migrate place test

- remove old test
---
 cypress/e2e/place.cy.js       | 36 +++++++++++++++
 tests/e2e/specs/place.spec.js | 86 -----------------------------------
 2 files changed, 36 insertions(+), 86 deletions(-)
 create mode 100644 cypress/e2e/place.cy.js
 delete mode 100644 tests/e2e/specs/place.spec.js

diff --git a/cypress/e2e/place.cy.js b/cypress/e2e/place.cy.js
new file mode 100644
index 00000000..ed1ef687
--- /dev/null
+++ b/cypress/e2e/place.cy.js
@@ -0,0 +1,36 @@
+describe('place component', () => {
+  beforeEach(() => {
+    cy.viewport(1848, 980)
+  })
+  it('renders coordinate correctly', () => {
+    cy.visit('/#/place/@-48.467559814453125,-23.856953970230652,6')
+    cy.get('.place-input-component input[type=text]').should('be.visible')
+    cy.get('.custom-html-icon-div').should('have.length', 0)
+    // TODO: map is currently not moved. See https://stackoverflow.com/questions/60987787/test-dragging-a-leaflet-map-in-cypress
+    cy.get('#map-view')
+      .trigger('mousedown', 'center')
+      .trigger('mousemove', {movementX: 5, movementY: 5})
+      .trigger('mouseup')
+    // cy.url().should('not.contain', '-48.467559814453125,-23.856953970230652')
+  })
+  it('renders single place correctly', () => {
+    cy.visit('/#/place/Salvador,BA,Brazil/@-38.421936,-12.964413,9/data/%7B"layer":"locality","country":"Brazil","zoom":9%7D')
+    cy.get('.place-input-component input[type=text]')
+    cy.get('.fit-all-features').click()
+    cy.get('.custom-html-icon-div').should('be.visible')
+    cy.get('.custom-html-icon-div').should('have.length', 1)
+    cy.get('.custom-html-icon-div').eq(0).should('have.css', 'background-color', 'rgb(255, 0, 0)')
+    cy.get('.leaflet-overlay-pane svg path.leaflet-interactive').should('have.length.gt', 0)
+  })
+
+  it('app page single place rendering', () => {
+    cy.visit('/#/place/Heidelberg,BW,Germany/@8.692416,49.401247/data/%7B"zoom":8,"layer":"county","country":"Germany"%7D')
+    cy.get('.place-input-component input[type=text]')
+    cy.get('.place-input-component input[type=text]').should('have.value', 'Heidelberg, BW,Germany')
+    cy.get('.custom-html-icon-div').click()  // needs to be first to avoid "removed from DOM" after redraw with vue
+    cy.get('.custom-html-icon-div').should('have.length', 1)
+    cy.get('.custom-html-icon-div').eq(0).should('have.css', 'background-color', 'rgb(255, 0, 0)')
+    cy.get('.leaflet-popup')
+    cy.get('.leaflet-popup-content').should('contain.text', 'Heidelberg, BW,Germany')
+  })
+})
diff --git a/tests/e2e/specs/place.spec.js b/tests/e2e/specs/place.spec.js
deleted file mode 100644
index 4cf59e84..00000000
--- a/tests/e2e/specs/place.spec.js
+++ /dev/null
@@ -1,86 +0,0 @@
-// eslint-disable-next-line no-undef
-module.exports = {
-
-  'place location rendering': function (browser) {
-    const placeLocationUrl = `${browser.baseUrl}/#/place/@-48.467559814453125,-23.856953970230652,6`
-
-    browser
-      .resizeWindow(1848, 980)
-      .url(placeLocationUrl)
-      .waitForElementVisible('.app-content', 10000)
-      .assert.elementPresent('#app')
-      .assert.elementPresent('.simple-place-search')
-      .assert.visible('#map-view')
-      .assert.visible('.leaflet-control-layers')
-      .assert.visible('.leaflet-control-zoom')
-      .assert.visible('.leaflet-draw')
-      .assert.visible('#polyline-measure-control')
-      .assert.visible('.my-location-btn')
-      .assert.not.elementPresent('.view-on-ors')
-      .assert.visible('.place-input-component input[type=text]')
-      .assert.elementCount('.custom-html-icon-div', 0)
-      .moveToElement('#map-view',10,10)
-      .mouseButtonDown(0)
-      .moveToElement('#map-view',50,50)
-      .mouseButtonUp(0)
-      // .verify.url(newUrl)
-      .end()
-
-  },
-  'single place rendering': function (browser) {
-    const singlePlaceUrl = `${browser.baseUrl}/#/place/Salvador,BA,Brazil/@-38.421936,-12.964413,9/data/%7B"layer":"locality","country":"Brazil","zoom":9%7D`
-
-    browser
-      .url(singlePlaceUrl)
-      .waitForElementVisible('.app-content')
-      .assert.elementPresent('#app')
-      .assert.elementPresent('.simple-place-search')
-      .assert.elementPresent('#map-view')
-      .assert.elementPresent('.leaflet-control-layers')
-      .assert.elementPresent('.leaflet-control-zoom')
-      .assert.elementPresent('.leaflet-draw')
-      .assert.elementPresent('#polyline-measure-control')
-      .assert.elementPresent('.my-location-btn')
-      .assert.not.elementPresent('.view-on-ors')
-      .assert.elementPresent('.place-input-component input[type=text]')
-      .waitForElementVisible('.fit-all-features', 10000)
-      .click('.fit-all-features')
-      .waitForElementVisible('.custom-html-icon-div', 10000)
-      .assert.cssProperty({
-        selector: '.custom-html-icon-div',
-        index: 0
-      }, 'background-color', 'rgba(255, 0, 0, 1)') // red
-      .expect.elements('.custom-html-icon-div').count.to.equal(1)
-    browser.assert.elementCountAbove('.leaflet-overlay-pane svg path.leaflet-interactive', 0)
-      .end()
-  },
-
-  'app page single place rendering': function (browser) {
-    const placeModeUrl = `${browser.baseUrl}/#/place/Heidelberg,BW,Germany/@8.692416,49.401247/data/%7B"zoom":8,"layer":"county","country":"Germany"%7D`
-
-    browser
-      .url(placeModeUrl)
-      .waitForElementVisible('.app-content')
-      .assert.elementPresent('#app')
-      .assert.elementPresent('.simple-place-search')
-      .assert.elementPresent('#map-view')
-      .assert.elementPresent('.leaflet-control-layers')
-      .assert.elementPresent('.leaflet-control-zoom')
-      .assert.elementPresent('.leaflet-draw')
-      .assert.elementPresent('#polyline-measure-control')
-      .assert.elementPresent('.my-location-btn')
-      .assert.not.elementPresent('.view-on-ors')
-      .assert.elementPresent('.place-input-component input[type=text]')
-      .assert.elementPresent('.custom-html-icon-div')
-      .assert.cssProperty('.custom-html-icon-div', 'background-color', 'rgba(255, 0, 0, 1)')
-      .click('.custom-html-icon-div')
-      .assert.elementPresent('.leaflet-popup')
-      .assert.textContains('.leaflet-popup-content', 'Heidelberg, BW,Germany')
-      .getValue('.place-input-component input[type=text]', function (result) {
-        this.assert.equal(result.value, 'Heidelberg, BW,Germany')
-      })
-      .assert.cssProperty('.custom-html-icon-div', 'background-color', 'rgba(255, 0, 0, 1)') // red
-      .expect.elements('.custom-html-icon-div').count.to.equal(1)
-    browser.end()
-  },
-}