more cypress tags

Author: SHENGXING LU

src/app/pages/catalogs/catalogs.component.html

@@ -70,7 +70,7 @@ <h5 class="text-2xl font-bold tracking-tight line-clamp-4 text-primary-100 dark:
     @if (!loading_more) {
       @if (page_check) {
         <div class="flex pt-8 justify-center align-middle">
-            <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+            <button data-cy="loadMore" (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
               Load more
               <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>

src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html

@@ -192,7 +192,7 @@ <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-white
             @if (!loading_more) {
                 @if (page_check) {
                 <div class="flex pt-6 pb-6 justify-center align-middle">
-                    <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                    <button data-cy="loadMore" (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                     Load more
                     <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>

src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html

@@ -179,7 +179,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                     @if (!loading_more) {
                         @if (page_check) {
                         <div class="flex pt-4 justify-center align-middle">
-                            <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                            <button data-cy="loadMore" (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                             Load more
                             <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>

src/app/pages/product-inventory/inventory-services/inventory-services.component.html

@@ -179,7 +179,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                     @if (!loading_more) {
                         @if (page_check) {
                         <div class="flex pt-4 justify-center align-middle">
-                            <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+                            <button data-cy="loadMore" (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                             Load more
                             <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>

src/app/pages/product-orders/sections/order-info/order-info.component.html

@@ -1,7 +1,7 @@
 <div class="border-b border-gray-200 dark:border-gray-700 mb-2">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         <li class="me-2">
-            <a (click)="onRoleChange('Customer')"
+            <a data-cy="asCustomerTab" (click)="onRoleChange('Customer')"
                 [ngClass]="role !== 'Customer' ? 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300' : 'text-primary-100 border-primary-100 active dark:text-primary-50 dark:border-primary-50'"
                class="inline-flex cursor-pointer items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg group" aria-current="page">
                 <svg [ngClass]="role !== 'Customer' ? 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300' : 'text-primary-100 dark:text-primary-50'"
@@ -13,7 +13,7 @@
         </li>
         @if(isSeller){
             <li class="me-2">
-                <a (click)="onRoleChange('Seller')"
+                <a data-cy="asProviderTab" (click)="onRoleChange('Seller')"
                     [ngClass]="{'text-primary-100 border-primary-100 active dark:text-primary-50 dark:border-primary-50 group': role == 'Seller'}"
                     class="inline-flex cursor-pointer items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">
                     <svg
@@ -193,7 +193,7 @@ <h6 class="mb-3 text-sm font-bold text-gray-900 dark:text-white">
                                                 {{order?.orderDate | date:'EEEE, dd/MM/yy, HH:mm'}}
                                             </td>
                                             <td class="px-6 py-4 text-center align-middle">
-                                                <button (click)="toggleShowDetails(order);$event.stopPropagation();" type="button" class="text-white bg-primary-100 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2">
+                                                <button data-cy="viewOrderDetails" (click)="toggleShowDetails(order);$event.stopPropagation();" type="button" class="text-white bg-primary-100 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2">
                                                     <svg class="w-[18px] h-[18px] text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
                                                         <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                                             <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
@@ -413,7 +413,7 @@ <h3 class="text-base dark:text-gray-200">
                                           <td class="px-6 py-4 text-center align-middle flex justify-center">
                                             @if (!hasProcurementAutomaticTerm(item)) {
                                               @if (!item.productOrderItem.state && role == 'Seller') {
-                                                <button type="button" title="Acknowledge the order item"
+                                                <button data-cy="acknowledgeOrder" type="button" title="Acknowledge the order item"
                                                         class="text-white bg-primary-100 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2"
                                                         (click)="openModal('acknowledged', item)">
                                                   <!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.-->
@@ -423,7 +423,7 @@ <h3 class="text-base dark:text-gray-200">
                                                   </svg>
                                                 </button>
 
-                                                <button type="button" title="Reject the order item"
+                                                <button data-cy="rejectOrder" type="button" title="Reject the order item"
                                                         class="text-red-950 bg-red-500 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2"
                                                         (click)="openModal('cancelled', item)">
                                                   <svg class="w-[18px] h-[18px] text-white stroke-white fill-white stroke-2" stroke="currentColor"
@@ -434,14 +434,14 @@ <h3 class="text-base dark:text-gray-200">
                                               } @else {
                                                   @if(role == 'Seller'){
                                                     @if (item.productOrderItem.state === 'acknowledged') {
-                                                      <button type="button" title="Start Order Treatment"
+                                                      <button data-cy="startOrderTreatment" type="button" title="Start Order Treatment"
                                                               class="text-green-950 bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2"
                                                               (click)="openModal('inProgress', item)">
                                                         <svg class="w-[18px] h-[18px] text-white stroke-white fill-white stroke-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                                                           <path class="fa-secondary" opacity=".4" d="M32 80l0 352c0 5.8 3.1 11.1 8.2 14s11.2 2.7 16.2-.3l288-176c4.8-2.9 7.7-8.1 7.7-13.7s-2.9-10.7-7.7-13.7l-288-176c-4.9-3-11.1-3.1-16.2-.3s-8.2 8.2-8.2 14z"/><path class="fa-primary" d="M56.3 66.3c-4.9-3-11.1-3.1-16.2-.3s-8.2 8.2-8.2 14l0 352c0 5.8 3.1 11.1 8.2 14s11.2 2.7 16.2-.3l288-176c4.8-2.9 7.7-8.1 7.7-13.7s-2.9-10.7-7.7-13.7l-288-176zM24.5 38.1C39.7 29.6 58.2 30 73 39L361 215c14.3 8.7 23 24.2 23 41s-8.7 32.2-23 41L73 473c-14.8 9.1-33.4 9.4-48.5 .9S0 449.4 0 432L0 80C0 62.6 9.4 46.6 24.5 38.1z"/></svg>
                                                       </button>
                                                     } @else if (item.productOrderItem.state === 'inProgress') {
-                                                      <button type="button" title="Order Completely Treated"
+                                                      <button data-cy="completeOrder" type="button" title="Order Completely Treated"
                                                               class="text-green-950 bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center me-2"
                                                               (click)="openModal('completed', item)">
                                                         <svg class="w-[18px] h-[18px] text-white stroke-white fill-white stroke-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -501,12 +501,12 @@ <h3 class="text-xl font-semibold text-secondary-50 dark:text-white">
       </div>
       <!-- Botones de acción -->
       <div class="flex items-center p-6 space-x-4 border-t border-gray-200 rounded-b dark:border-gray-600">
-        <button type="button" (click)="confirmAction()"
+        <button data-cy="confirmActionBtn" type="button" (click)="confirmAction()"
                 class="text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium
           rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
           Yes, Confirm
         </button>
-        <button type="button" (click)="closeModal()"
+        <button data-cy="cancelActionBtn" type="button" (click)="closeModal()"
                 class="text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100
           focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-700
           dark:text-gray-300 dark:border-gray-500 dark:hover:bg-gray-600 dark:focus:ring-gray-600">

src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html

@@ -185,7 +185,7 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
         @if (!loading_more) {
             @if (page_check) {
             <div class="flex pt-6 pb-2 justify-center align-middle">
-                <button (click)="next()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
+                <button data-cy="loadMore" (click)="next()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
                 Load more
                 <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>

src/app/shared/price-plan-drawer/price-plan-drawer.component.html

@@ -7,7 +7,7 @@
 }
 
 <!-- drawer component -->
-<div [id]="drawerId"
+<div data-cy="toCartDrawer" [id]="drawerId"
      class="fixed top-0 right-0 z-40 h-screen pt-24 overflow-y-auto transition-transform translate-x-full bg-secondary-50 dark:bg-gray-800 flex flex-col"
      [class.translate-x-0]="isOpen"
      [class.translate-x-full]="!isOpen"