feat: implement variant selection in cart and product components for enhanced user experience

src/app/shared/components/cart/cart.component.spec.ts

@@ -407,4 +407,57 @@ describe('CartComponent', () => {
       fixture.debugElement.query(By.css('app-cart-item')).componentInstance.quantityDisabled(),
     ).toBe(false);
   });
+
+  it('persists a variant selected from a cart row', async () => {
+    const updateItemVariant = vi.fn().mockReturnValue(
+      of({
+        message: 'Variante actualizada.',
+        data: {},
+      }),
+    );
+
+    await TestBed.configureTestingModule({
+      imports: [CartComponent],
+      providers: [
+        {
+          provide: CartService,
+          useValue: {
+            cart: signal(null).asReadonly(),
+            updateItemQuantity: vi.fn(),
+            updateItemVariant,
+            removeItem: vi.fn(),
+          },
+        },
+        { provide: ModalService, useValue: {} },
+        {
+          provide: ToastService,
+          useValue: { success: vi.fn(), info: vi.fn(), danger: vi.fn() },
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CartComponent);
+    fixture.componentRef.setInput('items', [
+      {
+        cartItemId: 10,
+        imageUrl: null,
+        product: 'Comida',
+        originalPrice: null,
+        discountedPrice: 1000,
+        discountPercentage: null,
+        attributes: [{ label: 'Servicio', value: 'Almuerzo' }],
+        quantity: 2,
+        variantId: 20,
+        variants: [
+          { value: 20, values: { servicio: 'Almuerzo' } },
+          { value: 21, values: { servicio: 'Cena' } },
+        ],
+      },
+    ]);
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css('app-cart-item')).triggerEventHandler('variantChange', 21);
+
+    expect(updateItemVariant).toHaveBeenCalledWith(10, 2, 21);
+  });
 });