From 22c0a7d5d954606ffad18c7c301b3eb0d0591c4d Mon Sep 17 00:00:00 2001
From: Lorenz Hilpert <l.hilpert@paragon-data.de>
Date: Thu, 24 Apr 2025 21:39:23 +0200
Subject: [PATCH] feat(e2e): add data attributes for improved test stability

Add data-what and data-which attributes to key UI elements:
- Add back button attributes to return details and process components
- Add filter button attributes to the filter menu component
- Add sort button attributes for both desktop and mobile views
- Add result count element attributes for better selection
- Add attributes to search result items for identification
- Add attributes to loading spinners for state verification

These attributes improve E2E test stability by providing reliable selectors
that are not tied to styling or DOM structure changes.

Ref: #5052
---
 .../src/lib/return-details.component.html     |  1 +
 .../lib/return-process-feature.component.html |  1 +
 .../return-search-result-item.component.html  |  2 +-
 .../return-search-result.component.html       | 21 ++++++++++++++++---
 .../filter-menu-button.component.html         |  1 +
 .../order-by/order-by-toolbar.component.html  |  2 ++
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/libs/oms/feature/return-details/src/lib/return-details.component.html b/libs/oms/feature/return-details/src/lib/return-details.component.html
index 73992f154..7d2483dbe 100644
--- a/libs/oms/feature/return-details/src/lib/return-details.component.html
+++ b/libs/oms/feature/return-details/src/lib/return-details.component.html
@@ -17,6 +17,7 @@
     size="small"
     class="px-[0.875rem] py-1 min-w-0 bg-white gap-1"
     (click)="location.back()"
+    data-what="back-button"
   >
     <ng-icon name="isaActionChevronLeft" size="1.5rem" class="-ml-2"></ng-icon>
     <span>zurück</span>
diff --git a/libs/oms/feature/return-process/src/lib/return-process-feature.component.html b/libs/oms/feature/return-process/src/lib/return-process-feature.component.html
index 8de4c17ed..53e0e5e71 100644
--- a/libs/oms/feature/return-process/src/lib/return-process-feature.component.html
+++ b/libs/oms/feature/return-process/src/lib/return-process-feature.component.html
@@ -1,4 +1,5 @@
 <button
+  data-what="back-button"
   uiButton
   color="tertiary"
   size="small"
diff --git a/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result-item/return-search-result-item.component.html b/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result-item/return-search-result-item.component.html
index 7e1566789..2524c6c92 100644
--- a/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result-item/return-search-result-item.component.html
+++ b/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result-item/return-search-result-item.component.html
@@ -1,4 +1,4 @@
-<ui-client-row>
+<ui-client-row data-what="search-result-item" [attr.data-which]="receiptNumber()">
   <ui-client-row-content>
     <h3 class="isa-text-subtitle-1-regular">{{ name() }}</h3>
   </ui-client-row-content>
diff --git a/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result.component.html b/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result.component.html
index 0fd29388b..28c2525ef 100644
--- a/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result.component.html
+++ b/libs/oms/feature/return-search/src/lib/return-search-result/return-search-result.component.html
@@ -4,6 +4,7 @@
     [appearance]="'results'"
     inputKey="qs"
     (triggerSearch)="search()"
+    data-what="search-input"
   ></filter-search-bar-input>
 
   <div class="flex flex-row gap-4 items-center">
@@ -18,6 +19,7 @@
         type="button"
         (click)="showOrderByToolbarMobile.set(!showOrderByToolbarMobile())"
         [class.active]="showOrderByToolbarMobile()"
+        data-what="sort-button-mobile"
       >
         <ng-icon name="isaActionSort"></ng-icon>
       </button>
@@ -31,10 +33,11 @@
   <filter-order-by-toolbar
     class="w-full"
     (toggled)="search()"
+    data-what="sort-toolbar-mobile"
   ></filter-order-by-toolbar>
 }
 
-<span class="text-isa-neutral-900 isa-text-body-2-regular self-start">
+<span class="text-isa-neutral-900 isa-text-body-2-regular self-start" data-what="result-count">
   {{ entityHits() }} Einträge
 </span>
 
@@ -54,13 +57,20 @@
           <ui-icon-button
             [pending]="true"
             [color]="'tertiary'"
+            data-what="load-spinner"
+            data-which="item-placeholder"
           ></ui-icon-button>
         </div>
       }
     }
     @if (renderPagingLoader()) {
       <div class="h-[7.75rem] w-full flex items-center justify-center">
-        <ui-icon-button [pending]="true" [color]="'tertiary'"></ui-icon-button>
+        <ui-icon-button 
+          [pending]="true" 
+          [color]="'tertiary'"
+          data-what="load-spinner"
+          data-which="pagination"
+        ></ui-icon-button>
       </div>
     } @else if (renderPageTrigger()) {
       <div (uiInViewport)="paging($event)"></div>
@@ -68,7 +78,12 @@
   </div>
 } @else if (renderSearchLoader()) {
   <div class="h-[7.75rem] w-full flex items-center justify-center">
-    <ui-icon-button [pending]="true" [color]="'tertiary'"></ui-icon-button>
+    <ui-icon-button 
+      [pending]="true" 
+      [color]="'tertiary'"
+      data-what="load-spinner"
+      data-which="search"
+    ></ui-icon-button>
   </div>
 } @else {
   <ui-empty-state
diff --git a/libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.html b/libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.html
index 5cf733586..7040ca33a 100644
--- a/libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.html
+++ b/libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.html
@@ -5,6 +5,7 @@
   (click)="toggle()"
   type="button"
   [class.active]="isIconButtonActive()"
+  data-what="filter-button"
 >
   <ng-icon name="isaActionFilter"></ng-icon>
 </button>
diff --git a/libs/shared/filter/src/lib/order-by/order-by-toolbar.component.html b/libs/shared/filter/src/lib/order-by/order-by-toolbar.component.html
index 01c1b9286..66b1324dd 100644
--- a/libs/shared/filter/src/lib/order-by/order-by-toolbar.component.html
+++ b/libs/shared/filter/src/lib/order-by/order-by-toolbar.component.html
@@ -7,6 +7,8 @@
       uiTextButton
       type="button"
       (click)="toggleOrderBy(orderBy)"
+      data-what="sort-button"
+      [attr.data-which]="orderBy.by"
     >
       <div>
         {{ orderBy.label }}