From 60d3f5a4d13127fa20fee4a65fd22bc403f61330 Mon Sep 17 00:00:00 2001 From: Brice Schaffner Date: Thu, 21 Dec 2023 09:42:51 +0100 Subject: [PATCH] BGDIINF_SB-3186: Avoid flaky tests on cypress cloud Some tests that rely on clicking on the map requires that the map has been fully rendered otherwise the test will failed. Somehow when using cypress cloud it seems that the openlayer rendering is a bit delayed and some tests are therefore failing. --- src/modules/map/components/cesium/CesiumMap.vue | 5 ++++- .../map/components/openlayers/OpenLayersMap.vue | 12 ++++++++++++ .../openlayers/utils/map-interactions.composable.js | 4 ++++ src/store/modules/app.store.js | 10 ++++++++++ src/views/MapView.vue | 4 ++++ tests/e2e-cypress/support/commands.js | 2 +- 6 files changed, 35 insertions(+), 2 deletions(-) diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue index f1a6a62ded..84cc2d6011 100644 --- a/src/modules/map/components/cesium/CesiumMap.vue +++ b/src/modules/map/components/cesium/CesiumMap.vue @@ -256,8 +256,9 @@ export default { if (this.isProjectionWebMercator) { this.createViewer() } else { - log.debug('Projection is not yet set to WebMercator, Cesium will not load yet') + log.warn('Projection is not yet set to WebMercator, Cesium will not load yet') } + log.info('CesiumMap component mounted and ready') }, beforeUnmount() { if (this.viewer) { @@ -294,6 +295,7 @@ export default { 'click', 'toggleFloatingTooltip', 'setCenter', + 'mapModuleReady', ]), async createViewer() { this.viewer = new Viewer(this.$refs.viewer, { @@ -384,6 +386,7 @@ export default { // reduce screen space error to downgrade visual quality but speed up tests globe.maximumScreenSpaceError = 30 } + this.mapModuleReady() }, highlightSelectedFeatures() { const [firstFeature] = this.selectedFeatures diff --git a/src/modules/map/components/openlayers/OpenLayersMap.vue b/src/modules/map/components/openlayers/OpenLayersMap.vue index fb96a2e47a..2dd767c475 100644 --- a/src/modules/map/components/openlayers/OpenLayersMap.vue +++ b/src/modules/map/components/openlayers/OpenLayersMap.vue @@ -4,6 +4,7 @@ import { get as getProjection } from 'ol/proj' import { register } from 'ol/proj/proj4' import proj4 from 'proj4' import { onMounted, provide, ref } from 'vue' +import { useStore } from 'vuex' import { IS_TESTING_WITH_CYPRESS } from '@/config' import OpenLayersBackgroundLayer from '@/modules/map/components/openlayers/OpenLayersBackgroundLayer.vue' @@ -15,6 +16,9 @@ import OpenLayersVisibleLayers from '@/modules/map/components/openlayers/OpenLay import useMapInteractions from '@/modules/map/components/openlayers/utils/map-interactions.composable' import useViewBasedOnProjection from '@/modules/map/components/openlayers/utils/map-views.composable' import allCoordinateSystems, { WGS84 } from '@/utils/coordinates/coordinateSystems' +import log from '@/utils/logging' + +const store = useStore() // register any custom projection in OpenLayers register(proj4) @@ -40,9 +44,17 @@ if (IS_TESTING_WITH_CYPRESS) { window.map = map } +map.once('rendercomplete', () => { + // This is needed for cypress in order to start the tests only + // when openlayer is rendered otherwise some tests will fail. + store.dispatch('mapModuleReady') + log.info('Openlayer map rendered') +}) + onMounted(() => { map.setTarget(mapElement.value) useMapInteractions(map) + log.info('OpenLayersMap component mounted and ready') }) diff --git a/src/modules/map/components/openlayers/utils/map-interactions.composable.js b/src/modules/map/components/openlayers/utils/map-interactions.composable.js index d0b4e3527a..358bdbb698 100644 --- a/src/modules/map/components/openlayers/utils/map-interactions.composable.js +++ b/src/modules/map/components/openlayers/utils/map-interactions.composable.js @@ -7,6 +7,7 @@ import { useStore } from 'vuex' import { useMouseOnMap } from '@/modules/map/components/common/mouse-click.composable' import { LV95 } from '@/utils/coordinates/coordinateSystems' +import log from '@/utils/logging' export default function useMapInteractions(map) { const { onLeftClickDown, onLeftClickUp, onRightClick, onMouseMove } = useMouseOnMap() @@ -67,6 +68,9 @@ export default function useMapInteractions(map) { mapElement.addEventListener('pointerdown', onPointerDown) mapElement.addEventListener('pointerup', onPointerUp) mapElement.addEventListener('pointermove', onMouseMove) + log.info('setup map pointer events') + } else { + log.warn('failed to setup map pointer events') } setInteractionAccordingToProjection() diff --git a/src/store/modules/app.store.js b/src/store/modules/app.store.js index d068da7af9..a81fd86581 100644 --- a/src/store/modules/app.store.js +++ b/src/store/modules/app.store.js @@ -7,14 +7,24 @@ export default { * @type Boolean */ isReady: false, + + /** + * Flag telling that the Map Module is ready. This is usefull for E2E testing which should + * not start before the Map Module is ready. + */ + isMapReady: false, }, getters: {}, actions: { setAppIsReady: ({ commit }) => { commit('setAppIsReady') }, + mapModuleReady: ({ commit }) => { + commit('mapModuleReady') + }, }, mutations: { setAppIsReady: (state) => (state.isReady = true), + mapModuleReady: (state) => (state.isMapReady = true), }, } diff --git a/src/views/MapView.vue b/src/views/MapView.vue index 2ac983ae69..c6b909521f 100644 --- a/src/views/MapView.vue +++ b/src/views/MapView.vue @@ -22,6 +22,7 @@ import InfoboxModule from '@/modules/infobox/InfoboxModule.vue' import MapFooter from '@/modules/map/components/footer/MapFooter.vue' import MapModule from '@/modules/map/MapModule.vue' import MenuModule from '@/modules/menu/MenuModule.vue' +import log from '@/utils/logging' import OpenFullAppLink from '@/utils/OpenFullAppLink.vue' export default { @@ -41,6 +42,9 @@ export default { isDrawing: (state) => state.ui.showDrawingOverlay, }), }, + mounted() { + log.info(`Map view mounted`) + }, } diff --git a/tests/e2e-cypress/support/commands.js b/tests/e2e-cypress/support/commands.js index 6f83cff14a..329c9db2fd 100644 --- a/tests/e2e-cypress/support/commands.js +++ b/tests/e2e-cypress/support/commands.js @@ -189,7 +189,7 @@ Cypress.Commands.add( onBeforeLoad: (win) => mockGeolocation(win, geolocationMockupOptions), }) // waiting for the app to load and layers to be configured. - cy.waitUntilState((state) => state.app.isReady, { timeout: 10000 }) + cy.waitUntilState((state) => state.app.isMapReady, { timeout: 10000 }) cy.waitUntilState( (state) => { const active = state.layers.activeLayers.length