Update Cypress page objects to use actions menu pattern

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

eform-client/cypress/e2e/DeviceUsers.page.ts

@@ -156,7 +156,9 @@ class DeviceUsersPage extends PageWithNavbarPage{
     name = '',
     surname = ''
   ): void {
-    deviceUser.editBtn().should('be.visible').click();
+    const index = deviceUser.index - 1;
+    deviceUser.openRowMenu();
+    cy.get(`#editDeviceUserBtn${index}`).should('be.visible').click();
     // @ts-ignore
     cy.get('#firstName').should('be.visible');
     if (name !== '') {
@@ -178,6 +180,7 @@ const deviceUsersPage = new DeviceUsersPage();
 export default deviceUsersPage;
 
 export class DeviceUsersRowObject {
+  index: number;
   siteId: number;
   firstName: string;
   lastName: string;
@@ -187,6 +190,7 @@ export class DeviceUsersRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum: number) {
+    this.index = rowNum;
     // @ts-ignore
     if (cy.get('#deviceUserId').eq(rowNum - 1).should('exist')) {
       // @ts-ignore
@@ -203,8 +207,16 @@ export class DeviceUsersRowObject {
     return this;
   }
 
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
+
   delete() {
-    this.deleteBtn.should('be.visible').click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#deleteDeviceUserBtn${index}`).should('be.visible').click();
     deviceUsersPage.saveDeleteBtn().should('be.visible').click();
     // @ts-ignore
     cy.get('#spinner-animation').should('not.exist', { timeout: 40000 });

eform-client/cypress/e2e/Sites.page.ts

@@ -125,6 +125,7 @@ export default sitesPage;
 export class SitesRowObject {
   constructor() {}
 
+  index: number;
   element: Cypress.Chainable<JQuery<HTMLElement>>;
   siteId: number;
   units: string;
@@ -134,6 +135,7 @@ export class SitesRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum): Promise<SitesRowObject> {
+    this.index = rowNum;
     this.element = cy.get('tbody > tr').eq(rowNum - 1);
     if (this.element) {
       this.siteId = +(this.element.find('#siteUUId').invoke('text'));
@@ -146,6 +148,13 @@ export class SitesRowObject {
     }
     return this;
   }
+
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
+
   closeEditModal(clickCancel = false) {
     if (clickCancel) {
       sitesPage.siteEditCancelBtn().click();
@@ -156,22 +165,10 @@ export class SitesRowObject {
     sitesPage.sitesManageTagsBtn().should('be.visible', { timeout: 40000 });
   }
 
-  getRow(rowNum): Promise<SitesRowObject> {
-    this.element = Cypress.$$('tbody > tr').eq(rowNum - 1);
-    if (this.element) {
-      this.siteId = +this.element.find('#siteUUId').text();
-      this.units = this.element.find('#units').text();
-      this.siteName = this.element.find('#siteName').text();
-      const list = this.element.find('mat-chip-list mat-chip > span');
-      this.tags = Promise.all(list.map((_, element) => Cypress.$(element).text()));
-      this.editBtn = this.element.find('#editSiteBtn');
-      this.deleteBtn = this.element.find('#deleteSiteBtn');
-    }
-    return this;
-  }
-
   openEditModal(site?: { name?: string; tags?: string[] }) {
-    this.editBtn.click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#editSiteBtn${index}`).should('be.visible').click();
     cy.wait(500);
     sitesPage.siteEditCancelBtn().should('be.visible', {timeout: 40000});
     if (site) {
@@ -196,7 +193,9 @@ export class SitesRowObject {
   }
 
   openDeleteModal() {
-    this.deleteBtn.click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#deleteSiteBtn${index}`).should('be.visible').click();
     cy.wait(500);
     sitesPage.siteDeleteCancelBtn().should('be.visible', {timeout: 40000}).click();
   }

eform-client/cypress/e2e/UserAdministration.page.ts

@@ -170,6 +170,7 @@ const userAdministrationPage = new UserAdministrationPage();
 export default userAdministrationPage;
 
 export class UserAdministrationRowObject {
+  index: number;
   id: number;
   email: string;
   fullName: string;
@@ -178,6 +179,7 @@ export class UserAdministrationRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum: number) {
+    this.index = rowNum;
     const index = rowNum - 1;
 
     cy.get(`#userAdministrationId-${index}`).invoke('text').then(text => {
@@ -199,8 +201,16 @@ export class UserAdministrationRowObject {
     return this;
   }
 
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
+
   edit(user: UserAdministrationObject, clickCancel = false) {
-    this.editBtn.should('be.visible').click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#userAdministrationEditBtn-${index}`).should('be.visible').click();
     cy.get('#editFirstName').should('be.visible');
 
     if (user.firstName) {
@@ -257,7 +267,9 @@ export class UserAdministrationRowObject {
   }
 
   delete(clickCancel = false) {
-    this.deleteBtn.should('be.visible').click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#userAdministrationDeleteBtn-${index}`).should('be.visible').click();
     cy.get('#userDeleteCancelBtn').should('be.visible');
 
     if (clickCancel) {

eform-client/cypress/e2e/Workers.page.ts

@@ -127,7 +127,9 @@ class WorkersPage extends PageWithNavbarPage {
     firstName = '',
     lastName = ''
   ): void {
-    worker.editBtn().should('be.visible').click();
+    const index = worker.index - 1;
+    worker.openRowMenu();
+    cy.get(`#workerEditBtn${index}`).should('be.visible').click();
     // @ts-ignore
     cy.get('#firstNameEdit').should('be.visible');
     if (firstName !== '') {
@@ -152,6 +154,7 @@ const workersPage = new WorkersPage();
 export default workersPage;
 
 export class WorkersRowObject {
+  index: number;
   siteId: number;
   firstName: string;
   lastName: string;
@@ -161,6 +164,7 @@ export class WorkersRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum: number) {
+    this.index = rowNum;
     // @ts-ignore
     if (cy.get('#workerUID').eq(rowNum - 1).should('exist')) {
       // @ts-ignore
@@ -176,4 +180,10 @@ export class WorkersRowObject {
     }
     return this;
   }
+
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
 }