PB-2064: replace last use of removed readStoreValue function

and fix some TS error found in legacyParamImport.cy.ts

Author: pakb

packages/viewer/tests/cypress/cypress.d.ts

@@ -68,8 +68,6 @@ declare global {
             /**
              * Cypress-wait-until wrapper to wait for a specific (Vuex) store state.
              *
-             * Cy.readStoreValue doesn't work as `.its` will prevent retries.
-             *
              * @param predicate
              * @param options
              */

packages/viewer/tests/cypress/tests-e2e/geolocation.cy.ts

@@ -1,12 +1,11 @@
 /// <reference types="cypress" />
 
-import { constants, registerProj4, WGS84, type SingleCoordinate } from '@swissgeo/coordinates'
+import { constants, registerProj4, type SingleCoordinate, WGS84 } from '@swissgeo/coordinates'
 import proj4 from 'proj4'
 
 import {
     getGeolocationButtonAndClickIt,
     testErrorMessage,
-    checkStorePosition,
 } from '@/../tests/cypress/tests-e2e/utils'
 import { DEFAULT_PROJECTION } from '@/config/map.config'
 import useGeolocationStore from '@/store/modules/geolocation'
@@ -26,6 +25,17 @@ const testCases: TestCase[] = [
     { description: 'on 3D Map', is3D: true },
 ]
 
+function checkPosition(
+    position: SingleCoordinate | undefined,
+    expectedX: number,
+    expectedY: number
+) {
+    expect(position).to.be.an('Array')
+    expect(position!.length).to.eq(2)
+    expect(position![0]).to.approximately(expectedX, 0.1)
+    expect(position![1]).to.approximately(expectedY, 0.1)
+}
+
 // PB-701: TODO Those tests below are not working as expected, as the cypress-browser-permissions is not
 // working and the geolocation is always allowed, this needs to be reworked and probably need to
 // use another plugin.
@@ -111,45 +121,47 @@ describe('Geolocation cypress', () => {
                 })
 
                 // check initial center and zoom
-                checkStorePosition('state.position.center', x0, y0)
                 cy.getPinia().then((pinia) => {
                     const positionStore = usePositionStore(pinia)
                     expect(positionStore.zoom).to.eq(startingZoom)
+                    checkPosition(positionStore.center, x0, y0)
                 })
 
                 getGeolocationButtonAndClickIt()
-                checkStorePosition('state.geolocation.position', geoX, geoY)
 
-                // check that the map has been centered on the geolocation and zoom is updated
-                checkStorePosition('state.position.center', geoX, geoY)
                 cy.getPinia().then((pinia) => {
-                    const positionStore2 = usePositionStore(pinia)
-                    expect(positionStore2.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP)
+                    const geolocationStore = useGeolocationStore(pinia)
+                    checkPosition(geolocationStore.position, geoX, geoY)
+
+                    // check that the map has been centered on the geolocation and zoom is updated
+                    const positionStore = usePositionStore(pinia)
+                    checkPosition(positionStore.center, geoX, geoY)
+                    expect(positionStore.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP)
                 })
 
                 // Check if the zoom is changed
                 cy.get('[data-cy="zoom-in"]').click()
                 cy.getPinia().then((pinia) => {
-                    const positionStore3 = usePositionStore(pinia)
-                    expect(positionStore3.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP + 1)
+                    const positionStore = usePositionStore(pinia)
+                    expect(positionStore.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP + 1)
+                    checkPosition(positionStore.center, geoX, geoY)
                 })
-                checkStorePosition('state.position.center', geoX, geoY)
 
                 cy.get('[data-cy="zoom-in"]').click()
                 cy.get('[data-cy="zoom-in"]').click()
                 cy.getPinia().then((pinia) => {
-                    const positionStore4 = usePositionStore(pinia)
-                    expect(positionStore4.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP + 3)
+                    const positionStore = usePositionStore(pinia)
+                    expect(positionStore.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP + 3)
                 })
 
                 cy.get('[data-cy="zoom-out"]').click()
                 cy.get('[data-cy="zoom-out"]').click()
                 cy.get('[data-cy="zoom-out"]').click()
                 cy.getPinia().then((pinia) => {
-                    const positionStore5 = usePositionStore(pinia)
-                    expect(positionStore5.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP)
+                    const positionStore = usePositionStore(pinia)
+                    expect(positionStore.zoom).to.eq(constants.SWISS_ZOOM_LEVEL_1_25000_MAP)
+                    checkPosition(positionStore.center, geoX, geoY)
                 })
-                checkStorePosition('state.position.center', geoX, geoY)
             })
             it('access from outside Switzerland shows an error message', () => {
                 // undefined island

packages/viewer/tests/cypress/tests-e2e/legacyParamImport.cy.ts

@@ -1,8 +1,9 @@
 /// <reference types="cypress" />
 
-import type { ExternalWMSLayer, ExternalWMTSLayer } from '@swissgeo/layers'
+import type { ExternalWMSLayer, ExternalWMTSLayer, KMLLayer } from '@swissgeo/layers'
 
 import { registerProj4, WGS84 } from '@swissgeo/coordinates'
+import { LayerType } from '@swissgeo/layers'
 import { KMLStyle } from '@swissgeo/layers'
 import proj4 from 'proj4'
 import { assertDefined } from 'support/utils'
@@ -211,10 +212,11 @@ describe('Test on legacy param import', () => {
                 expect(activeLayers2).to.be.an('Array').length(1)
                 const [kmlLayer] = activeLayers2
                 assertDefined(kmlLayer)
+                expect(kmlLayer.type).to.eq(LayerType.KML)
                 expect(kmlLayer.baseUrl).to.eq(`${kmlServiceBaseUrl}${kmlServiceFilePath}`)
                 expect(kmlLayer.opacity).to.eq(0.6)
                 expect(kmlLayer.isVisible).to.be.true
-                expect(kmlLayer.style).to.eq(KMLStyle.GEOADMIN)
+                expect((kmlLayer as KMLLayer).style).to.eq(KMLStyle.GEOADMIN)
             })
         })
         it('is able to import an external KML from a legacy adminId query param', () => {
@@ -232,10 +234,11 @@ describe('Test on legacy param import', () => {
                 expect(activeLayers3).to.be.an('Array').length(1)
                 const [kmlLayer2] = activeLayers3
                 assertDefined(kmlLayer2)
+                expect(kmlLayer2.type).to.eq(LayerType.KML)
                 expect(kmlLayer2.baseUrl).to.eq(`${kmlServiceBaseUrl}${kmlServiceFilePath}`)
                 expect(kmlLayer2.opacity).to.eq(1)
                 expect(kmlLayer2.isVisible).to.be.true
-                expect(kmlLayer2.adminId).to.equal(adminId)
+                expect((kmlLayer2 as KMLLayer).adminId).to.equal(adminId)
             })
         })
         it("don't keep KML adminId in URL after import", () => {
@@ -253,10 +256,11 @@ describe('Test on legacy param import', () => {
                 expect(activeLayers4).to.be.an('Array').length(1)
                 const [kmlLayer3] = activeLayers4
                 assertDefined(kmlLayer3)
+                expect(kmlLayer3.type).to.eq(LayerType.KML)
                 expect(kmlLayer3.baseUrl).to.eq(`${kmlServiceBaseUrl}${kmlServiceFilePath}`)
                 expect(kmlLayer3.opacity).to.eq(1)
                 expect(kmlLayer3.isVisible).to.be.true
-                expect(kmlLayer3.adminId).to.be.equal(adminId)
+                expect((kmlLayer3 as KMLLayer).adminId).to.be.equal(adminId)
             })
             cy.url().should('not.contain', adminId)
         })

