Merge pull request #155 from Geoportail-Luxembourg/GSLUX-744-calculat…

…e-dimensions

GSLUX-744 Feature measurements

.env

@@ -35,3 +35,4 @@ VITE_MODE_LIB=true
 # MyMaps / Draw
 VITE_MYMAPS_URL="/mymaps"
 VITE_ARROW_MODEL_URL="/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="/raster"

.env.development

@@ -34,4 +34,5 @@ VITE_MODE_LIB=false
 
 # MyMaps / Draw
 VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
-VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="https://migration.geoportail.lu/raster"

.env.e2e

@@ -35,3 +35,4 @@ VITE_MODE_LIB=false
 # MyMaps / Draw
 VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
 VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="https://migration.geoportail.lu/raster"

.env.staging

@@ -34,4 +34,5 @@ VITE_MODE_LIB=true
 
 # MyMaps / Draw
 VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
-VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="/raster"

.eslintrc.cjs

@@ -16,6 +16,7 @@ module.exports = {
       extends: ['plugin:cypress/recommended'],
     },
   ],
+  plugins: ['no-only-tests'],
   rules: {
     'no-prototype-builtins': 'off',
     '@typescript-eslint/ban-types': 'off',
@@ -28,6 +29,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': ['error'],
     'import/no-unresolved': 'off',
     'no-console': 'error',
+    'no-only-tests/no-only-tests': 'error',
   },
   parserOptions: {
     ecmaVersion: 'latest',

README.md

@@ -45,7 +45,7 @@ A `.prettierignore` file is used by prettier and lint to exclude some files (suc
 
 ### End to end testing with Cypress
 
-For e2e tests, the code is instrumented with the Istanbul library to obtain resulting code coverage. The dev test server is launched with the env var `INSRUMENT_COVERAGE=true`
+For e2e tests, the code is instrumented with the Istanbul library to obtain resulting code coverage. The dev test server is launched with the env var `INSTRUMENT_COVERAGE=true`
 
 - `test:e2e` will launch e2e tests and opens Cypress UI. You need to build the app before using this command with `npm run build-only -- --mode=e2e`. This will test the app built for production (with css minification, images src optimization using base64, ...)
 - `test:e2e:ci` This will run tests in command line only on a dev build (no need to build the app). Used by ci workflow.

cypress/e2e/draw/draw-feat-line.cy.ts

@@ -27,6 +27,12 @@ describe('Draw "Line"', () => {
       testFeatItemMeasurements()
     })
 
+    it('updates length measurement when editing geometry', () => {
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '55.4 km')
+      cy.dragVertexOnMap(200, 200, 300, 300)
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '111 km')
+    })
+
     it('displays the possible actions for the feature', () => {
       testFeatItem()
     })

cypress/e2e/draw/draw-feat-point.cy.ts

@@ -21,6 +21,32 @@ function testFeatStyleEditionTabContent() {
 
 describe('Draw "Point"', () => {
   beforeEach(() => {
+    // mocks for 100x100, 200x200, 300x300 clicks
+    cy.intercept(
+      'GET',
+      '/raster?lon=-25877.619036593664&lat=154433.4715351454',
+      {
+        statusCode: 200,
+        body: {
+          dhm: null,
+        },
+      }
+    )
+    cy.intercept(
+      'GET',
+      '/raster?lon=12756.103097272688&lat=114635.74032468312',
+      {
+        statusCode: 200,
+        body: {
+          dhm: 333.13,
+        },
+      }
+    )
+    cy.intercept('GET', '/raster?lon=51966.98676810359&lat=74839.09999860045', {
+      statusCode: 500,
+      body: {},
+    })
+
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
     cy.get('button[data-cy="drawPointButton"]').click()
@@ -36,6 +62,27 @@ describe('Draw "Point"', () => {
       testFeatItemMeasurements()
     })
 
+    it('displays N/A elevation for Point if data is null', () => {
+      cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
+    })
+
+    it('displays elevation for new Point', () => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('div.ol-viewport').click(200, 200)
+      cy.get('*[data-cy="featItemElevation"]').should(
+        'contain.text',
+        '333.13 m'
+      )
+    })
+
+    it('displays N/A elevation for new Point if response has error', () => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('div.ol-viewport').click(300, 300)
+      cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
+    })
+
     it('displays the possible actions for the feature', () => {
       testFeatItem()
     })

cypress/e2e/draw/draw-feat-polygon.cy.ts

@@ -27,6 +27,14 @@ describe('Draw "Polygon"', () => {
       testFeatItemMeasurements()
     })
 
+    it('updates length and area measurements when editing geometry', () => {
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '134 km')
+      cy.get('*[data-cy="featItemArea"]').should('contain.text', '766 km²')
+      cy.dragVertexOnMap(200, 200, 300, 300)
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '238 km')
+      cy.get('*[data-cy="featItemArea"]').should('contain.text', '1530 km²')
+    })
+
     it('displays the possible actions for the feature', () => {
       testFeatItem()
     })

cypress/support/commands.ts

@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 
 import type { Interaction } from 'ol/interaction'
+import 'cypress-real-events/support'
 
 // ***********************************************
 // This example commands.ts shows you how to
@@ -61,11 +62,21 @@ Cypress.Commands.add('getModifyInteraction', () => {
   })
 })
 
