BGDIINF_SB-3170: Added E2E tests for external layers attributions

Author: ltshb

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,9 +1,11 @@
 /// <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()
@@ -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('Da s 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
@@ -267,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()
@@ -450,12 +449,13 @@ 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()
     }
 })
 
+
 /**
  * Returns a timestamp from the layer's config that is different from the default behaviour
  *

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
+}