test: FORMS-2337 Add different layers of base map layer validation (bcgov#1689)

* Modified cypress workflow to fetch latest

* Added wait time

* Reverted changes

* Added changes happened with ESS

* Fixed some timeout issues

* Removed unused code

* Added admin tab validation

* Added missing advanced layout components

* Added validations for existence in the form

* Update form-simple-form-publish.cy.js

* Update form-team-email-management.cy.js

* Fixed conflicts

* Added ESS input field verification

* Clean up

* Update cypress-ci.yaml

* Updated scripts

* Updated screenshots folder path in yaml

* Scripts for updating map component by submitter

* Updated with UI changes

* Added base map settings

* Fixed some running issues

* Added visibility before clicking

* Added validations for base map layers

* Update form-manage-form.cy.js

* Updated scripts for new assignee checkbox on form settings page

---------

Co-authored-by: abhilash-aot <abhilashKattampalli.Rayaroth@gov.bc.ca>

Author: nimya-aot

tests/functional/cypress/e2e/form-design-map-polygon-marker.cy.js

@@ -109,6 +109,7 @@ describe('Form Designer', () => {
       cy.get('a[class="leaflet-control-layers-toggle"').then($el => {
         const base_map_btn=$el[0];
         cy.get(base_map_btn).trigger('mouseover');
+      });
         cy.contains('span', 'OpenStreetMap')     // Find the span with the text
         .prev('input[type="radio"]')           // Get the radio input just before it
         .should('be.checked');                 // Assert that it's checked
@@ -117,10 +118,43 @@ describe('Form Designer', () => {
       cy.contains('span', ' Dark').prev('input[type="radio"]')          
           .should('not.have.attr', 'checked');  
       cy.contains('span', ' Topographic').prev('input[type="radio"]')
-          .should('not.have.attr', 'checked');  
-      cy.get('button').contains('Save').click();   
-
+          .should('not.have.attr', 'checked'); 
+          cy.wait(2000);
+      cy.get('a[title="Draw a marker"]').then($el => {
+        const marker_elem=$el[0];
+        cy.get(marker_elem).click({force: true});
+      }); 
+      cy.get('a[title="Cancel drawing"').click();   
+      //validate visiility of different layers
+      cy.get('a[class="leaflet-control-layers-toggle"').then($el => {
+        const base_map_btn=$el[0];
+        cy.get(base_map_btn).trigger('mouseover',{force: true});
+      
+        cy.get('input[class="leaflet-control-layers-selector"]')
+        .then($el => {
+        const base_select_light=$el[1];
+        const base_select_dark=$el[2];
+        const base_select_topographic=$el[3];
+        cy.get(base_select_dark).closest('span').contains(' Dark').click({ force: true });
+        cy.get(base_select_dark).check();
+        cy.wait(2000);
+        cy.get('img[src*="https://b.basemaps.cartocdn.com/dark_all/"]').should('be.visible');
+        cy.get(base_select_light).closest('span').contains(' Light').click({ force: true });
+        cy.wait(1000);
+        cy.get(base_select_light).check();
+        cy.wait(2000);
+        cy.get('img[src*="https://b.basemaps.cartocdn.com/light_all/"]').should('be.visible');
+        cy.get(base_map_btn).trigger('mouseover',{force: true});
+        cy.get(base_select_topographic).closest('span').contains(' Topographic').click({ force: true });
+        cy.waitForLoad();
+        cy.get(base_select_topographic).check();
+        cy.wait(2000);
+        cy.get('img[src*="https://b.tile.opentopomap.org/"]').should('be.visible');
+        });
       });
+      cy.waitForLoad();
+      cy.get('button').contains('Save').click();
+      
   });
   it('Checks form submission for a Map component', () => {
         cy.viewport(1000, 1100);
@@ -163,6 +197,34 @@ describe('Form Designer', () => {
         .trigger('mouseup', coords.x, -5, { force: true })
         cy.wait(2000);
       });
+      //validate different basic layers existence on submitter view
+      cy.get('a[class="leaflet-control-layers-toggle"').then($el => {
+        const base_map_btn=$el[0];
+        cy.get(base_map_btn).trigger('mouseover',{force: true});
+      
+        cy.get('input[class="leaflet-control-layers-selector"]')
+        .then($el => {
+        const base_select_light=$el[1];
+        const base_select_dark=$el[2];
+        const base_select_topographic=$el[3];
+        cy.get(base_select_dark).closest('span').contains(' Dark').click({ force: true });
+        cy.get(base_select_dark).check();
+        cy.wait(2000);
+        cy.get('img[src*="https://b.basemaps.cartocdn.com/dark_all/"]').should('be.visible');
+        cy.get(base_select_light).closest('span').contains(' Light').click({ force: true });
+        cy.wait(1000);
+        cy.get(base_select_light).check();
+        cy.wait(2000);
+        cy.get('img[src*="https://b.basemaps.cartocdn.com/light_all/"]').should('be.visible');
+        cy.get(base_map_btn).trigger('mouseover',{force: true});
+        cy.get(base_select_topographic).closest('span').contains(' Topographic').click({ force: true });
+        cy.waitForLoad();
+        cy.get(base_select_topographic).check();
+        cy.wait(2000);
+        cy.get('img[src*="https://b.tile.opentopomap.org/"]').should('be.visible');
+        });
+      });
+      cy.waitForLoad();
       cy.get('a[title="Draw a marker"]').then($el => {
         const marker_elem=$el[0];
         cy.get(marker_elem).click({force: true});
@@ -171,6 +233,7 @@ describe('Form Designer', () => {
       cy.wait(2000);
       //Verify marker limit validation message
       cy.get('div[class="leaflet-popup-content"]').find('p').contains('Only 3 features per submission').should('be.visible');
+
       //Validate the feature of deleting existing markers not possible
       cy.get('.leaflet-draw-edit-remove').click();
       cy.get('g').find('path[stroke-linejoin="round"]').then($el => {
@@ -204,7 +267,6 @@ describe('Form Designer', () => {
       cy.get('#logoutButton > .v-btn__content > span').click();
 
       });
-
   });
 
 });

tests/functional/cypress/e2e/form-edit-submission-data.cy.js

@@ -119,7 +119,7 @@ describe('Form Designer', () => {
 
         });
 
-        cy.get(':nth-child(1) > :nth-child(6) > a > .v-btn > .v-btn__content > .mdi-eye').click();
+        cy.get(':nth-child(1) > :nth-child(7) > a > .v-btn').click();
         //Edit submission
         cy.get('.mdi-pencil').click();
         //check visibility of cancel button

tests/functional/cypress/e2e/form-manage-form.cy.js

@@ -35,7 +35,7 @@ describe('Form Designer', () => {
       cy.get('span.btn').contains('Text Field')
 
       .trigger('mousedown', { which: 1}, { force: true })
-      .trigger('mousemove', coords.x, -50, { force: true })
+      .trigger('mousemove', coords.x, -110, { force: true })
       .trigger('mouseup', { force: true });
       cy.get('button').contains('Save').click();
     });

tests/functional/cypress/e2e/form-submission-assign-revise-status.cy.js

@@ -124,7 +124,7 @@ it('Submission revise status Assignment', () => {
     cy.visit(`/${depEnv}/form/manage?f=${arrayValues[0]}`);
     cy.get('.mdi-list-box-outline').click();
     cy.waitForLoad();
-    cy.get(':nth-child(1) > :nth-child(6) > a > .v-btn > .v-btn__content > .mdi-eye').click();
+    cy.get(':nth-child(1) > :nth-child(7) > a > .v-btn').click();
     cy.get('.status-heading > .mdi-chevron-right').click();
     cy.get('[data-test="showStatusList"] > .v-input__control > .v-field > .v-field__field > .v-field__input').click();
     cy.contains('ASSIGNED').click();

tests/functional/cypress/e2e/form-submission-assign-status.cy.js

@@ -114,7 +114,7 @@ describe('Form Designer', () => {
         cy.get('div.v-list-item-title').contains('All').should('be.visible');
         cy.get('button[title="Delete Submission"]').should('be.visible');
          //view submission
-        cy.get(':nth-child(1) > :nth-child(6) > a > .v-btn > .v-btn__content > .mdi-eye').click();
+        cy.get(':nth-child(1) > :nth-child(7) > a > .v-btn').click();
         cy.wait(4000);
       });
 

tests/functional/cypress/e2e/form-submission-export.cy.js

@@ -180,7 +180,7 @@ describe("Form Designer", () => {
     cy.waitForLoad();
     cy.get(".mdi-list-box-outline").click();
     cy.wait(2000);
-    cy.get(':nth-child(1) > :nth-child(6) > a > .v-btn').click();
+    cy.get(':nth-child(1) > :nth-child(7) > a > .v-btn').click();
      //print option
     cy.get('.mdi-printer').click();
     cy.get('.flex-container > .v-btn--elevated').should('be.enabled');

tests/functional/cypress/e2e/form-submission-public-no-status-assign.cy.js

@@ -145,7 +145,7 @@ describe('Form Designer', () => {
     cy.visit(`/${depEnv}/form/manage?f=${arrayValues[0]}`);
     cy.get('.mdi-list-box-outline').click();
     cy.wait(2000);
-    cy.get(':nth-child(1) > :nth-child(6) > a > .v-btn > .v-btn__content > .mdi-eye').click();
+    cy.get(':nth-child(6) > a > .v-btn').click();
     cy.waitForLoad();
     //Verify status option is not available for this
     cy.get('.status-heading > .mdi-chevron-right').should('not.exist');

tests/functional/cypress/e2e/form-submission-public-status-assign.cy.js

@@ -147,7 +147,7 @@ describe('Form Designer', () => {
     cy.visit(`/${depEnv}/form/manage?f=${arrayValues[0]}`);
     cy.get('.mdi-list-box-outline').click();
     cy.waitForLoad();
-    cy.get(':nth-child(1) > :nth-child(6) > a > .v-btn > .v-btn__content > .mdi-eye').click();
+    cy.get(':nth-child(6) > a > .v-btn').click();
 
     });
     //Assign status submission

tests/functional/cypress/support/login.js

@@ -55,10 +55,16 @@ export function formsettings(){
     cy.get(email_notify).click({force: true});
     cy.contains('Send a notification to your specified email address when any user submits this form').should('be.visible');
     });
+    //validate share draft with team is not enabled
+    cy.get('[data-test="enableTeamMemberDraftShare"]').should('not.be.enabled');
     cy.get('[data-test="canSaveAndEditDraftsCheckbox"]').click();
-    cy.get(':nth-child(3) > .v-card > .v-card-text > :nth-child(2) > .v-input__control > .v-selection-control > .v-label > span').click();//Update the status of the form
-    cy.get(':nth-child(5) > .v-input__control > .v-selection-control > .v-label > div > span > strong').click();//Copy existing submission
-    cy.get(':nth-child(7) > .v-input__control > .v-selection-control > .v-label > div').click();//Wide form Layout
+     //validate share draft with team is enabled
+    cy.get('[data-test="enableTeamMemberDraftShare"]').should('be.visible').and('not.be.disabled');
+    cy.get('[data-test="canUpdateStatusOfFormCheckbox"]').click();//Update the status of the form
+    cy.get('[data-test="canCopyExistingSubmissionCheckbox"]').click();//Copy existing submission
+    cy.get('[data-test="canAllowWideFormLayoutCheckbox"]').click();//Wide form Layout
+    cy.get('[data-test="enableTeamMemberDraftShare"]').click();//share form drafts with team members only
+    cy.get('[data-test="showAssigneeInSubmissionsTableCheckbox"]').click();//display assignee column for reviewers
     cy.get('[data-test="email-test"] > .v-input__control > .v-selection-control > .v-label > div > span').click({force: true});
     cy.get('[data-test="email-test"] > .v-input__control > .v-selection-control > .v-label > div > span').click();
     cy.get(':nth-child(4) > .v-card > .v-card-text > .v-text-field > .v-input__control > .v-field > .v-field__field > .v-field__input').type('abc@gmail.com');
@@ -97,15 +103,14 @@ export function formsettings(){
     cy.get('.v-list').should('contain','Reporting usually on a repeating schedule or event driven like follow-ups');
     cy.get('.v-list').should('contain','Feedback Form to determine satisfaction, agreement, likelihood, or other qualitative questions');
     cy.contains('Reporting usually on a repeating schedule or event driven like follow-ups').click();
-    
     cy.get('input[value="test"]').click();
-    ;
     cy.get('[data-test="api-true"] > .v-label > span').click();
     cy.get('.mt-3 > .mdi-help-circle-outline').should('be.visible');
     cy.get('.mt-3 > .mdi-help-circle-outline').click();
     cy.contains('Labels serve as a means to categorize similar forms that may belong to a common organization or share a related context.').should('be.visible');
     cy.get('.d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input').click();
     cy.get('.d-flex > .v-input > .v-input__control > .v-field > .v-field__field > .v-field__input').type('test label');
+    //Disclaimer declaration
     cy.get(':nth-child(4) > .v-card-text > .v-input > .v-input__control > .v-selection-control > .v-label > span').click();
     cy.get('button').contains('Continue').click();