Merge pull request #564 from microting/copilot/fix-page-objects-dom-fetching

Refactor BackendConfigurationFiles page object to use indexed ID selectors

Author: renemadsen

eform-client/e2e/Page objects/BackendConfiguration/BackendConfigurationFiles.page.ts

@@ -268,8 +268,6 @@ export class FileRowObject {
   constructor() {
   }
 
-  public row: WebdriverIO.Element;
-  public checkbox: WebdriverIO.Element;
   public id: number;
   public createDate: string;
   public fileName: string;
@@ -282,41 +280,27 @@ export class FileRowObject {
 
   public async getRow(rowNum: number): Promise<FileRowObject> {
     rowNum = rowNum - 1;
-    this.row = (await $$('tbody > tr'))[rowNum];
-    if (this.row) {
-      this.checkbox = await this.row.$('.mat-column-select .column-select');
-      this.id = +await (await this.row.$('.mat-column-id span')).getText();
-      this.createDate = await (await this.row.$('.mat-column-createDate span')).getText();
-      this.fileName = await (await this.row.$('.mat-column-fileName span')).getText();
-      const properties = await this.row.$$('.mat-column-property mat-chip');
-      this.properties = [];
-      for (let i = 0; i < properties.length; i++) {
-        const text = await properties[i].getText();
-        this.properties.push(text.toString());
-      }
-      // if (properties.length > 0) {
-      //   properties[properties.length - 1] = properties[properties.length - 1].replace('edit', ''); // delete button
-      //   this.properties = properties
-      //     .filter(x => x) // delete empty strings
-      //     .map(x => x.replaceAll('\n', '')); // delete enters
-      // }
-      const tags = await this.row.$$('.mat-column-tags mat-chip');
-      this.tags = [];
-      for (let i = 0; i < tags.length; i++) {
-        const text = await tags[i].getText();
-        this.tags.push(text.toString());
-      }
-      // if (tags.length > 0) {
-      // //   tags[tags.length - 1] = tags[tags.length - 1].replace('edit', ''); // delete button
-      //    this.tags = tags
-      //      //.filter(x => x.te) // delete empty strings
-      //      .map(x => (await x.getText()).replaceAll('\n', '')); // delete enters
-      // }
-      this.editTagsBtn = await this.row.$('.mat-column-tags button');
-      this.viewPDFBtn = await this.row.$$('.mat-column-actions button')[0];
-      this.editFileNameBtn = await this.row.$$('.mat-column-actions button')[1];
-      this.deleteFileBtn = await this.row.$$('.mat-column-actions button')[2];
+    this.id = +await (await $('#fileId-'+rowNum)).getText();
+    this.createDate = await (await $('#fileCreateDate-'+rowNum)).getText();
+    this.fileName = await (await $('#fileName-'+rowNum)).getText();
+    // Get properties from mat-chip elements - need to use row context since it's dynamic
+    const row = (await $$('tbody > tr'))[rowNum];
+    const properties = await row.$$('.mat-column-property mat-chip');
+    this.properties = [];
+    for (let i = 0; i < properties.length; i++) {
+      const text = await properties[i].getText();
+      this.properties.push(text.toString());
+    }
+    const tags = await row.$$('.mat-column-tags mat-chip');
+    this.tags = [];
+    for (let i = 0; i < tags.length; i++) {
+      const text = await tags[i].getText();
+      this.tags.push(text.toString());
     }
+    this.editTagsBtn = await $('#editTagsBtn-'+rowNum);
+    this.viewPDFBtn = await $('#viewPdfBtn-'+rowNum);
+    this.editFileNameBtn = await $('#editFilenameBtn-'+rowNum);
+    this.deleteFileBtn = await $('#deleteFileBtn-'+rowNum);
     return this;
   }
 

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/files/components/files-table/files-table.component.html

@@ -1,7 +1,7 @@
 <mtx-grid
   [data]="_files.entities"
   [columns]="tableHeaders"
-  [cellTemplate]="{select: selectTpl, property: propertyTpl, tags: tagsTpl, actions: actionsTpl}"
+  [cellTemplate]="{select: selectTpl, id: idTpl, createDate: createDateTpl, fileName: fileNameTpl, property: propertyTpl, tags: tagsTpl, actions: actionsTpl}"
   [headerExtraTemplate]="selectHeaderTpl"
   [showPaginator]="false"
   [pageOnFront]="false"
@@ -43,7 +43,19 @@
   </div>
 </ng-template>
 
-<ng-template #propertyTpl let-row>
+<ng-template #idTpl let-row let-i="index">
+  <div class="fileId" id="fileId-{{i}}">{{ row.id }}</div>
+</ng-template>
+
+<ng-template #createDateTpl let-row let-i="index">
+  <div class="fileCreateDate" id="fileCreateDate-{{i}}">{{ row.createDate | date:'dd.MM.yyyy HH:mm:ss' }}</div>
+</ng-template>
+
+<ng-template #fileNameTpl let-row let-i="index">
+  <div class="fileName" id="fileName-{{i}}">{{ row.fileName }}.{{ row.fileExtension }}</div>
+</ng-template>
+
+<ng-template #propertyTpl let-row let-i="index">
   <div class="d-flex flex-wrap align-items-center">
     <mat-chip-list>
       <mat-chip *ngFor="let property of row.properties">
@@ -53,7 +65,7 @@
   </div>
 </ng-template>
 
-<ng-template #tagsTpl let-row>
+<ng-template #tagsTpl let-row let-i="index">
   <div class="d-flex flex-wrap align-items-center">
     <mat-chip-list>
       <mat-chip *ngFor="let tag of row.tags" color="primary" (click)="onClickTag(tag)">
@@ -63,6 +75,7 @@
     <button
       mat-icon-button
       color="primary"
+      id="editTagsBtn-{{i}}"
       matTooltip="{{'Edit tags file' | translate}}"
       (click)="openEditTags(row)">
       <mat-icon>edit</mat-icon>