BGDIINF_SB-3170: Fixed group of external layers attributions

src/api/layers/ExternalGroupOfLayers.class.js

@@ -17,17 +17,18 @@ export default class ExternalGroupOfLayers extends ExternalLayer {
      * @param {ExternalLayer[]} layers Description of the layers being part of this group (they will
      *   all be displayed at the same time, in contrast to an aggregate layer)
      * @param {String} abstract Abstract of this layer to be shown to the user
+     * @param {LayerAttribution[]} attributions Description of the data owner(s) for this layer
      * @param {[[number, number], [number, number]] | undefined} extent Layer extent
      */
-    constructor(name, hostname, layers, abstract = '', extent = undefined) {
+    constructor(name, hostname, layers, attributions = [], abstract = '', extent = undefined) {
         super(
             name,
             LayerTypes.GROUP,
             `${hostname}:${name.replaceAll(' ', '_')}`,
             null,
             1,
             true,
-            [],
+            attributions,
             abstract,
             extent
         )

src/modules/infobox/utils/external-provider-parsers.js

@@ -55,20 +55,27 @@ export function getCapWMSLayers(getCap, layer, projection, visible = true, opaci
             }
         }
     }
-
+    const attribution = layer.Attribution || getCap.Capability.Layer.Attribution || getCap.Service
+    const attributions = [new LayerAttribution(attribution.Title, attribution.OnlineResource)]
     // Go through the child to get valid layers
     if (layer.Layer?.length) {
         const layers = layer.Layer.map((l) => getCapWMSLayers(getCap, l, projection))
-        return new ExternalGroupOfLayers(layer.Title, wmsUrl, layers, layer.Abstract, layerExtent)
+        return new ExternalGroupOfLayers(
+            layer.Title,
+            wmsUrl,
+            layers,
+            attributions,
+            layer.Abstract,
+            layerExtent
+        )
     }
-    const attribution = layer.Attribution || getCap.Capability.Layer.Attribution || getCap.Service
     return new ExternalWMSLayer(
         layer.Title,
         opacity,
         visible,
         wmsUrl,
         name,
-        [new LayerAttribution(attribution.Title, attribution.OnlineResource)],
+        attributions,
         getCap.version,
         'png',
         layer.Abstract,

src/utils/ModalWithBackdrop.vue

@@ -41,7 +41,11 @@
                             <FontAwesomeIcon icon="times" />
                         </button>
                     </div>
-                    <div ref="modalContent" class="card-body pt-3 ps-4 pe-4">
+                    <div
+                        ref="modalContent"
+                        class="card-body pt-3 ps-4 pe-4"
+                        data-cy="modal-content"
+                    >
                         <slot />
                         <div v-if="showConfirmationButtons" class="mt-1 d-flex justify-content-end">
                             <button

tests/e2e-cypress/integration/importTool.cy.js

@@ -1,14 +1,16 @@
 /// <reference types="cypress" />
 
+import { isMobile } from '../support/utils'
+
 describe('The Import Tool', () => {
     beforeEach(() => {
         cy.goToMapView({}, true)
-        cy.get('[data-cy="menu-button"]').click()
+        cy.clickOnMenuButtonIfMobile()
     })
     it('Open and close the infobox import tool', () => {
         cy.get('[data-cy="menu-tray-tool-section"]').click()
         cy.get('[data-cy="menu-import-tool"]').click()
-        // the menu should be automatically close on opening import tool box
+        // the menu should be automatically closed on opening import tool box
         cy.get('[data-cy="menu-tray"]').should('not.be.visible')
         cy.get('[data-cy="import-tool-content"]').should('be.visible')
         cy.get('[data-cy="infobox-close"]').click()
@@ -54,5 +56,19 @@ describe('The Import Tool', () => {
             expect(externalLayer.externalLayerId).to.eq('ch.vbs.armeelogistikcenter')
             expect(externalLayer.name).to.eq('Centres logistiques de l`armée CLA')
         })
+
+        // Check the map attribution
+        cy.get('[data-cy="layer-copyright-Das Geoportal des Bundes"]')
+            .should('be.visible')
+            .contains('Das Geoportal des Bundes')
+        // Check the layer attribution
+        if (isMobile()) {
+            cy.get('[data-cy="menu-button"]').click()
+            cy.get('[data-cy="menu-active-layers"]').should('be.visible').click()
+        }
+        cy.get('[data-cy="menu-external-disclaimer-icon"]').should('be.visible').click()
+        cy.get('[data-cy="modal-content"]').contains(
+            'Warning: Third party data and/or style shown (Das Geoportal des Bundes)'
+        )
     })
 })

tests/e2e-cypress/support/commands.js

@@ -1,9 +1,9 @@
-import { BREAKPOINT_TABLET } from '@/config'
 import { FAKE_URL_CALLED_AFTER_ROUTE_CHANGE } from '@/router/storeSync/storeSync.routerPlugin'
 import { randomIntBetween } from '@/utils/numberUtils'
 import 'cypress-real-events'
 import 'cypress-wait-until'
 import { MapBrowserEvent } from 'ol'
+import { isMobile } from './utils'
 
 // ***********************************************
 // For more comprehensive examples of custom
@@ -173,30 +173,35 @@ 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)
-        cy.waitUntilState((state) => {
-            const active = state.layers.activeLayers.length
-            // The required layers can be set via topic or manually.
-            const targetTopic = state.topics.current?.layersToActivate.length
-            const targetLayers =
-                'layers' in queryParams
-                    ? // Legacy layers come with an additional param. At least in our tests.
-                      'layers_opacity' in queryParams || 'layers_visibility' in queryParams
-                        ? queryParams.layers.split(',').length
-                        : queryParams.layers.split(';').length
-                    : 0
-            // There are situations where neither value is falsy.
-            // But the higher value seems to always be the right one.
-            let target = Math.max(targetTopic, targetLayers)
-            // If a layer has been set via adminId we just increment by one.
-            target += Boolean(queryParams.adminId)
-
-            return active === target
-        })
+        cy.waitUntilState((state) => state.app.isReady, { timeout: 10000 })
+        cy.waitUntilState(
+            (state) => {
+                const active = state.layers.activeLayers.length
+                // The required layers can be set via topic or manually.
+                const targetTopic = state.topics.current?.layersToActivate.length
+                const targetLayers =
+                    'layers' in queryParams
+                        ? // Legacy layers come with an additional param. At least in our tests.
+                          'layers_opacity' in queryParams || 'layers_visibility' in queryParams
+                            ? queryParams.layers.split(',').length
+                            : queryParams.layers.split(';').length
+                        : 0
+                // There are situations where neither value is falsy.
+                // But the higher value seems to always be the right one.
+                let target = Math.max(targetTopic, targetLayers)
+                // If a layer has been set via adminId we just increment by one.
+                target += Boolean(queryParams.adminId)
+                return active === target
+            },
+            {
+                customMessage: 'all layers have been loaded',
+                errorMsg: 'Timeout waiting for all layers to be loaded',
+            }
+        )
         if (queryParams.hasOwnProperty('3d') && queryParams['3d'] === true) {
             cy.get('[data-cy="cesium-map"]').should('be.visible')
         } else {
-            cy.get('[data-cy="ol-map"]').should('be.visible')
+            cy.get('[data-cy="ol-map"]', { timeout: 10000 }).should('be.visible')
         }
     }
 )
