PB-1383: layer tests

- some more tests coverage corrections
- removal of some useless comments
- adding some comments to tell people why some changes have happened

PB-1383: adding proj4 registration to layers so openlayers supports layers with only swiss projections

- Issue with the drag and drop reordering test: when it was called alone, it would pass, when it would be called after the one reordering layers with the buttons, it would fail because a menu popup would show which was not planned. Rather than place a "force" which could pass even if the element is somehow obscured for a non legitimate reason, I switched the order of the tests
- Issue with the call of layer capabilities: We've changed the number of expected calls in the tests, as the capabilities are called once per layer, not once in total. If we need to rework the capabilities handling, we'll have to change this test once again.

Author: ltkum

packages/layers/src/index.ts

@@ -7,7 +7,13 @@ export * from '@/types/capabilities'
 export * from '@/types/timeConfig'
 
 export * from '@/validation'
+
 import { register } from 'ol/proj/proj4'
 
+/**
+ * We need this to register the Swiss projections within the openlayers library.
+ *
+ * If we don't, layers with only Swiss projections can't be rendered by openlayers.
+ */
 registerProj4(proj4)
 register(proj4)

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

@@ -329,7 +329,6 @@ describe('Test of layer handling', () => {
             })
             it('reads and adds an external WMTS correctly', () => {
                 cy.getExternalWmtsMockConfig().then((layerObjects) => {
-                    layerObjects.forEach((layerObject) => (layerObject.isVisible = true))
                     const [mockExternalWmts1, _, mockExternalWmts3] = layerObjects
 
                     cy.goToMapView({
@@ -351,14 +350,14 @@ describe('Test of layer handling', () => {
                         const layersStore6 = useLayersStore(pinia)
                         const visibleLayers2 = layersStore6.visibleLayers
                         expect(visibleLayers2).to.have.lengthOf(layerObjects.length)
-                        visibleLayers2.forEach((layer) => {
+                        visibleLayers2.forEach((layer: Layer) => {
                             expect(layer.isLoading).to.be.false
                             expect(layer.isExternal).to.be.true
                         })
                         layerObjects.forEach((layer, index) => {
                             expect(visibleLayers2[index]?.id).to.be.eq(layer.id)
                             expect(visibleLayers2[index]?.baseUrl).to.be.eq(layer.baseUrl)
-                            expect(visibleLayers2[index]?.name).to.be.eq(layer.id)
+                            expect(visibleLayers2[index]?.name).to.be.eq(layer.name)
                             expect(visibleLayers2[index]?.isVisible).to.eq(layer.isVisible)
                             expect(visibleLayers2[index]?.opacity).to.eq(layer.opacity)
                         })
@@ -454,10 +453,10 @@ describe('Test of layer handling', () => {
                             }
                         }),
                     ])
-                    cy.log(`Make sure that the external backend have not been called twice`)
+                    cy.log(`Make sure that the external backend have been called once per layer`)
                     cy.get(`@externalWMTS-GetCap-${mockExternalWmts1?.baseUrl}.all`).should(
                         'have.length',
-                        1
+                        2
                     )
                     cy.get(`@externalWMTS-GetCap-${mockExternalWmts3?.baseUrl}.all`).should(
                         'have.length',
@@ -1115,6 +1114,40 @@ describe('Test of layer handling', () => {
                         .should(`${upArrowEnable ? 'not.' : ''}be.disabled`)
                 })
             }
+            it('reorder layers when they are drag and dropped', () => {
+                const [bottomLayerId, middleLayerId, topLayerId] = visibleLayerIds
+                cy.get(`[data-cy^="menu-active-layer-${bottomLayerId}-"]`)
+                    .should('be.visible')
+                    .drag(`[data-cy^="menu-active-layer-${topLayerId}-"]`)
+                const checkLayerOrder = (
+                    expectedBottomLayerId: string,
+                    expectedMiddleLayerId: string,
+                    expectedTopLayerId: string
+                ) => {
+                    cy.location('hash').then((hash) => {
+                        const layersParam = new URLSearchParams(hash).get('layers') ?? ''
+                        const layers = layersParam.split(';')
+                        cy.wrap(layers).should('have.lengthOf', 3)
+                        const [firstUrlLayer, secondUrlLayer, thirdUrlLayer] = layers
+                        cy.wrap(firstUrlLayer).should('contain', expectedBottomLayerId)
+                        cy.wrap(secondUrlLayer).should('contain', expectedMiddleLayerId)
+                        cy.wrap(thirdUrlLayer).should('contain', expectedTopLayerId)
+                    })
+                }
+                // the bottom layer should now be on top, so the order is now
+                // - bottomLayer
+                // - topLayer
+                // - middleLayer
+                checkLayerOrder(`${middleLayerId}`, `${topLayerId}`, `${bottomLayerId}`)
+                cy.get(`[data-cy^="menu-active-layer-${middleLayerId}-"]`)
+                    .should('be.visible')
+                    .drag(`[data-cy^="menu-active-layer-${topLayerId}-"]`)
+                // new state is
+                // - bottomLayer
+                // - middleLayer
+                // - topLayer
+                checkLayerOrder(`${topLayerId}`, `${middleLayerId}`, `${bottomLayerId}`)
+            })
             it('Reorder layers using the "move" button', () => {
                 const [bottomLayerId, middleLayerId, topLayerId] = visibleLayerIds
                 cy.openLayerSettings(`${bottomLayerId}`)
@@ -1248,40 +1281,6 @@ describe('Test of layer handling', () => {
                     { id: `${topLayerId}`, opacity: 0.7 },
                 ])
             })
-            it('reorder layers when they are drag and dropped', () => {
-                const [bottomLayerId, middleLayerId, topLayerId] = visibleLayerIds
-                cy.get(`[data-cy^="menu-active-layer-${bottomLayerId}-"]`)
-                    .should('be.visible')
-                    .drag(`[data-cy^="menu-active-layer-${topLayerId}-"]`)
-                const checkLayerOrder = (
-                    expectedBottomLayerId: string,
-                    expectedMiddleLayerId: string,
-                    expectedTopLayerId: string
-                ) => {
-                    cy.location('hash').then((hash) => {
-                        const layersParam = new URLSearchParams(hash).get('layers') ?? ''
-                        const layers = layersParam.split(';')
-                        cy.wrap(layers).should('have.lengthOf', 3)
-                        const [firstUrlLayer, secondUrlLayer, thirdUrlLayer] = layers
-                        cy.wrap(firstUrlLayer).should('contain', expectedBottomLayerId)
-                        cy.wrap(secondUrlLayer).should('contain', expectedMiddleLayerId)
-                        cy.wrap(thirdUrlLayer).should('contain', expectedTopLayerId)
-                    })
-                }
-                // the bottom layer should now be on top, so the order is now
-                // - bottomLayer
-                // - topLayer
-                // - middleLayer
-                checkLayerOrder(`${middleLayerId}`, `${topLayerId}`, `${bottomLayerId}`)
-                cy.get(`[data-cy^="menu-active-layer-${middleLayerId}-"]`)
-                    .should('be.visible')
-                    .drag(`[data-cy^="menu-active-layer-${topLayerId}-"]`)
-                // new state is
-                // - bottomLayer
-                // - middleLayer
-                // - topLayer
-                checkLayerOrder(`${topLayerId}`, `${middleLayerId}`, `${bottomLayerId}`)
-            })
         })
         context('External layers', () => {
             it('does not show a red icon for internal layers', () => {