e2e - update form definition test with roles UI change and name & des…

…cription update (#2394)

* Updates

* Test updates for button updates

* More updates for buttons

* Button updates

* Test updates for UI components

* Updates for event log, status, notifications

* e2e updates

* File service, configuration service, welcome

* Updates on PDF, script and notifications

* subscription and service status updates

* Updates on events and directory

* e2e updates for status, directory and tenant admin

* directory and service status

* Notifications test updates

* One comment for roles in notification type modal

* e2e test updates for status and notifications

* Changed var to let

* e2e test updates for configuration

* e2e test updates for welcome page

* Removed unused element

* e2e updates

* test updates for events and script

* e2e updates on welcome page and notifications

* Fixes for service status

* updates for file service

* e2e test updates for event, file, notification

* Update for pdf

* update for status

* Update

* e2e updates

* e2e updates

* e2e updates

* e2e updates

* Added a config setting

* Commented out edit PDF template steps

* Update

* update

* Updated file tests

* Updated pdf test

* Removed headless=true command parameter

* Switch e2e test run from Chrome to Electron

* Switch e2e test run from headless to headed

* e2e fixes

* e2e updates

* e2e updates

* Test fixes

* Updated cs-322 with validation of open icon

* Added validation of pdf template body

* Added a couple of steps of selecting filters

* Added a walkaround

* Walkaround for 30 second refresh

* Added more wait to avoid random test failures

* File service test updates

* Put accessiblity test step back

* Commented out accessibility step for file types

* Added support info validation on subscriber app

* Fixed a timestamp bug

* Added more delay on file type name

* test updates

* subscriber app test update

* Updated load more button page object

* e2e test updates

* Fixed a typo

* Added a wait

* Updates of subscription management tests

* test updates for calendar and script

* Test updates

* test updates

* enabled api doc link tests

* Re-enabled tenant creation test

* Adjusted wait for 2 failed tests

* added shadow() for shadow dom element

* Updated tests for UI changes of removing roles

* Chnaged from let to const

* Form definition edit test update

---------

Co-authored-by: Howard Zhang <[email protected]>

apps/tenant-management-webapp-e2e/src/integration/common/common.steps.ts

@@ -247,4 +247,5 @@ When('the user clicks {string} button on unsaved changes modal', function (butto
     default:
       expect(button).to.be.oneOf(["Don't save", 'Save', 'Cancel']);
   }
+  cy.wait(1000);
 });

apps/tenant-management-webapp-e2e/src/integration/events/events.step.ts

