fix(product-list): prioritize first image in non-carousel layouts and update tests
This commit is contained in:
@@ -51,7 +51,9 @@
|
||||
[title]="item.nombre"
|
||||
[originalPrice]="price(item)"
|
||||
[unavailableMessage]="item.unavailable_message ?? null"
|
||||
[imagePriority]="loadImages() && index < 4"
|
||||
[imagePriority]="
|
||||
loadImages() && prioritizeFirstImage() && groupLayout() !== 'carousel' && index === 0
|
||||
"
|
||||
(buy)="emitProductDetailBuy(item)"
|
||||
/>
|
||||
}
|
||||
|
||||
@@ -143,6 +143,14 @@ describe('ProductListComponent', () => {
|
||||
|
||||
expect(element.querySelector('.product-list--column')).not.toBeNull();
|
||||
expect(element.querySelectorAll('app-product-column-with-image')).toHaveLength(2);
|
||||
expect(element.querySelectorAll('img[fetchpriority="high"]')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('does not prioritize images rendered in a circular carousel', async () => {
|
||||
const fixture = await render('column_with_image', items, 'carousel');
|
||||
const element = fixture.nativeElement as HTMLElement;
|
||||
|
||||
expect(element.querySelectorAll('img[fetchpriority="high"]')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('renders cart products next to each other in the column grid', async () => {
|
||||
|
||||
@@ -68,6 +68,7 @@ export class ProductListComponent {
|
||||
readonly items = input.required<CatalogFeaturedItems>();
|
||||
readonly loading = input(false);
|
||||
readonly loadImages = input(true);
|
||||
readonly prioritizeFirstImage = input(true);
|
||||
readonly unavailableVariantIds = input<ReadonlySet<number>>(new Set<number>());
|
||||
readonly savingProductIds = input<ReadonlySet<number>>(new Set<number>());
|
||||
|
||||
|
||||
Reference in New Issue
Block a user