Skip to content

Commit 4387e51

Browse files
Sobyt483Sobyt483
committed
feat: add test-ids
1 parent e06637e commit 4387e51

File tree

16 files changed

+143
-75
lines changed

16 files changed

+143
-75
lines changed

‎projects/wc/src/app/components/dynamic-select/dynamic-select.component.html‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
@let dynamicValues = dynamicValues$();
22
@if(dynamicValues.length > 0) {
33
<ui5-select
4-
class="input"
5-
[value]="value()"
6-
(input)="input.emit($event)"
7-
(change)="change.emit($event)"
8-
(blur)="blur.emit()"
9-
[required]="required()"
10-
[valueState]="valueState()"
11-
>
12-
@for (item of [{ value: '', key: '' }].concat(dynamicValues); track item.value) {
13-
<ui5-option
14-
[value]="item.value"
15-
[selected]="item.value === value()"
16-
>{{ item.key }}</ui5-option
17-
>
18-
}
19-
</ui5-select>
4+
class="input"
5+
[attr.test-id]="testId()"
6+
[value]="value()"
7+
(input)="input.emit($event)"
8+
(change)="change.emit($event)"
9+
(blur)="blur.emit()"
10+
[required]="required()"
11+
[valueState]="valueState()"
12+
>
13+
@for (item of [{ value: '', key: '' }].concat(dynamicValues); track item.value) {
14+
<ui5-option
15+
[attr.test-id]="optionTestId(item.value)"
16+
[value]="item.value"
17+
[selected]="item.value === value()"
18+
>{{ item.key }}</ui5-option>
19+
}
20+
</ui5-select>
2021
}

‎projects/wc/src/app/components/dynamic-select/dynamic-select.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
ChangeDetectionStrategy,
33
Component,
44
DestroyRef,
5+
computed,
56
effect,
67
inject,
78
input,
@@ -41,6 +42,11 @@ export class DynamicSelectComponent {
4142
blur = output<void>();
4243

4344
dynamicValues$ = signal<{ value: string; key: string }[]>([]);
45+
testId = computed(() => {
46+
const definition = this.dynamicValuesDefinition();
47+
const operation = definition.operation?.trim();
48+
return operation ? `dynamic-select-${operation}` : 'dynamic-select';
49+
});
4450

4551
private resourceService = inject(ResourceService);
4652
private destroyRef = inject(DestroyRef);
@@ -55,6 +61,14 @@ export class DynamicSelectComponent {
5561
});
5662
}
5763

