diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue index 6866330e2e..4f3741affd 100644 --- a/src/utils/components/SimpleWindow.vue +++ b/src/utils/components/SimpleWindow.vue @@ -93,6 +93,7 @@ onMounted(() => { resizable: resizeable && showBody, }, ]" + data-cy="simple-window" >
+
+
+

Fermetures / Déviations Chemins de randonnée et "La Suisse à pied" (Office fédéral des routes OFROU, cantons)

+

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

+
+
+
+ Légende
+
+ layer legend img +
+

+ Informations
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ID Géodonnées de base -
Plage de validité des données
Métadonnées + Lien vers geocat.ch
Description détailléeLien vers la description détaillée des données
Distribution des donnéesLien vers la distribution des données
Géoportail thématiqueLien vers le portail
Service WMSLien vers le wms
État d'actualité02.12.2024
+
+
+
+
\ No newline at end of file diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index c9197b3937..0dc3eeb36c 100644 --- a/tests/cypress/support/commands.js +++ b/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) => { diff --git a/tests/cypress/tests-e2e/topics.cy.js b/tests/cypress/tests-e2e/topics.cy.js index bc7980c625..1d15f91378 100644 --- a/tests/cypress/tests-e2e/topics.cy.js +++ b/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) + }) + }) + }) + }) })