TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 23:27:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 <eliobischof@gmail.com>

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

Co-authored-by: Elio Bischof <eliobischof@gmail.com>

* fix ,

Co-authored-by: Elio Bischof <eliobischof@gmail.com>
This commit is contained in:
Max Peintner
2022-08-16 14:02:59 +02:00
committed by GitHub
parent dcac08b1d5
commit 44fc2efbb7
27 changed files with 375 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
console/src/app/modules/action-keys/action-keys.component.html
View File

@@ -1,12 +1,16 @@
<div *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false" class="action-keys-wrapper" <div
[ngSwitch]="type" [ngClass]="{'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast}"> *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 *ngSwitchCase="ActionKeysType.CLEAR" class="action-keys-row">
<div class="action-key esc"> <div class="action-key esc">
<div class="key-overlay"></div> <div class="key-overlay"></div>
<span>ESC</span> <span>ESC</span>
</div> </div>
</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="action-key">
<div class="key-overlay"></div> <div class="key-overlay"></div>
<span>N</span> <span>N</span>
@@ -38,7 +42,6 @@
<div class="action-key"> <div class="action-key">
<div class="key-overlay"></div> <div class="key-overlay"></div>
<span *ngIf="isMacLike || isIOS; else otherOS">⌘</span> <span *ngIf="isMacLike || isIOS; else otherOS">⌘</span>
</div> </div>
+ +
<div class="action-key"> <div class="action-key">

11
console/src/app/modules/card/card.component.html
View File

@@ -1,16 +1,15 @@
<div class="card" [ngClass]="{'nomargin': nomargin, 'stretch': stretch, 'warn': warn}" [attr.data-e2e]="'app-card'"> <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 || description" class="header" [ngClass]="{ 'bottom-margin': expanded }">
<div *ngIf="title" class="row"> <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> <span class="fill-space"></span>
<ng-content select="[card-actions]"></ng-content> <ng-content select="[card-actions]"></ng-content>
<button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button (click)="expanded = !expanded">
(click)="expanded = !expanded">
<mat-icon *ngIf="!expanded">keyboard_arrow_down</mat-icon> <mat-icon *ngIf="!expanded">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon>
</button> </button>
</div> </div>
<p *ngIf="description" class="desc cnsl-secondary-text">{{description}}</p> <p *ngIf="description" class="desc cnsl-secondary-text">{{ description }}</p>
</div> </div>
<div class="card-content" *ngIf="expanded" [@openClose]="animate"> <div class="card-content" *ngIf="expanded" [@openClose]="animate">
<ng-content></ng-content> <ng-content></ng-content>

2
console/src/app/modules/paginator/paginator.component.html
View File

@@ -3,7 +3,7 @@
<p class="length"> <p class="length">
<span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }} <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
</p> </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' }} {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
</p> </p>
</div> </div>

2
console/src/app/modules/policies/private-labeling-policy/color/color.component.html
View File

@@ -1,4 +1,4 @@
<div [attr.data-e2e]="'color'"> <div data-e2e="color">
<p class="name cnsl-secondary-text">{{ name }}</p> <p class="name cnsl-secondary-text">{{ name }}</p>
<div class="wrapper"> <div class="wrapper">

8
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
View File

@@ -101,7 +101,7 @@
<div *ngIf="previewData && data" class="lab-policy-content"> <div *ngIf="previewData && data" class="lab-policy-content">
<mat-accordion class="settings"> <mat-accordion class="settings">
<mat-expansion-panel class="expansion"> <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> <mat-panel-title>
<div class="panel-title"> <div class="panel-title">
<i class="icon las la-image"></i> <i class="icon las la-image"></i>
@@ -127,7 +127,7 @@
{{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }} {{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }}
</cnsl-info-section> </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> <span class="label cnsl-secondary-text">Logo</span>
<div class="img-wrapper"> <div class="img-wrapper">
<ng-container <ng-container
@@ -198,7 +198,7 @@
</div> </div>
</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> <span class="label cnsl-secondary-text">Icon</span>
<div class="img-wrapper icon"> <div class="img-wrapper icon">
<ng-container <ng-container
@@ -478,7 +478,7 @@
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel class="expansion"> <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> <mat-panel-title>
<div class="panel-title"> <div class="panel-title">
<i class="icon las la-font"></i> <i class="icon las la-font"></i>

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

