Develop

.gitignore

@@ -3,3 +3,6 @@ node_modules/
 
 # IDEA Project Files
 .idea/
+
+# temp files
+tmp/

README.md

@@ -75,6 +75,9 @@ parameters:
     mapbender.automatic_locale: false  
 ```
 
+Also, make sure the mapbender installation is in prod environment (the dev toolbar hides some elements in the frontend
+resulting in failing tests), and disable all autoOpen elements in the mapbender_user yaml application, otherwise the tests will fail because the elements are not visible/accessible.
+
 ### Installation Cypress
 
 Node.js and npm:  

cypress.config.js

@@ -12,11 +12,11 @@ module.exports = defineConfig({
     // },
     env : {
       application : {
-        title : 'Mapbender Demo Cypress',
+        title : 'Mapbender Demo Cypress 5',
         slug : 'Mapbender_Demo_CYPRESS',
         user: 'root',
         password: 'root',
-        mainUrl: 'http://localhost/mapbender4/',
+        mainUrl: 'http://localhost/mapbender5/',
         layer : {
             1 : 'Themen'
         },

cypress/e2e/mapbender/01-backend/02-sources/06-updateDataSource.cy.js

@@ -9,13 +9,21 @@ describe('Update Data Source', () => {
         cy.login({_username: user, _password: password});
     })
 
-    const dataSource = 'FOSS4G Conference Locations';
+    // Instead of relying on a hard-coded data source title (which may change),
+    // click the first available update link. This avoids failures when the
+    // datasource name changes in the test environment.
+    //const dataSource = 'FOSS4G Conference Locations';
+    //const dataSource = 'FOSS4G Conferences';
     const waitLong= 2000;
     it('test update data source', () => {
         cy.CyLog('Test update Data Source', 'Start');
         const url = Cypress.env('application')['mainUrl'];
         cy.visit(url + 'manager/repository');
-        cy.get('a[data-test="mb-update-source-'+dataSource+'"]').click();
+        // Try to click the first update link for any datasource. Use a starts-with
+        // attribute selector to match data-test values like
+        // data-test="mb-update-source-<title>". If no element is found the test
+        // will fail with a clearer message.
+        cy.get('a[data-test^="mb-update-source-"]').first().click();
         cy.get('input[type="submit"]').click();
         cy.wait(waitLong);
         cy.get('a#tabApplications').click();

cypress/e2e/mapbender/01-backend/02-sources/08-deleteDataSource.cy.js

@@ -18,30 +18,14 @@ describe('Delete Data Source', () => {
         const url = Cypress.env('application')['mainUrl'];
         cy.visit(url + 'manager/repository');
 
-        // WMS Service delete
-        cy.get('a[data-test="mb-delete-source-' + dataSourceTitleWMS + '"]').then($elem =>{
-            const wmsLength = $elem.length;
-            for (let i = 0; i < $elem.length; i++){
-                cy.deleteMapbenderSource(dataSourceTitleWMS);
-            }
-        });
+        // WMS Service delete (alle Vorkommen rekursiv)
+        cy.deleteAllMapbenderSources(dataSourceTitleWMS);
 
         // WMTS Service delete
-        cy.get('a[data-test="mb-delete-source-' + dataSourceTitleWMTS + '"]').then($elem =>{
-            const wmsLength = $elem.length;
-            for (let i = 0; i < $elem.length; i++){
-                cy.deleteMapbenderSource(dataSourceTitleWMTS);
-            }
-        });
+        cy.deleteAllMapbenderSources(dataSourceTitleWMTS);
 
         // Vector tile Service delete
-        cy.get('a[data-test="mb-delete-source-' + dataSourceTitleVT + '"]').then($elem =>{
-            const wmsLength = $elem.length;
-            for (let i = 0; i < $elem.length; i++){
-                cy.deleteMapbenderSource(dataSourceTitleVT);
-            }
-        });
-
+        cy.deleteAllMapbenderSources(dataSourceTitleVT);
 
         cy.wait(waitLong);
         cy.CyLog('Test delete Data Source', 'End');

cypress/e2e/mapbender/01-backend/03-applications/04-addWmsService.cy.js

@@ -32,7 +32,8 @@ describe('add wms service to layerset', () => {
             cy.get('a.checkContainer').contains(item).first().click();
             cy.get('input[type="submit"]').first().click();
             cy.wait(waitShort);
-            cy.get('a.btn-light').contains('Back').click();
+            //cy.get('a.btn-light').contains('Back').click();
+            cy.get('[data-test="mb-back"]').first().click();
             cy.wait(waitShort);
         })
         cy.get('[data-test="mb-add-instance-main"]').scrollIntoView();

cypress/e2e/mapbender/02-frontend/02-toolbar/00-testLegend.cy.js

@@ -13,22 +13,14 @@ describe('Test Legend', () => {
 
     const myUrl = mainUrl + 'application/' + myAppSlug;
     // create selector for layertree (layers must be activated for legend)
-    const mbSelector = 'div.accordion-cell div.mb-element-layertree';
+    const mbSelector = 'div.mb-element-layertree';
     it('test map legend', () => {
         cy.CyLog("Test Legend", "Start");
         cy.showBanner("Legend test!")
         cy.copyApplication({ _title: myAppTitle, _slug: myAppSlug } );
         cy.visit(myUrl);
 
-        // activate Layertree.
-        cy.get('div.container-accordion').each(($container, index) =>{
-            const $mbElement = $container.find(mbSelector);
-            if($mbElement.length > 0 ){
-                const cssClass = $mbElement.attr('class');
-                cy.CyLog('Test Layertree', `sidepane class to activate: ${cssClass}`)
-                cy.get(`div#accordion${index + 1}`).click();
-            }
-        })
+        cy.selectSidePaneElement( mbSelector );
 
         /**
          * Read and process all main layer nodes
@@ -47,7 +39,8 @@ describe('Test Legend', () => {
         // Legende anschalten.
         cy.get('span[data-test="mb-iconLegend"]').click();
         cy.wait(2000);
-        cy.get('div.legend-dialog').find('button[data-test="mb-legend-btn-close"]').click();
+        //cy.get('div.legend-dialog').find('button[data-test="mb-legend-btn-close"]').click();
+        cy.get('div.legend-dialog').find('i.fa-xmark').click();
 
         cy.deleteApplication({ _slug: myAppSlug });
         cy.CyLog("Test Legend", "End");

cypress/e2e/mapbender/02-frontend/02-toolbar/02-testPOI.cy.js

@@ -38,7 +38,7 @@ describe('Test POI', () => {
             .click();
         cy.wait(waitLong);
         cy.get('div.mb-poi-popup')
-            .find('button.popupClose')
+            .find('.popupClose')
             .click();
         cy.deleteApplication({ _slug: myAppSlug });
         cy.CyLog("Test POI", "End");

cypress/e2e/mapbender/02-frontend/02-toolbar/03-testPrint.cy.js

@@ -13,6 +13,7 @@ describe('Test print', () => {
 
     const myUrl = mainUrl + 'application/' + myAppSlug;
     it('test print', () => {
+        const selectorPrefix = '.mb-element-printclient:not(.mb-element-batchprintclient) ';
         cy.CyLog("Test Print", "Start");
         cy.copyApplication({ _title: myAppTitle, _slug: myAppSlug } );
         // Chance default ViewPort. Because the print button is not visible in smaller sizes
@@ -23,7 +24,7 @@ describe('Test print', () => {
         cy.get('span[data-test="mb-iconPrint"]').click();
 
         // Test the template choice
-        cy.get('label.form-label[for="template"]')
+        cy.get(selectorPrefix + 'label.form-label[for="template"]')
             .siblings('div.dropdown')
             .then(($element) =>{
 
@@ -47,7 +48,7 @@ describe('Test print', () => {
         });
 
         // Test the quality choice
-        cy.get('label.form-label[for="quality"]')
+        cy.get(selectorPrefix + 'label.form-label[for="quality"]')
             .siblings('div.dropdown')
             .then(($element) => {
 
@@ -63,7 +64,7 @@ describe('Test print', () => {
         });
 
         // Test the scale choice
-        cy.get('label.form-label[for="scale_select"]')
+        cy.get(selectorPrefix + 'label.form-label[for="scale_select"]')
             .siblings('div.dropdown')
             .then(($element) => {
                 cy.CyLog("PRINT: ", "test the scales: Element length:" + $element.length);
@@ -91,7 +92,7 @@ describe('Test print', () => {
         });
 
         // Test the scale rotation
-        cy.get('label.form-label[for="rotation"]')
+        cy.get(selectorPrefix + 'label.form-label[for="rotation"]')
             .siblings('input#rotation')
             .then(($element) => {
                 cy.CyLog("PRINT: ", "test the rotation");
@@ -100,15 +101,15 @@ describe('Test print', () => {
         });
 
         // Test the scale Title
-        cy.get('label.form-label[for="custom_bottom_extra_title"]')
+        cy.get(selectorPrefix + 'label.form-label[for="custom_bottom_extra_title"]')
             .siblings('input#custom_bottom_extra_title')
             .then(($element) => {
                 cy.CyLog("PRINT: ", "test the rotation");
                 cy.wrap($element).clear().type('Print my Cypress Test');
                 cy.wait(200);
         });
 
-        cy.get('input#printLegend').click();
+        cy.get(selectorPrefix + 'input#printLegend').click();
         cy.get('div.customPrintDialog')
             .find('div.text-end')
             .find('input[type="submit"]')

cypress/e2e/mapbender/02-frontend/02-toolbar/04-testImageExport.cy.js

@@ -24,7 +24,8 @@ describe('Test Bildexport', () => {
         cy.get('input[data-test="imageexport-btn-submit"]').click()
 
         //cy.wait(10000)
-        cy.get('button.popupClose').last().click()
+        cy.get('div.mapbender-popup').find('i.fa-xmark').click();
+        //cy.get('button.popupClose').last().click()
 
         cy.deleteApplication({ _slug: myAppSlug });
         cy.CyLog("Test Image Export", "End");

cypress/e2e/mapbender/02-frontend/04-sidepane/00-testLayer.cy.js

@@ -13,7 +13,7 @@ describe('Test layer', () => {
 
     const myUrl = mainUrl + 'application/' + myAppSlug;
     // create selector for layertree
-    const mbSelector = 'div.accordion-cell div.mb-element-layertree';
+    const mbSelector = 'div.mb-element-layertree';
     it('test layertree', () => {
         cy.CyLog("Test layertree", "Start");
         cy.copyApplication({ _title: myAppTitle, _slug: myAppSlug } );

cypress/e2e/mapbender/02-frontend/04-sidepane/01-testRuler.cy.js

@@ -13,7 +13,7 @@ describe('Test Ruler', () => {
 
     const myUrl = mainUrl + 'application/' + myAppSlug;
     // create selector for ruler
-    const mbSelector = 'div.accordion-cell div.mb-element-ruler';
+    const mbSelector = 'div.mb-element-ruler';
     it('test ruler', () => {
         cy.CyLog("Test Ruler", "Start");
         cy.copyApplication({ _title: myAppTitle, _slug: myAppSlug } );

cypress/e2e/mapbender/02-frontend/04-sidepane/01-testSketches.cy.js

@@ -13,7 +13,7 @@ describe('Test Ruler', () => {
 
     const myUrl = mainUrl + 'application/' + myAppSlug;
     // create selector for ruler
-    const mbSelector = 'div.accordion-cell div.mb-element-sketch';
+    const mbSelector = 'div.mb-element-sketch';
     const waitLong = 1000;
     const waitShort = 200;
     const btnBlue = 'button[data-color="#009ee0"]';
@@ -29,16 +29,7 @@ describe('Test Ruler', () => {
 
         // activate the sketches
         cy.selectSidePaneElement( mbSelector );
-        /*
-        cy.get('div.container-accordion').each(($container, index) =>{
-            const $mbElement = $container.find(mbSelector);
-            if($mbElement.length > 0 ){
-                const cssClass = $mbElement.attr('class');
-                cy.CyLog('>>>>>>>>', `Container ${index + 1} hat Mapbender-Klasse: ${cssClass}`)
-                cy.get(`div#accordion${index + 1}`).click();
-            }
-        })
-*/
+
         // test sketch point
         cy.get('button[data-tool-name="point"]').click();
 