@@ -262,8 +267,7 @@ Cypress.Commands.add(
  */
 Cypress.Commands.add('clickOnLanguage', (lang) => {
     let menuSection = null
-    const width = Cypress.config('viewportWidth')
-    if (width < BREAKPOINT_TABLET) {
+    if (isMobile()) {
         // mobile/tablet : clicking on the menu button first
         menuSection = cy.get('[data-cy="menu-settings-section"]')
         menuSection.click()
@@ -279,13 +283,16 @@ Cypress.Commands.add('clickOnLanguage', (lang) => {
 // cy.readStoreValue doesn't work as `.its` will prevent retries.
 Cypress.Commands.add('waitUntilState', (predicate, options = {}) => {
     cy.waitUntil(
-        () => cy.window().then((win) => predicate(win.store.state)),
-        {
-            errorMsg:
-                '"waitUntilState" failed, as the following predicate stayed false: ' +
-                predicate.toString(),
-        },
-        options
+        () => cy.window({ log: false }).then((win) => predicate(win.store.state)),
+        Object.assign(
+            {
+                errorMsg:
+                    '"waitUntilState" failed, as the following predicate stayed false: ' +
+                    predicate.toString(),
+                customMessage: `predicate ${predicate.toString()} is true`,
+            },
+            options
+        )
     )
 })
 
@@ -442,7 +449,7 @@ Cypress.Commands.add('waitUntilCesiumTilesLoaded', () => {
 })
 
 Cypress.Commands.add('clickOnMenuButtonIfMobile', () => {
-    if (Cypress.config('viewportWidth') < BREAKPOINT_TABLET) {
+    if (isMobile()) {
         // mobile/tablet : clicking on the menu button
         cy.get('[data-cy="menu-button"]').click()
     }

tests/e2e-cypress/support/utils.js

@@ -0,0 +1,8 @@
+import { BREAKPOINT_TABLET } from '@/config'
+
+export function isMobile() {
+    if (Cypress.config('viewportWidth') < BREAKPOINT_TABLET) {
+        return true
+    }
+    return false
+}