GSLUX-686: Profil component

.env

@@ -38,6 +38,7 @@ VITE_MODE_LIB=true
 VITE_MYMAPS_URL="/mymaps"
 VITE_ARROW_MODEL_URL="/static-ngeo/models/arrow5.glb"
 VITE_ELEVATION_URL="/raster"
+VITE_PROFILE_URL="/profile.json"
 
 # Auth
 VITE_CREDENTIALS_ORIGIN="same-origin"

.env.development

@@ -38,9 +38,10 @@ VITE_MODE_LIB=false
 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"
+VITE_PROFILE_URL="https://migration.geoportail.lu/profile.json"
 
 # Auth
-VITE_CREDENTIALS_ORIGIN="include"
+VITE_CREDENTIALS_ORIGIN="same-origin" # values: "same-origin" or "include", WARNING: don't use `"include"` value in production
 VITE_LOGIN_URL="http://localhost:8080/login"
 VITE_LOGOUT_URL="http://localhost:8080/logout"
 VITE_USERINFO_URL="http://localhost:8080/getuserinfo"

.env.e2e

@@ -38,6 +38,7 @@ VITE_MODE_LIB=false
 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"
+VITE_PROFILE_URL="https://migration.geoportail.lu/profile.json"
 
 # Auth
 VITE_CREDENTIALS_ORIGIN="same-origin"

.env.staging

@@ -38,6 +38,7 @@ VITE_MODE_LIB=true
 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"
+VITE_PROFILE_URL="https://migration.geoportail.lu/profile.json"
 
 # Auth
 VITE_CREDENTIALS_ORIGIN="same-origin"

.gitignore

@@ -13,6 +13,7 @@
 ## testing
 /coverage/
 /.nyc_output/
+/cypress/downloads/
 
 ## temp folders
 /.tmp/

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