cypress/support/backend.js

@@ -1,10 +1,9 @@
-
 // duplicate Mapbender Demo App
 // cy.copyApplication({ _title: 'Beispiel', _slug:'beispiel' })
 Cypress.Commands.add('copyApplication', (new_application) => {
     cy.CyLog('call function copyApplication', 'start');
-    const url = Cypress.env('application')['mainUrl'] ;
-    cy.visit(url + 'manager/application/mapbender_user/copydirectly' );
+    const url = Cypress.env('application')['mainUrl'];
+    cy.visit(url + 'manager/application/mapbender_user/copydirectly');
     cy.get('#application_title').clear()
         .type(new_application._title);
     cy.get('#application_slug').clear()
@@ -26,7 +25,7 @@ Cypress.Commands.add('deleteApplication', (app) => {
 
 // add User to Mapbender
 // cy.addMapbenderUser({ _username: 'Norbert Nordpol', _email: 'Norbert.Nordpol@nn.org' })
-Cypress.Commands.add( 'addMapbenderUser', (newUser)=> {
+Cypress.Commands.add('addMapbenderUser', (newUser) => {
     cy.CyLog('Call function addMapbenderUser', 'Start');
     const url = Cypress.env('application')['mainUrl'];
     cy.visit(url + 'manager/security');
@@ -42,10 +41,10 @@ Cypress.Commands.add( 'addMapbenderUser', (newUser)=> {
     cy.get('input[data-test="mb-submit"]').click();
     cy.get('body').then($body => {
 
-        if($body.find('div.invalid-feedback').length){
+        if ($body.find('div.invalid-feedback').length) {
             cy.mbLog("User could not saved!");
             throw new Error("Add user failed!");
-        }else{
+        } else {
             cy.mbLog("User added");
         }
     });
@@ -65,23 +64,23 @@ Cypress.Commands.add('deleteMapbenderUser', (userName) => {
 
 // add Group to Mapbender
 // cy.addMapbenderGroup({ _groupname: 'cypress'})
-Cypress.Commands.add( 'addMapbenderGroup', (newGroup, description)=> {
+Cypress.Commands.add('addMapbenderGroup', (newGroup, description) => {
     cy.CyLog('Call function addMapbenderGroup', 'Start');
     const url = Cypress.env('application')['mainUrl'];
     cy.visit(url + 'manager/security');
 
     cy.get('a#tabGroups').click();
     cy.get('[data-test="mb-security-group-add"]').click();
     cy.get('[id="group_title"]')
-         .type(newGroup);
+        .type(newGroup);
     cy.get('[id="group_description"]')
-         .type(description);
+        .type(description);
     cy.get('input[data-test="mb-submit"]').click();
     cy.get('body').then($body => {
-        if($body.find('div.invalid-feedback').length){
+        if ($body.find('div.invalid-feedback').length) {
             cy.mbLog("Group could not saved!");
             throw new Error("Add group failed!");
-        }else{
+        } else {
             cy.mbLog("Group added");
         }
     });
@@ -118,12 +117,35 @@ Cypress.Commands.add('addMapbenderSource', (sourceServiceURI, sourceLink) => {
 // cy.deleteMapbenderSource(sourceTitle);
 Cypress.Commands.add('deleteMapbenderSource', (sourceTitle) => {
     cy.CyLog('call function deleteMapbenderSource', 'start');
-    const url = Cypress.env('application')['mainUrl'];
-    cy.visit(url + 'manager/repository');
+    const mainUrl = Cypress.env('application')['mainUrl'];
+    cy.visit(mainUrl + 'manager/repository');
+
+    const selector = 'a[data-test="mb-delete-source-' + sourceTitle + '"]';
+
+    cy.get(selector).first().click();
+    cy.wait(2000);
+    cy.get('.modal [data-test="mb-submit"]').click();
 
-    cy.get('a[data-test="mb-delete-source-' + sourceTitle + '"]').then($elem => {
-        cy.wrap($elem).first().click();
-        cy.get('button[data-test="mb-submit"]').click();
-    });
     cy.CyLog('call function deleteMapbenderSource', 'stopp');
-});
+});
+
+// Delete ALL Data Sources matching the given title (recursive)
+// cy.deleteAllMapbenderSources(sourceTitle);
+Cypress.Commands.add('deleteAllMapbenderSources', (sourceTitle) => {
+    const url = Cypress.env('application')['mainUrl'];
+    const selector = 'a[data-test="mb-delete-source-' + sourceTitle + '"]';
+
+    const deleteNext = () => {
+        cy.visit(url + 'manager/repository');
+        cy.get('body').then($body => {
+            if ($body.find(selector).length === 0) {
+                return;
+            }
+            cy.deleteMapbenderSource(sourceTitle);
+            deleteNext();
+        });
+    };
+
+    deleteNext();
+});
+

cypress/support/frontend.js

@@ -1,12 +1,13 @@
 // Activate element in the sidepane
 // cy.selectSidePaneElement(mbElementSelector);
 Cypress.Commands.add( 'selectSidePaneElement', (mbElementSelector) => {
-    cy.get('div.container-accordion').each(($container, index) =>{
+    cy.get('div.container-accordion, div.list-group-item-content').each(($container, index) =>{
         const $mbElement = $container.find(mbElementSelector);
         if($mbElement.length > 0 ){
             const cssClass = $mbElement.attr('class');
             cy.CyLog('Test Layertree', `sidepane class to activate: ${cssClass}`)
-            cy.get(`div#accordion${index + 1}`).click();
+            cy.get(`div#accordion${index + 1}, div#list_group_item${index + 1}`).click();
+            cy.wait(300);
         }
     })
 })