From f31741ed3cd4b7745510a8de79c866ed7cd52bc0 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/integration/timeSlider.cy.js | 8 +++----- tests/e2e-cypress/support/commands.js | 2 +- 7 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue index f1a6a62de..84cc2d601 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 fb96a2e47..2dd767c47 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 d0b4e3527..358bdbb69 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 d068da7af..a81fd8658 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 2ac983ae6..c6b909521 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/integration/timeSlider.cy.js b/tests/e2e-cypress/integration/timeSlider.cy.js index 8b114ee9d..662445ece 100644 --- a/tests/e2e-cypress/integration/timeSlider.cy.js +++ b/tests/e2e-cypress/integration/timeSlider.cy.js @@ -31,11 +31,9 @@ describe('Testing the time slider', () => { } const preSelectedYear = 2019 beforeEach(() => { - cy.goToMapView( - { - layers: `test.timeenabled.wmts.layer@year=${preSelectedYear}`, - } - ) + cy.goToMapView({ + layers: `test.timeenabled.wmts.layer@year=${preSelectedYear}`, + }) cy.get('[data-cy="time-slider-button"]').click() }) it('should have the preselected year correctly set', () => { diff --git a/tests/e2e-cypress/support/commands.js b/tests/e2e-cypress/support/commands.js index 6f83cff14..329c9db2f 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