From b0eaccb2acffe5ec720afd52137bbd249efc3b2a Mon Sep 17 00:00:00 2001 From: Felix Sommer Date: Fri, 29 Nov 2024 15:23:18 +0100 Subject: [PATCH] PB-1192: add test move and resize legend --- src/utils/components/SimpleWindow.vue | 1 + tests/cypress/fixtures/legend.fixture.html | 46 +++++++ tests/cypress/support/commands.js | 53 ++++++++ tests/cypress/tests-e2e/topics.cy.js | 143 +++++++++++++++++++++ 4 files changed, 243 insertions(+) create mode 100644 tests/cypress/fixtures/legend.fixture.html diff --git a/src/utils/components/SimpleWindow.vue b/src/utils/components/SimpleWindow.vue index 6866330e2..4f3741aff 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 c9197b393..0dc3eeb36 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 bc7980c62..1d15f9137 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) + }) + }) + }) + }) })