feat: refactor services injection in search and store home components, add direct purchase event tests

src/app/shared/components/product-list/product-list.component.spec.ts

@@ -126,6 +126,40 @@ describe('ProductListComponent', () => {
     ).toHaveLength(2);
   });
 
+  it('emits a direct-purchase event with the row quantity and selected variant', async () => {
+    const fixture = await render('row');
+    const buySpy = vi.fn();
+    fixture.componentInstance.buy.subscribe(buySpy);
+    const rowCard = fixture.nativeElement.querySelector('app-product-row-card') as HTMLElement;
+
+    (rowCard.querySelector('.btn-primary') as HTMLButtonElement).click();
+
+    expect(buySpy).toHaveBeenCalledWith({
+      product: items[0],
+      quantity: 1,
+      variant: null,
+      directPurchase: true,
+    });
+  });
+
+  it('emits a direct-purchase event with the column quantity', async () => {
+    const fixture = await render('column_with_cart');
+    const buySpy = vi.fn();
+    fixture.componentInstance.buy.subscribe(buySpy);
+    const card = fixture.nativeElement.querySelector(
+      'app-product-vertical-with-cart-card',
+    ) as HTMLElement;
+
+    (card.querySelector('.btn-primary') as HTMLButtonElement).click();
+
+    expect(buySpy).toHaveBeenCalledWith({
+      product: items[0],
+      quantity: 1,
+      variant: null,
+      directPurchase: true,
+    });
+  });
+
   it('renders pagination and emits the requested page', async () => {
     const fixture = await render('row');
     const pageChangeSpy = vi.fn();

src/app/shared/components/product-row-card/product-row-card.component.html

@@ -1,4 +1,6 @@
-<div class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3">
+<div
+  class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3"
+>
   <!-- Left Side: Title and Description -->
   <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
     <h3 class="product-row-card__title text-uppercase mb-1 m-0">
@@ -19,9 +21,7 @@
         {{ formattedPrice() }}
       </span>
       <div class="product-row-card__btn-wrapper">
-        <app-button variant="primary" (click)="onBuy()">
-          Comprar
-        </app-button>
+        <app-button variant="primary" (click)="onBuy()"> Comprar </app-button>
       </div>
     </div>
 
@@ -35,12 +35,10 @@
         </select>
       }
 
-      <app-quantity-selector [(quantity)]="quantity" ></app-quantity-selector>
+      <app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
 
       <div class="product-row-card__btn-wrapper">
-        <app-button variant="secondary" (click)="onAddToCart()">
-          Agregar al carrito
-        </app-button>
+        <app-button variant="secondary" (click)="onAddToCart()"> Agregar al carrito </app-button>
       </div>
     </div>
   </div>

src/app/shared/components/product-row-card/product-row-card.component.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, computed, effect, input, output, model } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  output,
+  model,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -53,7 +61,7 @@ export class ProductRowCardComponent {
   protected onAddToCart(): void {
     this.addToCart.emit({
       quantity: this.quantity(),
-      variant: this.selectedVariant()
+      variant: this.selectedVariant(),
     });
   }
 

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts

@@ -83,7 +83,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
     ) as HTMLButtonElement;
     button.click();
 
-    expect(buySpy).toHaveBeenCalledOnce();
+    expect(buySpy).toHaveBeenCalledWith({ quantity: 1 });
   });
 
   it('emits addToCart with the current quantity', async () => {