PB-1192: add test move and resize legend

src/utils/components/SimpleWindow.vue

@@ -93,6 +93,7 @@ onMounted(() => {
                     resizable: resizeable && showBody,
                 },
             ]"
+            data-cy="simple-window"
         >
             <div
                 ref="headerRef"

tests/cypress/fixtures/legend.fixture.html

@@ -0,0 +1,46 @@
+<div data-v-3ad09ea2="" class="card-body"><div class="layer-description" data-cy="layer-description-popup"><!-- eslint-disable vue/no-v-html--><div data-cy="layer-description">
+<div class="legend-container">
+<div class="legend-header">
+  <p class="bod-title"><span>Fermetures / Déviations Chemins de randonnée et "La Suisse à pied"</span> (Office fédéral des routes OFROU, cantons)</p>
+  <p class="legend-abstract">Le jeu de données contient les fermetures et les déviations sur le réseau de chemins de randonnée et sur les itinéraires de «La Suisse à pied» de la Suisse et de la Principauté du Liechtenstein, qui ont été communiquées à Suisse Rando et leurs Associations cantonales de tourisme pédestre. Il complète les géodonnées «Chemins de randonnée pédestre» (swissTLM3D Chemins de randonnée pédestre) et «La Suisse à pied» (Mobilité douce – La Suisse à pied), et il est publié par l'Office fédéral des routes OFROU, l'Office fédéral de topographie swisstopo, Suisse Rando, SuisseMobile et les cantons.Lien vers le disclaimer: https://schweizmobil.ch/fr/fermetures-deviations</p>
+</div>
+<div class="legend-footer">
+  <br>
+  <span>Légende</span><br>
+  <div class="img-container">
+    <img src="//sys-api3.dev.bgdi.ch/static/images/legends/ch.astra.wanderland-sperrungen_umleitungen_fr.png" alt="layer legend img">
+  </div>
+  <br><br>
+  <span>Informations</span><br>
+  <table>
+    <tbody><tr><td>ID Géodonnées de base</td> <td>-</td></tr>
+    <tr><td>Plage de validité des données</td> <td></td></tr>
+    <tr><td>Métadonnées</td>
+      <td><a target="_blank" href="https://www.geocat.ch/geonetwork/srv/fre/catalog.search#/metadata/b440815a-07e5-48db-959d-cb2ca4458f3a">
+      Lien vers geocat.ch</a></td>
+    </tr>
+    <tr>
+      <td>Description détaillée</td>
+      <td><a href="https://www.schweizmobil.org" target="new">Lien vers la description détaillée des données</a></td>
+    </tr>
+    <tr>
+      <td>Distribution des données</td>
+      <td><a href="https://data.geo.admin.ch/ch.astra.wanderland-sperrungen_umleitungen" target="new">Lien vers la distribution des données</a></td>
+    </tr>
+    <tr>
+      <td>Géoportail thématique</td>
+      <td><a href="https://map.geo.admin.ch/?topic=astra&amp;lang=de&amp;bgLayer=ch.swisstopo.pixelkarte-grau&amp;layers=ch.astra.wanderland-sperrungen_umleitungen&amp;layers_opacity=0.8&amp;catalogNodes=3019" target="new">Lien vers le portail</a></td>
+    </tr>
+    <tr>
+      <td>Service WMS</td>
+      <td><a href="https://wms.geo.admin.ch/?REQUEST=GetCapabilities&amp;SERVICE=WMS&amp;VERSION=1.3.0" target="new">Lien vers le wms</a></td>
+    </tr>
+    <tr>
+      <td>État d'actualité</td>
+      <td>02.12.2024</td>
+    </tr>
+  </tbody></table>
+</div>
+</div>
+</div>
+</div></div>

tests/cypress/support/commands.js

@@ -465,6 +465,59 @@ Cypress.Commands.add('waitMapIsReady', ({ timeout = 20000, olMap = true } = {})
     }
 })
 
+/**
+ * Click on the map at the given coordinates
+ *
+ * @param {string} selector The selector of the element
+ * @param {Number} x X coordinate
+ * @param {Number} y Y coordinate
+ * @param {Number} button Mouse button to use
+ * @see https://docs.cypress.io/api/commands/trigger#Trigger-a-mousedown-from-a-specific-mouse-button
+ */
+Cypress.Commands.add('dragMouse', (selector, x, y, button = 0) => {
+    cy.get(selector).trigger('mousedown', { button })
+    cy.get(selector).trigger('mousemove', { button, clientX: 0, clientY: 0 }) // this is needed to make the drag work
+    cy.get(selector).trigger('mousemove', { button, clientX: x, clientY: y })
+    cy.get(selector).trigger('mouseup', { button })
+})
+
+/**
+ * Resize an element by dragging the bottom right corner If using the startXY coordinates, the
+ * startPosition should be undefined and the same for endXY X and Y coordinates are relative to the
+ * top left corner of the element
+ *
+ * @param {Object} options - Options for resizing.
+ * @param {string} options.selector - The selector of the element.
+ * @param {string} options.startPosition - The start position for dragging.
+ * @param {string} options.endPosition - The end position for dragging.
+ * @param {Object} options.startXY - The start coordinates for dragging.
+ * @param {Object} options.endXY - The end coordinates for dragging.
+ * @param {string} options.button - Mouse button to use.
+ * @see https://github.com/dmtrKovalenko/cypress-real-events?tab=readme-ov-file#cyrealmousedown
+ * @see https://github.com/dmtrKovalenko/cypress-real-events/blob/main/src/commands/mouseDown.ts
+ */
+Cypress.Commands.add(
+    'resizeElement',
+    ({
+        selector = '',
+        startPosition = 'bottomRight',
+        endPosition = undefined,
+        startXY = undefined,
+        endXY = { x: 100, y: 100 },
+        button = 'left',
+    } = {}) => {
+        cy.get(selector).realMouseDown({
+            button,
+            ...(startXY ? { x: startXY.x, y: startXY.y } : { position: startPosition }),
+        })
+        cy.get(selector).realMouseDown({
+            button,
+            ...(endPosition ? { position: endPosition } : { x: endXY.x, y: endXY.y }),
+        })
+        cy.get(selector).realMouseUp({ button })
+    }
+)
+
 Cypress.Commands.add('waitAllLayersLoaded', ({ queryParams = {}, legacy = false } = {}) => {
     cy.waitUntilState(
         (state, getters) => {

tests/cypress/tests-e2e/topics.cy.js

@@ -246,4 +246,147 @@ describe('Topics', () => {
             ])
         })
     })