packages/viewer/tests/cypress/tests-e2e/utils.ts

@@ -1,5 +1,7 @@
 /// <reference types="cypress" />
 
+import useUIStore from '@/store/modules/ui'
+
 export function moveTimeSlider(x: number) {
     cy.get('[data-cy="time-slider-bar-cursor-grab"]').trigger('mousedown', { button: 0 })
     cy.get('[data-cy="time-slider-bar-cursor-grab"]').trigger('mousemove', {
@@ -21,24 +23,17 @@ export function testErrorMessage(message: string) {
     cy.get(geolocationButtonSelector).trigger('mousemove', { clientX: 0, clientY: 0, force: true }) // Check error in store
 
     // Check error in store
-    cy.readStoreValue('state.ui.errors').then((errors) => {
-        expect(errors).to.be.an('Set')
+    cy.getPinia().then((pinia) => {
+        const uiStore = useUIStore(pinia)
+        expect(uiStore.errors).to.be.a('Set')
         // Make sure this is the only error (we don't want to test other errors)
-        expect(errors.size).to.eq(1)
+        expect(uiStore.errors.size).to.eq(1)
 
-        const error = errors.values().next().value
-        expect(error.msg).to.eq(message)
+        const error = uiStore.errors.values().next().value
+        expect(error).to.be.an('Object')
+        expect(error!.msg).to.eq(message)
     })
     // Check error in UI
     cy.get('[data-cy="error-window"]').should('be.visible')
     cy.get('[data-cy="error-window-close"]').should('be.visible').click() // close the error window
 }
-
-export function checkStorePosition(storeString: string, x: number, y: number) {
-    cy.readStoreValue(storeString).then((center) => {
-        expect(center).to.be.an('Array')
-        expect(center.length).to.eq(2)
-        expect(center[0]).to.approximately(x, 0.1)
-        expect(center[1]).to.approximately(y, 0.1)
-    })
-}