@@ -1,15 +1,25 @@
<cnsl-refresh-table [showSelectionActionButton]="showSelectionActionButton" *ngIf="projectId" <cnsl-refresh-table
(refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult ?? 0" [showSelectionActionButton]="showSelectionActionButton"
[emitRefreshOnPreviousRoutes]="['/projects/'+projectId+'/roles/create']" [selection]="selection" *ngIf="projectId"
[loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp"> (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> <ng-template cnslHasRole [hasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
<a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']" <a
color="primary" class="cnsl-action-button" mat-raised-button> *ngIf="actionsVisible"
<mat-icon [attr.data-e2e]="'add-new-role'" class="icon">add</mat-icon> [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> <span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', projectId, 'roles', 'create'])"> <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'roles', 'create'])"> </cnsl-action-keys>
</cnsl-action-keys>
</a> </a>
</ng-template> </ng-template>
@@ -17,55 +27,70 @@
<table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements"> <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
<ng-container matColumnDef="select"> <ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef> <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()" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"> [indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox> </mat-checkbox>
</th> </th>
<td class="selection" mat-cell *matCellDef="let row"> <td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" [disabled]="disabled" (click)="$event.stopPropagation()" <mat-checkbox
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"> color="primary"
[disabled]="disabled"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox> </mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="key"> <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"> <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
<div class="role-key"> <div class="role-key">
<cnsl-project-role-chip [roleName]="role.key">{{ role.key }} <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}</cnsl-project-role-chip>
</cnsl-project-role-chip>
</div> </div>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="displayname"> <ng-container matColumnDef="displayname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th> <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> <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">{{ role.displayName }}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="group"> <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"> <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)" (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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="creationDate"> <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"> <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
<span *ngIf="role?.details?.creationDate">{{role.details.creationDate | timestampToDate | <span *ngIf="role?.details?.creationDate">{{
localizedDate: 'dd. MMM, HH:mm' }}</span> role.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
}}</span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="changeDate"> <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"> <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
<span *ngIf="role?.details?.changeDate">{{role.details.changeDate | timestampToDate | <span *ngIf="role?.details?.changeDate">{{
localizedDate: 'dd. MMM, HH:mm' }}</span> role.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
}}</span>
</td> </td>
</ng-container> </ng-container>
@@ -73,9 +98,16 @@
<th mat-header-cell *matHeaderCellDef class="role-table-actions"></th> <th mat-header-cell *matHeaderCellDef class="role-table-actions"></th>
<td mat-cell *matCellDef="let role" class="role-table-actions"> <td mat-cell *matCellDef="let role" class="role-table-actions">
<cnsl-table-actions> <cnsl-table-actions>
<button actions <button
[disabled]="disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false" actions
mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteRole(role)"> [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> <i class="las la-trash"></i>
</button> </button>
</cnsl-table-actions> </cnsl-table-actions>
@@ -83,17 +115,22 @@
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns;"> <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns"></tr>
</tr>
</table> </table>
</div> </div>
<div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row"> <div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
<i class="las la-exclamation"></i> <i class="las la-exclamation"></i>
<span>{{'PROJECT.ROLE.EMPTY' | translate}}</span> <span>{{ 'PROJECT.ROLE.EMPTY' | translate }}</span>
</div> </div>
<cnsl-paginator #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult" [pageSize]="50" <cnsl-paginator
(page)="changePage()" [pageSizeOptions]="[25, 50, 100, 250]"> #paginator
[timestamp]="dataSource?.viewTimestamp"
[length]="dataSource.totalResult"
[pageSize]="50"
(page)="changePage()"
[pageSizeOptions]="[25, 50, 100, 250]"
>
</cnsl-paginator> </cnsl-paginator>
</cnsl-refresh-table> </cnsl-refresh-table>

2
console/src/app/modules/settings-grid/settings-grid.component.html
View File

@@ -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 }}"> <div class="avatar {{ setting.color }}">
<mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon> <mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
<i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i> <i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>

9
console/src/app/modules/table-actions/table-actions.component.html
View File

@@ -2,9 +2,14 @@
<div class="cnsl-table-action"> <div class="cnsl-table-action">
<ng-content select="[hoverActions]"></ng-content> <ng-content select="[hoverActions]"></ng-content>
<ng-content select="[actions]"></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" [matMenuTriggerFor]="actions"
[attr.data-e2e]="'table-actions-button'"> data-e2e="table-actions-button"
>
<mat-icon>more_horiz</mat-icon> <mat-icon>more_horiz</mat-icon>
</button> </button>

4
console/src/app/modules/warn-dialog/warn-dialog.component.html
View File

@@ -10,7 +10,7 @@
}}</cnsl-info-section> }}</cnsl-info-section>
<cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield"> <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
<cnsl-label>{{ data.confirmationKey | translate: { value: data.confirmation } }}</cnsl-label> <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> </cnsl-form-field>
</div> </div>
<div mat-dialog-actions class="action"> <div mat-dialog-actions class="action">
@@ -24,7 +24,7 @@
mat-raised-button mat-raised-button
class="ok-button" class="ok-button"
(click)="closeDialogWithSuccess()" (click)="closeDialogWithSuccess()"
[attr.e2e-data]="'confirm-dialog-button'" data-e2e="confirm-dialog-button"
> >
{{ data.confirmKey | translate }} {{ data.confirmKey | translate }}
</button> </button>

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

