feat: add product detail page component and corresponding unit tests

This commit is contained in:
2026-07-01 10:22:46 -03:00
parent 526e8fa76e
commit 41b51f06e7
3 changed files with 23 additions and 19 deletions

View File

@@ -16,7 +16,6 @@ import { ProductDetailPageComponent } from './product-detail-page.component';
describe('ProductDetailPageComponent', () => { describe('ProductDetailPageComponent', () => {
const mockProduct: ProductDetail = { const mockProduct: ProductDetail = {
id: 1, id: 1,
tenant_codigo: 'test',
category_id: 10, category_id: 10,
brand_id: null, brand_id: null,
slug: 'auriculares-bluetooth', slug: 'auriculares-bluetooth',
@@ -27,7 +26,8 @@ describe('ProductDetailPageComponent', () => {
brand: 'Sony', brand: 'Sony',
images: ['https://example.com/image.png'], images: ['https://example.com/image.png'],
attributes: [], attributes: [],
default_variant: null variants_map: [],
variant: null
}; };
let paramMapSubject: BehaviorSubject<any>; let paramMapSubject: BehaviorSubject<any>;
@@ -132,10 +132,11 @@ describe('ProductDetailPageComponent', () => {
const detailProduct: ProductDetail = { const detailProduct: ProductDetail = {
...mockProduct, ...mockProduct,
images: ['https://example.com/product.png'], images: ['https://example.com/product.png'],
default_variant: { variant: {
variant_id: 123, id: 123,
stock: 10,
images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'], images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
attributes: {} definitions: {}
} }
}; };
catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
@@ -152,7 +153,7 @@ describe('ProductDetailPageComponent', () => {
const detailProduct: ProductDetail = { const detailProduct: ProductDetail = {
...mockProduct, ...mockProduct,
images: ['https://example.com/product.png'], images: ['https://example.com/product.png'],
default_variant: null variant: null
}; };
catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
@@ -168,7 +169,7 @@ describe('ProductDetailPageComponent', () => {
const detailProduct: ProductDetail = { const detailProduct: ProductDetail = {
...mockProduct, ...mockProduct,
images: [], images: [],
default_variant: null variant: null
}; };
catalogServiceStub.getProducto.mockReturnValue(of(detailProduct)); catalogServiceStub.getProducto.mockReturnValue(of(detailProduct));
@@ -233,10 +234,11 @@ describe('ProductDetailPageComponent', () => {
] ]
} }
], ],
default_variant: { variant: {
variant_id: 123, id: 123,
stock: 10,
images: ['https://example.com/variant1.png'], images: ['https://example.com/variant1.png'],
attributes: { definitions: {
color: 'beige', color: 'beige',
material: 'Cuero' material: 'Cuero'
} }

View File

@@ -8,9 +8,10 @@ import {
effect, effect,
inject, inject,
signal, signal,
viewChild viewChild,
PLATFORM_ID
} from '@angular/core'; } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule, isPlatformBrowser } from '@angular/common';
import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { combineLatest, Subscription } from 'rxjs'; import { combineLatest, Subscription } from 'rxjs';
@@ -38,6 +39,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
private readonly catalogService = inject(CatalogService); private readonly catalogService = inject(CatalogService);
private readonly carouselHost = viewChild<ElementRef<HTMLElement>>('carouselHost'); private readonly carouselHost = viewChild<ElementRef<HTMLElement>>('carouselHost');
private readonly descriptionBody = viewChild<ElementRef<HTMLElement>>('descriptionBody'); private readonly descriptionBody = viewChild<ElementRef<HTMLElement>>('descriptionBody');
private readonly platformId = inject(PLATFORM_ID);
private readonly isBrowser = isPlatformBrowser(this.platformId);
private routeSub: Subscription | null = null; private routeSub: Subscription | null = null;
private productSub: Subscription | null = null; private productSub: Subscription | null = null;
@@ -82,10 +85,12 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
this.product(); this.product();
this.descriptionExpanded(); this.descriptionExpanded();
queueMicrotask(() => { if (this.isBrowser) {
this.bindCarouselResizeObserver(); queueMicrotask(() => {
this.refreshMeasurements(); this.bindCarouselResizeObserver();
}); this.refreshMeasurements();
});
}
}); });
} }

View File

@@ -37,7 +37,6 @@ describe('StoreHomePageComponent', () => {
const pageOneProducts: Product[] = [ const pageOneProducts: Product[] = [
{ {
id: 1, id: 1,
tenant_codigo: 'test',
category_id: 10, category_id: 10,
brand_id: null, brand_id: null,
slug: 'auriculares-bluetooth', slug: 'auriculares-bluetooth',
@@ -50,7 +49,6 @@ describe('StoreHomePageComponent', () => {
}, },
{ {
id: 2, id: 2,
tenant_codigo: 'test',
category_id: 11, category_id: 11,
brand_id: null, brand_id: null,
slug: 'teclado-mecanico', slug: 'teclado-mecanico',
@@ -106,7 +104,6 @@ describe('StoreHomePageComponent', () => {
[ [
{ {
id: 3, id: 3,
tenant_codigo: 'test',
category_id: 12, category_id: 12,
brand_id: null, brand_id: null,
slug: 'mouse-gamer', slug: 'mouse-gamer',