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.

Author: ltshb

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

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')
 })
 </script>
 

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()
 

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),
     },
 }

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`)
+    },
 }
 </script>
 

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