feat(carousel): add main carousel component with image support and integrate into store home page

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

@@ -0,0 +1,84 @@
+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('avanza automáticamente entre las imágenes', () => {
+    fixture.destroy();
+    vi.useFakeTimers();
+
+    try {
+      fixture = TestBed.createComponent(TestHostComponent);
+      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();
+      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');
+  });
+});