ci(e2e): Run Tests in Pipelines (#3903)

* cy10 changes

* test: setup local e2e env

* test(e2e): migrate e2e setup

* add more config

* make e2e setup work

* align variables

* fix config

* skip mfa

* set user register to false

* read ids from database if not provided

* don't read ids withing env file

* fix escaping in id queries

* fix project root

* export projectRoot path

* export projectRoot

* add e2e-setup.sh

* specify GOOS and GOARCH for dockerfile compatible binary

* add org default redirect uri

* correctly initialize org policy

* await ids

* fix awaiting ids

* fix cypress configuration

* fix some tests

* initial compose setup

* fix working directory

* fix references

* make tests less flaky

* run go tests

* compose works until e2e-setup incl

* pass created e2e sa key

* make cypress run

* derive e2e orgs domain from baseurl

* use host from baseurl for setup ctx

* move defaults.yaml back to cmd pkg

* just create org owner

* Don't render element if no roles are passed

* use map instead of switchMap

* fix e2e tests

* added testdata for e3e

* zipped dump

* removed dumpDir

* cypress workflow with compose

* quote name

* cleanup vars

* eliminate need for e2e setup

* compose has no builds anymore

* use compose run and zitadel nw

* test e2e on pr (#4114)

* test e2e on pr

* install goreleaser

* install npm dev dependencies

* run cypress wf

* dynamic release version

* skip flaky user tests

* skip flaky permissions test

* cache docker layers in pipeline

* Update .github/workflows/cypress.yml

Co-authored-by: Florian Forster <florian@caos.ch>

* align goreleaser version

* get rid of install.sh

* remove cypress-terminal-report

* Revert "remove cypress-terminal-report"

This reverts commit 254b5a1f87.

* just one npm e2e:build command

* cache npm dependencies

* install node modules using docker

* dedicated e2e context

* fix syntax

* don't copy node modules from goreleaser

* add npm-copy target

* add tsconfig.json

* remove docker caching

* deleted unneeded shellscript

* naming and cleanup

Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: Christian Jakob <christian@caos.ch>

* cleanup

Co-authored-by: Elio Bischof <eliobischof@gmail.com>
Co-authored-by: Christian Jakob <christian@caos.ch>
Co-authored-by: Florian Forster <florian@caos.ch>

console/src/app/modules/action-keys/action-keys.component.html

@@ -6,7 +6,7 @@
       <span>ESC</span>
     </div>
   </div>
-  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row">
+  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" [attr.data-e2e]="'action-key-add'">
     <div class="action-key">
       <div class="key-overlay"></div>
       <span>N</span>

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

@@ -3,7 +3,7 @@
     <p class="length">
       <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
     </p>
-    <p class="ts cnsl-secondary-text" *ngIf="timestamp">
+    <p class="ts cnsl-secondary-text" *ngIf="timestamp" [attr.data-e2e]="'timestamp'">
       {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
     </p>
   </div>

console/src/app/modules/project-roles-table/project-roles-table.component.html

@@ -5,8 +5,8 @@
 
   <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 [attr.data-e2e]="'add-new-role'">
-      <mat-icon class="icon">add</mat-icon>
+      color="primary" class="cnsl-action-button" mat-raised-button>
+      <mat-icon [attr.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>

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

@@ -3,7 +3,8 @@
     <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
-      [matMenuTriggerFor]="actions">
+      [matMenuTriggerFor]="actions"
+      [attr.data-e2e]="'table-actions-button'">
       <mat-icon>more_horiz</mat-icon>
     </button>
 

console/src/app/pages/projects/project-list/project-list.component.html

@@ -84,7 +84,8 @@
           <td mat-cell *matCellDef="let project">
             <cnsl-table-actions>
               <button actions *ngIf="project.id !== zitadelProjectId" color="warn" mat-icon-button
-                matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.id, project.name)">
+                matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.id, project.name)"
+                [attr.data-e2e]="'delete-project-button'">
                 <i class="las la-trash"></i>
               </button>
             </cnsl-table-actions>

console/src/app/pages/users/user-list/user-table/user-table.component.html

@@ -13,11 +13,13 @@
       label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
       (clicked)="setType(Type.TYPE_HUMAN)"
       [active]="type === Type.TYPE_HUMAN"
+      [attr.data-e2e]="'list-humans'"
     ></cnsl-nav-toggle>
     <cnsl-nav-toggle
       label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
       (clicked)="setType(Type.TYPE_MACHINE)"
       [active]="type === Type.TYPE_MACHINE"
+      [attr.data-e2e]="'list-machines'"
     ></cnsl-nav-toggle>
   </div>
 
@@ -56,6 +58,7 @@
       mat-raised-button
       [disabled]="!canWrite"
       class="cnsl-action-button"
+      [attr.data-e2e]="'create-user-button'"
     >
       <mat-icon class="icon">add</mat-icon>
       <span>{{ 'ACTIONS.NEW' | translate }}</span>
@@ -194,6 +197,7 @@
               color="warn"
               (click)="deleteUser(user)"
               [disabled]="!canWrite || !canDelete"
+              [attr.e2e-data]="!canWrite || !canDelete ? 'disabled-delete-button' : 'enabled-delete-button'"
               mat-icon-button
             >
               <i class="las la-trash"></i>