Skip to content

Commit

Permalink
PB-1192: add test move and resize legend
Browse files Browse the repository at this point in the history
  • Loading branch information
sommerfe committed Dec 3, 2024
1 parent a9eb9a0 commit 7b60134
Show file tree
Hide file tree
Showing 4 changed files with 347 additions and 1 deletion.
31 changes: 30 additions & 1 deletion src/utils/components/SimpleWindow.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import { computed, onMounted, ref, toRefs } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
Expand Down Expand Up @@ -57,7 +57,10 @@ const emit = defineEmits(['close'])
const windowRef = ref(null)
const headerRef = ref(null)
const contentRef = ref(null)
const size = ref({ width: 0, height: 0 })
const lastClick = ref({ x: 0, y: 0 })
let resizeObserver = ref(null)
const initialPositionClass = computed(() => {
if (accepetedInitialPositions.includes(props.initialPosition)) {
return props.initialPosition
Expand All @@ -67,6 +70,15 @@ const initialPositionClass = computed(() => {
})
onMounted(() => {
resizeObserver.value = new ResizeObserver((entries) => {
for (let entry of entries) {
const { width, height } = entry.contentRect
size.value = { width, height }
}
})
if (windowRef.value) {
resizeObserver.value.observe(windowRef.value)
}
if (props.movable) {
const windowElement = windowRef.value
const headerElement = headerRef.value
Expand All @@ -77,6 +89,19 @@ onMounted(() => {
})
}
})
onBeforeUnmount(() => {
if (resizeObserver.value) resizeObserver.value.disconnect()
})
watch(size, (newSize) => {
console.log('Size:', newSize)
})
const logClick = (event) => {
lastClick.value = {
x: event.offsetX,
y: event.offsetY,
}
console.log('Click coordinates relative to the element:', lastClick.value, event.type)
}
</script>

<template>
Expand All @@ -93,6 +118,10 @@ onMounted(() => {
resizable: resizeable && showBody,
},
]"
data-cy="simple-window"
@click="logClick"
@mousedown="logClick"
@mouseup="logClick"
>
<div
ref="headerRef"
Expand Down
46 changes: 46 additions & 0 deletions tests/cypress/fixtures/legend.fixture.html
Original file line number Diff line number Diff line change
@@ -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>
55 changes: 55 additions & 0 deletions tests/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,61 @@ 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) => {
Expand Down
216 changes: 216 additions & 0 deletions tests/cypress/tests-e2e/topics.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -246,4 +246,220 @@ describe('Topics', () => {
])
})
})
it('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 }
console.log('initialDimensions', initialDimensions)
// startPosition: 'bottomRight' can also work but in my tests it only worked when the console was open during the test run. To fix this i manually select the bottom right corner using coordinates
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 1,
y: initialDimensions.height - bottomRightMargin - 1,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 2,
y: initialDimensions.height - bottomRightMargin - 2,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 3,
y: initialDimensions.height - bottomRightMargin - 3,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 4,
y: initialDimensions.height - bottomRightMargin - 4,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 5,
y: initialDimensions.height - bottomRightMargin - 5,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 6,
y: initialDimensions.height - bottomRightMargin - 6,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 7,
y: initialDimensions.height - bottomRightMargin - 7,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startPosition: 'bottomRight',
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 8,
y: initialDimensions.height - bottomRightMargin - 8,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 9,
y: initialDimensions.height - bottomRightMargin - 9,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 10,
y: initialDimensions.height - bottomRightMargin - 10,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 11,
y: initialDimensions.height - bottomRightMargin - 11,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 12,
y: initialDimensions.height - bottomRightMargin - 12,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 13,
y: initialDimensions.height - bottomRightMargin - 13,
},
endPosition: 'right',
})
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin - 14,
y: initialDimensions.height - bottomRightMargin - 14,
},
endPosition: 'right',
})
cy.get(popupSelector).then((popup) => {
const rect = popup[0].getBoundingClientRect()
expect(rect.height).to.not.eq(
initialDimensions.height
) // Allow small margin
// expect(rect.height).to.be.closeTo(
// initialDimensions.height / 2,
// bottomRightMargin + 10
// ) // Allow small margin
})
})


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 }
cy.resizeElement({
selector: popupSelector,
startXY: {
x: initialDimensions.width - bottomRightMargin,
y: initialDimensions.height - bottomRightMargin,
},
endXY: {
x: increasedX + initialDimensions.width,
y: increasedY + initialDimensions.height,
},
})
cy.get(popupSelector).then((popup) => {
const rect = popup[0].getBoundingClientRect()
// expect(rect.width).to.be.closeTo(
// increasedX + initialDimensions.width,
// bottomRightMargin + 10
// )
// expect(rect.height).to.be.closeTo(
// increasedY + initialDimensions.height,
// bottomRightMargin + 10
// ) // Allow small margin
// expect(rect.height).to.be.closeTo(
// increasedY + initialDimensions.height,
// bottomRightMargin + 10
// ) // Allow small margin
expect(rect.width).to.not.eq(
initialDimensions.width
)
expect(rect.height).to.not.eq(
initialDimensions.height
)
})
})
})
})
})

0 comments on commit 7b60134

Please sign in to comment.