new tags (#158)

Co-authored-by: SHENGXING LU <slu@SHENGXINGs-MacBook-Air.local>

Author: sluFicodes

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

@@ -164,7 +164,7 @@ <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-whi
             } @else {
               <div class="max-h-96 overflow-y-auto pr-2">
                 @for (acbr of appliedCustomerBillingRates; track acbr.id) {
-                  <div class="mb-4 p-4 bg-gray-50 dark:bg-secondary-300 rounded-lg border border-gray-200 dark:border-gray-600">
+                  <div data-cy="acbr" class="mb-4 p-4 bg-gray-50 dark:bg-secondary-300 rounded-lg border border-gray-200 dark:border-gray-600">
                     <div class="flex flex-col gap-2">
                       <div class="flex flex-row gap-2">
                         <p class="text-sm font-bold text-gray-700 dark:text-white">

src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html

@@ -7,12 +7,12 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
         </div>
 
         <div class="flex flex-row w-full justify-end">
-            <button type="button" (click)="goToCreate()" class="ml-2 mr-8 mb-4 text-white bg-primary-100 hover:bg-primary-50 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 align-middle me-2">
+            <button data-cy="createUsageSpec" type="button" (click)="goToCreate()" class="ml-2 mr-8 mb-4 text-white bg-primary-100 hover:bg-primary-50 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 align-middle me-2">
                 <p class="pl-2 pr-2">{{ 'USAGE_SPECS._add_new' | translate }}</p>
                 <svg class="w-[18px] h-[18px] text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                 </svg>
-            </button>  
+            </button>
         </div>
 
       </div>
@@ -30,7 +30,7 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
 } @else {
     <div class="bg-secondary-50 dark:bg-secondary-100 border dark:border-gray-800 mt-8 p-4 rounded-lg">
     <div class="relative overflow-x-auto shadow-md sm:rounded-lg w-full bg-white dark:bg-secondary-300">
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
+        <table data-cy="usageSpecTable" class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200">
             <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-secondary-200 dark:text-white">
                 <tr>
                     <th scope="col" class="px-6 py-3">
@@ -46,18 +46,18 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
             </thead>
             <tbody>
                 @for (usage of usageSpecs; track usage.id) {
-                    <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+                    <tr data-cy="usageSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
                         <td [ngClass]="{
                             'break-all': hasLongWord(usage.name, 20),
                             'break-words': !hasLongWord(usage.name, 20)
                             }" class="px-6 py-4 text-wrap break-words">
                             {{usage.name}}
                         </td>
                         <td class="hidden md:table-cell px-6 py-4">
-                            {{usage.description}} 
+                            {{usage.description}}
                         </td>
                         <td class="px-6 py-4">
-                            <button type="button" (click)="goToUpdate(usage)" class="text-white bg-primary-100 hover:bg-primary-50 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="usageSpecEdit" type="button" (click)="goToUpdate(usage)" class="text-white bg-primary-100 hover:bg-primary-50 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" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                     <path fill-rule="evenodd" d="M14 4.182A4.136 4.136 0 0 1 16.9 3c1.087 0 2.13.425 2.899 1.182A4.01 4.01 0 0 1 21 7.037c0 1.068-.43 2.092-1.194 2.849L18.5 11.214l-5.8-5.71 1.287-1.31.012-.012Zm-2.717 2.763L6.186 12.13l2.175 2.141 5.063-5.218-2.141-2.108Zm-6.25 6.886-1.98 5.849a.992.992 0 0 0 .245 1.026 1.03 1.03 0 0 0 1.043.242L10.282 19l-5.25-5.168Zm6.954 4.01 5.096-5.186-2.218-2.183-5.063 5.218 2.185 2.15Z" clip-rule="evenodd"/>
                                 </svg>

src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html

@@ -1,10 +1,10 @@
 @if (nameControl) {
     <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
-    <input id="prod-name" type="text" [formControl]="nameControl" maxLength="100"
+    <input data-cy="usageSpecName" id="prod-name" type="text" [formControl]="nameControl" maxLength="100"
            class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"/>
   }
   @if (descControl) {
     <label class="font-bold text-lg col-span-2 dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
-    <app-markdown-textarea [formControl]="descControl"></app-markdown-textarea>
+    <app-markdown-textarea data-cy="usageSpecDescription" [formControl]="descControl"></app-markdown-textarea>
   }
 

src/app/shared/forms/usage-spec/usage-spec-general-info/usage-spec-general-info.component.html

@@ -56,33 +56,33 @@
 }
 @if(showCreateMetric==false){
     <div class="flex w-full justify-items-center justify-center">
-        <button type="button" (click)="showCreateMetric=!showCreateMetric" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+        <button data-cy="btnNewMetric" type="button" (click)="showCreateMetric=!showCreateMetric" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
             {{ 'USAGE_SPECS._create_metric' | translate }}
             <svg class="rtl:rotate-180 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"/>
-            </svg>                                  
+            </svg>
         </button>
     </div>
 } @else {
     <form class="m-4" [formGroup]="metricsForm">
         <div>
             <label for="prod-name" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
-            <input formControlName="name" type="text" id="prod-name" maxLength="100"
+            <input data-cy="metricName" formControlName="name" type="text" id="prod-name" maxLength="100"
             class="mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" />
-            
+
         </div>
         <div>
             <label for="description" class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
-            <textarea id="description" formControlName="description" rows="4" 
+            <textarea data-cy="metricDescription" id="description" formControlName="description" rows="4"
             class="mb-2 min-h-fit bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
-        </div>                        
+        </div>
     </form>
     <div class="flex w-full justify-items-center justify-center mt-4">
-        <button type="button" (click)="saveMetric()"  [disabled]="!metricsForm.valid" [ngClass]="!metricsForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
+        <button data-cy="btnSaveMetric" type="button" (click)="saveMetric()"  [disabled]="!metricsForm.valid" [ngClass]="!metricsForm.valid ? 'opacity-50' : 'hover:bg-primary-50'" class="flex text-white justify-center bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center">
             {{ 'USAGE_SPECS._save_metric' | translate }}
             <svg class="rtl:rotate-180 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-width="2" d="M11 16h2m6.707-9.293-2.414-2.414A1 1 0 0 0 16.586 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.414a1 1 0 0 0-.293-.707ZM16 20v-6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v6h8ZM9 4h6v3a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z"/>
-            </svg>                                                                   
+            </svg>
         </button>
     </div>
 }

src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html

@@ -64,7 +64,7 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
 
       <!-- Navigation Buttons -->
       <div class="flex justify-end mt-6 space-x-4">
-        <button (click)="goToStep(currentStep - 1)"
+        <button data-cy="usageSpecPrevious" (click)="goToStep(currentStep - 1)"
                 [disabled]="currentStep === 0"
                 [ngClass]="{
                   'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== 0,
@@ -78,8 +78,8 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
             </svg>
           {{ 'USAGE_SPECS._previous' | translate }}
         </button>
-  
-        <button (click)="goToStep(currentStep + 1)"
+
+        <button data-cy="usageSpecNext" (click)="goToStep(currentStep + 1)"
                 [disabled]="currentStep === steps.length - 1 || (formType === 'create' && !validateCurrentStep()) || !canNavigate(currentStep)"
                 [ngClass]="{
                   'hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white': currentStep !== steps.length - 1 && (formType !== 'create' || validateCurrentStep() || canNavigate(currentStep)),
@@ -94,10 +94,10 @@ <h3 class="block md:hidden mt-2 text-center text-2xl text-primary-100 dark:text-
           </svg>
         </button>
         @if(formType === 'create' && currentStep === 2 || formType === 'update'){
-          <button (click)="submitForm()"
+          <button data-cy="btnCreateUsageSpec" (click)="submitForm()"
           [disabled]="!usageSpecForm.controls['generalInfo'].valid"
           [ngClass]="formType === 'update' && !usageSpecForm.controls['generalInfo'].valid ? 'opacity-50' : 'hover:bg-primary-50'"
-  
+
           class="px-4 py-2 text-base font-medium text-white rounded-lg bg-primary-100">
             {{ formType === 'create' ? 'Create Usage Spec' : 'Update Usage Spec' }}
           </button>

src/app/shared/forms/usage-spec/usage-spec.component.html

@@ -195,7 +195,7 @@
               </a>
             </li>            
             <li>
-              <button id="usageSpecs" (click)="goTo('/usage-spec')" class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faRuler" class="mr-2"></fa-icon>Usage Spec</button>
+              <button data-cy="usageSpecs" id="usageSpecs" (click)="goTo('/usage-spec')" class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faRuler" class="mr-2"></fa-icon>Usage Spec</button>
             </li>
             <li>
               <button id="myInventory" (click)="goTo('/product-inventory')"class="flex w-full justify-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"><fa-icon [icon]="faBoxesStacked" class="mr-2"></fa-icon>{{ 'HEADER._inventory' | translate }}</button>

src/app/shared/header/header.component.html

@@ -74,7 +74,7 @@
         <div class="rounded-lg border border-dashed border-primary-100 bg-white p-2 m-2 dark:bg-gray-800 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-4">
           @for (ch of filteredCharacteristics ; track ch.id; let i = $index) {
             @if(!ch.name?.endsWith('- enabled')){
-              <div class="flex flex-row w-full items-start">
+              <div data-cy="offerChar" class="flex flex-row w-full items-start">
                 @if(canBeDisabledChars.includes(ch.id)){
                   <label class="inline-flex items-center cursor-pointer w-fit justify-start items-start my-4 mr-2">
                     <input type="checkbox" (change)="onToggleChange($event, ch.name)" class="sr-only peer">
@@ -101,7 +101,7 @@
       <p class="mt-4  text-sm text-gray-500 dark:text-gray-400">You can change the metric values to simulate final prices</p>
       <div class="grid grid-cols-4 gap-2 mb-4">
         @for (metric of metrics || []; track metric.unitOfMeasure) {
-          <div class="flex flex-col">
+          <div data-cy="offerMetric" class="flex flex-col">
             <h5 [ngClass]="{
               'break-all': hasLongWord(metric.unitOfMeasure, 20),
               'break-words': !hasLongWord(metric.unitOfMeasure, 20)