Modify Cypress e2e tests: actually click on paths to create a trek

GeotrekCE · Jul 9, 2024 · c6bf2c8 · c6bf2c8
1 parent 861d9b7
commit c6bf2c8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 5 deletions.
diff --git a/cypress/integration/nav_create_trek.js b/cypress/integration/nav_create_trek.js
@@ -27,10 +27,9 @@ describe('Create trek', () => {
         cy.server();
         cy.get("a.btn-success[href='/trek/add/']").contains('Add a new trek').click();
         cy.get("a.linetopology-control").click();
-        cy.get("textarea[id='id_topology']").type('[{"pk": 2, "kind": "TREK", "offset": 0.0, "paths": [3], "positions": {"0": [0.674882030756843, 0.110030805790642]}}]', {
-            force: true,
-            parseSpecialCharSequences: false
-        });
+        cy.clickOnPath(0, 67);
+        cy.clickOnPath(0, 11);
+        cy.get('[data-test^="route-step-"]');
         cy.get("input[id='id_duration']").type('100');
         cy.get("input[name='name_en']").type('Trek number 1');
         cy.get("a[href='#name_fr']").click();

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -21,4 +21,55 @@ Cypress.Commands.add('loginByCSRF', (username, password) => {
 
 Cypress.Commands.add('mockTiles', (username, password) => {
     cy.intercept("https://*.tile.opentopomap.org/*/*/*.png", {fixture: "images/tile.png"}).as("tiles");
+});
+
+Cypress.Commands.add('getCoordsOnMap', (pathPk, percentage) => {
+  cy.getPath(pathPk).then(path => {
+    let domPath = path.get(0);
+
+    // Get the coordinates relative to the map element
+    let pathLength = domPath.getTotalLength();
+    let lengthAtPercentage = percentage * pathLength / 100;
+    return domPath.getPointAtLength(lengthAtPercentage);
+  })
+});
+
+Cypress.Commands.add('getCoordsOnPath', (pathPk, percentage) => {
+  cy.getPath(pathPk).then(path => {
+    cy.getCoordsOnMap(pathPk, percentage).then(coordsOnMap => {
+      // Convert the coords so they are relative to the path
+      cy.getMap().then(map => {
+        let domMap = map.get(0);
+        let domPath = path.get(0);
+
+        // Get the coords of the map and the path relative to the root DOM element
+        let mapCoords = domMap.getBoundingClientRect();
+        let pathCoords = domPath.getBoundingClientRect();
+        let horizontalDelta = pathCoords.x - mapCoords.x;
+        let verticalDelta = pathCoords.y - mapCoords.y;
+
+        // Return the coords relative to the path element
+        return {
+          x: coordsOnMap.x - horizontalDelta,
+          y: coordsOnMap.y - verticalDelta,
+        }
+      });
+    })
+
+  })
+})
+
+Cypress.Commands.add('getMap', () => cy.get('[id="id_topology-map"]'));
+Cypress.Commands.add('getPath', pathPk => cy.get(`[data-test=pathLayer-${pathPk}]`));
+
+Cypress.Commands.add('clickOnPath', (pathPk, percentage) => {
+  // Get the coordinates of the click and execute it
+  cy.getCoordsOnPath(pathPk, percentage).then(clickCoords => {
+    let startTime;
+    cy.getPath(pathPk)
+    .then((path) => {startTime = performance.now(); return path})
+    .click(clickCoords.x, clickCoords.y, {force: true})
+    // Return startTime so it is yielded by the command
+    .then(() => startTime);
+  });
 });
diff --git a/geotrek/core/static/core/multipath.js b/geotrek/core/static/core/multipath.js
@@ -279,7 +279,11 @@ L.Handler.MultiPath = L.Handler.extend({
         };
 
         this.layersOrderedByIdx = function() {
-            var layers = this._routeLayer ? this._routeLayer.__layerArray : []
+            if (!this._routeLayer)
+                return []
+            var layers = this._routeLayer.__layerArray
+            console.log('layers', layers)
+            debugger;
             var sortedLayers = layers.toSorted((first, second) => {
                 return first.step_idx - second.step_idx
             })