Merge pull request #1159 from geoadmin/fix-PB-1254-allow-embed-layer-…

…sharing PB-1254: fix embed preview in chrome
geoadmin · Dec 6, 2024 · 6b55ef1 · 6b55ef1
2 parents 7356671 + 772af64
commit 6b55ef1
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 40 deletions.
diff --git a/src/router/storeSync/storeSync.config.js b/src/router/storeSync/storeSync.config.js
@@ -85,6 +85,28 @@ const storeSyncConfig = [
         valueType: Boolean,
         defaultValue: false,
     }),
+    new SimpleUrlParamConfig({
+        urlParamName: 'topic',
+        mutationsToWatch: ['changeTopic'],
+        dispatchName: 'changeTopic',
+        dispatchValueName: 'topicId',
+        extractValueFromStore: (store) => store.state.topics.current,
+        keepInUrlWhenDefault: true,
+        valueType: String,
+        defaultValue: null,
+        validateUrlInput: (store, query) =>
+            getStandardValidationResponse(
+                query,
+                store.state.topics.config.map((topic) => topic.id).includes(query),
+                'topic'
+            ),
+    }),
+    new CrossHairParamConfig(),
+    new CompareSliderParamConfig(),
+    new LayerParamConfig(),
+    // For now, bgLayer must be after layers, as it could cause an issue where it would reload the application
+    // without the layers when previewing the embed view to be shared, causing those layers to disappear from the
+    // link sharing.
     new SimpleUrlParamConfig({
         urlParamName: 'bgLayer',
         mutationsToWatch: ['setBackground'],
@@ -111,25 +133,6 @@ const storeSyncConfig = [
                 'bgLayer'
             ),
     }),
-    new SimpleUrlParamConfig({
-        urlParamName: 'topic',
-        mutationsToWatch: ['changeTopic'],
-        dispatchName: 'changeTopic',
-        dispatchValueName: 'topicId',
-        extractValueFromStore: (store) => store.state.topics.current,
-        keepInUrlWhenDefault: true,
-        valueType: String,
-        defaultValue: null,
-        validateUrlInput: (store, query) =>
-            getStandardValidationResponse(
-                query,
-                store.state.topics.config.map((topic) => topic.id).includes(query),
-                'topic'
-            ),
-    }),
-    new CrossHairParamConfig(),
-    new CompareSliderParamConfig(),
-    new LayerParamConfig(),
     new SimpleUrlParamConfig({
         urlParamName: 'featureInfo',
         mutationsToWatch: ['setFeatureInfoPosition'],

diff --git a/tests/cypress/tests-e2e/embed.cy.js b/tests/cypress/tests-e2e/embed.cy.js
@@ -1,6 +1,13 @@
 /// <reference types="cypress" />
 
 describe('Testing the embed view', () => {
+    function checkUrlParams(urlToCheck, validationUrl) {
+        const href = new URLSearchParams(urlToCheck.replace('#map', ''))
+        const validation = new URLSearchParams(validationUrl.replace('#map', ''))
+        for (const key of validation.keys()) {
+            expect(validation.get(key)).to.equal(href.get(key))
+        }
+    }
     it('Open in embed mode and can jump to the non embed mode', () => {
         cy.goToEmbedView()
 
@@ -29,13 +36,14 @@ describe('Testing the embed view', () => {
         cy.log(`Check the link url`)
         cy.get('[data-cy="open-full-app-link"]').should('be.visible').should('contain', 'View on ')
         cy.get('[data-cy="open-full-app-link-anchor"]', { timeout: 20000 })
-            .should(
-                'have.attr',
-                'href',
-                `#/map?lang=en&center=2660000,1190000&z=1&bgLayer=test.background.layer2&topic=ech&layers=`
-            )
             .should('have.attr', 'target', '_blank')
-
+            .invoke('attr', 'href')
+            .should((href) =>
+                checkUrlParams(
+                    href,
+                    `#/map?lang=en&center=2660000,1190000&z=1&bgLayer=test.background.layer2&topic=ech&layers=`
+                )
+            )
         cy.log('Test mouse zoom scrolling')
         cy.location('hash').should('contain', 'z=1')
         cy.get('[data-cy="scaleline"]').should('contain', '50 km')
@@ -84,12 +92,14 @@ describe('Testing the embed view', () => {
         cy.log(`Check the link url`)
         cy.get('[data-cy="open-full-app-link"]').should('be.visible').should('contain', 'View on ')
         cy.get('[data-cy="open-full-app-link-anchor"]')
-            .should(
-                'have.attr',
-                'href',
-                `#/map?layers=test-1.wms.layer;test.wmts.layer,,0.5;test-2.wms.layer,f;test.timeenabled.wmts.layer&lang=en&center=2660000,1190000&z=1.667&bgLayer=test.background.layer2&topic=ech`
-            )
             .should('have.attr', 'target', '_blank')
+            .invoke('attr', 'href')
+            .should((href) =>
+                checkUrlParams(
+                    href,
+                    `#/map?layers=test-1.wms.layer;test.wmts.layer,,0.5;test-2.wms.layer,f;test.timeenabled.wmts.layer&lang=en&center=2660000,1190000&z=1.667&bgLayer=test.background.layer2&topic=ech`
+                )
+            )
     })
     it('Open in legacy embed mode and can jump to the non embed mode', () => {
         cy.log(`Open in legacy mode without parameters`)
@@ -120,12 +130,14 @@ describe('Testing the embed view', () => {
         cy.log(`Check the link url`)
         cy.get('[data-cy="open-full-app-link"]').should('be.visible').should('contain', 'View on ')
         cy.get('[data-cy="open-full-app-link-anchor"]')
-            .should(
-                'have.attr',
-                'href',
-                `#/map?lang=en&center=2660000,1190000&z=1&bgLayer=test.background.layer2&topic=ech&layers=`
-            )
             .should('have.attr', 'target', '_blank')
+            .invoke('attr', 'href')
+            .should((href) =>
+                checkUrlParams(
+                    href,
+                    `#/map?lang=en&center=2660000,1190000&z=1&bgLayer=test.background.layer2&topic=ech&layers=`
+                )
+            )
 
         cy.log('Test mouse zoom scrolling')
         cy.location('hash').should('contain', 'z=1')
@@ -181,11 +193,13 @@ describe('Testing the embed view', () => {
         cy.log(`Check the link url`)
         cy.get('[data-cy="open-full-app-link"]').should('be.visible').should('contain', 'View on ')
         cy.get('[data-cy="open-full-app-link-anchor"]')
-            .should(
-                'have.attr',
-                'href',
-                `#/map?lang=en&center=2660000,1190000&z=1&bgLayer=test.background.layer2&topic=ech&layers=test-1.wms.layer;test.wmts.layer,,0.5;test-2.wms.layer,f,1;test.timeenabled.wmts.layer@year=2016,,1`
-            )
             .should('have.attr', 'target', '_blank')
+            .invoke('attr', 'href')
+            .should((href) =>
+                checkUrlParams(
+                    href,
+                    `#/map?lang=en&center=2660000,1190000&z=1&bgLayer=test.background.layer2&topic=ech&layers=test-1.wms.layer;test.wmts.layer,,0.5;test-2.wms.layer,f,1;test.timeenabled.wmts.layer@year=2016,,1`
+                )
+            )
     })
 })