@@ -416,6 +416,7 @@ When('the user clicks {string} button for the stream of {string}', function (but
       break;
     case 'Edit':
       eventsObj.streamEditBtn(streamName).shadow().find('button').click({ force: true });
+      cy.wait(1000); // wait for the edit modal components to be operational
       break;
     case 'Delete':
       eventsObj.streamDeleteBtn(streamName).shadow().find('button').click({ force: true });
@@ -554,12 +555,12 @@ When('the user {string} Make stream public checkbox in Stream modal', function (
           if (classAttr?.includes('selected')) {
             cy.log('Make stream public checkbox is already checked. ');
           } else {
-            eventsObj.streamModalPublicCheckbox().shadow().find('.goa-checkbox-container').click();
+            eventsObj.streamModalPublicCheckbox().shadow().find('.goa-checkbox-container').scrollIntoView().click();
           }
           break;
         case 'un-selects':
           if (classAttr?.includes('selected')) {
-            eventsObj.streamModalPublicCheckbox().shadow().find('.goa-checkbox-container').click();
+            eventsObj.streamModalPublicCheckbox().shadow().find('.goa-checkbox-container').scrollIntoView().click();
           } else {
             cy.log('Make stream public checkbox is already un-selected. ');
           }

apps/tenant-management-webapp-e2e/src/integration/form.feature

@@ -10,7 +10,7 @@ Feature: Form
     And the user views the link of "Get support" under Support
 
   # Ignore this test due to the pending task to change the test for the recent UI change of roles
-  @TEST_CS-2366 @TEST_CS-2356 @TEST_CS-2332 @TEST_CS-2406 @REQ_CS-1848 @REQ_CS-2170 @REQ_CS-2169 @REQ_CS-2254 @regression @ignore
+  @TEST_CS-2366 @TEST_CS-2356 @TEST_CS-2332 @TEST_CS-2406 @REQ_CS-1848 @REQ_CS-2170 @REQ_CS-2169 @REQ_CS-2254 @regression
   Scenario: As a tenant admin, I can add and delete a form definition
     Given a tenant admin user is on form service overview page
     When the user clicks Add definition button on form service overview page
@@ -26,27 +26,42 @@ Feature: Form
     When the user enters "autotest-formDef", "autotest desc" in Add form definition modal
     And the user clicks Save button in Add form definition modal
     Then the user views form definition editor for "autotest-formDef", "autotest desc"
-    When the user enters "auto-test-role1" as applicant roles, "auto-test-role2" as clerk roles, "empty" as assessor roles
+    When the user clicks roles tab in form definition editor
+    And the user enters "auto-test-role1" as applicant roles, "auto-test-role2" as clerk roles, "empty" as assessor roles
     And the user clicks Save button on form definition editor
     Then the user "views" the form definition of "autotest-formDef", "autotest desc"
     # Edit and back
     When the user clicks "Edit" button for the form definition of "autotest-formDef", "autotest desc"
     Then the user views form definition editor for "autotest-formDef", "autotest desc"
-    When the user enters "auto-test-role2" as applicant roles, "auto-test-role1" as clerk roles, "auto-test-role3" as assessor roles
+    When the user clicks roles tab in form definition editor
+    And the user enters "auto-test-role2" as applicant roles, "auto-test-role1" as clerk roles, "auto-test-role3" as assessor roles
     And the user clicks Back button on form definition editor
     And the user clicks "Don't save" button on unsaved changes modal
-    Then the user "should not view" the form definition of "autotest-formDef", "autotest desc"
+    And the user clicks "Edit" button for the form definition of "autotest-formDef", "autotest desc"
+    Then the user views form definition editor for "autotest-formDef", "autotest desc"
+    When the user clicks roles tab in form definition editor
+    Then the user views "auto-test-role1" as applicant roles, "auto-test-role2" as clerk roles, "empty" as assessor roles in roles tab
+    And the user clicks Back button on form definition editor
     # Edit and save
     When the user clicks "Edit" button for the form definition of "autotest-formDef", "autotest desc"
     Then the user views form definition editor for "autotest-formDef", "autotest desc"
-    When the user enters "auto-test-role2" as applicant roles, "auto-test-role1" as clerk roles, "auto-test-role3" as assessor roles
+    When the user clicks Edit button in form definition editor
+    Then the user views Edit definition modal in form definition editor
+    When the user enters "autotest-formDef-edited", "autotest desc edited" in Edit definition modal
+    And the user clicks Save button in Edit definition modal
+    And the user clicks roles tab in form definition editor
+    And the user enters "auto-test-role2" as applicant roles, "auto-test-role1" as clerk roles, "auto-test-role3" as assessor roles
     And the user clicks Save button on form definition editor
-    Then the user "views" the form definition of "autotest-formDef", "autotest desc"
+    Then the user "views" the form definition of "autotest-formDef-edited", "autotest desc edited"
+    When the user clicks "Edit" button for the form definition of "autotest-formDef-edited", "autotest desc edited"
+    And the user clicks roles tab in form definition editor
+    Then the user views "auto-test-role2" as applicant roles, "auto-test-role1" as clerk roles, "auto-test-role3" as assessor roles in roles tab
+    And the user clicks Back button on form definition editor
     # Delete
-    When the user clicks "Delete" button for the form definition of "autotest-formDef", "autotest desc"
+    When the user clicks "Delete" button for the form definition of "autotest-formDef-edited", "autotest desc edited"
     Then the user views delete "form definition" confirmation modal for "autotest-formDef"
     When the user clicks Delete button in delete confirmation modal
-    Then the user "should not view" the form definition of "autotest-formDef", "autotest desc"
+    Then the user "should not view" the form definition of "autotest-formDef-edited", "autotest desc edited"
 
   #TEST DATA: precreated form definition of "autotest-formDefAccessibility", "DO NOT DELETE", "auto-test-role1", "auto-test-role1", "auto-test-role1"
   @accessibility @regression

apps/tenant-management-webapp-e2e/src/integration/form/form.page.ts

@@ -48,17 +48,17 @@ class FormPage {
   }
 
   editorCheckboxesTables() {
-    return cy.xpath('//*[text()="Form permissions"]/parent::*//goa-table');
+    return cy.xpath('//*[@data-testid="form-roles-tab"]//goa-table');
   }
 
   editorClientRolesTable(clientName) {
     return cy.xpath(
-      `//*[text()="Form permissions"]/parent::*//h4/div[text()="${clientName}"]/parent::h4/following-sibling::goa-table[1]`
+      `//*[@data-testid="form-roles-tab"]//h4/div[text()="${clientName}"]/parent::h4/following-sibling::goa-table[1]`
     );
   }
 
   editorRolesTable() {
-    return cy.xpath('//*[text()="Form permissions"]/parent::*//h4[text()="autotest"]/following-sibling::goa-table[1]');
+    return cy.xpath('//*[@data-testid="form-roles-tab"]//h4[text()="autotest"]/following-sibling::goa-table[1]');
   }
 
   definitionsTableBody() {
@@ -76,5 +76,49 @@ class FormPage {
       `(//table[@data-testid="form-definitions-table"]//*[contains(@data-testid, "form-definition-delete")])[${rowNumber}]`
     );
   }
+
+  definitionEditorTab(tabName) {
+    return cy.xpath(`//*[contains(@data-testid, "tab") and text()="${tabName}"]`);
+  }
+
+  definitionEditorEditButton() {
+    return cy.xpath('//*[@class="editColumn"]//*[text()="Edit"]');
+  }
+
+  definitionEditorEditDefinitionModal() {
+    return cy.xpath('//goa-modal[@open="true" and @data-testid="definition-form"]');
+  }
+
+  definitionEditorEditDefinitionModalTitle() {
+    return cy.xpath('//goa-modal[@open="true" and @data-testid="definition-form"]/*[@slot="heading"]');
+  }
+
+  definitionEditorEditDefinitionModalNameInput() {
+    return cy.xpath('//goa-input[@data-testid="form-definition-name"]');
+  }
+
+  definitionEditorEditDefinitionModalDescriptionField() {
+    return cy.xpath('//goa-textarea[@data-testid="form-definition-description"]');
+  }
+
+  definitionEditorEditDefinitionModalSaveButton() {
+    return cy.xpath('//goa-modal[@open="true" and @data-testid="definition-form"]//goa-button[text()="Save"]');
+  }
+
+  definitionEditorCheckedApplicantRoles() {
+    return cy.xpath('//goa-checkbox[contains(@data-testid, "applicant roles") and checked="true"]');
+  }
+
+  definitionEditorCheckedClerkRoles() {
+    return cy.xpath('//goa-checkbox[contains(@data-testid, "clerk roles") and checked="true"]');
+  }
+
+  definitionEditorCheckedAssessorRoles() {
+    return cy.xpath('//goa-checkbox[contains(@data-testid, "assessor roles") and checked="true"]');
+  }
+
+  definitionEditorRolesTables() {
+    return cy.xpath('//*[@data-testid="form-roles-tab"]//h4/following-sibling::goa-table[1]');
+  }
 }
 export default FormPage;

apps/tenant-management-webapp-e2e/src/integration/form/form.step.ts

@@ -307,4 +307,183 @@ When(
 
 When('the user clicks Back button on form definition editor', function () {
   formObj.editorBackButton().shadow().find('button').click({ force: true });
+  cy.wait(1000);
+});
+
+When('the user clicks roles tab in form definition editor', function () {
+  formObj
+    .definitionEditorTab('Roles')
+    .invoke('attr', 'class')
+    .then((classAttr) => {
+      if (classAttr?.includes('active')) {
+        cy.log('Roles tab is already seleted.');
+      } else {
+        formObj.definitionEditorTab('Roles').click();
+        cy.wait(1000);
+      }
+    });
+});
+
+When('the user clicks Edit button in form definition editor', function () {
+  formObj.definitionEditorEditButton().click();
+  cy.wait(2000);
+});
+
+Then('the user views Edit definition modal in form definition editor', function () {
+  formObj.definitionEditorEditDefinitionModal().should('exist');
+  formObj.definitionEditorEditDefinitionModalTitle().should('contain.text', 'Edit definition');
+});
+
+When('the user enters {string}, {string} in Edit definition modal', function (name, description) {
+  formObj
+    .definitionEditorEditDefinitionModalNameInput()
+    .shadow()
+    .find('input')
+    .clear()
+    .type(name, { force: true, delay: 200 });
+  formObj
+    .definitionEditorEditDefinitionModalDescriptionField()
+    .shadow()
+    .find('.goa-textarea')
+    .clear()
+    .type(description, { force: true });
+});
+
+When('the user clicks Save button in Edit definition modal', function () {
+  cy.wait(1000); // wait for save button to enable
+  formObj
+    .definitionEditorEditDefinitionModalSaveButton()
+    .shadow()
+    .find('button')
+    .scrollIntoView()
+    .click({ force: true });
+  cy.wait(2000);
 });
+
+Then(
+  'the user views {string} as applicant roles, {string} as clerk roles, {string} as assessor roles in roles tab',
+  function (applicantRole, clerkRole, assessorRole) {
+    //check applicant roles
+    let applicantRoleMatchCount = 0;
+    if (applicantRole.toLowerCase() != 'empty') {
+      const applicantRoles = applicantRole.split(',');
+      formObj
+        .definitionEditorRolesTables()
+        .shadow()
+        .find('goa-checkbox[data-testid*="Applicant roles"]')
+        .then((appRoles) => {
+          for (let i = 0; i < appRoles.length; i++) {
+            if (appRoles[i].getAttribute('checked') == 'true') {
+              for (let j = 0; j < applicantRoles.length; j++) {
+                if (appRoles[i].getAttribute('name')?.includes(applicantRoles[j])) {
+                  const appRoleName = appRoles[i].getAttribute('name');
+                  if (appRoleName != null) {
+                    cy.log(appRoleName);
+                  } else {
+                    cy.log('Application role name attribute is null');
+                  }
+                  applicantRoleMatchCount = applicantRoleMatchCount + 1;
+                }
+              }
+            }
+          }
+          expect(applicantRoles.length).to.eq(applicantRoleMatchCount);
+        });
+    } else {
+      formObj
+        .definitionEditorRolesTables()
+        .shadow()
+        .find('goa-checkbox[data-testid*="Applicant roles"]')
+        .then((appRoles) => {
+          for (let i = 0; i < appRoles.length; i++) {
+            if (appRoles[i].getAttribute('checked') == 'true') {
+              expect(appRoles[i].getAttribute('checked')).to.be('false');
+            }
+          }
+        });
+      cy.log('No applicant role is selected');
+    }
+
+    //check clerk roles
+    let clerkRoleMatchCount = 0;
+    if (clerkRole.toLowerCase() != 'empty') {
+      const clerkRoles = clerkRole.split(',');
+      formObj
+        .definitionEditorRolesTables()
+        .shadow()
+        .find('goa-checkbox[data-testid*="Clerk roles"]')
+        .then((cRoles) => {
+          for (let i = 0; i < cRoles.length; i++) {
+            if (cRoles[i].getAttribute('checked') == 'true') {
+              for (let j = 0; j < clerkRoles.length; j++) {
+                if (cRoles[i].getAttribute('name')?.includes(clerkRoles[j])) {
+                  const clerkRoleName = cRoles[i].getAttribute('name');
+                  if (clerkRoleName != null) {
+                    cy.log(clerkRoleName);
+                  } else {
+                    cy.log('Clerk role name attribute is null');
+                  }
+                  clerkRoleMatchCount = clerkRoleMatchCount + 1;
+                }
+              }
+            }
+          }
+          expect(clerkRoles.length).to.eq(clerkRoleMatchCount);
+        });
+    } else {
+      formObj
+        .definitionEditorRolesTables()
+        .shadow()
+        .find('goa-checkbox[data-testid*="Clerk roles"]')
+        .then((cRoles) => {
+          for (let i = 0; i < cRoles.length; i++) {
+            if (cRoles[i].getAttribute('checked') == 'true') {
+              expect(cRoles[i].getAttribute('checked')).to.be('false');
+            }
+          }
+        });
+      cy.log('No clerk role is selected');
+    }
+
+    //check assessor roles
+    let assessorRoleMatchCount = 0;
+    if (assessorRole.toLowerCase() != 'empty') {
+      const assessorRoles = assessorRole.split(',');
+      formObj
+        .definitionEditorRolesTables()
+        .shadow()
+        .find('goa-checkbox[data-testid*="Assessor roles"]')
+        .then((assRoles) => {
+          for (let i = 0; i < assRoles.length; i++) {
+            if (assRoles[i].getAttribute('checked') == 'true') {
+              for (let j = 0; j < assessorRoles.length; j++) {
+                if (assRoles[i].getAttribute('name')?.includes(assessorRoles[j])) {
+                  const assRoleName = assRoles[i].getAttribute('name');
+                  if (assRoleName != null) {
+                    cy.log(assRoleName);
+                  } else {
+                    cy.log('Assessor role name attribute is null');
+                  }
+                  assessorRoleMatchCount = assessorRoleMatchCount + 1;
+                }
+              }
+            }
+          }
+          expect(assessorRoles.length).to.eq(assessorRoleMatchCount);
+        });
+    } else {
+      formObj
+        .definitionEditorRolesTables()
+        .shadow()
+        .find('goa-checkbox[data-testid*="Assessor roles"]')
+        .then((assRoles) => {
+          for (let i = 0; i < assRoles.length; i++) {
+            if (assRoles[i].getAttribute('checked') == 'true') {
+              expect(assRoles[i].getAttribute('checked')).to.be('false');
+            }
+          }
+        });
+      cy.log('No assessor role is selected');
+    }
+  }
+);