tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(carousel): enhance image loading strategy and improve product display in carousel

Browse Source
This commit is contained in:
ncoronel
2026-07-23 14:44:52 -03:00
parent b04c33bbff
commit 67702ffdd7
8 changed files with 127 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/shared/components/main-carousel/main-carousel.component.spec.ts
View File

@@ -41,6 +41,29 @@ describe('MainCarouselComponent', () => {
expect(images[0].classList).toContain('main-carousel__image--active');
});
it('carga las imágenes secuencialmente y prioriza la imagen visible', () => {
const images = fixture.nativeElement.querySelectorAll(
'.main-carousel__image',
) as NodeListOf<HTMLImageElement>;
expect(images[0].getAttribute('src')).toBe('/images/one.webp');
expect(images[0].getAttribute('fetchpriority')).toBe('high');
expect(images[1].getAttribute('src')).toBeNull();
expect(images[2].getAttribute('src')).toBeNull();
images[0].dispatchEvent(new Event('load'));
fixture.detectChanges();
expect(images[1].getAttribute('src')).toBe('/images/two.webp');
expect(images[1].getAttribute('fetchpriority')).toBe('low');
expect(images[2].getAttribute('src')).toBeNull();
images[1].dispatchEvent(new Event('load'));
fixture.detectChanges();
expect(images[2].getAttribute('src')).toBe('/images/three.webp');
});
it('avanza automáticamente entre las imágenes', () => {
fixture.destroy();
vi.useFakeTimers();
@@ -48,10 +71,18 @@ describe('MainCarouselComponent', () => {
try {
fixture = TestBed.createComponent(TestHostComponent);
fixture.detectChanges();
const images = fixture.nativeElement.querySelectorAll(
'.main-carousel__image',
) as NodeListOf<HTMLImageElement>;
images[0].dispatchEvent(new Event('load'));
fixture.detectChanges();
images[1].dispatchEvent(new Event('load'));
fixture.detectChanges();
vi.advanceTimersByTime(1000);
fixture.detectChanges();
const images = fixture.nativeElement.querySelectorAll('.main-carousel__image');
expect(images[1].classList).toContain('main-carousel__image--active');
} finally {
fixture.destroy();