fix(console, e2e): static data-e2e attributes, consistent naming (#4188)

* fix(console, e2e): static data-e2e attributes, consistent naming * quote cypress attribute selectors * Update console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html Co-authored-by: Elio Bischof <[email protected]> * Update console/src/app/modules/project-roles-table/project-roles-table.component.html Co-authored-by: Elio Bischof <[email protected]> * fix , Co-authored-by: Elio Bischof <[email protected]>
2026-10-29 02:22:16 +00:00 · 2022-08-16 14:02:59 +02:00
parent dcac08b1d5
commit 44fc2efbb7
27 changed files with 375 additions and 247 deletions
@@ -1,12 +1,16 @@
-<div *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false" class="action-keys-wrapper"
-  [ngSwitch]="type" [ngClass]="{'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast}">
+<div
+  *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false"
+  class="action-keys-wrapper"
+  [ngSwitch]="type"
+  [ngClass]="{ 'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast }"
+>
  <div *ngSwitchCase="ActionKeysType.CLEAR" class="action-keys-row">
    <div class="action-key esc">
      <div class="key-overlay"></div>
      <span>ESC</span>
    </div>
  </div>
-  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" [attr.data-e2e]="'action-key-add'">
+  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" data-e2e="action-key-add">
    <div class="action-key">
      <div class="key-overlay"></div>
      <span>N</span>
@@ -38,7 +42,6 @@
    <div class="action-key">
      <div class="key-overlay"></div>
      <span *ngIf="isMacLike || isIOS; else otherOS">⌘</span>
-
    </div>
    +
    <div class="action-key">
@@ -56,4 +59,4 @@

 <ng-template #otherOS>
  <span>crtl</span>
-</ng-template>
+</ng-template>
@@ -1,18 +1,17 @@
-<div class="card" [ngClass]="{'nomargin': nomargin, 'stretch': stretch, 'warn': warn}" [attr.data-e2e]="'app-card'">
-  <div *ngIf="title || description" class="header" [ngClass]="{'bottom-margin': expanded}">
+<div class="card" [ngClass]="{ nomargin: nomargin, stretch: stretch, warn: warn }" data-e2e="app-card">
+  <div *ngIf="title || description" class="header" [ngClass]="{ 'bottom-margin': expanded }">
    <div *ngIf="title" class="row">
-      <h2 class="title" [attr.data-e2e]="'app-card-title'">{{title}}</h2>
+      <h2 class="title" data-e2e="app-card-title">{{ title }}</h2>
      <span class="fill-space"></span>
      <ng-content select="[card-actions]"></ng-content>
-      <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button
-        (click)="expanded = !expanded">
+      <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button (click)="expanded = !expanded">
        <mat-icon *ngIf="!expanded">keyboard_arrow_down</mat-icon>
        <mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon>
      </button>
    </div>
-    <p *ngIf="description" class="desc cnsl-secondary-text">{{description}}</p>
+    <p *ngIf="description" class="desc cnsl-secondary-text">{{ description }}</p>
  </div>
  <div class="card-content" *ngIf="expanded" [@openClose]="animate">
    <ng-content></ng-content>
  </div>
-</div>
+</div>
@@ -3,7 +3,7 @@
    <p class="length">
      <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
    </p>
-    <p class="ts cnsl-secondary-text" *ngIf="timestamp" [attr.data-e2e]="'timestamp'">
+    <p class="ts cnsl-secondary-text" *ngIf="timestamp" data-e2e="timestamp">
      {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
    </p>
  </div>
@@ -1,4 +1,4 @@
-<div [attr.data-e2e]="'color'">
+<div data-e2e="color">
  <p class="name cnsl-secondary-text">{{ name }}</p>

  <div class="wrapper">
@@ -101,7 +101,7 @@
  <div *ngIf="previewData && data" class="lab-policy-content">
    <mat-accordion class="settings">
      <mat-expansion-panel class="expansion">
-        <mat-expansion-panel-header [attr.data-e2e]="'policy-category'">
+        <mat-expansion-panel-header data-e2e="policy-category">
          <mat-panel-title>
            <div class="panel-title">
              <i class="icon las la-image"></i>
@@ -127,7 +127,7 @@
            {{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }}
          </cnsl-info-section>

-          <div class="logo-view" [attr.data-e2e]="'image-part-logo'">
+          <div class="logo-view" data-e2e="image-part-logo">
            <span class="label cnsl-secondary-text">Logo</span>
            <div class="img-wrapper">
              <ng-container
@@ -198,7 +198,7 @@
            </div>
          </div>

-          <div class="logo-view" [attr.data-e2e]="'image-part-icon'">
+          <div class="logo-view" data-e2e="image-part-icon">
            <span class="label cnsl-secondary-text">Icon</span>
            <div class="img-wrapper icon">
              <ng-container
@@ -478,7 +478,7 @@
      </mat-expansion-panel>

      <mat-expansion-panel class="expansion">
-        <mat-expansion-panel-header class="header" [attr.data-e2e]="'policy-category'">
+        <mat-expansion-panel-header class="header" data-e2e="policy-category">
          <mat-panel-title>
            <div class="panel-title">
              <i class="icon las la-font"></i>
@@ -1,15 +1,25 @@
-<cnsl-refresh-table [showSelectionActionButton]="showSelectionActionButton" *ngIf="projectId"
-  (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult ?? 0"
-  [emitRefreshOnPreviousRoutes]="['/projects/'+projectId+'/roles/create']" [selection]="selection"
-  [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
-
+<cnsl-refresh-table
+  [showSelectionActionButton]="showSelectionActionButton"
+  *ngIf="projectId"
+  (refreshed)="refreshPage()"
+  [dataSize]="dataSource?.totalResult ?? 0"
+  [emitRefreshOnPreviousRoutes]="['/projects/' + projectId + '/roles/create']"
+  [selection]="selection"
+  [loading]="dataSource?.loading$ | async"
+  [timestamp]="dataSource?.viewTimestamp"
+>
  <ng-template cnslHasRole [hasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
-    <a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']"
-      color="primary" class="cnsl-action-button" mat-raised-button>
-      <mat-icon [attr.data-e2e]="'add-new-role'" class="icon">add</mat-icon>
+    <a
+      *ngIf="actionsVisible"
+      [disabled]="disabled"
+      [routerLink]="['/projects', projectId, 'roles', 'create']"
+      color="primary"
+      class="cnsl-action-button"
+      mat-raised-button
+    >
+      <mat-icon data-e2e="add-new-role" class="icon">add</mat-icon>
      <span>{{ 'ACTIONS.NEW' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', projectId, 'roles', 'create'])">
-      </cnsl-action-keys>
+      <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'roles', 'create'])"> </cnsl-action-keys>
    </a>
  </ng-template>

@@ -17,55 +27,70 @@
    <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
      <ng-container matColumnDef="select">
        <th class="selection" mat-header-cell *matHeaderCellDef>
-          <mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            [disabled]="disabled"
+            color="primary"
+            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
          </mat-checkbox>
        </th>
        <td class="selection" mat-cell *matCellDef="let row">
-          <mat-checkbox color="primary" [disabled]="disabled" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            color="primary"
+            [disabled]="disabled"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="key">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.KEY' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
          <div class="role-key">
-            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}
-            </cnsl-project-role-chip>
+            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}</cnsl-project-role-chip>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="displayname">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th>
-        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.displayName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</th>
+        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">{{ role.displayName }}</td>
      </ng-container>

      <ng-container matColumnDef="group">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.GROUP' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.GROUP' | translate }}</th>
        <td mat-cell *matCellDef="let role" class="pointer">
-          <span class="role state" [ngClass]="{'no-selection': !selectionAllowed}" *ngIf="role.group"
+          <span
+            class="role state"
+            [ngClass]="{ 'no-selection': !selectionAllowed }"
+            *ngIf="role.group"
            (click)="selectionAllowed ? selectAllOfGroup(role.group) : openDetailDialog(role)"
-            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null">{{role.group}}</span>
+            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null"
+            >{{ role.group }}</span
+          >
        </td>
      </ng-container>

      <ng-container matColumnDef="creationDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
-          <span *ngIf="role?.details?.creationDate">{{role.details.creationDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span *ngIf="role?.details?.creationDate">{{
+            role.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="changeDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CHANGEDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
-          <span *ngIf="role?.details?.changeDate">{{role.details.changeDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span *ngIf="role?.details?.changeDate">{{
+            role.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
        </td>
      </ng-container>

@@ -73,9 +98,16 @@
        <th mat-header-cell *matHeaderCellDef class="role-table-actions"></th>
        <td mat-cell *matCellDef="let role" class="role-table-actions">
          <cnsl-table-actions>
-            <button actions
-              [disabled]="disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false"
-              mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteRole(role)">
+            <button
+              actions
+              [disabled]="
+                disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false
+              "
+              mat-icon-button
+              color="warn"
+              matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+              (click)="deleteRole(role)"
+            >
              <i class="las la-trash"></i>
            </button>
          </cnsl-table-actions>
@@ -83,17 +115,22 @@
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns;">
-      </tr>
+      <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns"></tr>
    </table>
  </div>

  <div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
    <i class="las la-exclamation"></i>
-    <span>{{'PROJECT.ROLE.EMPTY' | translate}}</span>
+    <span>{{ 'PROJECT.ROLE.EMPTY' | translate }}</span>
  </div>

-  <cnsl-paginator #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult" [pageSize]="50"
-    (page)="changePage()" [pageSizeOptions]="[25, 50, 100, 250]">
+  <cnsl-paginator
+    #paginator
+    [timestamp]="dataSource?.viewTimestamp"
+    [length]="dataSource.totalResult"
+    [pageSize]="50"
+    (page)="changePage()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
  </cnsl-paginator>
-</cnsl-refresh-table>
+</cnsl-refresh-table>
@@ -14,7 +14,7 @@
          : []
      "
    >
-      <div class="p-item card" @policy [attr.data-e2e]="'policy-card'">
+      <div class="p-item card" @policy data-e2e="policy-card">
        <div class="avatar {{ setting.color }}">
          <mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
          <i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>
@@ -2,9 +2,14 @@
  <div class="cnsl-table-action">
    <ng-content select="[hoverActions]"></ng-content>
    <ng-content select="[actions]"></ng-content>
-    <button (click)="$event.stopPropagation()" *ngIf="hasActions" class="table-actions-trigger" mat-icon-button
+    <button
+      (click)="$event.stopPropagation()"
+      *ngIf="hasActions"
+      class="table-actions-trigger"
+      mat-icon-button
      [matMenuTriggerFor]="actions"
-      [attr.data-e2e]="'table-actions-button'">
+      data-e2e="table-actions-button"
+    >
      <mat-icon>more_horiz</mat-icon>
    </button>

@@ -12,4 +17,4 @@
      <ng-content select="[menuActions]"></ng-content>
    </mat-menu>
  </div>
-</div>
+</div>
@@ -10,7 +10,7 @@
  }}</cnsl-info-section>
  <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
    <cnsl-label>{{ data.confirmationKey | translate: { value: data.confirmation } }}</cnsl-label>
-    <input cnslInput [(ngModel)]="confirm" [attr.e2e-data]="'confirm-dialog-input'" />
+    <input cnslInput [(ngModel)]="confirm" data-e2e="confirm-dialog-input" />
  </cnsl-form-field>
 </div>
 <div mat-dialog-actions class="action">
@@ -24,7 +24,7 @@
    mat-raised-button
    class="ok-button"
    (click)="closeDialogWithSuccess()"
-    [attr.e2e-data]="'confirm-dialog-button'"
+    data-e2e="confirm-dialog-button"
  >
    {{ data.confirmKey | translate }}
  </button>