BGDIINF_SB-3186: Fixed flaky e2e tests

TODO

src/modules/map/MapModule.vue

@@ -22,16 +22,22 @@ const uiMode = computed(() => store.state.ui.mode)
 const displayLocationPopup = computed(() => store.state.map.displayLocationPopup)
 
 const isPhoneMode = computed(() => uiMode.value === UIModes.PHONE)
+
+// Here we need the @hook:mounted instead of listening to the parent mounted hook, because
+// the child componenets (OpenLayersMap and CesiumMap) are asynchronous
+function onMapMounted() {
+    store.dispatch('mapModuleReady')
+}
 </script>
 
 <template>
     <div class="full-screen-map" data-cy="map">
-        <CesiumMap v-if="is3DActive">
+        <CesiumMap v-if="is3DActive" @hook:mounted="onMapMounted()">
             <!-- So that external modules can have access to the viewer instance through the provided 'getViewer' -->
             <slot />
             <LocationPopup v-if="displayLocationPopup" />
         </CesiumMap>
-        <OpenLayersMap v-else>
+        <OpenLayersMap v-else @hook:mounted="onMapMounted()">
             <!-- So that external modules can have access to the map instance through the provided 'getMap' -->
             <slot />
             <LocationPopup v-if="displayLocationPopup" />

src/modules/map/components/cesium/CesiumMap.vue

@@ -152,6 +152,7 @@ export default {
             getViewer: () => this.viewer,
         }
     },
+    emits: ['hook:mounted'],
     data() {
         return {
             viewerCreated: false,
@@ -256,8 +257,10 @@ 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')
         }
+        this.$emit('hook:mounted')
+        log.info('CesiumMap component mounted and ready')
     },
     beforeUnmount() {
         if (this.viewer) {

src/modules/map/components/openlayers/OpenLayersMap.vue

@@ -15,6 +15,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 emit = defineEmits(['hook:mounted'])
 
 // register any custom projection in OpenLayers
 register(proj4)
@@ -43,6 +46,8 @@ if (IS_TESTING_WITH_CYPRESS) {
 onMounted(() => {
     map.setTarget(mapElement.value)
     useMapInteractions(map)
+    emit('hook:mounted')
+    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,8 @@ export default function useMapInteractions(map) {
         mapElement.addEventListener('pointerdown', onPointerDown)
         mapElement.addEventListener('pointerup', onPointerUp)
         mapElement.addEventListener('pointermove', onMouseMove)
+    } else {
+        log.warn('failted 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,8 +22,8 @@ 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 {
     components: {
         OpenFullAppLink,
@@ -41,6 +41,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