116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
|
|
import { MainCarouselComponent } from './main-carousel.component';
|
|
|
|
@Component({
|
|
imports: [MainCarouselComponent],
|
|
template: `
|
|
<app-main-carousel
|
|
[images]="images"
|
|
[imageAlts]="['Primera promoción', 'Segunda promoción', 'Tercera promoción']"
|
|
[autoSlideInterval]="1000"
|
|
/>
|
|
`,
|
|
})
|
|
class TestHostComponent {
|
|
readonly images = ['/images/one.webp', '/images/two.webp', '/images/three.webp'];
|
|
}
|
|
|
|
describe('MainCarouselComponent', () => {
|
|
let fixture: ComponentFixture<TestHostComponent>;
|
|
|
|
beforeEach(async () => {
|
|
await TestBed.configureTestingModule({
|
|
imports: [TestHostComponent],
|
|
}).compileComponents();
|
|
|
|
fixture = TestBed.createComponent(TestHostComponent);
|
|
fixture.detectChanges();
|
|
});
|
|
|
|
it('renderiza solamente las imágenes y sus indicadores', () => {
|
|
const element = fixture.nativeElement as HTMLElement;
|
|
const images = element.querySelectorAll('.main-carousel__image');
|
|
const indicators = element.querySelectorAll('.main-carousel__indicator');
|
|
|
|
expect(images).toHaveLength(3);
|
|
expect(indicators).toHaveLength(3);
|
|
expect(images[0].getAttribute('alt')).toBe('Primera promoción');
|
|
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();
|
|
|
|
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();
|
|
|
|
expect(images[1].classList).toContain('main-carousel__image--active');
|
|
} finally {
|
|
fixture.destroy();
|
|
vi.useRealTimers();
|
|
}
|
|
});
|
|
|
|
it('permite seleccionar una imagen desde los indicadores', () => {
|
|
const indicators = fixture.nativeElement.querySelectorAll(
|
|
'.main-carousel__indicator',
|
|
) as NodeListOf<HTMLButtonElement>;
|
|
|
|
indicators[2].click();
|
|
fixture.detectChanges();
|
|
|
|
const images = fixture.nativeElement.querySelectorAll('.main-carousel__image');
|
|
expect(images[2].classList).toContain('main-carousel__image--active');
|
|
expect(indicators[2].getAttribute('aria-current')).toBe('true');
|
|
});
|
|
|
|
it('permite navegar con las flechas del teclado', () => {
|
|
const carousel = fixture.nativeElement.querySelector('.main-carousel') as HTMLElement;
|
|
|
|
carousel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
|
|
fixture.detectChanges();
|
|
|
|
const images = fixture.nativeElement.querySelectorAll('.main-carousel__image');
|
|
expect(images[2].classList).toContain('main-carousel__image--active');
|
|
});
|
|
});
|