@@ -40,7 +40,7 @@
[disabled]="firstFormGroup.invalid" [disabled]="firstFormGroup.invalid"
color="primary" color="primary"
matStepperNext matStepperNext
[attr.data-e2e]="'continue-button-nameandtype'" data-e2e="continue-button-nameandtype"
> >
{{ 'ACTIONS.CONTINUE' | translate }} {{ 'ACTIONS.CONTINUE' | translate }}
</button> </button>
@@ -72,7 +72,7 @@
color="primary" color="primary"
[disabled]="secondFormGroup.invalid" [disabled]="secondFormGroup.invalid"
matStepperNext matStepperNext
[attr.data-e2e]="'continue-button-authmethod'" data-e2e="continue-button-authmethod"
> >
{{ 'ACTIONS.CONTINUE' | translate }} {{ 'ACTIONS.CONTINUE' | translate }}
</button> </button>
@@ -130,7 +130,7 @@
<div class="app-create-actions"> <div class="app-create-actions">
<button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button> <button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
<button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'"> <button mat-raised-button color="primary" matStepperNext data-e2e="continue-button-redirecturis">
{{ 'ACTIONS.CONTINUE' | translate }} {{ 'ACTIONS.CONTINUE' | translate }}
</button> </button>
</div> </div>
@@ -234,13 +234,7 @@
<div class="app-create-actions"> <div class="app-create-actions">
<button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button> <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
<button <button mat-raised-button class="create-button" color="primary" (click)="createApp()" data-e2e="create-button">
mat-raised-button
class="create-button"
color="primary"
(click)="createApp()"
[attr.data-e2e]="'create-button'"
>
{{ 'ACTIONS.CREATE' | translate }} {{ 'ACTIONS.CREATE' | translate }}
</button> </button>
</div> </div>
@@ -248,7 +242,7 @@
</mat-horizontal-stepper> </mat-horizontal-stepper>
<div *ngIf="devmode" class="dev"> <div *ngIf="devmode" class="dev">
<form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'"> <form [formGroup]="form" (ngSubmit)="createApp()" data-e2e="create-app-wizzard-3">
<div class="content"> <div class="content">
<cnsl-form-field class="formfield"> <cnsl-form-field class="formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label> <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>

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

@@ -46,7 +46,7 @@
mat-raised-button mat-raised-button
class="ok-button" class="ok-button"
(click)="closeDialog()" (click)="closeDialog()"
[attr.data-e2e]="'close-dialog'" data-e2e="close-dialog"
> >
{{ 'ACTIONS.CLOSE' | translate }} {{ 'ACTIONS.CLOSE' | translate }}
</button> </button>

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

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

4
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
View File

@@ -12,7 +12,7 @@
<div <div
[routerLink]="['/projects', projectId, 'apps', app.id]" [routerLink]="['/projects', projectId, 'apps', app.id]"
[attr.data-e2e]="'app-card'" data-e2e="app-card"
class="app-wrap" class="app-wrap"
*ngFor="let app of appsSubject | async" *ngFor="let app of appsSubject | async"
matTooltip="{{ 'ACTIONS.EDIT' | translate }}" matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
@@ -37,7 +37,7 @@
<div <div
class="app-wrap" class="app-wrap"
*ngIf="!disabled" *ngIf="!disabled"
[attr.data-e2e]="'app-card-add'" data-e2e="app-card-add"
[routerLink]="['/projects', projectId, 'apps', 'create']" [routerLink]="['/projects', projectId, 'apps', 'create']"
> >
<cnsl-app-card class="grid-card" matRipple [type]="OIDCAppType.ADD"> <cnsl-app-card class="grid-card" matRipple [type]="OIDCAppType.ADD">

2
console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
View File

@@ -46,7 +46,7 @@
class="continue-button" class="continue-button"
[disabled]="formArray.invalid" [disabled]="formArray.invalid"
type="submit" type="submit"
[attr.data-e2e]="'save-button'" data-e2e="save-button"
> >
{{ 'ACTIONS.SAVE' | translate }} {{ 'ACTIONS.SAVE' | translate }}
</button> </button>

2
console/src/app/pages/projects/project-create/project-create.component.html
View File

@@ -20,7 +20,7 @@
[disabled]="!project.name" [disabled]="!project.name"
cdkFocusInitial cdkFocusInitial
type="submit" type="submit"
[attr.data-e2e]="'continue-button'" data-e2e="continue-button"
> >
{{ 'ACTIONS.CONTINUE' | translate }} {{ 'ACTIONS.CONTINUE' | translate }}
</button> </button>

4
console/src/app/pages/projects/project-grid/project-grid.component.html
View File