+
+    // This test is very flaky, the legend is only sometimes resized and I have not found a solution yet to make it more stable therefore it is skiped for now
+    it.skip('Modify the legend display', () => {
+        cy.viewport(1920, 1080)
+
+        cy.goToMapView({
+            layers: 'test.wmts.layer',
+            bgLayer: 'void',
+        })
+        cy.wait(['@topics', '@topic-ech', '@layers', '@routeChange', '@routeChange'])
+        cy.log('it opens the layer legend popup when clicking the info button')
+        cy.fixture('legend.fixture.html').then((legend) => {
+            cy.intercept(`**/rest/services/all/MapServer/*/legend**`, legend).as('legend')
+            cy.get('[data-cy="button-open-visible-layer-settings-test.wmts.layer-0"]')
+                .should('be.visible')
+                .click()
+            cy.get('[data-cy="button-toggle-visibility-layer-test.wmts.layer-0"]') // this is not necessary but it prevents from selecting random objects from the layer
+                .should('be.visible')
+                .click()
+            cy.get('[data-cy="button-show-description-layer-test.wmts.layer-0"]')
+                .should('be.visible')
+                .click()
+            cy.wait('@legend')
+
+            const popupSelector = '[data-cy="simple-window"]'
+            const popupSelectorHeader = '[data-cy="window-header"]'
+            const moveX = 100
+            const moveY = 120
+            const bottomRightMargin = 3
+
+            cy.get(popupSelector).then((popup) => {
+                const rect = popup[0].getBoundingClientRect()
+                const initialPosition = { x: rect.x, y: rect.y }
+                cy.dragMouse(popupSelectorHeader, moveX, moveY)
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.x).to.be.closeTo(initialPosition.x + moveX, 1) // Allow small margin for floating-point
+                    expect(rect.y).to.be.closeTo(initialPosition.y + moveY, 1)
+                })
+            })
+            const increasedX = 100
+            const increasedY = 100
+            cy.log('resize the legend popup')
+            cy.log('reduce the size of the legend popup to the half')
+            cy.get(popupSelector).then((popup) => {
+                const rect = popup[0].getBoundingClientRect()
+                const initialDimensions = { height: rect.height, width: rect.width }
+                let genArr = Array.from({ length: 15 }, (v, k) => k + 1)
+                cy.wrap(genArr).each((index) => {
+                    cy.log('reduce size loop 1 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin - index,
+                            y: initialDimensions.height - bottomRightMargin - index,
+                        },
+                        endPosition: 'right',
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('reduce size loop 2 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin + index,
+                            y: initialDimensions.height - bottomRightMargin + index,
+                        },
+                        endPosition: 'right',
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('reduce size loop 3 for index', index)
+                    cy.get(popupSelector).realMouseDown({
+                        button: 'left',
+                        x: initialDimensions.width - bottomRightMargin - index,
+                        y: initialDimensions.height - bottomRightMargin - index,
+                    })
+                    cy.get(popupSelector).realMouseDown({
+                        button: 'left',
+                        endPosition: 'right',
+                    })
+                    cy.get(popupSelector).realMouseUp({ button: 'left' })
+                })
+
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.height).to.not.eq(initialDimensions.height)
+                })
+            })
+
+            cy.log('increase the size of the legend popup by 100px')
+            cy.get(popupSelector).then((popup) => {
+                const rect = popup[0].getBoundingClientRect()
+                const initialDimensions = { height: rect.height, width: rect.width }
+
+                let genArr = Array.from({ length: 15 }, (v, k) => k + 1)
+                cy.wrap(genArr).each((index) => {
+                    cy.log('increase sice loop 1 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin - index,
+                            y: initialDimensions.height - bottomRightMargin - index,
+                        },
+                        endXY: {
+                            x: increasedX + initialDimensions.width,
+                            y: increasedY + initialDimensions.height,
+                        },
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('increase size loop 2 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startXY: {
+                            x: initialDimensions.width - bottomRightMargin + index,
+                            y: initialDimensions.height - bottomRightMargin + index,
+                        },
+                        endXY: {
+                            x: increasedX + initialDimensions.width,
+                            y: increasedY + initialDimensions.height,
+                        },
+                    })
+                })
+                cy.wrap(genArr).each((index) => {
+                    cy.log('increase size loop 3 for index', index)
+                    cy.resizeElement({
+                        selector: popupSelector,
+                        startPosition: 'bottomRight',
+                        endXY: {
+                            x: increasedX + initialDimensions.width,
+                            y: increasedY + initialDimensions.height,
+                        },
+                    })
+                })
+                cy.get(popupSelector).then((popup) => {
+                    const rect = popup[0].getBoundingClientRect()
+                    expect(rect.width).to.not.eq(initialDimensions.width)
+                    expect(rect.height).to.not.eq(initialDimensions.height)
+                })
+            })
+        })
+    })
 })