64+
optionTestId(value: string | null | undefined): string {
65+
const normalizedValue = value?.toString().trim();
66+
if (normalizedValue) {
67+
return `${this.testId()}-option-${normalizedValue}`;
68+
}
69+
return `${this.testId()}-option-empty`;
70+
}
71+
5872
private getDynamicValues(
5973
dynamicValuesDefinition: NonNullable<
6074
FieldDefinition['dynamicValuesDefinition']

‎projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<ui5-dynamic-page>
1+
<ui5-dynamic-page test-id="generic-detail-view">
22
<ui5-dynamic-page-title slot="titleArea">
33

44
<ui5-title slot="heading">
5-
<div class="resource-title">
5+
<div test-id="generic-detail-view-title" class="resource-title">
66
{{ resource()?.spec?.displayName || resourceId() }}
77
</div>
88
</ui5-title>
9-
<ui5-text class="resource-title-subheading" slot="subheading">
9+
<ui5-text test-id="generic-detail-view-subtitle" class="resource-title-subheading" slot="subheading">
1010
The {{ resourceDefinition()?.singular }} for
1111
{{ resource()?.spec?.displayName || resourceId() }}
1212
</ui5-text>
@@ -18,6 +18,7 @@
1818
design="Transparent"
1919
>
2020
<ui5-toolbar-button
21+
test-id="generic-detail-view-download"
2122
text="Download kubeconfig"
2223
icon="download-from-cloud"
2324
design="Emphasized"
@@ -30,21 +31,22 @@
3031
<div class="resource-info">
3132
@if (resourceDefinition()?.ui?.logoUrl) {
3233
<img
34+
test-id="generic-detail-view-logo"
3335
class="resource-logo"
3436
src="{{ resourceDefinition()?.ui?.logoUrl }}"
3537
alt="Logo"
3638
/>
3739
}
3840
<div class="resource-info-cell">
3941
<ui5-label>Workspace Path</ui5-label>
40-
<p>{{ workspacePath() }}</p>
42+
<p test-id="generic-detail-view-workspace-path">{{ workspacePath() }}</p>
4143
</div>
4244
@if (resource(); as resource) {
4345
@for (viewField of viewFields(); track viewField.property) {
44-
<div class="resource-info-cell">
46+
<div class="resource-info-cell" [attr.test-id]="'generic-detail-view-field-' + viewField.property">
4547
@if(viewField.group) {
46-
<ui5-label>{{ viewField.group.label ?? viewField.group.name }}</ui5-label>
47-
<p>
48+
<ui5-label [attr.test-id]="'generic-detail-view-field-' + viewField.property + '-label'">{{ viewField.group.label ?? viewField.group.name }}</ui5-label>
49+
<p [attr.test-id]="'generic-detail-view-field-' + viewField.property + '-value'">
4850
@for (field of viewField.group.fields; let last = $last; track field.label) {
4951
<span [class.multiline]="viewField.group.multiline ?? true">
5052
<span>{{ field.label }}: </span>
@@ -60,8 +62,8 @@
6062
}
6163
</p>
6264
} @else {
63-
<ui5-label>{{ viewField.label }}</ui5-label>
64-
<p>
65+
<ui5-label [attr.test-id]="'generic-detail-view-field-' + viewField.property + '-label'">{{ viewField.label }}</ui5-label>
66+
<p [attr.test-id]="'generic-detail-view-field-' + viewField.property + '-value'">
6567
<value-cell
6668
[fieldDefinition]="viewField"
6769
[resource]="resource"

‎projects/wc/src/app/components/generic-ui/list-view/create-resource-modal/create-resource-modal.component.html‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
1-
<ui5-dialog #dialog>
1+
<ui5-dialog test-id="create-resource-dialog" #dialog>
22
<ui5-bar slot="header" design="Header">
3-
<ui5-title slot="startContent">
3+
<ui5-title test-id="create-resource-dialog-title" slot="startContent">
44
@if (isEditMode()) {
55
Edit
66
} @else {
77
Create
88
}
99
</ui5-title>
1010
</ui5-bar>
11-
<section class="form" [formGroup]="form">
11+
<section test-id="create-resource-dialog-form" class="form" [formGroup]="form">
1212
@for (field of fields(); track field.property) {
1313
@let fieldProperty = sanitizePropertyName(field.property);
14-
<div class="inputs">
15-
<ui5-label for="username" show-colon [required]="field.required">{{
14+
<div class="inputs" [attr.test-id]="'create-field-container-' + fieldProperty">
15+
<ui5-label
16+
[attr.test-id]="'create-field-label-' + fieldProperty"
17+
for="username"
18+
show-colon
19+
[required]="field.required"
20+
>{{
1621
field.label
1722
}}</ui5-label>
1823
@if (field.values?.length) {
1924
<ui5-select
2025
class="input"
26+
[attr.test-id]="'create-field-' + fieldProperty"
2127
[value]="form.controls[fieldProperty].value"
2228
(input)="setFormControlValue($event, fieldProperty)"
2329
(change)="setFormControlValue($event, fieldProperty)"
@@ -28,6 +34,7 @@
2834
>
2935
@for (value of [''].concat(field.values ?? []); track value) {
3036
<ui5-option
37+
[attr.test-id]="'create-field-' + fieldProperty + '-option-' + (value || 'empty')"
3138
[value]="value"
3239
[selected]="value === form.controls[fieldProperty].value"
3340
>{{ value }}</ui5-option
@@ -36,6 +43,7 @@
3643
</ui5-select>
3744
} @else if (field.dynamicValuesDefinition) {
3845
<dynamic-select
46+
[attr.test-id]="'create-field-' + fieldProperty"
3947
[context]="context()"
4048
[dynamicValuesDefinition]="field.dynamicValuesDefinition"
4149
[value]="form.controls[fieldProperty].value"
@@ -47,6 +55,7 @@
4755
} @else {
4856
<ui5-input
4957
class="input"
58+
[attr.test-id]="'create-field-' + fieldProperty"
5059
[value]="form.controls[fieldProperty].value"
5160
(blur)="onFieldBlur(fieldProperty)"
5261
(change)="setFormControlValue($event, fieldProperty)"
@@ -67,6 +76,7 @@
6776
</section>
6877
<ui5-toolbar class="ui5-content-density-compact" slot="footer">
6978
<ui5-toolbar-button
79+
test-id="create-resource-submit"
7080
class="dialogCloser"
7181
design="Emphasized"
7282
text="Submit"
@@ -75,6 +85,7 @@
7585
>
7686
</ui5-toolbar-button>
7787
<ui5-toolbar-button
88+
test-id="create-resource-cancel"
7889
class="dialogCloser"
7990
design="Transparent"
8091
text="Cancel"

‎projects/wc/src/app/components/generic-ui/list-view/delete-resource-confirmation-modal/delete-resource-modal.component.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<ui5-dialog #dialog>
1+
<ui5-dialog test-id="delete-resource-dialog" #dialog>
22
<ui5-bar slot="header" design="Header">
3-
<ui5-title slot="startContent">
4-
<ui5-icon name="alert" design="Critical"></ui5-icon>
3+
<ui5-title test-id="delete-resource-dialog-title" slot="startContent">
4+
<ui5-icon test-id="delete-resource-dialog-alert" name="alert" design="Critical"></ui5-icon>
55
Delete {{ innerResource()?.metadata?.name?.toLowerCase() }}
66
</ui5-title>
77
</ui5-bar>
8-
<section class="content" [formGroup]="form">
8+
<section test-id="delete-resource-dialog-content" class="content" [formGroup]="form">
99
<div class="inputs">
1010
<p>Are you sure you want to delete {{ context()?.resourceDefinition?.singular }}
1111
<b>{{ innerResource()?.metadata?.name?.toLowerCase() }}</b>?</p>
@@ -18,6 +18,7 @@
1818
<ui5-input
1919
class="input"
2020
placeholder="Type name"
21+
test-id="delete-resource-input"
2122
[value]="form.controls.resource.value"
2223
(blur)="onFieldBlur('resource')"
2324
(change)="setFormControlValue($event, 'resource')"
@@ -29,6 +30,7 @@
2930
</section>
3031
<ui5-toolbar class="ui5-content-density-compact" slot="footer">
3132
<ui5-toolbar-button
33+
test-id="delete-resource-confirm"
3234
class="dialogCloser"
3335
[disabled]="form.invalid || form.controls.resource.value !== innerResource()?.metadata?.name?.toLowerCase()"
3436
design="Emphasized"
@@ -37,6 +39,7 @@
3739
>
3840
</ui5-toolbar-button>
3941
<ui5-toolbar-button
42+
test-id="delete-resource-cancel"
4043
class="dialogCloser"
4144
design="Transparent"
4245
text="Cancel"

‎projects/wc/src/app/components/generic-ui/list-view/list-view.component.html‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
<ui5-dynamic-page>
1+
<ui5-dynamic-page test-id="generic-list-view">
22
<ui5-dynamic-page-title slot="titleArea">
33
<ui5-title slot="heading">
44
<div class="title-logo">
5-
<div>{{ heading() }}</div>
5+
<div test-id="generic-list-view-title">{{ heading() }}</div>
66
@if (resourceDefinition()?.ui?.logoUrl) {
77
<img
8+
test-id="generic-list-view-logo"
89
class="logo"
910
src="{{ resourceDefinition()?.ui?.logoUrl }}"
1011
alt="Logo"
1112
/>
1213
}
1314
</div>
1415
</ui5-title>
15-
<ui5-text class="title-subheading" slot="subheading">
16+
<ui5-text test-id="generic-list-view-subtitle" class="title-subheading" slot="subheading">
1617
This page displays the created
1718
{{ resourceDefinition()?.plural }} in your environment
1819
</ui5-text>
@@ -25,6 +26,7 @@
2526
>
2627
@if (hasUiCreateViewFields()) {
2728
<ui5-toolbar-button
29+
test-id="generic-list-view-create-button"
2830
design="Emphasized"
2931
text="Create"
3032
(click)="openCreateResourceModal()"
@@ -33,40 +35,35 @@
3335
</ui5-toolbar>
3436
</ui5-dynamic-page-title>
3537

36-
<ui5-table>
38+
<ui5-table test-id="generic-list-table">
3739
<ui5-table-header-row slot="headerRow">
38-
<ui5-table-header-cell
39-
width="32px"
40-
class="not-ready-indicator"
41-
></ui5-table-header-cell>
40+
<ui5-table-header-cell width="32px" class="not-ready-indicator"></ui5-table-header-cell>
4241
@for (column of viewColomns(); track column.property) {
4342
@if (column.group) {
44-
<ui5-table-header-cell>{{
45-
column.group.label ?? column.group.name
46-
}}</ui5-table-header-cell>
43+
<ui5-table-header-cell [attr.test-id]="'generic-list-header-' + column.property">{{ column.group.label ?? column.group.name }}</ui5-table-header-cell>
4744
} @else {
48-
<ui5-table-header-cell>{{ column.label }}</ui5-table-header-cell>
45+
<ui5-table-header-cell [attr.test-id]="'generic-list-header-' + (column.property || column.label || '')">{{ column.label }}</ui5-table-header-cell>
4946
}
5047
}
51-
<ui5-table-header-cell class="actions-column"
52-
>Actions
53-
</ui5-table-header-cell>
48+
<ui5-table-header-cell test-id="generic-list-header-actions" class="actions-column">Actions</ui5-table-header-cell>
5449
</ui5-table-header-row>
5550

56-
<ui5-illustrated-message slot="nodata" name="NoData">
51+
<ui5-illustrated-message test-id="generic-list-view-nodata" slot="nodata" name="NoData">
5752
<span slot="title">No Resources</span>
5853
<span slot="subtitle">There are currently no items to show.</span>
5954
</ui5-illustrated-message>
6055

61-
@for (item of resources(); track item.metadata.name) {
56+
@for (item of resources(); let i = $index; track item.metadata.name) {
6257
<ui5-table-row
58+
[attr.test-id]="'generic-list-row-' + i"
6359
[interactive]="item.ready"
6460
[class.disabled]="!item.ready"
6561
(click)="navigateToResource(item)"
6662
>
6763
<ui5-table-cell>
6864
@if (!item.ready) {
6965
<ui5-icon
66+
[attr.test-id]="'generic-list-row-' + i + '-not-ready-icon'"
7067
class="not-ready-indicator"
7168
(click)="$event.stopPropagation()"
7269
[showTooltip]="true"
@@ -77,15 +74,18 @@
7774
}
7875
</ui5-table-cell>
7976

80-
@for (column of viewColomns(); let first = $first; track column.label) {
77+
@for (column of viewColomns(); let first = $first; track column.property) {`
8178
@if (column.group) {
82-
<ui5-table-cell [class.multiline]="column.group.multiline ?? true">
79+
<ui5-table-cell
80+
[attr.test-id]="'generic-list-cell-' + i + '-' + column.property"
81+
[class.multiline]="column.group.multiline ?? true"
82+
>
8383
@for (
8484
field of column.group.fields;
8585
let last = $last;
86-
track field.label
86+
track field.property
8787
) {
88-
<div>
88+
<div [attr.test-id]="'generic-list-cell-' + i + '-' + column.property + '-' + field.property">
8989
<span>{{ field.label }}: </span>
9090
<value-cell
9191
[fieldDefinition]="field"
@@ -99,7 +99,7 @@
9999
}
100100
</ui5-table-cell>
101101
} @else {
102-
<ui5-table-cell>
102+
<ui5-table-cell [attr.test-id]="'generic-list-cell-' + i + '-' + column.property">
103103
<value-cell
104104
[fieldDefinition]="column"
105105
[resource]="item"
@@ -108,13 +108,17 @@
108108
</ui5-table-cell>
109109
}
110110
}
111-
<ui5-table-cell class="actions-column">
111+
<ui5-table-cell
112+
class="actions-column"
113+
>
112114
<ui5-icon
115+
[attr.test-id]="'generic-list-row-' + i + '-edit'"
113116
class="edit-item"
114117
name="edit"
115118
(click)="openEditResourceModal($event, item)"
116119
></ui5-icon>
117120
<ui5-icon
121+
[attr.test-id]="'generic-list-row-' + i + '-delete'"
118122
class="delete-item"
119123
name="delete"
120124
(click)="openDeleteResourceModal($event, item)"

‎projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<ui5-icon [name]="iconName()" [design]="iconDesign()"></ui5-icon>
1+
<ui5-icon [attr.test-id]="testId()" [name]="iconName()" [design]="iconDesign()"></ui5-icon>

‎projects/wc/src/app/components/generic-ui/value-cell/boolean-value/boolean-value.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export type IconDesignType =
2525
})
2626
export class BooleanValueComponent {
2727
boolValue = input.required<boolean>();
28+
testId = input<string>('boolean-value-icon');
2829
iconDesign = computed<IconDesignType>(() => {
2930
return this.boolValue() ? ICON_DESIGN_POSITIVE : ICON_DESIGN_NEGATIVE;
3031
});

0 commit comments

Comments
 (0)