@@ -47,7 +47,7 @@
*ngFor="let item of notPinned; index as i" *ngFor="let item of notPinned; index as i"
(click)="navigateToProject(type, $any(item), $event)" (click)="navigateToProject(type, $any(item), $event)"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }" [ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
[attr.data-e2e]="'grid-card'" data-e2e="grid-card"
> >
<div class="text-part"> <div class="text-part">
<span *ngIf="item.details && item.details.changeDate" class="top cnsl-secondary-text" <span *ngIf="item.details && item.details.changeDate" class="top cnsl-secondary-text"
@@ -106,7 +106,7 @@
(click)="deleteProject($event, key)" (click)="deleteProject($event, key)"
class="delete-button" class="delete-button"
mat-icon-button mat-icon-button
[attr.data-e2e]="'delete-project-button'" data-e2e="delete-project-button"
> >
<i class="las la-trash"></i> <i class="las la-trash"></i>
</button> </button>

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

@@ -1,81 +1,136 @@
<div class="projects-table-wrapper" *ngIf="projectType$ | async as type"> <div class="projects-table-wrapper" *ngIf="projectType$ | async as type">
<cnsl-refresh-table [hideRefresh]="true" (refreshed)="refreshPage(type)" [dataSize]="totalResult" <cnsl-refresh-table
[timestamp]="viewTimestamp" [selection]="selection" [loading]="loading$ | async"> [hideRefresh]="true"
(refreshed)="refreshPage(type)"
<cnsl-filter-project actions *ngIf="!selection.hasValue()" (filterChanged)="applySearchQuery(type, $any($event))" [dataSize]="totalResult"
(filterOpen)="filterOpen = $event"></cnsl-filter-project> [timestamp]="viewTimestamp"
[selection]="selection"
[loading]="loading$ | async"
>
<cnsl-filter-project
actions
*ngIf="!selection.hasValue()"
(filterChanged)="applySearchQuery(type, $any($event))"
(filterOpen)="filterOpen = $event"
></cnsl-filter-project>
<ng-template actions cnslHasRole [hasRole]="['project.create']"> <ng-template actions cnslHasRole [hasRole]="['project.create']">
<a *ngIf="type === ProjectType.PROJECTTYPE_OWNED" [routerLink]="[ '/projects', 'create']" color="primary" <a
mat-raised-button class="cnsl-action-button"> *ngIf="type === ProjectType.PROJECTTYPE_OWNED"
[routerLink]="['/projects', 'create']"
color="primary"
mat-raised-button
class="cnsl-action-button"
>
<mat-icon class="icon">add</mat-icon> <mat-icon class="icon">add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span> <span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', 'create'])"> <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', 'create'])"> </cnsl-action-keys>
</cnsl-action-keys>
</a> </a>
</ng-template> </ng-template>
<div class="table-wrapper"> <div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource"> <table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select"> <ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef> <th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null" <mat-checkbox
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"> [indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox> </mat-checkbox>
</th> </th>
<td class="selection" mat-cell *matCellDef="let row"> <td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()" <mat-checkbox
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"> color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox> </mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th> <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.NAME' | translate }}</th>
<td class="pointer" <td
[routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]" class="pointer"
mat-cell *matCellDef="let project"> [routerLink]="
<span *ngIf="project.name">{{project.name}}</span> type === ProjectType.PROJECTTYPE_OWNED
<span *ngIf="project.projectName">{{project.projectName}}</span> ? ['/projects', project.id]
: ['/granted-projects', project.projectId, 'grant', project.grantId]
"
mat-cell
*matCellDef="let project"
>
<span *ngIf="project.name">{{ project.name }}</span>
<span *ngIf="project.projectName">{{ project.projectName }}</span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="projectOwnerName"> <ng-container matColumnDef="projectOwnerName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th> <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }}</th>
<td class="pointer" mat-cell *matCellDef="let project"> <td class="pointer" mat-cell *matCellDef="let project">
{{project.projectOwnerName}} </td> {{ project.projectOwnerName }}
</td>
</ng-container> </ng-container>
<ng-container matColumnDef="state"> <ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th> <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.STATE' | translate }}</th>
<td class="pointer" <td
[routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]" class="pointer"
mat-cell *matCellDef="let project"> [routerLink]="
<span class="state" type === ProjectType.PROJECTTYPE_OWNED
[ngClass]="{'active': project.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECT_STATE_INACTIVE}" ? ['/projects', project.id]
*ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span> : ['/granted-projects', project.projectId, 'grant', project.grantId]
"
mat-cell
*matCellDef="let project"
>
<span
class="state"
[ngClass]="{
active: project.state === ProjectState.PROJECT_STATE_ACTIVE,
inactive: project.state === ProjectState.PROJECT_STATE_INACTIVE
}"
*ngIf="project.state"
>{{ 'PROJECT.STATE.' + project.state | translate }}</span
>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="creationDate"> <ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th> <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CREATIONDATE' | translate }}</th>
<td class="pointer" <td
[routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]" class="pointer"
mat-cell *matCellDef="let project"> [routerLink]="
<span *ngIf="project.details.creationDate">{{project.details.creationDate | timestampToDate | type === ProjectType.PROJECTTYPE_OWNED
localizedDate: 'EEE dd. MMM, HH:mm'}}</span> ? ['/projects', project.id]
: ['/granted-projects', project.projectId, 'grant', project.grantId]
"
mat-cell
*matCellDef="let project"
>
<span *ngIf="project.details.creationDate">{{
project.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="changeDate"> <ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th> <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CHANGEDATE' | translate }}</th>
<td class="pointer" <td
[routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]" class="pointer"
mat-cell *matCellDef="let project"> [routerLink]="
<span *ngIf="project.details.changeDate">{{project.details.changeDate | timestampToDate | type === ProjectType.PROJECTTYPE_OWNED
localizedDate: 'EEE dd. MMM, HH:mm'}}</span> ? ['/projects', project.id]
: ['/granted-projects', project.projectId, 'grant', project.grantId]
"
mat-cell
*matCellDef="let project"
>
<span *ngIf="project.details.changeDate">{{
project.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
</td> </td>
</ng-container> </ng-container>
@@ -83,9 +138,15 @@
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let project"> <td mat-cell *matCellDef="let project">
<cnsl-table-actions> <cnsl-table-actions>
<button actions *ngIf="project.id !== zitadelProjectId" color="warn" mat-icon-button <button
matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.id, project.name)" actions
[attr.data-e2e]="'delete-project-button'"> *ngIf="project.id !== zitadelProjectId"
color="warn"
mat-icon-button
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
(click)="deleteProject(project.id, project.name)"
data-e2e="delete-project-button"
>
<i class="las la-trash"></i> <i class="las la-trash"></i>
</button> </button>
</cnsl-table-actions> </cnsl-table-actions>
@@ -93,15 +154,21 @@
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table> </table>
</div> </div>
<div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row"> <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
<i class="las la-exclamation"></i> <i class="las la-exclamation"></i>
<span>{{'PROJECT.TABLE.EMPTY' | translate}}</span> <span>{{ 'PROJECT.TABLE.EMPTY' | translate }}</span>
</div> </div>
<cnsl-paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult" [pageSize]="20" <cnsl-paginator
[pageSizeOptions]="[10, 20, 50, 100]" (page)="changePage(type)"></cnsl-paginator> class="paginator"
[timestamp]="viewTimestamp"
[length]="totalResult"
[pageSize]="20"
[pageSizeOptions]="[10, 20, 50, 100]"
(page)="changePage(type)"
></cnsl-paginator>
</cnsl-refresh-table> </cnsl-refresh-table>
</div> </div>

2
console/src/app/pages/projects/projects.component.html
View File

@@ -25,7 +25,7 @@
</div> </div>
<span class="fill-space"></span> <span class="fill-space"></span>
<button class="grid-btn" (click)="grid = !grid" mat-icon-button [attr.data-e2e]="'toggle-grid'"> <button class="grid-btn" (click)="grid = !grid" mat-icon-button data-e2e="toggle-grid">
<i *ngIf="grid" class="show list view las la-th-list"></i> <i *ngIf="grid" class="show list view las la-th-list"></i>
<i *ngIf="!grid" class="las la-border-all"></i> <i *ngIf="!grid" class="las la-border-all"></i>
</button> </button>

8
console/src/app/pages/users/user-create-machine/user-create-machine.component.html
View File

@@ -32,13 +32,7 @@
</cnsl-form-field> </cnsl-form-field>
</div> </div>
<div class="machine-btn-container"> <div class="machine-btn-container">
<button <button color="primary" data-e2e="create-button" [disabled]="userForm.invalid" type="submit" mat-raised-button>
color="primary"
[attr.data-e2e]="'create-button'"
[disabled]="userForm.invalid"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.CREATE' | translate }} {{ 'ACTIONS.CREATE' | translate }}
</button> </button>
</div> </div>

2
console/src/app/pages/users/user-create/user-create.component.html
View File

@@ -149,7 +149,7 @@
</div> </div>
<div class="user-create-btn-container"> <div class="user-create-btn-container">
<button <button
[attr.data-e2e]="'create-button'" data-e2e="create-button"
color="primary" color="primary"
[disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)" [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
type="submit" type="submit"

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

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

73
e2e/cypress/e2e/humans/humans.cy.ts
View File

@@ -1,57 +1,68 @@
import { apiAuth } from '../../support/api/apiauth'; import { apiAuth } from "../../support/api/apiauth";
import { ensureHumanUserExists, ensureUserDoesntExist } from '../../support/api/users'; import {
import { loginname } from '../../support/login/users'; ensureHumanUserExists,
ensureUserDoesntExist,
} from "../../support/api/users";
import { loginname } from "../../support/login/users";
describe.skip('humans', () => { describe.skip("humans", () => {
const humansPath = `/ui/console/users?type=human`; const humansPath = `/ui/console/users?type=human`;
const testHumanUserNameAdd = 'e2ehumanusernameadd'; const testHumanUserNameAdd = "e2ehumanusernameadd";
const testHumanUserNameRemove = 'e2ehumanusernameremove'; const testHumanUserNameRemove = "e2ehumanusernameremove";
describe('add', () => { describe("add", () => {
before(`ensure it doesn't exist already`, () => { before(`ensure it doesn't exist already`, () => {
apiAuth().then((apiCallProperties) => { apiAuth().then((apiCallProperties) => {
ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(()=>{ ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(
cy.visit(humansPath); () => {
}); cy.visit(humansPath);
}
);
}); });
}); });
it('should add a user', () => { it("should add a user", () => {
cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click(); cy.get('[data-e2e="action-key-add"]')
cy.url().should('contain', 'users/create'); .parents('[data-e2e="create-user-button"]')
cy.get('[formcontrolname="email"]').type(loginname('e2ehuman')); .click();
cy.url().should("contain", "users/create");
cy.get('[formcontrolname="email"]').type(loginname("e2ehuman"));
//force needed due to the prefilled username prefix //force needed due to the prefilled username prefix
cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, { force: true }); cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, {
cy.get('[formcontrolname="firstName"]').type('e2ehumanfirstname'); force: true,
cy.get('[formcontrolname="lastName"]').type('e2ehumanlastname'); });
cy.get('[formcontrolname="phone"]').type('+41 123456789'); cy.get('[formcontrolname="firstName"]').type("e2ehumanfirstname");
cy.get('[formcontrolname="lastName"]').type("e2ehumanlastname");
cy.get('[formcontrolname="phone"]').type("+41 123456789");
cy.get('[data-e2e="create-button"]').click(); cy.get('[data-e2e="create-button"]').click();
cy.get('.data-e2e-success'); cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
describe('remove', () => { describe("remove", () => {
before('ensure it exists', () => { before("ensure it exists", () => {
apiAuth().then((api) => { apiAuth().then((api) => {
ensureHumanUserExists(api, testHumanUserNameRemove).then(()=>{ ensureHumanUserExists(api, testHumanUserNameRemove).then(() => {
cy.visit(humansPath); cy.visit(humansPath);
}); });
}); });
}); });
it('should delete a human user', () => { it("should delete a human user", () => {
cy.contains('tr', testHumanUserNameRemove) cy.contains("tr", testHumanUserNameRemove)
// doesn't work, need to force click. // doesn't work, need to force click.
// .trigger('mouseover') // .trigger('mouseover')
.find('[e2e-data="enabled-delete-button"]') .find('[data-e2e="enabled-delete-button"]')
.click({force: true}); .click({ force: true });
cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testHumanUserNameRemove, Cypress.env('org'))); cy.get('[data-e2e="confirm-dialog-input"]')
cy.get('[e2e-data="confirm-dialog-button"]').click(); .click()
cy.get('.data-e2e-success'); .type(loginname(testHumanUserNameRemove, Cypress.env("org")));
cy.get('[data-e2e="confirm-dialog-button"]').click();
cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
}); });

69
e2e/cypress/e2e/machines/machines.cy.ts
View File

@@ -1,55 +1,66 @@
import { apiAuth } from '../../support/api/apiauth'; import { apiAuth } from "../../support/api/apiauth";
import { ensureMachineUserExists, ensureUserDoesntExist } from '../../support/api/users'; import {
import { loginname } from '../../support/login/users'; ensureMachineUserExists,
ensureUserDoesntExist,
} from "../../support/api/users";
import { loginname } from "../../support/login/users";
describe.skip('machines', () => { describe.skip("machines", () => {
const machinesPath = `/ui/console/users?type=machine`; const machinesPath = `/ui/console/users?type=machine`;
const testMachineUserNameAdd = 'e2emachineusernameadd'; const testMachineUserNameAdd = "e2emachineusernameadd";
const testMachineUserNameRemove = 'e2emachineusernameremove'; const testMachineUserNameRemove = "e2emachineusernameremove";
describe('add', () => { describe("add", () => {
before(`ensure it doesn't exist already`, () => { before(`ensure it doesn't exist already`, () => {
apiAuth().then((apiCallProperties) => { apiAuth().then((apiCallProperties) => {
ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(()=>{ ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(
cy.visit(machinesPath); () => {
}); cy.visit(machinesPath);
}
);
}); });
}); });
it('should add a machine', () => { it("should add a machine", () => {
cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click(); cy.get('[data-e2e="action-key-add"]')
cy.url().should('contain', 'users/create-machine'); .parents('[data-e2e="create-user-button"]')
.click();
cy.url().should("contain", "users/create-machine");
//force needed due to the prefilled username prefix //force needed due to the prefilled username prefix
cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, { force: true }); cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, {
cy.get('[formcontrolname="name"]').type('e2emachinename'); force: true,
cy.get('[formcontrolname="description"]').type('e2emachinedescription'); });
cy.get('[formcontrolname="name"]').type("e2emachinename");
cy.get('[formcontrolname="description"]').type("e2emachinedescription");
cy.get('[data-e2e="create-button"]').click(); cy.get('[data-e2e="create-button"]').click();
cy.get('.data-e2e-success'); cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
describe('remove', () => { describe("remove", () => {
before('ensure it exists', () => { before("ensure it exists", () => {
apiAuth().then((api) => { apiAuth().then((api) => {
ensureMachineUserExists(api, testMachineUserNameRemove).then(()=>{ ensureMachineUserExists(api, testMachineUserNameRemove).then(() => {
cy.visit(machinesPath); cy.visit(machinesPath);
}); });
}); });
}); });
it('should delete a machine', () => { it("should delete a machine", () => {
cy.contains('tr', testMachineUserNameRemove, { timeout: 1000 }) cy.contains("tr", testMachineUserNameRemove, { timeout: 1000 })
// doesn't work, need to force click. // doesn't work, need to force click.
// .trigger('mouseover') // .trigger('mouseover')
.find('[e2e-data="enabled-delete-button"]') .find('[data-e2e="enabled-delete-button"]')
.click({force: true}); .click({ force: true });
cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testMachineUserNameRemove, Cypress.env('org'))); cy.get('[data-e2e="confirm-dialog-input"]')
cy.get('[e2e-data="confirm-dialog-button"]').click(); .click()
cy.get('.data-e2e-success'); .type(loginname(testMachineUserNameRemove, Cypress.env("org")));
cy.get('[data-e2e="confirm-dialog-button"]').click();
cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
}); });

77
e2e/cypress/e2e/projects/projects.cy.ts
View File

@@ -1,12 +1,15 @@
import { apiAuth } from '../../support/api/apiauth'; import { apiAuth } from "../../support/api/apiauth";
import { ensureProjectDoesntExist, ensureProjectExists } from '../../support/api/projects'; import {
ensureProjectDoesntExist,
ensureProjectExists,
} from "../../support/api/projects";
describe('projects', () => { describe("projects", () => {
const testProjectNameCreate = 'e2eprojectcreate'; const testProjectNameCreate = "e2eprojectcreate";
const testProjectNameDeleteList = 'e2eprojectdeletelist'; const testProjectNameDeleteList = "e2eprojectdeletelist";
const testProjectNameDeleteGrid = 'e2eprojectdeletegrid'; const testProjectNameDeleteGrid = "e2eprojectdeletegrid";
describe('add project', () => { describe("add project", () => {
beforeEach(`ensure it doesn't exist already`, () => { beforeEach(`ensure it doesn't exist already`, () => {
apiAuth().then((api) => { apiAuth().then((api) => {
ensureProjectDoesntExist(api, testProjectNameCreate); ensureProjectDoesntExist(api, testProjectNameCreate);
@@ -14,57 +17,61 @@ describe('projects', () => {
cy.visit(`/ui/console/projects`); cy.visit(`/ui/console/projects`);
}); });
it('should add a project', () => { it("should add a project", () => {
cy.get('.add-project-button').click({ force: true }); cy.get(".add-project-button").click({ force: true });
cy.get('input').type(testProjectNameCreate); cy.get("input").type(testProjectNameCreate);
cy.get('[data-e2e="continue-button"]').click(); cy.get('[data-e2e="continue-button"]').click();
cy.get('.data-e2e-success'); cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
describe.skip('remove project', () => { describe.skip("remove project", () => {
describe('list view', () => { describe("list view", () => {
beforeEach('ensure it exists', () => { beforeEach("ensure it exists", () => {
apiAuth().then((api) => { apiAuth().then((api) => {
ensureProjectExists(api, testProjectNameDeleteList); ensureProjectExists(api, testProjectNameDeleteList);
}); });
cy.visit(`/ui/console/projects`); cy.visit(`/ui/console/projects`);
}); });
it('removes the project', () => { it("removes the project", () => {
cy.get('[data-e2e=toggle-grid]').click(); cy.get('[data-e2e="toggle-grid"]').click();
cy.get('[data-e2e=timestamp]'); cy.get('[data-e2e="timestamp"]');
cy.contains('tr', testProjectNameDeleteList, { timeout: 1000 }) cy.contains("tr", testProjectNameDeleteList, { timeout: 1000 })
.find('[data-e2e=delete-project-button]') .find('[data-e2e="delete-project-button"]')
.click({force: true}); .click({ force: true });
cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteList); cy.get('[data-e2e="confirm-dialog-input"]').type(
cy.get('[e2e-data="confirm-dialog-button"]').click(); testProjectNameDeleteList
cy.get('.data-e2e-success'); );
cy.get('[data-e2e="confirm-dialog-button"]').click();
cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
describe('grid view', () => { describe("grid view", () => {
beforeEach('ensure it exists', () => { beforeEach("ensure it exists", () => {
apiAuth().then((api) => { apiAuth().then((api) => {
ensureProjectExists(api, testProjectNameDeleteGrid); ensureProjectExists(api, testProjectNameDeleteGrid);
}); });
cy.visit(`/ui/console/projects`); cy.visit(`/ui/console/projects`);
}); });
it('removes the project', () => { it("removes the project", () => {
cy.contains('[data-e2e=grid-card]', testProjectNameDeleteGrid) cy.contains('[data-e2e="grid-card"]', testProjectNameDeleteGrid)
.find('[data-e2e=delete-project-button]') .find('[data-e2e="delete-project-button"]')
.trigger('mouseover') .trigger("mouseover")
.click(); .click();
cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteGrid); cy.get('[data-e2e="confirm-dialog-input"]').type(
cy.get('[e2e-data="confirm-dialog-button"]').click(); testProjectNameDeleteGrid
cy.get('.data-e2e-success'); );
cy.get('[data-e2e="confirm-dialog-button"]').click();
cy.get(".data-e2e-success");
cy.wait(200); cy.wait(200);
cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist'); cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
}); });
}); });
}); });

2
e2e/cypress/e2e/settings/login-policy.cy.ts
View File

@@ -14,7 +14,7 @@ describe("login policy", ()=> {
login(user) login(user)
cy.visit(orgPath) cy.visit(orgPath)
// TODO: Why force? // TODO: Why force?
cy.contains('[data-e2e=policy-card]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e cy.contains('[data-e2e="policy-card"]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
apiAuth().then(api => { apiAuth().then(api => {
ensureHumanUserExists(api, User.LoginPolicyUser) ensureHumanUserExists(api, User.LoginPolicyUser)
}) })

2
e2e/cypress/e2e/settings/password-complexity.cy.ts
View File

@@ -13,7 +13,7 @@ describe("password complexity", ()=> {
login(user) login(user)
cy.visit(orgPath) cy.visit(orgPath)
// TODO: Why force? // TODO: Why force?
cy.contains('[data-e2e=policy-card]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e cy.contains('[data-e2e="policy-card"]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
}) })
// TODO: fix saving password complexity policy bug // TODO: fix saving password complexity policy bug

12
e2e/cypress/e2e/settings/private-labeling.cy.ts
View File

@@ -13,7 +13,7 @@ describe('private labeling', () => {
login(user); login(user);
cy.visit(orgPath); cy.visit(orgPath);
// TODO: Why force? // TODO: Why force?
cy.contains('[data-e2e=policy-card]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e cy.contains('[data-e2e="policy-card"]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
}); });
customize('white', user); customize('white', user);
@@ -32,12 +32,12 @@ function customize(theme: string, user: User) {
describe.skip('logo', () => { describe.skip('logo', () => {
beforeEach('expand logo category', () => { beforeEach('expand logo category', () => {
cy.contains('[data-e2e=policy-category]', 'Logo').click(); // TODO: select data-e2e cy.contains('[data-e2e="policy-category"]', 'Logo').click(); // TODO: select data-e2e
cy.fixture('logo.png').as('logo'); cy.fixture('logo.png').as('logo');
}); });
it('should update a logo', () => { it('should update a logo', () => {
cy.get('[data-e2e=image-part-logo]') cy.get('[data-e2e="image-part-logo"]')
.find('input') .find('input')
.then(function (el) { .then(function (el) {
const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png'); const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png');
@@ -56,10 +56,10 @@ function customize(theme: string, user: User) {
it('should update an icon'); it('should update an icon');
it('should delete an icon'); it('should delete an icon');
it.skip('should update the background color', () => { it.skip('should update the background color', () => {
cy.contains('[data-e2e=color]', 'Background Color').find('button').click(); // TODO: select data-e2e cy.contains('[data-e2e="color"]', 'Background Color').find('button').click(); // TODO: select data-e2e
cy.get('color-editable-input').find('input').clear().type('#ae44dc'); cy.get('color-editable-input').find('input').clear().type('#ae44dc');
cy.get('[data-e2e=save-colors-button]').click(); cy.get('[data-e2e="save-colors-button"]').click();
cy.get('[data-e2e=header-user-avatar]').click(); cy.get('[data-e2e="header-user-avatar"]').click();
cy.contains('Logout All Users').click(); // TODO: select data-e2e cy.contains('Logout All Users').click(); // TODO: select data-e2e
login(User.LoginPolicyUser, undefined, true, null, () => { login(User.LoginPolicyUser, undefined, true, null, () => {
cy.pause(); cy.pause();