Merge pull request #522 from geoadmin/feat-BGDIINF_SB-3186-cy-cloud

BGDIINF_SB-3186: Added cypress cloud project ID for test parallelization

cypress.config.ts → cypress.config.mjs

@@ -5,7 +5,8 @@ import { defineConfig } from 'cypress'
 import { cypressBrowserPermissionsPlugin } from 'cypress-browser-permissions'
 import vitePreprocessor from 'cypress-vite'
 
-module.exports = defineConfig({
+export default defineConfig({
+    projectId: 'fj2ezv',
     video: false,
     defaultCommandTimeout: 5000,
     requestTimeout: 5000,
@@ -14,10 +15,6 @@ module.exports = defineConfig({
         runMode: 1,
         openMode: 0,
     },
-    reporter: 'cypress-multi-reporters',
-    reporterOptions: {
-        configFile: `./tests/reporter.config.js`,
-    },
     viewportWidth: 320,
     viewportHeight: 568,
     downloadsFolder: 'tests/e2e-cypress/downloads',
@@ -31,7 +28,7 @@ module.exports = defineConfig({
             on('file:preprocessor', vitePreprocessor())
 
             // plugin that help tests define which browser permission is set or denied (e.g. location API)
-            config = cypressBrowserPermissionsPlugin(on, config)
+            cypressBrowserPermissionsPlugin(on, config)
 
             // adding task to help manage (local/downloaded) files
             on('task', {

package.json

@@ -85,7 +85,6 @@
         "chai": "^4.3.10",
         "cypress": "^13.6.1",
         "cypress-browser-permissions": "^1.1.0",
-        "cypress-multi-reporters": "^1.6.4",
         "cypress-real-events": "^1.11.0",
         "cypress-recurse": "^1.35.2",
         "cypress-vite": "^1.5.0",
@@ -121,6 +120,6 @@
         "node": ">=18",
         "npm": "9.*.*"
     },
-    "type": "commonjs",
+    "type": "module",
     "engineStrict": true
 }

secrets.yml

@@ -1,2 +1,3 @@
 # required in order to access the translation spreadsheet (while running `npm run update:translations`)
 GOOGLE_API_KEY: !var infra-gopass-bgdi/web-mapviewer/GOOGLE_API_KEY
+CYPRESS_RECORD_KEY: !var infra-gopass-bgdi/web-mapviewer/cypress-key key

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