@@ -37,8 +37,8 @@ describe('Draw "Circle"', () => {
       cy.get('*[data-cy="featItemLength"]').should('contain.text', '693.17 km')
       // testing just integer part due to precision issues between local tests and CI
       cy.get('*[data-cy="featItemArea"]')
-        .should('contain.text', 'Surface: 38235.')
-        .and('contain.text', ' km²')
+        .should('include.text', 'Surface:\u00A038235')
+        .and('include.text', ' km²')
     })
 
     it('updates length and area measurements when editing radius in panel', () => {

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

@@ -1,36 +1,88 @@
 import { testFeatItem, testFeatItemDocking } from './draw-feat.utils'
 
 function testFeatItemMeasurements() {
-  cy.get('*[data-cy="featItemLength"]').should('exist')
-  cy.get('*[data-cy="featItemArea"]').should('not.exist')
-  cy.get('*[data-cy="featItemRadius"]').should('not.exist')
-  cy.get('*[data-cy="featItemElevation"]').should('not.exist')
-  cy.get('*[data-cy="featItemProfile"]').should('exist')
-  cy.get('*[data-cy="featItemProfileCSV"]').should('exist')
+  cy.get('[data-cy="featItemLength"]').should('exist')
+  cy.get('[data-cy="featItemArea"]').should('not.exist')
+  cy.get('[data-cy="featItemRadius"]').should('not.exist')
+  cy.get('[data-cy="featItemElevation"]').should('not.exist')
+  cy.get('[data-cy="featItemProfile"]').should('exist')
+  cy.get('[data-cy="featItemProfileCSV"]').should('exist')
 }
 
 describe('Draw "Line"', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
     cy.get('button[data-cy="drawLineButton"]').click()
-    cy.get('div.ol-viewport').click(100, 100, { force: true })
-    cy.get('div.ol-viewport').dblclick(200, 200, { force: true })
+    cy.get('div.ol-viewport').click(320, 223, { force: true })
+    cy.get('div.ol-viewport').dblclick(389, 305, { force: true })
   })
 
-  describe('When clicking button to draw Line', () => {
+  describe('When drawing a line', () => {
     it('displays a new feature item in the draw panel', () => {
-      cy.get('*[data-cy="featItemName"]').should('exist')
+      cy.get('[data-cy="featItemName"]')
+        .should('exist')
+        .should('contain.text', 'Ligne 1')
     })
 
     it('displays measurements for Line', () => {
       testFeatItemMeasurements()
     })
 
+    it('displays the elevation profile for Line', () => {
+      cy.get('[data-cy="featItemProfileCumul"]').should(
+        'contain.text',
+        'Δ+964 m Δ-1105 m Δ-141 m'
+      )
+      cy.get('[data-cy="featItemProfile"] svg').should('exist')
+      cy.get('[data-cy="featItemProfile"] svg g.grid-y > g.tick').should(
+        'have.length',
+        7
+      )
+      cy.get('[data-cy="featItemProfile"] svg g.x.axis > g.tick').should(
+        'have.length',
+        9
+      )
+      cy.get('[data-cy="featItemProfile"] svg g.y.axis > g.tick')
+        .eq(6)
+        .find('text')
+        .should('have.text', '500')
+    })
+
+    describe('When editing the line', () => {
+      it('refreshes the elevation profile for Line', () => {
+        cy.dragVertexOnMap(320, 223, 305, 305)
+
+        cy.get('[data-cy="featItemProfileCumul"]').should(
+          'contain.text',
+          'Δ+429 m Δ-489 m Δ-61 m'
+        )
+
+        cy.get('[data-cy="featItemProfile"] svg g.y.axis > g.tick')
+          .eq(6)
+          .find('text')
+          .should('have.text', '380')
+      })
+    })
+
+    it('downloads the profile elevation', () => {
+      cy.get('[data-cy="featItemProfileCSV"]').click()
+
+      const downloadPath = 'cypress/downloads/Ligne_1.csv'
+      cy.readFile(downloadPath).should('exist')
+
+      cy.readFile(downloadPath).then(content => {
+        expect(content).to.contain(
+          'dist,MNT,y,x,lon,lat\n0,425.3,60019.883345295,105204.558805771,5.89013672441823,49.88086129777006\n423.7,446.6,60292.742941114775,104880.43553517274,5.893949526308415,49.87795628443879\n847.4,480.9,60565.60253693456,104556.31226457447,5.897761870512693,49.875051143511975\n'
+        )
+        // NB. This is the first lines of the file, not the full content
+      })
+    })
+
     it('updates length measurement when editing geometry', () => {
-      cy.get('*[data-cy="featItemLength"]').should('contain.text', '55.36 km')
-      cy.dragVertexOnMap(200, 200, 300, 300)
-      cy.get('*[data-cy="featItemLength"]').should('contain.text', '111.14 km')
+      cy.get('[data-cy="featItemLength"]').should('contain.text', '42.31 km')
+      cy.dragVertexOnMap(320, 223, 305, 305)
+      cy.get('[data-cy="featItemLength"]').should('contain.text', '33.26 km')
     })
 
     it('displays the possible actions for the feature', () => {

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

@@ -124,7 +124,6 @@ describe('Draw "Point"', () => {
 
       it('displays the symbol edition tab', () => {
         cy.get('[data-cy="featStyleColor"]').should('exist')
-        // starting with featStyleSymbol_
         cy.get('[data-cy^="featStyleSymbol_"]').should('have.length', 4)
       })
 

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

@@ -36,7 +36,7 @@ describe('Draw "Polygon"', () => {
       // - chrome and chromium browsers give different decimals in measurements
       // - therefore only the int part of the surface is checked
       cy.get('*[data-cy="featItemArea"]')
-        .should('contain.text', 'Surface: 1532.')
+        .should('contain.text', 'Surface:\u00A01532.')
         .and('contain.text', ' km²')
     })
 

cypress/support/commands.ts

@@ -76,7 +76,12 @@ declare global {
     interface Chainable {
       getDrawInteractions(): Chainable<Array<Interaction>>
       getModifyInteraction(): Chainable<Interaction>
-      dragVertexOnMap(): Chainable<void>
+      dragVertexOnMap(
+        originX: number,
+        originY: number,
+        x: number,
+        y: number
+      ): 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>