test(e2e): test authorizations (#4342)

* add specs that cover the b2b demo

* update cypress

* test handling manager roles

* use shared mocha contexts

* use beforeEach instead of before

* improve readability

* improve application test

* remove static waits

* remove old awaitDesired

* test owned project authorizations

* simplify ensure.ts

* test granted projects authz

* disable prevSubject for shouldNotExist

* await non-existence, then expect no error

* update dependencies

* fix tests from scratch

* fix settings tests from scratch

* Apply suggestions from code review

Co-authored-by: Max Peintner <max@caos.ch>

* Implement code review suggestions

* use spread operator

* settings properties must match

* add check settings object

* revert spread operator

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/directives/copy-to-clipboard/copy-to-clipboard.directive.ts

@@ -7,7 +7,7 @@ export class CopyToClipboardDirective {
   @Input() valueToCopy: string = '';
   @Output() copiedValue: EventEmitter<string> = new EventEmitter();
 
-  @HostListener('click', ['$event']) onMouseEnter($event: any): void {
+  @HostListener('click', ['$event']) onClick($event: any): void {
     $event.preventDefault();
     $event.stopPropagation();
     this.copytoclipboard(this.valueToCopy);

console/src/app/modules/add-member-dialog/member-create-dialog.component.html

@@ -44,7 +44,7 @@
     >
       <div class="role-cb-content">
         <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
-        <span>{{ role | roletransform }}</span>
+        <span data-e2e="role-checkbox">{{ role | roletransform }}</span>
         <i class="info-hover las la-question-circle" matTooltip="{{ 'MEMBERROLES.' + role | translate }}"></i>
       </div>
     </mat-checkbox>
@@ -61,6 +61,7 @@
     mat-raised-button
     class="ok-button"
     (click)="closeDialogWithSuccess()"
+    data-e2e="confirm-add-member-button"
   >
     {{ 'ACTIONS.ADD' | translate }}
   </button>

console/src/app/modules/contributors/contributors.component.html

@@ -10,6 +10,7 @@
             class="contributor-avatar-circle"
             matTooltip="{{ member.displayName }} | {{ member.rolesList | roletransform }}"
             [ngStyle]="{ 'z-index': 20 - i }"
+            data-e2e="member-avatar"
           >
             <cnsl-avatar
               *ngIf="member && member.displayName && member.firstName && member.lastName; else cog"
@@ -40,6 +41,7 @@
         [disabled]="disabled"
         mat-icon-button
         aria-label="Add member"
+        data-e2e="add-member-button"
       >
         <mat-icon>add</mat-icon>
       </button>

console/src/app/modules/info-row/info-row.component.html

@@ -41,6 +41,7 @@
         cnslCopyToClipboard
         [valueToCopy]="login"
         (copiedValue)="copied = $event"
+        data-e2e="copy-loginname"
       >
         {{ login }}
       </button>

console/src/app/modules/members-table/members-table.component.html

@@ -93,6 +93,7 @@
               (click)="$event.stopPropagation(); triggerDeleteMember(member)"
               mat-icon-button
               [disabled]="canDelete === false"
+              data-e2e="remove-member-button"
             >
               <i class="las la-trash"></i>
             </button>
@@ -114,10 +115,11 @@
               [removable]="canWrite"
               [selectable]="false"
               (removed)="removeRole(member, role)"
+              data-e2e="role"
             >
               <div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
               <span>{{ role | roletransform }}</span>
-              <button *ngIf="canWrite" matChipRemove>
+              <button *ngIf="canWrite" matChipRemove data-e2e="remove-role-button">
                 <mat-icon>cancel</mat-icon>
               </button>
             </mat-chip>

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html

@@ -65,6 +65,7 @@
           [formControl]="myControl"
           placeholder="johndoe@domain.com"
           [matAutocomplete]="auto"
+          data-e2e="add-member-input"
         />
 
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
@@ -72,7 +73,7 @@
             <mat-spinner diameter="30"></mat-spinner>
           </mat-option>
           <mat-option *ngFor="let user of filteredUsers" [value]="user">
-            <div class="user-option">
+            <div class="user-option" data-e2e="user-option">
               <div class="circle">
                 <cnsl-avatar
                   *ngIf="

console/src/app/modules/sidenav/sidenav.component.html

@@ -35,6 +35,7 @@
             "
             class="sidenav-setting-list-element hide-on-mobile"
             [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }"
+            [attr.data-e2e]="'sidenav-element-' + setting.id"
           >
             <span>{{ setting.i18nKey | translate }}</span>
             <mat-icon *ngIf="setting.showWarn" class="warn-icon" svgIcon="mdi_shield_alert"></mat-icon>

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -58,8 +58,10 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     breadcrumbService.setBreadcrumb([bread]);
 
     auth.activeOrgChanged.pipe(takeUntil(this.destroy$)).subscribe((org) => {
-      this.getData();
-      this.loadMetadata();
+      if (this.org && org) {
+        this.getData();
+        this.loadMetadata();
+      }
     });
   }
 

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -117,6 +117,7 @@
         [urisList]="oidcAppRequest.toObject().redirectUrisList"
         [getValues]="requestRedirectValuesSubject$"
         title="{{ 'APP.OIDC.REDIRECT' | translate }}"
+        data-e2e="redirect-uris"
       >
       </cnsl-redirect-uris>
 
@@ -145,6 +146,7 @@
         title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
         [getValues]="requestRedirectValuesSubject$"
         [isNative]="appType?.value.oidcAppType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
+        data-e2e="postlogout-uris"
       >
       </cnsl-redirect-uris>
 

console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html

@@ -4,7 +4,7 @@
 <p class="desc cnsl-secondary-text">{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}</p>
 <div mat-dialog-content>
   <div class="flex" *ngIf="data.clientId">
-    <span class="overflow-auto"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
+    <span class="overflow-auto" data-e2e="client-id"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
     <button
       color="primary"
       [disabled]="copied === data.clientId"
@@ -13,6 +13,7 @@
       [valueToCopy]="data.clientId"
       (copiedValue)="this.copied = $event"
       mat-icon-button
+      data-e2e="client-id-copy"
     >
       <i *ngIf="copied !== data.clientId" class="las la-clipboard"></i>
       <i *ngIf="copied === data.clientId" class="las la-clipboard-check"></i>

console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html

@@ -1,4 +1,4 @@
-<form class="redirect-uris-form" (ngSubmit)="add(redInput)" data-e2e="redirect-uris">
+<form class="redirect-uris-form" (ngSubmit)="add(redInput)">
   <cnsl-form-field class="formfield">
     <cnsl-label>{{ title }}</cnsl-label>