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

View File

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

View File

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