diff --git a/src/app/shared/components/carousel/carousel.component.spec.ts b/src/app/shared/components/carousel/carousel.component.spec.ts index 6dc454f..b0c926b 100644 --- a/src/app/shared/components/carousel/carousel.component.spec.ts +++ b/src/app/shared/components/carousel/carousel.component.spec.ts @@ -59,6 +59,16 @@ describe('CarouselComponent', () => { expect(articles[1].getAttribute('data-index')).toBe('1'); }); + it('permite inspeccionar las páginas antes de medir el viewport sin generar listas enormes', () => { + const carousel = fixture.componentInstance.carousel(); + fixture.componentInstance.circular.set(true); + carousel['itemsPerPage'].set(Number.MAX_SAFE_INTEGER); + + expect(carousel['circularPages']()).toEqual([]); + expect(carousel['createPage']('current', 0).items.map((entry) => entry.item.id)) + .toEqual([1, 2, 3]); + }); + it('expone una región accesible y controles con etiquetas', () => { const region = fixture.nativeElement.querySelector('[role="region"]'); const buttons = fixture.nativeElement.querySelectorAll('button'); diff --git a/src/app/shared/components/carousel/carousel.component.ts b/src/app/shared/components/carousel/carousel.component.ts index 5ae3006..2769ebe 100644 --- a/src/app/shared/components/carousel/carousel.component.ts +++ b/src/app/shared/components/carousel/carousel.component.ts @@ -70,6 +70,10 @@ export class CarouselComponent implements AfterViewInit { ); protected readonly isCircularLayout = computed(() => this.circular() && this.pageCount() > 1); protected readonly circularPages = computed[]>(() => { + if (!this.isCircularLayout()) { + return []; + } + const pageCount = this.pageCount(); const currentPage = this.normalizePage(this.currentPage(), pageCount); @@ -270,14 +274,20 @@ export class CarouselComponent implements AfterViewInit { } private createPage(slot: CarouselPage['slot'], page: number): CarouselPage { + const sourceItems = this.items(); + // Layout has not necessarily been measured when a computed value is inspected. + const pageSize = Math.min(this.itemsPerPage(), sourceItems.length); + if (pageSize === 0) { + return { slot, items: [] }; + } const pageCount = this.pageCount(); const normalizedPage = this.normalizePage(page, pageCount); - const start = normalizedPage * this.itemsPerPage(); + const start = normalizedPage * pageSize; const items: CarouselPageItem[] = []; - for (let offset = 0; offset < this.itemsPerPage(); offset += 1) { - const index = (start + offset) % this.items().length; - items.push({ item: this.items()[index], index }); + for (let offset = 0; offset < pageSize; offset += 1) { + const index = (start + offset) % sourceItems.length; + items.push({ item: sourceItems[index], index }); } return { slot, items };