From 993aa5823a70f17b7c62693b724f208239f2c257 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 8 Jul 2026 16:12:35 -0300 Subject: [PATCH] feat(product-detail): implement resolver for product details and update component logic for improved error handling feat(product-carousel): enhance image loading with optimized attributes and improve layout consistency style: refactor HTML structure for better readability and maintainability test(product-detail): add unit tests for product detail resolver and component behavior --- src/app/app.config.ts | 18 +- .../product-carousel.component.html | 79 +++++--- .../product-carousel.component.ts | 6 +- .../product-detail-page.component.spec.ts | 178 ++++++++++-------- .../product-detail-page.component.ts | 105 +++++------ .../product-detail-page.resolver.spec.ts | 91 +++++++++ .../product-detail-page.resolver.ts | 53 ++++++ src/app/features/store/store.routes.ts | 64 ++++--- 8 files changed, 391 insertions(+), 203 deletions(-) create mode 100644 src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts create mode 100644 src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 9b6bf20..a00ccb3 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,5 +1,9 @@ import { HttpRequest, provideHttpClient, withFetch, withInterceptors } from '@angular/common/http'; -import { ApplicationConfig, provideAppInitializer, provideBrowserGlobalErrorListeners } from '@angular/core'; +import { + ApplicationConfig, + provideAppInitializer, + provideBrowserGlobalErrorListeners, +} from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser'; @@ -8,10 +12,10 @@ import { authBootstrap } from './core/services/auth/auth-bootstrap'; import { authInterceptor } from './core/services/auth/auth.interceptor'; import { tenantBootstrap } from './core/services/tenant-bootstrap'; -function isStoreHomeProductsRequest(request: HttpRequest): boolean { +function isStoreCatalogRequest(request: HttpRequest): boolean { return ( request.method === 'GET' && - /\/api\/tenants\/[^/]+\/productos(?:\?|$)/.test(request.urlWithParams) + /\/api\/tenants\/[^/]+\/productos(?:\/\d+)?(?:\?|$)/.test(request.urlWithParams) ); } @@ -22,11 +26,11 @@ export const appConfig: ApplicationConfig = { provideClientHydration( withHttpTransferCacheOptions({ includeRequestsWithAuthHeaders: true, - filter: isStoreHomeProductsRequest - }) + filter: isStoreCatalogRequest, + }), ), provideHttpClient(withFetch(), withInterceptors([authInterceptor])), provideAppInitializer(authBootstrap), - provideAppInitializer(tenantBootstrap) - ] + provideAppInitializer(tenantBootstrap), + ], }; diff --git a/src/app/features/store/components/product-carousel/product-carousel.component.html b/src/app/features/store/components/product-carousel/product-carousel.component.html index defccde..4633bba 100644 --- a/src/app/features/store/components/product-carousel/product-carousel.component.html +++ b/src/app/features/store/components/product-carousel/product-carousel.component.html @@ -1,51 +1,70 @@
-
+
@if (images().length > 0) { - Product active image + Product active image } @else { - -
- -
+ +
+ +
} @if (discount() && discount()! > 0) { - - -{{ discount() }}% - + + -{{ discount() }}% + } @if (images().length > 1) { - + - + }
@if (images().length > 1) { -
- @for (image of images(); track image; let idx = $index) { - - } -
+
+ @for (image of images(); track image; let idx = $index) { + + } +
}
diff --git a/src/app/features/store/components/product-carousel/product-carousel.component.ts b/src/app/features/store/components/product-carousel/product-carousel.component.ts index 4d54bc2..d8787cf 100644 --- a/src/app/features/store/components/product-carousel/product-carousel.component.ts +++ b/src/app/features/store/components/product-carousel/product-carousel.component.ts @@ -1,13 +1,13 @@ import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { CommonModule, NgOptimizedImage } from '@angular/common'; @Component({ selector: 'app-product-carousel', standalone: true, - imports: [CommonModule], + imports: [CommonModule, NgOptimizedImage], templateUrl: './product-carousel.component.html', styleUrl: './product-carousel.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProductCarouselComponent { readonly images = input([]); diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts index 389cc7a..39392b9 100644 --- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.spec.ts @@ -1,12 +1,8 @@ import { TestBed, getTestBed } from '@angular/core/testing'; -import { - BrowserTestingModule, - platformBrowserTesting -} from '@angular/platform-browser/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; import { ActivatedRoute, Router } from '@angular/router'; import { By } from '@angular/platform-browser'; import { BehaviorSubject, of, throwError } from 'rxjs'; -import { convertToParamMap } from '@angular/router'; import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'; import { ProductDetail } from '../../../../core/services/catalog/catalog.interface'; @@ -14,6 +10,10 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic import { CartService } from '../../../../core/services/cart/cart.service'; import { ToastService } from '../../../../core/services/toast.service'; import { ProductDetailPageComponent } from './product-detail-page.component'; +import { + PRODUCT_DETAIL_ERROR_MESSAGE, + ProductDetailResolvedData, +} from './product-detail-page.resolver'; describe('ProductDetailPageComponent', () => { const mockProduct: ProductDetail = { @@ -29,10 +29,10 @@ describe('ProductDetailPageComponent', () => { images: ['https://example.com/image.png'], attributes: [], variants_map: [], - variant: null + variant: null, }; - let paramMapSubject: BehaviorSubject; + let routeDataSubject: BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>; let catalogServiceStub: any; let routerStub: any; let cartServiceStub: any; @@ -40,10 +40,7 @@ describe('ProductDetailPageComponent', () => { beforeAll(() => { try { - getTestBed().initTestEnvironment( - BrowserTestingModule, - platformBrowserTesting() - ); + getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); } catch { // Test environment may already be initialized by another setup entrypoint. } @@ -51,20 +48,25 @@ describe('ProductDetailPageComponent', () => { beforeEach(() => { vi.restoreAllMocks(); - paramMapSubject = new BehaviorSubject(convertToParamMap({ id: '1' })); + routeDataSubject = new BehaviorSubject<{ productDetailData: ProductDetailResolvedData }>({ + productDetailData: { + product: mockProduct, + error: null, + }, + }); catalogServiceStub = { - getProducto: vi.fn().mockReturnValue(of(mockProduct)) + getProducto: vi.fn(), }; routerStub = { - navigate: vi.fn() + navigate: vi.fn(), }; cartServiceStub = { - addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' })) + addItem: vi.fn().mockReturnValue(of({ message: 'Producto agregado al carrito' })), }; toastServiceStub = { success: vi.fn(), danger: vi.fn(), - info: vi.fn() + info: vi.fn(), }; }); @@ -75,47 +77,69 @@ describe('ProductDetailPageComponent', () => { { provide: ActivatedRoute, useValue: { - paramMap: paramMapSubject.asObservable() - } + data: routeDataSubject.asObservable(), + }, }, { provide: CatalogService, - useValue: catalogServiceStub + useValue: catalogServiceStub, }, { provide: Router, - useValue: routerStub + useValue: routerStub, }, { provide: CartService, - useValue: cartServiceStub + useValue: cartServiceStub, }, { provide: ToastService, - useValue: toastServiceStub - } - ] + useValue: toastServiceStub, + }, + ], }).compileComponents(); } - it('loads the product on init and embeds the carousel', async () => { + function resolveProduct(product: ProductDetail): void { + routeDataSubject.next({ + productDetailData: { + product, + error: null, + }, + }); + } + + function resolveProductError(error: string): void { + routeDataSubject.next({ + productDetailData: { + product: null, + error, + }, + }); + } + + it('renders the resolved product and embeds the carousel', async () => { await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); fixture.detectChanges(); const element = fixture.nativeElement as HTMLElement; - expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1); + expect(catalogServiceStub.getProducto).not.toHaveBeenCalled(); expect(element.querySelector('app-product-carousel')).not.toBeNull(); - expect(element.querySelector('.product-detail__title')?.textContent).toContain('Auriculares Bluetooth'); - expect(element.querySelector('.product-detail__price-current')?.textContent).toContain('$24.999'); + expect(element.querySelector('.product-detail__title')?.textContent).toContain( + 'Auriculares Bluetooth', + ); + expect(element.querySelector('.product-detail__price-current')?.textContent).toContain( + '$24.999', + ); expect(element.querySelector('.product-detail__price-previous')).toBeNull(); expect(element.querySelector('.product-carousel__discount-badge')).toBeNull(); }); - it('shows error message if load fails', async () => { - catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('load failed'))); + it('shows error message if the resolver cannot load the product', async () => { + resolveProductError(PRODUCT_DETAIL_ERROR_MESSAGE); await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); fixture.detectChanges(); @@ -125,7 +149,6 @@ describe('ProductDetailPageComponent', () => { expect(element.textContent).toContain('No pudimos cargar los detalles del producto.'); }); - it('should use default variant images if present', async () => { const detailProduct: ProductDetail = { ...mockProduct, @@ -134,26 +157,29 @@ describe('ProductDetailPageComponent', () => { id: 123, cantidad_maxima: 10, images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'], - definitions: {} - } + definitions: {}, + }, }; - catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); + resolveProduct(detailProduct); await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); fixture.detectChanges(); const carousel = fixture.debugElement.query(By.css('app-product-carousel')).componentInstance; - expect(carousel.images()).toEqual(['https://example.com/variant1.png', 'https://example.com/variant2.png']); + expect(carousel.images()).toEqual([ + 'https://example.com/variant1.png', + 'https://example.com/variant2.png', + ]); }); it('should fallback to product images if default variant images are not present', async () => { const detailProduct: ProductDetail = { ...mockProduct, images: ['https://example.com/product.png'], - variant: null + variant: null, }; - catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); + resolveProduct(detailProduct); await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); @@ -167,9 +193,9 @@ describe('ProductDetailPageComponent', () => { const detailProduct: ProductDetail = { ...mockProduct, images: [], - variant: null + variant: null, }; - catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); + resolveProduct(detailProduct); await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); @@ -196,16 +222,16 @@ describe('ProductDetailPageComponent', () => { value: 'beige', label: 'Beige', sort_order: 1, - metadata: { hex: '#D8D1C7' } + metadata: { hex: '#D8D1C7' }, }, { id: 11, value: 'brown', label: 'Marrón', sort_order: 2, - metadata: { palette: { primary: '#7E6460' } } - } - ] + metadata: { palette: { primary: '#7E6460' } }, + }, + ], }, { id: 2, @@ -220,17 +246,17 @@ describe('ProductDetailPageComponent', () => { value: 'mesh', label: 'Mesh', sort_order: 1, - metadata: null + metadata: null, }, { id: 21, value: 'cuero', label: 'Cuero', sort_order: 2, - metadata: null - } - ] - } + metadata: null, + }, + ], + }, ], variant: { id: 123, @@ -238,11 +264,11 @@ describe('ProductDetailPageComponent', () => { images: ['https://example.com/variant1.png'], definitions: { color: 'beige', - material: 'Cuero' - } - } + material: 'Cuero', + }, + }, }; - catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); + resolveProduct(detailProduct); await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); @@ -252,14 +278,16 @@ describe('ProductDetailPageComponent', () => { const swatches = element.querySelectorAll('.attribute-selector__swatch'); const textOptions = element.querySelectorAll('.attribute-selector__text-option'); const labels = Array.from(element.querySelectorAll('.attribute-selector__label')).map((label) => - label.textContent?.trim() + label.textContent?.trim(), ); expect(labels).toEqual(['Color:', 'Material:']); expect(swatches).toHaveLength(2); expect(textOptions).toHaveLength(2); expect(swatches[0].classList.contains('attribute-selector__swatch--selected')).toBe(true); - expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe(true); + expect(textOptions[1].classList.contains('attribute-selector__text-option--selected')).toBe( + true, + ); expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe(''); }); @@ -282,16 +310,16 @@ describe('ProductDetailPageComponent', () => { fixture.componentInstance['selectedVariant'].set({ variant_id: 1, cantidad_maxima: 10, - attributes: {} + attributes: {}, }); fixture.detectChanges(); const element = fixture.nativeElement as HTMLElement; const decreaseButton = element.querySelector( - '[aria-label="Disminuir cantidad"]' + '[aria-label="Disminuir cantidad"]', ) as HTMLButtonElement; const increaseButton = element.querySelector( - '[aria-label="Aumentar cantidad"]' + '[aria-label="Aumentar cantidad"]', ) as HTMLButtonElement; decreaseButton.click(); @@ -316,7 +344,7 @@ describe('ProductDetailPageComponent', () => { const element = fixture.nativeElement as HTMLElement; const toggleButton = element.querySelector( - '.product-detail__description-toggle' + '.product-detail__description-toggle', ) as HTMLButtonElement; expect(toggleButton.textContent?.trim()).toBe('Mostrar más'); @@ -327,7 +355,7 @@ describe('ProductDetailPageComponent', () => { expect( element .querySelector('.product-detail__description-body') - ?.classList.contains('product-detail__description-body--expanded') + ?.classList.contains('product-detail__description-body--expanded'), ).toBe(true); expect(toggleButton.textContent?.trim()).toBe('Mostrar menos'); }); @@ -338,12 +366,12 @@ describe('ProductDetailPageComponent', () => { fixture.detectChanges(); const buttons = Array.from( - fixture.nativeElement.querySelectorAll('app-button button') + fixture.nativeElement.querySelectorAll('app-button button'), ) as HTMLButtonElement[]; expect(buttons.map((button) => button.textContent?.trim())).toEqual([ 'Agregar al carrito', - 'Comprar' + 'Comprar', ]); buttons[0].click(); @@ -359,17 +387,17 @@ describe('ProductDetailPageComponent', () => { id: 123, cantidad_maxima: 5, images: [], - definitions: {} + definitions: {}, }, variants_map: [ { variant_id: 123, cantidad_maxima: 5, - attributes: {} - } - ] + attributes: {}, + }, + ], }; - catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); + resolveProduct(detailProduct); await configureTestingModule(); const fixture = TestBed.createComponent(ProductDetailPageComponent); @@ -382,7 +410,7 @@ describe('ProductDetailPageComponent', () => { const element = fixture.nativeElement as HTMLElement; const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find( - (btn) => btn.textContent?.trim() === 'Agregar al carrito' + (btn) => btn.textContent?.trim() === 'Agregar al carrito', ) as HTMLButtonElement; expect(addToCartButton).toBeDefined(); @@ -400,17 +428,17 @@ describe('ProductDetailPageComponent', () => { id: 123, cantidad_maxima: 5, images: [], - definitions: {} + definitions: {}, }, variants_map: [ { variant_id: 123, cantidad_maxima: 5, - attributes: {} - } - ] + attributes: {}, + }, + ], }; - catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); + resolveProduct(detailProduct); cartServiceStub.addItem.mockReturnValue(throwError(() => new Error('Failed to add'))); await configureTestingModule(); @@ -422,13 +450,15 @@ describe('ProductDetailPageComponent', () => { const element = fixture.nativeElement as HTMLElement; const addToCartButton = Array.from(element.querySelectorAll('app-button button')).find( - (btn) => btn.textContent?.trim() === 'Agregar al carrito' + (btn) => btn.textContent?.trim() === 'Agregar al carrito', ) as HTMLButtonElement; addToCartButton.click(); fixture.detectChanges(); expect(cartServiceStub.addItem).toHaveBeenCalled(); - expect(toastServiceStub.danger).toHaveBeenCalledWith('No se pudo agregar el producto al carrito.'); + expect(toastServiceStub.danger).toHaveBeenCalledWith( + 'No se pudo agregar el producto al carrito.', + ); }); }); diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts index 9f3b09e..51b4ad1 100644 --- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.ts @@ -9,7 +9,7 @@ import { inject, signal, viewChild, - PLATFORM_ID + PLATFORM_ID, } from '@angular/core'; import { CommonModule, isPlatformBrowser } from '@angular/common'; import { HttpErrorResponse } from '@angular/common/http'; @@ -20,16 +20,14 @@ import { CatalogService } from '../../../../core/services/catalog/catalog.servic import { ToastService } from '../../../../core/services/toast.service'; import { CartService } from '../../../../core/services/cart/cart.service'; import { - ProductAttribute, - ProductAttributeOption, ProductDetail, - ProductVariant, - ProductVariantMap + ProductVariantMap, } from '../../../../core/services/catalog/catalog.interface'; import { ProductCarouselComponent } from '../../components/product-carousel/product-carousel.component'; import { ButtonComponent } from '../../../../shared/components/button/button.component'; import { ProductAttributeSelectorComponent } from '../../components/product-attribute-selector/product-attribute-selector.component'; import { QuantitySelectorComponent } from '../../../../shared/components/quantity-selector/quantity-selector.component'; +import { ProductDetailResolvedData } from './product-detail-page.resolver'; @Component({ selector: 'app-product-detail-page', @@ -40,11 +38,11 @@ import { QuantitySelectorComponent } from '../../../../shared/components/quantit ProductCarouselComponent, ButtonComponent, ProductAttributeSelectorComponent, - QuantitySelectorComponent + QuantitySelectorComponent, ], templateUrl: './product-detail-page.component.html', styleUrl: './product-detail-page.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProductDetailPageComponent implements OnInit, OnDestroy { private readonly route = inject(ActivatedRoute); @@ -86,14 +84,14 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { protected readonly descriptionMaxHeight = signal(0); protected readonly descriptionHasOverflow = signal(false); protected readonly renderableAttributes = computed(() => - (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0) + (this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0), ); protected readonly hasRenderableAttributes = computed( - () => this.renderableAttributes().length > 0 + () => this.renderableAttributes().length > 0, ); protected readonly oldPrice = computed(() => null); protected readonly showDescriptionToggle = computed( - () => this.descriptionExpanded() || this.descriptionHasOverflow() + () => this.descriptionExpanded() || this.descriptionHasOverflow(), ); constructor() { @@ -113,14 +111,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.routeSub = this.route.paramMap.subscribe((params) => { - const id = this.parseIntegerParam(params.get('id')); - if (id === null) { - this.error.set('ID de producto inválido'); - return; - } + this.routeSub = this.route.data.subscribe((data) => { + const resolvedData = data['productDetailData'] as ProductDetailResolvedData | undefined; - this.loadProduct(id); + if (resolvedData) { + this.applyResolvedData(resolvedData); + } }); } @@ -131,38 +127,13 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { this.clearMeasurementTimer(); } - private loadProduct(id: number): void { - this.loading.set(true); - this.error.set(null); - this.product.set(null); - - this.productSub?.unsubscribe(); - this.productSub = this.catalogService.getProducto(id).subscribe({ - next: (prod) => { - this.product.set(prod); - const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null; - this.selectedVariant.set(matchingVariant); - this.quantity.set(1); - this.descriptionExpanded.set(false); - this.descriptionHasOverflow.set(false); - this.loading.set(false); - }, - error: () => { - this.error.set('No pudimos cargar los detalles del producto.'); - this.loading.set(false); - } - }); - } - private loadProductVariant(productId: number, variantId: number): void { this.variantLoading.set(true); this.productSub?.unsubscribe(); this.productSub = this.catalogService.getProducto(productId, variantId).subscribe({ next: (prod) => { - this.product.set(prod); - const matchingVariant = prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null; - this.selectedVariant.set(matchingVariant); + this.applyProduct(prod, false); this.variantLoading.set(false); }, error: (err: HttpErrorResponse) => { @@ -180,15 +151,44 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { }); return { ...currentProduct, - variants_map: updatedVariantsMap + variants_map: updatedVariantsMap, }; }); this.attributeSelector()?.reset(); - } + }, }); } + private applyResolvedData(resolvedData: ProductDetailResolvedData): void { + this.productSub?.unsubscribe(); + this.loading.set(false); + this.variantLoading.set(false); + + if (resolvedData.error) { + this.product.set(null); + this.error.set(resolvedData.error); + return; + } + + if (resolvedData.product) { + this.applyProduct(resolvedData.product, true); + } + } + + private applyProduct(prod: ProductDetail, resetQuantity: boolean): void { + this.product.set(prod); + const matchingVariant = + prod.variants_map.find((v) => v.variant_id === prod.variant?.id) || null; + this.selectedVariant.set(matchingVariant); + if (resetQuantity) { + this.quantity.set(1); + } + this.descriptionExpanded.set(false); + this.descriptionHasOverflow.set(false); + this.error.set(null); + } + protected goBack(): void { this.router.navigate(['/']); } @@ -219,8 +219,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { } } - - protected addToCart(): void { const variant = this.selectedVariant(); if (!variant) { @@ -239,7 +237,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.'; this.toastService.danger(errorMessage); this.addingToCart.set(false); - } + }, }); } @@ -247,15 +245,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { this.descriptionExpanded.update((current) => !current); } - private parseIntegerParam(value: string | null): number | null { - if (!value) { - return null; - } - - const parsed = Number(value); - return Number.isInteger(parsed) ? parsed : null; - } - private bindCarouselResizeObserver(): void { const previewElement = this.getCarouselPreviewElement(); @@ -315,7 +304,7 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy { } this.descriptionHasOverflow.set( - descriptionElement.scrollHeight - descriptionElement.clientHeight > 1 + descriptionElement.scrollHeight - descriptionElement.clientHeight > 1, ); } diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts new file mode 100644 index 0000000..1da5ff9 --- /dev/null +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.spec.ts @@ -0,0 +1,91 @@ +import { TestBed } from '@angular/core/testing'; +import { convertToParamMap } from '@angular/router'; +import { firstValueFrom, Observable, of, throwError } from 'rxjs'; +import { beforeEach, describe, expect, it, vi } from 'vitest'; + +import { ProductDetail } from '../../../../core/services/catalog/catalog.interface'; +import { CatalogService } from '../../../../core/services/catalog/catalog.service'; +import { + PRODUCT_DETAIL_ERROR_MESSAGE, + PRODUCT_DETAIL_INVALID_ID_MESSAGE, + ProductDetailResolvedData, + productDetailResolver, +} from './product-detail-page.resolver'; + +describe('productDetailResolver', () => { + const product: ProductDetail = { + id: 1, + category_id: 10, + brand_id: null, + slug: 'auriculares-bluetooth', + nombre: 'Auriculares Bluetooth', + descripcion: 'Auriculares bluetooth de prueba', + precio: '24999', + category: 'Tecnologia', + brand: null, + images: [], + attributes: [], + variants_map: [], + variant: null, + }; + + let catalogServiceStub: { getProducto: ReturnType }; + + beforeEach(() => { + catalogServiceStub = { + getProducto: vi.fn().mockReturnValue(of(product)), + }; + + TestBed.configureTestingModule({ + providers: [ + { + provide: CatalogService, + useValue: catalogServiceStub, + }, + ], + }); + }); + + it('resolves the product detail for the route id', async () => { + const result = TestBed.runInInjectionContext(() => + productDetailResolver(createRouteSnapshot('1'), {} as never), + ); + + await expect(firstValueFrom(result as Observable)).resolves.toEqual({ + product, + error: null, + }); + expect(catalogServiceStub.getProducto).toHaveBeenCalledWith(1); + }); + + it('returns an error state for invalid ids', async () => { + const result = TestBed.runInInjectionContext(() => + productDetailResolver(createRouteSnapshot('abc'), {} as never), + ); + + await expect(firstValueFrom(result as Observable)).resolves.toEqual({ + product: null, + error: PRODUCT_DETAIL_INVALID_ID_MESSAGE, + }); + expect(catalogServiceStub.getProducto).not.toHaveBeenCalled(); + }); + + it('returns an error state when the request fails', async () => { + catalogServiceStub.getProducto.mockReturnValue(throwError(() => new Error('boom'))); + + const result = TestBed.runInInjectionContext(() => + productDetailResolver(createRouteSnapshot('1'), {} as never), + ); + + await expect(firstValueFrom(result as Observable)).resolves.toEqual({ + product: null, + error: PRODUCT_DETAIL_ERROR_MESSAGE, + }); + }); +}); + +function createRouteSnapshot(id: string) { + return { + paramMap: convertToParamMap({ id }), + } as never; +} diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts new file mode 100644 index 0000000..bfb4083 --- /dev/null +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.resolver.ts @@ -0,0 +1,53 @@ +import { inject } from '@angular/core'; +import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router'; +import { catchError, map, of } from 'rxjs'; + +import { ProductDetail } from '../../../../core/services/catalog/catalog.interface'; +import { CatalogService } from '../../../../core/services/catalog/catalog.service'; + +export const PRODUCT_DETAIL_ERROR_MESSAGE = 'No pudimos cargar los detalles del producto.'; +export const PRODUCT_DETAIL_INVALID_ID_MESSAGE = 'ID de producto invalido'; + +export interface ProductDetailResolvedData { + product: ProductDetail | null; + error: string | null; +} + +export const productDetailResolver: ResolveFn = ( + route: ActivatedRouteSnapshot, +) => { + const productId = parseIntegerParam(route.paramMap.get('id')); + + if (productId === null) { + return of({ + product: null, + error: PRODUCT_DETAIL_INVALID_ID_MESSAGE, + }); + } + + return inject(CatalogService) + .getProducto(productId) + .pipe( + map( + (product): ProductDetailResolvedData => ({ + product, + error: null, + }), + ), + catchError(() => + of({ + product: null, + error: PRODUCT_DETAIL_ERROR_MESSAGE, + }), + ), + ); +}; + +function parseIntegerParam(value: string | null): number | null { + if (!value) { + return null; + } + + const parsed = Number(value); + return Number.isInteger(parsed) ? parsed : null; +} diff --git a/src/app/features/store/store.routes.ts b/src/app/features/store/store.routes.ts index 5219a71..fe2e6f5 100644 --- a/src/app/features/store/store.routes.ts +++ b/src/app/features/store/store.routes.ts @@ -4,6 +4,7 @@ import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-la import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component'; import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards'; import { LoginPageComponent } from './pages/login-page/login-page.component'; +import { productDetailResolver } from './pages/product-detail-page/product-detail-page.resolver'; import { RegisterPageComponent } from './pages/register-page/register-page.component'; import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component'; import { storeHomeProductsResolver } from './pages/store-home-page/store-home-page.resolver'; @@ -17,8 +18,8 @@ export const routes: Routes = [ path: '', component: StoreHomePageComponent, resolve: { - productsData: storeHomeProductsResolver - } + productsData: storeHomeProductsResolver, + }, }, { path: 'login', @@ -27,9 +28,9 @@ export const routes: Routes = [ children: [ { path: '', - component: LoginPageComponent - } - ] + component: LoginPageComponent, + }, + ], }, { path: 'register', @@ -38,24 +39,27 @@ export const routes: Routes = [ children: [ { path: '', - component: RegisterPageComponent - } - ] + component: RegisterPageComponent, + }, + ], }, { path: 'producto/:id', + resolve: { + productDetailData: productDetailResolver, + }, loadComponent: () => import('./pages/product-detail-page/product-detail-page.component').then( - (m) => m.ProductDetailPageComponent - ) + (m) => m.ProductDetailPageComponent, + ), }, { path: 'checkout', canActivate: [authGuard], loadComponent: () => import('./pages/checkout-page/checkout-page.component').then( - (m) => m.CheckoutPageComponent - ) + (m) => m.CheckoutPageComponent, + ), }, { path: 'checkout/status', @@ -65,47 +69,45 @@ export const routes: Routes = [ path: ':id', loadComponent: () => import('./pages/purchase-status-page/purchase-status-page.component').then( - (m) => m.PurchaseStatusPageComponent - ) - } - ] + (m) => m.PurchaseStatusPageComponent, + ), + }, + ], }, { path: 'mi-cuenta', canActivate: [authGuard], loadComponent: () => - import('./pages/account-page/account-layout/account-layout').then( - (m) => m.AccountLayout - ), + import('./pages/account-page/account-layout/account-layout').then((m) => m.AccountLayout), children: [ { path: 'datos-personales', loadComponent: () => import('./pages/account-page/pages/profile-page/profile-page').then( - (m) => m.ProfilePage - ) + (m) => m.ProfilePage, + ), }, { path: 'compras', loadComponent: () => import('./pages/account-page/pages/purchases-page/purchases-page').then( - (m) => m.PurchasesPage - ) + (m) => m.PurchasesPage, + ), }, { path: 'compras/:id', loadComponent: () => import('./pages/account-page/pages/purchase-detail-page/purchase-detail-page').then( - (m) => m.PurchaseDetailPage - ) + (m) => m.PurchaseDetailPage, + ), }, { path: '', redirectTo: 'datos-personales', - pathMatch: 'full' - } - ] - } - ] - } + pathMatch: 'full', + }, + ], + }, + ], + }, ];