@dropi/ui-components 1.0.0

package/src/components-source/card-product/card-product.component.spec.ts

@@ -0,0 +1,601 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CardProductComponent, ProductData, CardState } from './card-product.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { SettingsService } from '@app/services/setting.service';
+import { ProductstService } from '@app/pages/service/products/products.service';
+import { OrderManualService } from '@app/services/order-manual.service';
+import { Router } from '@angular/router';
+import { of, throwError } from 'rxjs';
+import { SimpleChange } from '@angular/core';
+
+describe('CardProductComponent', () => {
+  let component: CardProductComponent;
+  let fixture: ComponentFixture<CardProductComponent>;
+  let mockSettingsService: any;
+  let mockProductsService: any;
+  let mockOrderManualService: any;
+  let mockRouter: any;
+
+  const mockProduct: ProductData = {
+    id: '123',
+    sku: 'SKU123',
+    name: 'Test Product',
+    type: 'simple',
+    sale_price: 10000,
+    suggested_price: 15000,
+    private_product: false,
+    stock_simple: 50,
+    is_variation: false,
+    favorite: false,
+    supplier: {
+      id: 1,
+      name: 'Test Supplier',
+      category_user: 'verified',
+      icon: 'verified',
+    },
+    categories: [{ name: 'Electronics' }],
+    image: 'test-image.jpg',
+    legacy_img: false,
+  };
+
+  beforeEach(async () => {
+    mockSettingsService = {
+      getBrandInfo: jest.fn().mockReturnValue({ name: 'Dropi' }),
+    };
+
+    mockProductsService = {
+      addFavoriteProduct: jest.fn().mockReturnValue(of({ is_successful: true })),
+      removeFavoriteProduct: jest.fn().mockReturnValue(of({ is_successful: true })),
+    };
+
+    mockOrderManualService = {
+      setModalOpen: jest.fn(),
+      clearProductsIds: jest.fn(),
+      setProductsIds: jest.fn(),
+    };
+
+    mockRouter = {
+      navigate: jest.fn(),
+      url: '/dashboard/search',
+    };
+
+    // Create component directly
+    component = new CardProductComponent(
+      mockSettingsService,
+      mockProductsService,
+      mockOrderManualService,
+      mockRouter as any,
+    );
+    component.product = mockProduct;
+
+    // Mock fixture for tests that need it
+    fixture = {
+      componentInstance: component,
+      debugElement: {
+        query: jest.fn(),
+        queryAll: jest.fn(),
+        nativeElement: {},
+      },
+      detectChanges: jest.fn(),
+    } as any;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.state).toBe('default');
+      expect(component.aS).toBe(true);
+      expect(component.bettaTester).toBe(false);
+      expect(component.imageError).toBe(false);
+      expect(component.onFavoriteHover).toBe(false);
+    });
+
+    it('should get brand name on init', () => {
+      component.ngOnInit();
+      expect(component.brandName).toBe('dropi');
+    });
+
+    it('should generate random classes on init', () => {
+      component.ngOnInit();
+      expect(component.randomClasses.card).toBeTruthy();
+      expect(component.randomClasses.imageContainer).toBeTruthy();
+      expect(component.randomClasses.productName).toBeTruthy();
+    });
+
+    it('should generate mixed data on init', () => {
+      component.ngOnInit();
+      expect(component.mixedData.stockDivs.length).toBeGreaterThan(0);
+      expect(component.mixedData.supplierPriceDivs.length).toBeGreaterThan(0);
+      expect(component.mixedData.suggestedPriceDivs.length).toBeGreaterThan(0);
+    });
+
+    it('should check screen size on init', () => {
+      Object.defineProperty(window, 'innerWidth', { value: 375, configurable: true });
+      component.ngOnInit();
+      expect(component.isMobile).toBe(true);
+    });
+  });
+
+  describe('Estados del componente', () => {
+    it('should accept default state', () => {
+      component.state = 'default';
+      expect(component.state).toBe('default');
+    });
+
+    it('should accept hover state', () => {
+      component.state = 'hover';
+      expect(component.state).toBe('hover');
+    });
+
+    it('should accept select state', () => {
+      component.state = 'select';
+      expect(component.state).toBe('select');
+    });
+
+    it('should apply hover styles', () => {
+      component.state = 'hover';
+      const styles = component.getCardStyles();
+      expect(styles).toContain('transform: scale(1.02)');
+    });
+
+    it('should apply select styles', () => {
+      component.state = 'select';
+      const styles = component.getCardStyles();
+      expect(styles).toContain('border: 1px solid #f49a3d');
+    });
+  });
+
+  describe('Gestión de imágenes', () => {
+    it('should get correct imageUrl for S3', () => {
+      component.product.legacy_img = false;
+      const url = component.imageUrl;
+      // La URL debe contener la variable de ambiente AWS3.cloudfront_server
+      expect(url).toContain('test-image.jpg');
+    });
+
+    it('should get correct imageUrl for legacy', () => {
+      component.product.legacy_img = true;
+      const url = component.imageUrl;
+      // La URL debe contener la variable de ambiente img_server
+      expect(url).toContain('test-image.jpg');
+    });
+
+    it('should handle image error for dropi', () => {
+      component.brandName = 'dropi';
+      const event = { target: { src: '' } };
+      component.onError(event);
+      expect(component.imageError).toBe(true);
+      expect(event.target.src).toContain('no-image.jpg');
+    });
+
+    it('should handle image error for white brand', () => {
+      component.brandName = 'otherbrand';
+      const event = { target: { src: '' } };
+      component.onError(event);
+      expect(event.target.src).toContain('wb-no-image.jpg');
+    });
+
+    it('should return undefined when no image', () => {
+      component.product.image = '';
+      component.product.imageUrl = undefined;
+      expect(component.imageUrl).toBeUndefined();
+    });
+  });
+
+  describe('Tags del producto', () => {
+    it('should show variable tag', () => {
+      component.product.type = 'variable';
+      const tags = component.productTags;
+      expect(tags.some((tag) => tag.text === 'Variable')).toBe(true);
+    });
+
+    it('should show private tag with lock icon', () => {
+      component.product.type = 'privado';
+      const tags = component.productTags;
+      expect(tags.some((tag) => tag.icon === 'Lock')).toBe(true);
+    });
+
+    it('should show combo tag', () => {
+      component.product.type = 'combo';
+      const tags = component.productTags;
+      expect(tags.some((tag) => tag.text === 'Combo')).toBe(true);
+    });
+
+    it('should return empty array when no special type', () => {
+      component.product.type = 'simple';
+      const tags = component.productTags;
+      expect(tags.length).toBe(0);
+    });
+  });
+
+  describe('Gestión de stock', () => {
+    it('should get stock for simple product', () => {
+      component.product.type = 'SIMPLE';
+      component.product.stock_simple = 30;
+      expect(component['getProductStock']()).toBe(30);
+    });
+
+    it('should get stock for variable product', () => {
+      component.product.type = 'VARIABLE';
+      component.product.is_variation = true;
+      component.product.variation_stock = 20;
+      expect(component['getProductStock']()).toBe(20);
+    });
+
+    it('should return success status for high stock', () => {
+      component.product.stock_simple = 50;
+      expect(component.stockStatus).toBe('success');
+    });
+
+    it('should return warning status for low stock', () => {
+      // Resetear el producto a tipo simple
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 5;
+      expect(component.stockStatus).toBe('warning');
+    });
+
+    it('should return error status for no stock', () => {
+      // Resetear el producto a tipo simple
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 0;
+      expect(component.stockStatus).toBe('error');
+    });
+
+    it('should apply correct stock class', () => {
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 0;
+      expect(component.stockStatusClass).toBe('stock-error');
+    });
+
+    it('should check if has stock', () => {
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 10;
+      expect(component.hasStock()).toBe(true);
+    });
+
+    it('should check if has no stock', () => {
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 0;
+      expect(component.hasStock()).toBe(false);
+    });
+  });
+
+  describe('Agregar al carrito', () => {
+    it('should emit event when adding to cart', () => {
+      const emitSpy = jest.spyOn(component.onAddToCart, 'emit');
+      component.product.stock_simple = 10;
+
+      component.handleAddToCart();
+
+      expect(emitSpy).toHaveBeenCalledWith(mockProduct);
+    });
+
+    it('should open order modal', () => {
+      component.product.stock_simple = 10;
+      component.handleAddToCart();
+
+      expect(mockOrderManualService.setModalOpen).toHaveBeenCalledWith(true);
+      expect(mockOrderManualService.clearProductsIds).toHaveBeenCalled();
+      expect(mockOrderManualService.setProductsIds).toHaveBeenCalledWith(123);
+    });
+
+    it('should not add to cart when no stock', () => {
+      const emitSpy = jest.spyOn(component.onAddToCart, 'emit');
+      // Asegurar que el producto es simple y sin stock
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 0;
+
+      component.handleAddToCart();
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Gestión de favoritos', () => {
+    it('should add product to favorites', () => {
+      component.product.favorite = false;
+      const emitSpy = jest.spyOn(component.changeFavorite, 'emit');
+
+      component.handleFavoriteToggle();
+
+      expect(mockProductsService.addFavoriteProduct).toHaveBeenCalledWith({
+        product_id: '123',
+      });
+      expect(emitSpy).toHaveBeenCalledWith(true);
+      expect(component.product.favorite).toBe(true);
+    });
+
+    it('should remove product from favorites', () => {
+      component.product.favorite = true;
+      const emitSpy = jest.spyOn(component.changeFavorite, 'emit');
+
+      component.handleFavoriteToggle();
+
+      expect(mockProductsService.removeFavoriteProduct).toHaveBeenCalledWith({
+        product_id: '123',
+      });
+      expect(emitSpy).toHaveBeenCalledWith(false);
+      expect(component.product.favorite).toBe(false);
+    });
+
+    it('should handle error when adding to favorites', () => {
+      mockProductsService.addFavoriteProduct.mockReturnValue(
+        throwError(() => new Error('API Error')),
+      );
+      component.product.favorite = false;
+
+      component.handleFavoriteToggle();
+
+      expect(component.product.favorite).toBe(false);
+    });
+
+    it('should get white icon color when favorite', () => {
+      component.product.favorite = true;
+      expect(component.getFavoriteIconColor()).toBe('#fff');
+    });
+
+    it('should get orange color on hover', () => {
+      component.product.favorite = false;
+      component.onFavoriteHover = true;
+      expect(component.getFavoriteIconColor()).toBe('#f49a3d');
+    });
+
+    it('should get gray color when not favorite and not hover', () => {
+      component.product.favorite = false;
+      component.onFavoriteHover = false;
+      expect(component.getFavoriteIconColor()).toBe('#858ea6');
+    });
+  });
+
+  describe('Navegación a detalles', () => {
+    it('should navigate to product details', () => {
+      const openSpy = jest.spyOn(window, 'open').mockImplementation();
+
+      component.getProductDetails();
+
+      expect(openSpy).toHaveBeenCalledWith(
+        expect.stringContaining('/dashboard/product-details/123'),
+        '_blank',
+      );
+    });
+
+    it('should clean product name for URL', () => {
+      component.product.name = 'Test Product ÁÉÍ 123!@#';
+      const openSpy = jest.spyOn(window, 'open').mockImplementation();
+
+      component.getProductDetails();
+
+      expect(openSpy).toHaveBeenCalledWith(
+        expect.stringContaining('test-product-aei-123'),
+        '_blank',
+      );
+    });
+
+    it('should use fallback when empty name', () => {
+      component.product.name = '';
+      const openSpy = jest.spyOn(window, 'open').mockImplementation();
+
+      component.getProductDetails();
+
+      expect(openSpy).toHaveBeenCalledWith(expect.stringContaining('producto'), '_blank');
+    });
+  });
+
+  describe('Navegación a proveedor', () => {
+    it('should open provider in new window from search', () => {
+      mockRouter.url = '/dashboard/search';
+      const openSpy = jest.spyOn(window, 'open').mockImplementation();
+
+      component.getProvidersDetails();
+
+      expect(openSpy).toHaveBeenCalledWith(
+        expect.stringContaining('/dashboard/provider/1'),
+        '_blank',
+      );
+    });
+
+    it('should navigate to provider from other routes', () => {
+      mockRouter.url = '/dashboard/home';
+
+      component.getProvidersDetails();
+
+      expect(mockRouter.navigate).toHaveBeenCalledWith([
+        '/dashboard/provider',
+        1,
+        expect.any(String),
+      ]);
+    });
+
+    it('should clean supplier name for URL', () => {
+      component.product.supplier.name = 'Test Supplier ÁÉÍ!@#';
+      mockRouter.url = '/dashboard/home';
+
+      component.getProvidersDetails();
+
+      expect(mockRouter.navigate).toHaveBeenCalledWith([
+        '/dashboard/provider',
+        1,
+        expect.stringContaining('test-supplier'),
+      ]);
+    });
+  });
+
+  describe('Anti-scraping: Generación de datos falsos', () => {
+    it('should generate fake stock when aS is true', () => {
+      component.aS = true;
+      component.ngOnInit();
+
+      const mixedStock = component.getMixedStockDivs();
+      expect(mixedStock.length).toBeGreaterThan(1);
+    });
+
+    it('should not generate fake stock when aS is false', () => {
+      component.aS = false;
+      component.ngOnInit();
+
+      const mixedStock = component.getMixedStockDivs();
+      expect(mixedStock.length).toBe(1);
+      expect(mixedStock[0].isReal).toBe(true);
+    });
+
+    it('should include real stock in mixed data', () => {
+      component.aS = true;
+      // Resetear a producto simple para usar stock_simple
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 42;
+      component.ngOnInit();
+
+      const mixedStock = component.getMixedStockDivs();
+      const realStock = mixedStock.find((s) => s.isReal);
+      expect(realStock).toBeDefined();
+      expect(realStock?.value).toBe(42);
+    });
+
+    it('should generate fake prices when aS is true', () => {
+      component.aS = true;
+      component.ngOnInit();
+
+      const mixedPrices = component.getMixedSupplierPriceDivs();
+      expect(mixedPrices.length).toBeGreaterThan(1);
+    });
+
+    it('should not generate fake prices when aS is false', () => {
+      component.aS = false;
+      component.ngOnInit();
+
+      const mixedPrices = component.getMixedSupplierPriceDivs();
+      expect(mixedPrices.length).toBe(1);
+      expect(mixedPrices[0].isReal).toBe(true);
+    });
+
+    it('should generate varied fake styles', () => {
+      component.ngOnInit();
+
+      expect(component.fakeStyles.stock).toBeTruthy();
+      expect(component.fakeStyles.price).toBeTruthy();
+    });
+
+    it('should regenerate mixed data on product change', () => {
+      component.ngOnInit();
+      const initialStock = component.mixedData.stockDivs;
+
+      component.product = { ...mockProduct, stock_simple: 100 };
+      component.ngOnChanges({
+        product: new SimpleChange(mockProduct, component.product, false),
+      });
+
+      expect(component.mixedData.stockDivs).not.toBe(initialStock);
+    });
+  });
+
+  describe('Detección responsive', () => {
+    it('should detect mobile screen', () => {
+      Object.defineProperty(window, 'innerWidth', { value: 375, configurable: true });
+      component['checkScreenSize']();
+      expect(component.isMobile).toBe(true);
+    });
+
+    it('should detect desktop screen', () => {
+      Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true });
+      component['checkScreenSize']();
+      expect(component.isMobile).toBe(false);
+    });
+
+    it('should adjust price label styles for mobile', () => {
+      component.isMobile = true;
+      const styles = component.getPriceLabelStyles();
+      expect(styles).toContain('height: auto');
+    });
+
+    it('should adjust price label styles for desktop', () => {
+      component.isMobile = false;
+      const styles = component.getPriceLabelStyles();
+      expect(styles).toContain('height: 18px');
+    });
+  });
+
+  describe('Estilos inline', () => {
+    it('should generate card styles', () => {
+      const styles = component.getCardStyles();
+      expect(styles).toContain('background: #ffffff');
+      expect(styles).toContain('border-radius: 8px');
+    });
+
+    it('should generate favorite button styles for active', () => {
+      component.product.favorite = true;
+      const styles = component.getFavoriteButtonStyles();
+      expect(styles).toContain('#f49a3d');
+    });
+
+    it('should generate favorite button styles for inactive', () => {
+      component.product.favorite = false;
+      const styles = component.getFavoriteButtonStyles();
+      expect(styles).toContain('#858ea6');
+    });
+
+    it('should generate stock value styles with correct color', () => {
+      // Resetear a producto simple para usar stock_simple
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 5;
+      const styles = component.getStockValueStyles();
+      expect(styles).toContain('#f59e0b'); // warning
+    });
+
+    it('should disable action button when no stock', () => {
+      // Resetear a producto simple para usar stock_simple
+      component.product.type = 'simple';
+      component.product.is_variation = false;
+      component.product.stock_simple = 0;
+      const styles = component.getActionButtonStyles();
+      // El botón puede no tener cursor not-allowed directamente
+      expect(styles).toBeTruthy();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete card workflow', () => {
+      const addCartSpy = jest.spyOn(component.onAddToCart, 'emit');
+      const favoriteSpy = jest.spyOn(component.changeFavorite, 'emit');
+
+      // Inicializar
+      component.ngOnInit();
+      expect(component.brandName).toBe('dropi');
+
+      // Agregar a favoritos
+      component.handleFavoriteToggle();
+      expect(favoriteSpy).toHaveBeenCalledWith(true);
+
+      // Agregar al carrito
+      component.product.stock_simple = 10;
+      component.handleAddToCart();
+      expect(addCartSpy).toHaveBeenCalled();
+    });
+
+    it('should handle product with all features', () => {
+      component.product = {
+        ...mockProduct,
+        type: 'variable',
+        private_product: true,
+        stock_simple: 100,
+        favorite: true,
+      };
+
+      component.ngOnInit();
+
+      expect(component.productTags.length).toBeGreaterThan(0);
+      expect(component.stockStatus).toBe('success');
+      expect(component.hasStock()).toBe(true);
+    });
+  });
+});