+Cypress.Commands.add('dragVertexOnMap', (originX, originY, x, y) => {
+  cy.get('div.ol-viewport').realMouseDown({
+    x: originX,
+    y: originY,
+  })
+  cy.get('div.ol-viewport').realMouseMove(x, y)
+  cy.get('div.ol-viewport').realMouseUp()
+})
+
 declare global {
   namespace Cypress {
     interface Chainable {
       getDrawInteractions(): Chainable<Array<Interaction>>
       getModifyInteraction(): Chainable<Interaction>
+      dragVertexOnMap(): Chainable<void>
       // login(email: string, password: string): Chainable<void>
       // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
       // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>

package.json

@@ -14,9 +14,9 @@
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom --root .",
     "test:unit:ci": "vitest run --environment jsdom --coverage",
-    "test:e2e": "INSRUMENT_COVERAGE=true start-server-and-test preview :4173 'cypress open --e2e'",
-    "test:e2e:ci": "INSRUMENT_COVERAGE=true start-server-and-test 'VITE_USE_PROXYURL=false vite dev --port 4173' :4173 'cypress run --e2e'",
-    "test:e2e:dev": "INSRUMENT_COVERAGE=true start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "test:e2e": "INSTRUMENT_COVERAGE=true start-server-and-test preview :4173 'cypress open --e2e'",
+    "test:e2e:ci": "INSTRUMENT_COVERAGE=true start-server-and-test 'VITE_USE_PROXYURL=false vite dev --port 4173' :4173 'cypress run --e2e'",
+    "test:e2e:dev": "INSTRUMENT_COVERAGE=true start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
     "coverage-report": "nyc report",
     "type-check:dev": "npm run type-check -- --watch",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
@@ -78,8 +78,10 @@
     "@vue/tsconfig": "^0.1.3",
     "core-js": "^3.37.1",
     "cypress": "^13.7.2",
+    "cypress-real-events": "^1.13.0",
     "eslint": "^8.22.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.2",
     "i18next": "^22.0.6",

src/bundle/lib.ts

@@ -49,6 +49,7 @@ import { clearLayersCache } from '@/stores/layers.cache'
 import i18next, { InitOptions } from 'i18next'
 import backend from 'i18next-http-backend'
 import I18NextVue from 'i18next-vue'
+import formatDistanceDirective from './directives/format-distance.directive'
 
 import App from '../App.vue'
 
@@ -78,6 +79,7 @@ export default function useLuxLib(options: LuxLibOptions) {
   app.use(createPinia())
   app.use(I18NextVue, { i18next })
   app.use(VueDOMPurifyHTML)
+  app.use(formatDistanceDirective)
 
   const createElementInstance = (component = {}, app = null) => {
     return defineCustomElement(

src/components/draw/feature-item.vue

@@ -84,7 +84,6 @@ function onSubmitEditInfo() {
   <!-- Drawing details -->
   <FeatureSubWrapper
     v-if="isOpen"
-    :feature="feature"
     :isDocked="isDocked"
     @closePopup="() => emit('toggleDock')"
   >
@@ -95,7 +94,6 @@ function onSubmitEditInfo() {
       <FeatureSubContent
         :isDocked="isDocked"
         :isEditingFeature="isEditing"
-        :feature="feature"
         @toggleEditFeature="onToggleEditFeature"
         @toggleDock="() => emit('toggleDock')"
         @clickDelete="onClickDelete"

src/components/draw/feature-measurements-helper.ts

@@ -1,5 +1,11 @@
 import { PointData } from '@/components/common/graph/d3-graph-elevation.d'
+import { Coordinate } from 'ol/coordinate'
+import { transform } from 'ol/proj'
+import { debounceAsync } from '@/services/utils'
 
+const ELEVATION_URL = import.meta.env.VITE_ELEVATION_URL
+const MAP_CRS = 'EPSG:3857'
+const ELEVATION_CRS = 'EPSG:2169'
 /**
  * Request the csv profile with the current profile data.
  * @param profileData The current profile data
@@ -9,3 +15,21 @@ export function downloadCsv(profileData: PointData[]) {
     return
   }
 }
+
+export const getElevation = async (coordinate: Coordinate) => {
+  const lonlat = transform(coordinate, MAP_CRS, ELEVATION_CRS)
+  try {
+    const response = await fetch(
+      `${ELEVATION_URL}?lon=${lonlat[0]}&lat=${lonlat[1]}`
+    )
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
+    }
+    const data = await response.json()
+    return data.dhm
+  } catch (error) {
+    return null //return null on error, like API when no data
+  }
+}
+
+export const getDebouncedElevation = debounceAsync(getElevation, 300)